jQuery way to initiate object from a plugin already initiated? - javascript

Thank you for taking the time to look at my question! :)
I am trying to use the jQuery plugin RefineSlider!
My problem is that I am not a Javascript expert. What I wanted to accomplish is to add slides dynamically through an ajax call. The ajax call will return an html structure for a slide. But it has never work, because I think it's initiated at the DOM, and you cannot modify the slides on the fly!
Thank you, and have a great week! :)

And if you add your function which implement the slider in this jquery function :
//This function will be called after an ajax
$(document).ajaxComplete(function(){
//The example to implement the slider
$('.rs-slider').refineSlide({
transition : 'fade',
transitionDuration : 7000,
autoPlay : true,
keyNav : false,
delay : 0,
controls : null
});
});
But warn this function will be called for ALL ajax call. So you must add a test which control that you don't add more slider.

Related

How to use jQuery Lazy with AJAX?

I am using jQuery Lazy to load images in a page progressively. When the images are called with AJAX, they do do not load. Please, how to use this Plugin with AJAX?
I tried:
$(function() {
$('.lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
effect: "fadeIn",
effectTime: 2000,
threshold: 0
});
});
However it is not working. Some time back, when I had that challenge with Colorbox, the solution was to call for body click, like:
$("body").on("click", ".photos", function(event){
$(".photos").colorbox({rel:'photos', transition:"fade"});
});
That made the trick to enable colorbox to work with an AJAX call - but with Lazy there is no body click, so even though I did:
$(function() {
$('body .lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
effect: "fadeIn",
effectTime: 2000,
threshold: 0
});
});
So, how to use jQuery Lazy with AJAX?
Please think about how jQuery (and Lazy) work. There is not kind of auto detection of new elements (expect somebody builds it on its own). So, if you load new elements via AJAX you need to tell jQuery/Lazy that there are new elements.
In case of Lazy, there are some public functions you can use of an instance. In your case, you would need to use addItems and update.
With addItems, you can add new elements to an existing instance of Lazy. So the plugin knows that he has to handle these elements too. With update, you can force Lazy to do a single update of the current viewport, without using scroll or resize event.
So, that means, you have to slightly update your code:
var instance = $('.lazy').lazy({
chainable: false, // tell lazy to return its own instance
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
effect: "fadeIn",
effectTime: 2000,
threshold: 0
});
Afterwards you need to use the two public functions, mentioned above, after the AJAX request got finished. I don't know how you load the new elements, but there might be a callback or something where you could execute these.
instance.addItems('.jquery-selector-for-new-items-only');
instance.update();
If you have the new elements already as jQuery object, you can use addItems with them too. So instead of a selector, just add the object:
instance.addItems($('.jquery-object'));
instance.update();
And that's it ...

How to stop cubeslider slideshow on mouseleave?

I am using a Cube Slider 3d plugin for a slideshow and I have it starting on 'mouseenter' using jQuery, which works fine. I want it to stop on 'mouseleave' and cannot get it to work. Been unable to find anything to guide me in the right direction. Please see the code below. It is the code I use to start. As you can see, there is an autoplay option, which I set to 'true'. Logic would tell me to set the value to false on mouseleave, but that does not work and seems a bit redundant to use cubeslider() again. I have also tried jQuery method stop() and thought about trying to use setInterval() and clearInterval() with it somehow. With using a jQuery plugin it doesn't seem like much additional jQuery/JavaScript would be needed. I could be wrong as I've been neglecting jQuery/JavaScript for another focus and probably need a refresher on many JavaScript concepts. Any help is appreciated. Thanks
$('#cubeSlide').mouseenter(function() {
$('#cubeSlide').cubeslider({
cubesNum: {rows:1, cols:1},
orientation: 'h',
autoplay: true,
autoplayInterval: 500,
perspective: 1200,
mode3d: 'auto',
arrows: false,
navigation: false,
addShadow: false,
});
});

how to set display time of ToastMessage?

setTimeout(function () { showToastMessage("Guest added successfully test2").fadeOut(4000);});
I want to display this message up to 5 sec. but i don't know how to set the display time.
I know how to set the delay time. i have used .fade Out method but its not working. i am still in trouble. help me
I want to display this message up to 5 sec. but i don't know how to set the display time.
I know how to set the delay time. i have used .fade Out method but its not working. i am still in trouble. help me
You can customise the JQuery toaster as you want, it to be.
Not just the time but the look and feel as well, by passing toaster settings as below
$.toaster({ settings : {...} });
For example to set the timeout property you can pass below argument,
$.toaster({ settings : {'timeout': 5000} });
This setting just need to be done only once.You can change the settings at any moment.
Or you can clear all custom changes and revert to the default settings as below
$.toaster.reset();
For other settings options you can visit this link.
I don't know how work showToastMessage function, but it's looks like this function return jQuery object, so you can use .delay method
showToastMessage("Guest added successfully test2")
.delay(5000)
.fadeOut(4000);
or without jQuery magic you can save jQuery toast object and call fadeOut after timeout
var $toast = showToastMessage("Guest added successfully test2");
setTimeout(function(){
$toast.fadeOut(4000);
}, 5000);

Drop down menu disappearing before I can get to the links

How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/

close fancy box from function from within open 'fancybox'

Hi all i want to be able to close fancyBox when it is open from within.
I have tried the following but to no avail:
function closeFancyBox(html){
var re = /.*Element insert complete!.*/gi;
if( html.search( re ) == 0 ){
$.fancybox.close();
//alert("foo");
}
}
foo will open in dialog but will not close down. any hints?
Try this:
parent.$.fancybox.close();
See Fancybox API documentation.
According to http://fancybox.net/faq
How can I close FancyBox from other element? ?
Just call $.fn.fancybox.close() on
your onClick event
So you should just be able to add in the fn.
If you just want to close the fancy box it is sufficient to close it.
$('#inline').click(function(){
$.fancybox.close();
});
It is no use putting the .fn, it will reffers to the prototype.
What you need to do is $.fancybox.close();
The thing is that you are maybe experiencing another error from js.
There are any errors on screen?
Is your fancybox and jquery the latest releases?
jquery is currently in 1.4.1 and fb in 1.3 something
Experiment putting a link inside the fancybox and put that function in it.
You probably had read that, but in any case,
http://fancybox.net/api
One thing that you probably might need to do is isolate each part in order to realize what it is.
You can even close fancybox by get close button id and call click event on that id.
<input type='button' value='Cancel' onclick='javascript:document.getElementById("fancybox-close").click();' />
It works for me!
i had the same issues a longtime then i got the solution by the below code.
please use
parent.jQuery.fancybox.close()
Bit of an old thread but ...
Actually, I suspect that the answer to the original question about how to close the window from within the window has more to do with the fact that the click event is not attached to the element. If the click event is attached in document.ready the event will not be attached when fancybox creates the new window.
You need to re-apply the click event once the new window . Probably the easiest way to do this is to use onComplete feature.
This works for me:
$(".popup").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 400,
'overlayShow' : true,
'overlayColor' : '#000022',
'overlayOpacity' : 0.8,
'onComplete' : function(){$('.closer').click(function(){parent.$.fancybox.close();})}
});
Actually, after a bit of thought 'live' rather than 'click' or 'bind' might work just as well.
Use this to close it instead:
$.fn.fancybox.close();
Judging from the fancybox source code, that is how they handle closing it internally.
After struggling myself with this I found a solution that works just replace the $ with jQueryjQuery.fancybox.close() and I made it an inline script on an onClick. Going to check if i can call it from the parent
For those who spent hours like me to find out the solution for inline type: window.setTimeout(function(){$.fancybox.close()},10);
I ended up using:
<script>parent.$("#fancy_close").click();</script>
I guess the version of fancybox we have doesn't have a $.fancybox.close() function for me to call :(
FYI, I just wanted the page to close the fancybox, as it had finished its processing in PHP.
Add $.fancybox.close() to where ever you want it to be trigged, in a function or a callback, end of an ajax call!
Woohoo.
Within an iframe use - parent.$.fancybox.close();
to close fancybox by funciton its necessary to make setTimtout to the function that will close the fancybox
Fancybox needs some time to acept the close function
If you call the function directly will not work
function close_fancybox(){
$.fancybox.close();
}
setTimeout(close_fancybox, 50);
yes in Virtuemart its must be button CLOSe-continue shopping, not element, because after click you can redirect..
i found this redirect bug on my ajax website.
If anyone is looking for how to close all instances in Fancybox 4 you can just use Fancybox.close();
To close ajax fancybox window, use this:
onclick event -> $.fancybox.close();
return false;

Categories