Jump to content


Photo

set timer to call a jquery function?


  • Please log in to reply
1 reply to this topic

#1 fa_dy

fa_dy

    Member

  • Members
  • PipPip
  • 18 posts

Posted 23 February 2013 - 05:29 AM

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, 23 February 2013 - 05:32 AM.


#2 denno020

denno020

    Advanced Member

  • Members
  • PipPipPip
  • 694 posts
  • LocationAustralia

Posted 24 February 2013 - 05:19 AM

window.setInterval(yourfunction, 10000);

I just did a quick search and found that. Looks like it'll be able to do what you want.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com