Jump to content

set timer to call a jquery function?


fa_dy

Recommended Posts

Hello guys, I have a quick question. I have a div slider set up to scroll through the content under Our Works and Our Clients on homepage of this website http://www.edhubdemo.com/wp/. When you click on the next and the previous buttons, the slider moves forward and backward respectively. Now what I want is that the slider should automatically move even when the next and previous buttons are not clicked. I searched for a solution over the internet and the closest solution which I found was to set timer to call the click function but I can't seem to implement that on this code. Here's the jquery liquid carousel code which I am using:

 

[/size][/font][/color]

(function($){
$.fn.liquidcarousel = function(options) {

var defaults = {
	duration: 100,
	hidearrows: true
};
var options = $.extend(defaults, options);

   return this.each(function() {
		var divobj = $(this);

		$(divobj).css('overflow', 'hidden');

		$('> .wrapper', divobj).css('overflow', 'hidden');
		$('> .wrapper', divobj).css('float', 'left');

		$('> .wrapper > ul', divobj).css('float', 'left');
		$('> .wrapper > ul', divobj).css('margin', '0');
		$('> .wrapper > ul', divobj).css('padding', '0');
		$('> .wrapper > ul', divobj).css('display', 'block');

		$('> .wrapper > ul > li', divobj).css('display', 'block');
		$('> .wrapper > ul > li', divobj).css('float', 'left');

		var visiblelis = 0;
		var totallis = $('> .wrapper > ul > li', this).length;
		var currentposition = 0;
		var additionalmargin = 0;
		var totalwidth = 0;

		$(window).resize(function(e){
			var divwidth = $(divobj).width();
			var availablewidth = divwidth;

			var heighest = 0;
			$('> .wrapper > ul > li', divobj).css("height", "auto");
			$('> .wrapper > ul > li', divobj).each(function () {
				if ( $(this).outerHeight() > heighest ) {
					heighest = $(this).outerHeight();
				}
			});

			$(divobj).height(heighest);
			$('> .wrapper', divobj).height(heighest);
			$('> .wrapper > ul', divobj).height(heighest);
			$('> .wrapper > ul > li', divobj).height(heighest);

			var liwidth = $('> .wrapper > ul > li:first', divobj).outerWidth(true);
			var originalmarginright = parseInt($('> .wrapper > ul > li', divobj).css('marginRight'));
			var originalmarginleft = parseInt($('> .wrapper > ul > li', divobj).css('marginLeft'));
			totalwidth = liwidth + additionalmargin;

			previousvisiblelis = visiblelis;
			visiblelis = Math.floor((availablewidth / liwidth));

			if (visiblelis < totallis) {
				additionalmargin = Math.floor((availablewidth - (visiblelis * liwidth))/visiblelis);
			} else {
				additionalmargin = Math.floor((availablewidth - (totallis * liwidth))/totallis);
			}
			halfadditionalmargin = Math.floor(additionalmargin/2);
			totalwidth = liwidth + additionalmargin;

			if (visiblelis > previousvisiblelis  || totallis <= visiblelis) {
				currentposition -= (visiblelis-previousvisiblelis);
				if (currentposition < 0 || totallis <= visiblelis ) {
					currentposition = 0;
				}
			}
			$('> .wrapper > ul', divobj).css('marginLeft', -(currentposition * totalwidth));

			if (visiblelis >= totallis || ((divwidth >= (totallis * liwidth)) && options.hidearrows) ) {
				if (options.hidearrows) {
					$('> .prev', $(divobj).parents(".widget")).hide();
					$('> .next', $(divobj).parents(".widget")).hide();

					additionalmargin = Math.floor((divwidth - (totallis * liwidth))/totallis);
					halfadditionalmargin = Math.floor(additionalmargin/2);
					totalwidth = liwidth + additionalmargin;
					$('> .wrapper > ul > li', divobj).css('marginRight', originalmarginright + halfadditionalmargin);
					$('> .wrapper > ul > li', divobj).css('marginLeft', originalmarginleft + halfadditionalmargin);
				}
				$('> .wrapper', divobj).width(totallis * totalwidth);
				$('> ul', divobj).width(totallis * totalwidth);
				$('> .wrapper', divobj).css('marginLeft', 0);
				currentposition = 0;
			} else {
				$('.prev', $(divobj).parents(".widget")).show();
				$('.next', $(divobj).parents(".widget")).show();
				$('> .wrapper', divobj).width(visiblelis * totalwidth);
				$('> ul', divobj).width(visiblelis * totalwidth);
			}
		});

		$('.next', $(divobj).parents(".widget")).click(function(){

			if (totallis <= visiblelis) {
				currentposition = 0;
			} else if ((currentposition + (visiblelis*2)) < totallis) {
				currentposition += visiblelis;
			} else if ((currentposition + (visiblelis*2)) >= totallis -1) {
				currentposition = totallis - visiblelis;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});

		$('.prev', $(divobj).parents(".widget")).click(function(){
			if ((currentposition - visiblelis) > 0) {
				currentposition -= visiblelis;
			} else if ((currentposition - (visiblelis*2)) <= 0) {
				currentposition = 0;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});

		$('.next', $(divobj).parents(".widget")).dblclick(function(e){
			e.preventDefault();
			clearSelection();
		});

		$('.prev', $(divobj).parents(".widget")).dblclick(function(e){
			e.preventDefault();
			clearSelection();
		});

		function clearSelection() {
			if (document.selection && document.selection.empty) {
				document.selection.empty();
			} else if (window.getSelection) {
				var sel = window.getSelection();
				sel.removeAllRanges();
			}
		}

		$(window).resize();
   });


}; 
[color=#000000]})(jQuery);[/color][color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

This is the part of the code which moves the slider forward when the next button is clicked:

 

[/size][/font][/color]

$('.next', $(divobj).parents(".widget")).click(function(){

			if (totallis <= visiblelis) {
				currentposition = 0;
			} else if ((currentposition + (visiblelis*2)) < totallis) {
				currentposition += visiblelis;
			} else if ((currentposition + (visiblelis*2)) >= totallis -1) {
				currentposition = totallis - visiblelis;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});
[color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

And this is the part of the code which makes the slider move backwards when the previous button is clicked:

 

[/size][/font][/color]

$('.prev', $(divobj).parents(".widget")).click(function(){
			if ((currentposition - visiblelis) > 0) {
				currentposition -= visiblelis;
			} else if ((currentposition - (visiblelis*2)) <= 0) {
				currentposition = 0;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});
[color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

This is the code which I found over the internet for calling a function using jquery timer but I couldn't integrate it inside the liquid carousel code:

 

[/size][/font][/color]

window.setInterval(yourfunction, 10000);

function yourfunction() { alert('test'); }
[color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

I want it to be this way that the slider automatically scrolls to the next 4 items after 7 seconds, then to the next 4 items after 7 seconds and then the same happens for backward. It'll be like this that the 'click next' function is called automatically after every 7 seconds and then the 'click previous' function is called after every 7 seconds. I hope this is possible. Looking forward to a solution. Thank you.

Edited by fa_dy
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.