Recently upgraded to Fancybox v2 and can't figure out how to keep Fancybox open when someone clicks outside of the DIV.
I tried "Overlay: null" but then the user can click around the site and navigate away..
I know in Fancybox v1 it was HideonOverlay Click... Any suggestions?
Try the following.
helpers : {
overlay : {closeClick: false}
}
Here is a piece of code and is self explanatory, hope you will find it useful:
$('#locator').live('click', function(){
$.fancybox({
type: 'iframe',
hideOnOverlayClick: false,
scrolling: 'no',
autoSize: true,
href: site_url + 'home/locator',
beforeClose: function (){
var latlng = $(".fancybox-iframe").contents().find('input[name=latlng]').val();
$('input[name=location]').val(latlng);
}
});
});
I bumped into this question while searching something and felt I would answer it.
Related
Found several similar questions, but not the answer to this specific one..
Is there a way to add a title to BOTH the top and bottom of a FancyBox2 modal/popup?
I know how to position the title to the top or bottom. But need to put a title on the top and a caption on the bottom.
Thanks to all in advance..
You can modify the default fancybox template to add some extra HTML in. Like so:
Your HTML:
Click
Javascript:
$(".fancybox").fancybox({
type: 'iframe',
beforeLoad: function() {
var caption = this.element.attr('data-caption');
this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'
},
helpers: {
title : {
type : 'inside',
position: 'top'
}
}
});
I've used an iFrame as an example, but this should work for any Fancybox type.
JS Fiddle here:
http://jsfiddle.net/WillDonohoe/thy0om73/
Look under the tpl section of the fancybox docs for more information: http://fancyapps.com/fancybox/#docs
I am on my first big ionic project and am stuck. Would someone have an idea how to dynamically hide and show buttons in an ionic popup? I need the buttons to initially be hidden, but then after something happens the buttons should show up. Any idea how to get that done?
Trying to explain further, what is required here is provide angular directives inside of the $ionicPopup buttons. eg
buttons: [{
text: 'Cancel'
}, {
text: '<b ng-disabled="user.length<1">Delete</b>',
type: 'button-crimson'
}]
But ng-disabled="user.length<1" gets trimmed when the pop-up is rendered.
If you're still looking for an answer to this...
I created a variable for my buttons array
var buttons = [{...}, {...}]
Then would assign that to the object in the popup
$ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
**buttons: buttons,**
And then would alter that array
buttons.splice(0, 1, {/*new button*/})
I haven't tested it but it might also work if you wanted to edit a title or class
buttons[0].type = 'newCssClass';
My work-around has been to put the dynamic buttons in the template of the popup rather than the buttons array. It's not ideal but it will work.
eg:
addPopup = $ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
buttons: [{
text: 'Cancel',
And then in pop-up.html you can do your usual angular ng-if/ng-hide/ng-disabled/etc stuff like normal. The downside is that those buttons wont show up along the bottom where the ones in the array go, but with some styling work you can make it still look nice.
It should be easy using $scope variables and ng-hide/ng-show
function something_happens(){
$scope.it_happened = true;
}
<button ng-show="it_happened">Qlik Me</button>
The button will only display if $scope.it_happened == true
I try to build a map with openlayers3 with a group of markers and popups. The markers and the popups work so far, but when I click on one marker (popup shown) and then -without clicking in the map again- on another one, it shows a popup with the same content as the first one. I have already done research, but can't find something helpful. So here's the part for my popups:
//popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
Hope somebody can help me. Thanks!
I was having the same issue and found my solution here https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers
Try changing your
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
to
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-content', feature.get('information'));
I've made an example for you. Take a look!
You gotta "write" some content on each marker.
http://embed.plnkr.co/hhEAWk/preview
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});
I want to use TinyMCE editor in a overlay dialog.. Is that possible?
I have latest version TinyMCE and Jquery Tools Overlay.
JQuery Tools Overlay: http://flowplayer.org/tools/demos/overlay/index.html
I ran into a few issues with this, apparently tinymce doesn't play nicely with hidden elements, and gets confused when you write over elements it's attached to. Anyway, got it to work by using overlay's hooks, making a synchronous js call (this is the crucial part), and detaching tinymce before closing it. Code:
$(".overlayed").overlay({
onBeforeLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
var url = this.getTrigger().attr("href");
$.ajax({
url: url,
async: false,
dataType: "html",
type: "GET",
success: function(data){
wrap.html(data);
}
})
},
onLoad: function(){
if($('#overlay .mceEditor').length > 0){
tinyMCE.execCommand('mceAddControl', false, $('.mceEditor').attr('id'));
}
},
onBeforeClose: function(){
if($('#overlay .mceEditor').length > 0){
tinyMCE.execCommand('mceFocus', false, $('.mceEditor').attr('id'));
tinyMCE.execCommand('mceRemoveControl', false, $('.mceEditor').attr('id'));
}
this.getOverlay().find(".contentWrap").html("");
}
});
Code could be more elegant but works 100% of the time ;)
Hope this helps someone!