I am using jQueryUI and I have a web page with a few links that when clicked will display a modal window. The issue i am having is that when i click one of the links that has a button then close it and click another link that doesnt have buttons the modal launches but the buttons are still there. Despite the fact that no buttons are being specified. I have tried to use the close property when creating the dialog calling $(this).dialog("close") doesnt solve the issue. Calling $(this).dialog("destroy") solves the issue except that the contents of the modal are then shown on the webpage.
This is the function I call to launch the modal.
General.modal = function(options)
{
if(!options.hasOwnProperty(modal))
{
options.modal = true;
}
$('#modal').dialog(options);
};
This is the call without buttons.
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
});
This is the call to that function with buttons:
myApp.General.modal({
title : "Upload Documentation (" + groupTitle + ")",
height : 500,
close: function(){$(this).dialog("close");},
width : 600,
buttons : {
"Upload" : jQuery.proxy(directoryView.uploadClicked, directoryView, model.get("gid"))
}
});
I presume that the dialog is not being destroyed so the last button definition is staying around. You probably need to ensure the buttons attribute is null on subsequent calls:
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
buttons : null,
});
Related
I'm opening error jQuery dialog and want to set its title's background to red.
All I saw so far is that I will have to create a class for div defining my dialog and set its background in css to red, but, if I do not want to modify existing .css file and create another .css in my project?
Can I do it in jQuery's dialog initialization phase?
For example, I have a button click event:
$("#btnStartSynch").button().unbind("click").bind("click", function () {
var selectedValue = $("#ddlSynchParam").val();
if (selectedValue == 0) {
window.UserSelectMessage.dialog('open');
return false;
}
var userName = $("#ddlSynchParam :selected").text();
myself.StartSynch(userName, selectedValue);
});
If nothing is selected, I open Error pop up:
window.UserSelectMessage = $("#selectMsg").dialog({
modal: true,
resizable: false,
autoOpen: false,
height: 100,
width: 200,
title: 'Error'
});
Can I add extra parameter in that dialog initialization phase to set its background to red?
I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
$("#hidden_content").instagram({
clientId: blockInstaSettings.clientId
, hash: hash
, userId: blockInstaSettings.userId
, next_url: insta_next_url
, show: 10
, image_size: image_size
, onComplete: function (photos, data) {
var album_html = "";
$.each(photos, function( index, val ) {
album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","’") + "' longdesc='" + val.link + "'>";
});
$(".galleria").html(album_html);
$('#block_instagram').on('click', function () {
openPop();
return false;
});
}
});
Notice that I set up the listener in the button that show the fancybox
function openPop(){
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#popup'
});
Galleria.run('.galleria', {
transition: 'fade',
popupLinks: true,
show: no,
extend: function(options) {
Galleria.get(0).$('info-link').click();
}
});
}
Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.
Also for CSS, it need to be :
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
How to fix that?
Reference
My site:
http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
The plugin used:
http://galleria.io/
http://fancyapps.com/fancybox/
As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
// Reload theme
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.
every thing is responsive and works good. Elaborate your problem .
if you want your popup thumbnails appear in middle of your popup use the following code
.galleria-thumbnails {
text-align: center;
width: 100% !important;
}
.galleria-image {
display: inline-block;
float: none !important;
}
I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox
fitToView : true,
autoSize : true,
width : 100%,
height : 'auto',
you can play with fitToView and autoSize till you get the desired effect much like pinterest
you can do this with a simple css trick .
in the responsive media screen you have to set the css as
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
background-size: 100% auto !important;
}
I have fancybox 2.1.5 and have built a page with 4 different links to open a fancybox popup. I have also added a setTimeout for these popups so that after a set amount of time, the popup will automatically go away.
The issue is that when I open a popup, manually close it, and then click on a popup, randomly between 1 to a few seconds, it will close itself (I have it set to 15 second timeout). I don't know if this is caused by having multiple popup links, or what. Below is the code I used:
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow: function(){
this.title = $(this.element).next('.newTitle').html();
},
width : '700',
height : '380',
closeBtn : false,
helpers : {
overlay : {
css : {
'overflow' : 'hidden',
'background' : 'rgba(0,0,0,0.85)'
}
}
}/*,
afterLoad: function(){
setTimeout( function() {$.fancybox.close(); },15000);
}*/
});
});
And the HTML:
<a class="fancybox fancybox.iframe" href="includes/elevator.html"><img src="images/elevator.gif" class="round" width="324" height="183"/></a>
i have a list of iframe pop ups for which i am using the data-fancybox-group="gallery" so that the user can browser left and right through the content. The page this list sits in is also inside an iframe. the reason for this is so that the main header does not reload as it needs to play continuous music via soundcloud. I had to amend $('.fancybox').fancybox(); to make the iframe content automatically resize to fit the content and to appear outside it parent frame. However this amended script prevents the button function from working. this is my code, basically i need to get the iframe buttons function working like a gallery...
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').click(function(e){
e.preventDefault();
parent.$.fancybox({'href' : this.href,
'type':'iframe',
autoSize : false});
//fancybox
return false;
}); //click
/*$('.fancybox').fancybox();*/
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
parent.$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
});
</script>
I didn't see any answer to this question out there, but I'm having this problem:
I made a JQuery menu UI, and it was working just fine.
When you click on the first link inside an list-item, the list-item is supposed to expand to show the rest of the links.
However! When the page loads, it seems the .toggle() which is connected to the first link is auto-collapsing that first link. I can't figure it out.
Again, to reitterate: The first link "a.cat" is being collapsed when the page loads. It didn't used to, and I'm not sure when, or if, I even changed it...).
Edit Here's the jsFiddle.
Anyhow, I hope that's clear enough. I'll check back regularly to answer questions.
And here's the JS, because S.O. requires it:
$("#sidebar ul li a.cat").toggle( function () {
$(this).stop(true).animate({
"color" : "#fff"
});
var growTo = (parseInt($(this).siblings("a.link").length) * nmMenu.linkHeight) + nmMenu.catHeight;
$(this).parent("li").stop(true).animate({
"height" : growTo + "px",
"padding-top" : "5px"
}, function () {
$(this).children("a").stop(true).animate({
"margin-left" : "20px"
});
});
}, function () {
$(this).siblings("a").andSelf().stop(true).animate({
"margin-left" : "0px"
}, function () {
$(this).siblings(" a:first").stop(true).animate({
"margin-bottom" : nmMenu.catMarginBottom + "px",
"color" : nmMenu.linkColor
});
$(this).parent("li").stop(true).animate({
"height" : nmMenu.catHeight + "px"
});
});