Not sure if this is possible but I have a slideshow on my site that when a button is click the relevant slide, slides in.
What I want to do is add a timer so that after 3 seconds the next button is clicked, making my slideshow slide automatically.
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
Ive added a Fiddle...
http://jsfiddle.net/5jVtK/
The simplest way to do this is to use setTimeout (happens once after a delay) or setInterval (happens every so often).
setTimeout( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );
setInterval( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );
Once you get this implemented, you may want to think about some other niceties, such as stopping the automatic progression when the user's mouse is over the next button or over the slideshow (since that implies interest in what is currently displayed) and resuming the autoadvance on mouseout.
Next: it sounds like you need to figure out how to dynamically find the correct button to trigger to keep advancing through multiple slides. This is one way to do it:
`
function click() {
// Find the button for the next slide in relationship to the currently active button
var $next = $( '#button' ).find( '.active' ).next( 'a' );
// If there isn't one, go to the beginning
if ( ! $next.length ) {
$next = $( '#button' ).find( 'a' ).first();
}
// Trigger the click
$next.trigger( 'click' );
setTimeout(click, 3000);
}
setTimeout(click, 3000);
Here's a link to a fiddle showing this in action:
http://jsfiddle.net/5jVtK/1/
You can trigger the click event of an element with jQuery by doing
$('#button a').click();
To make this happen at a 3 second interval, use setInterval():
function simulateClick(){
$('#button a').click();
};
setInterval(simulateClick, 3000);
Something like this should work. This way we are running a function at an interval and the click also triggers the same function. The timer never needs to activate a button, just activate the function that the button also activates.
$(document).ready(function() {
var timer = setInterval( slideFunction, 5000);
$('#button a').click(function(){
slideFunction();
});
function slideFunction(){
var integer = $('#button a').attr('rel');
$('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
}
});
Related
This is more of a tip than a question, but i hope others find this useful.
Basically i needed to make the lightbox slider called 'Swipebox' auto transition to the next slide, I looked online for help but found nothing.
to add this feature to the plugin i added this code:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
The file for this JS is called 'jquery.swipebox.js'. This is the code where you want to place the code previously mentioned:
/**
* Navigation events : go to next slide, go to prevous slide and close
*/
actions : function () {
var $this = this,
action = 'touchend click'; // Just detect for both event types to allow for multi-input
if ( elements.length < 2 ) {
$( '#swipebox-bottom-bar' ).hide();
if ( undefined === elements[ 1 ] ) {
$( '#swipebox-top-bar' ).hide();
}
} else {
$( '#swipebox-prev' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getPrev();
$this.setTimeout();
} );
$( '#swipebox-next' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getNext();
$this.setTimeout();
} );
}
$( '#swipebox-close' ).bind( action, function() {
$this.closeSlide();
} );
// THIS IS THE NEW CODE ADDED:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
},
This function is around about 550 lines down.
Also, to make the slideshow loop back around, you will need to change the option called 'loopAtEnd' from FALSE to TRUE. This is located at the top of the document.
loopAtEnd: true,
Hope this helped :)
I have the following jQuery. What it does is that once you hover over the next or previous arrows, it clicks on them, making the slider move. I need to modify this code, so it keeps clicking as long as you are hovering, right now, it only does it once.
$( "#slider .next, #slider .prev" ).hover(
function() {
$(this).click();
},
function() {}
);
The slider uses a jQuery plugin called Tiny Carousel
Thanks
This will trigger a click on the elements every second:
var clr;
$(".next, .prev").hover(function (e) {
clr = setInterval(function () {
$(e.target).click();
}, 1000)
}, function () {
clearInterval(clr);
});
jsFiddle example
var handle=null;
$( "#slider .next, #slider .prev" ).hover(
function() {
var self=$(this);
if(handle!=null)
clearInterval(handle);
handle = setInterval(function(){
$(this).click();
},100);
},
function() {}
);
I have a weird (one more time) issue on my animation.
In a nutshell, I have a picture, when I clicked on it, two div appears, and there is a close button to remove those divs. But when I click on that button, there is only one div who dissapears.
The two new divs have got a debug class and I normally remove it when I clicked on the button
$('#gallery').on('click', 'li', function(e) {
// To display the animations with position
var $this = $(this),
dataItem = $this.data('item');
// Left animation
if ( dataItem == 1 ) {
console.log( $this );
$this
.addClass('active')
.find('.info-texte')
.removeClass('hidden')
.addClass('debug');
// When animation is ended add the second part
$this.find('.debug').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$this.find('.info-btn')
.removeClass('hidden')
.addClass('debug');
});
}
// Supprime le href event
e.preventDefault();
});
$('.btn-close').on('click', function() {
var $this = $(this);
$this
.parents()
.eq(3)
.removeClass('active')
.find('.info-texte, .info-btn')
.removeClass('debug')
.addClass('hidden');
});
You can see in action right here : http://www.jeremybarbet.com/effect/bug.html
As per my comments, your $this.parents().eq(3) is targeting the wrong element
if you change this to $this.parents('li.active')
both of your divs should dissapear:
http://jsfiddle.net/TDsCT/
EDIT
After closer inspection it is because of your click:
$('#gallery').on('click', 'li'
this is also fired when you click on the button as the button is inside your #gallery li. I have changed your code so you click on the image instead to open and then click on your button to close:
http://jsfiddle.net/TDsCT/5/
It seems the expression $this.parents().eq(3) isn't evaluating to your desired result -- the two divs on the left. Perhaps try a different set of DOM traversal methods? (e.g. $this.parents().eq(2).prev() and $this.parents().eq(2), though this would be sort of a kludge)
It's gonna be a long post, but I really had enough of trying to fix this. I'm really looking for some help solving my case.
First:
fade.js:
$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});
The problem here is after the ajax call of the next page, the fade stops working. So what I did is
$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").live("hover", function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});
But this will only work when I hover over the image then the image will fade out. If I do the same for $(".gallery ul li img.a").fadeTo to .live(...) nothing happens, it simply doesn't work.
how can make this work even after an ajax call, which is supposed to fadeto when it loads then fadeout when i hover over it.
Second:
I have a small slider that slides up on the image, slider.js:
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Full Caption Sliding (Hidden to Visible)
$('.gallery li').hover(function(){
$(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'153px'},{queue:false,duration:160});
});
});
I changed $('.gallery li').hover(...) to $('.gallery li').live("hover", function(){...}) but still it didn't work. Also I used .on instead of .live because it's deprecated.
What am I doing wrong ? I'm not a client side dude, most of my work is server side. I just need to make these 2 plugins work after the AJAX call happens.
Ajax:
#dajaxice_register
def gallerypages(request, p):
try:
page = int(p)
except:
page = 1
items = gallerylist(page)
html = render_to_string('gallery_content.html',
{'items': items,},
context_instance = RequestContext(request))
dajax = Dajax()
dajax.assign('#gallery-content', 'innerHTML', html)
return dajax.json()
Edit2:
<b><</b>
and
$(document).on("keydown", "#pagenumber", function(e)
if ( e.which === 13 ) {
Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value});
}});
I'm not sure, but test this stuff:
JavaScript via jQuery
var initFade = function() {
$(".gallery ul li img.a").fadeTo("slow", 0.5);
}
// your custom callback method
var reBindStuffs = function(data) {
Dajax.process(data);
// rebind your jquery event handlers here... e.g.
initFade();
};
$(document).ready(function(){
// initial first time loaded fade
initFade();
// hover live binder
$(".gallery ul li img.a").live("hover", function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.5);
});
// document keydown listener
$(document).on("keydown", "#pagenumber", function(e)
if ( e.which === 13 ) {
Dajaxice.gallery.gallerypages('reBindStuffs', {'p': this.value});
}});
});
HTML
<!-- a click listener -->
<b><</b>
You were headed in the right direction with live, but live is depreciated for the on event. With on, you can include the selector as one of the arguments. The initial jQuery selector is only the container of the objects you want to add handlers to.
<div id="content">
<div class="sombutton"></div>
</div>
$( document ).ready( function() {
$( '#content' ).on( 'click', '.somebutton', function() {
alert( 'do something' );
} );
} );
Now even if we replace the content within the #conent div, newly added content with the class .somebutton will also have a click handler attached.
http://api.jquery.com/on/
What you mention is a big problem, I refresh by hand. But I also use the .ajaxcomplete functionality. It runs every after every Ajax query
$(document).ajaxComplete(function(){
// Carga tabs por defecto por clases.
if (typeof jQuery.fn.wf_responsivetab == 'function')
{
if ($('#rbtt_1').length)
{
$('#rbtt_1').wf_responsivetab({text: '...',});
$(window).on('resize', function() {$('#rbtt_1').wf_responsivetab({text: '...',});});
}
}
});
I have this code that makes menu items slide down and up. I want to add a timer so there is a delay in the slide down then back up.
$(function () {
$("#menu").find("li").each(function () {
if ($(this).find("ul").length > 0) {
$(this).mouseenter(function () {
$(this).find("ul").stop(true, true).slideDown();
});
$(this).mouseleave(function () {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
});
It appears like you're writing javascript with jQuery
jQuery has a built in .delay function for animation queues.
In your example, delaying the slidedown animation by 300 ms would look like
$(this).find("ul").stop(true, true).delay(300).slideDown();
See jQuery's delay
A smart approach would be to add a hover intent to wait before triggering mouseleave:
jsBin demo
$("#menu").find("li:has(ul)").on('mouseenter mouseleave',function( e ){
var $UL = $(this).find('ul');
if(e.type==='mouseenter'){
clearTimeout( $(this).data('wait') );
$UL.stop(1,1).slideDown();
}else{
$(this).data('wait', setTimeout(function(){
$UL.stop().slideUp();
},180) );
}
});
instead of using if ($(this).find("ul").length > 0) { just use: ("li:has(ul)") to trigger your events only on li elements that has ul as children.
add an event callback e for the mouseenter mouseleave.
if the e event == mouseenter ..... else is mouseleave.
Than clear the data attribute called 'wait' and slideDown the children ul
Now, leaving the original li element to reach the 'distant' ul we have to cross over a white space (demo) that will usually trigger immediately the 'slideUp()', but we set a timeout counter inside that li's data attribute that will wait ~180ms before running.
Reaching the 'distant' ul element - beeing a children of the timeouted 'li' we clear the timeout (step 1) 'retaining' the mouseenter state.
use ~180ms or how much you think is needed to reach with the mouse the 'distant' UL element