Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry How to create a timer to run an HTML click 'class'

    So I am very new to JS and I have been messing around with a template file. I have been lucky so far in searching and finding most of my issues, but I don't think I know exactly what to search for in this issue.

    Here it is:

    There is a picture, that when clicked, runs part of a JS file that changes the background on the website.

    Code:
    <a href="#" class="next"><img src="images/marker_right.png" alt="" class="img"><img src="images/marker_right_active.png" alt="" class="img_act"></a>
    the class 'next' is what changes the image. How can I go about creating a timer in my HTML page that will automatically "click" this every 20 seconds. Keeping the actual physical click functionality of the images alive, as well.

    Ultimately, I want the background to change by itself if the user does not click on the image, every 20 seconds.

    Any ideas?!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    What does the JavaScript look like? That's what you'll need to modify.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe this is the correct file it is pulling from:

    Code:
    var fl=true
    $(document).ready(function() {
    	// hover
    	
    	$('.prev .img_act').css({left:38})
    	$('.next .img_act').css({left:-38})
    	
    	$('.prev').hover(function(){
    		$(this).find('.img').css({zIndex:1}).stop().animate({left:38})
    		$(this).find('.img_act').css({zIndex:2}).stop().animate({left:0})	
    	}, function(){
    		$(this).find('.img_act').css({zIndex:1}).stop().animate({left:38})
    		$(this).find('.img').css({zIndex:2}).stop().animate({left:0})		
    	})
    	
    	$('.next').hover(function(){
    		$(this).find('.img').css({zIndex:1}).stop().animate({left:-38})
    		$(this).find('.img_act').css({zIndex:2}).stop().animate({left:0})
    	}, function(){
    		$(this).find('.img_act').css({zIndex:1}).stop().animate({left:-38})
    		$(this).find('.img').css({zIndex:2}).stop().animate({left:0})	
    	})
    	
    	$('.button1 span').css({opacity:0})
    	
    	$('.button1').hover(function(){
    		$(this).find('span').stop().animate({opacity:1})
    	}, function(){
    		$(this).find('span').stop().animate({opacity:0})
    	})
    	
    	$('figure a .img_act, .list1  a .img_act').css({opacity:0})
    	
    	$('figure a, .list1  a').hover(function(){
    		$(this).find('.img_act').stop().animate({opacity:0.33})						 
    	}, function(){
    		$(this).find('.img_act').stop().animate({opacity:0})						 
    	})
    	
    	
    	$('#content > ul > li').each(function(){
    		$(this).data({height:$(this).height()})						  
    	})
    	
    	$('ul#menu').superfish({
          delay:       600,
          animation:   {height:'show'},
          speed:       600,
          autoArrows:  false,
          dropShadows: false
        });
    	
     });
    $(window).load(function() {	
    	//bg animate
    	
    	$('#bgStretch').bgStretch({
    			align:'rightTop',
    			navigs:$('#bg_pagination').navigs({})
    		})
    		.sImg({
    			spinner:$('<div class="spinner"></div>').css({opacity:.7}).hide()
    	})
    	
    	var img=0;
    	var num=$('#bg_pagination li').length-1;
    		
    	$('.prev').click(function(){
    		img=img-1;
    		if (img<0) img=img+num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	})
    	$('.next').click(function(){
    		img=img+1;
    		if (img>num) img=img-num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	})
    	
    	
    	
    	$('#ContactForm').forms({
    		ownerEmail:'#'
    	})
    	
    	//content switch
    	var content=$('#content'),
    		nav=$('.menu'),
    		footer_nav=$('.footer_menu');
    	nav.navs({
    		useHash:true,
    		hoverIn:function(li){
    			$('> span',li).stop().animate({opacity:1})
    		},
    		hoverOut:function(li){
    			if (!li.hasClass('with_ul') || !li.hasClass('sfHover')) {$('> span',li).stop().animate({opacity:0})}
    		}						   
    	})	
    	footer_nav.navs({
    		useHash:true,
    		hoverIn:function(li){
    			$('strong',li).stop().animate({opacity:1})
    		},
    		hoverOut:function(li){
    			$('strong',li).stop().animate({opacity:0})
    		}						   
    	})	
    	nav.navs(function(n, _){
    		content.cont_sw(n);
    	})
    	footer_nav.navs(function(n, _){
    		content.cont_sw(n);
    	})
    	content.cont_sw({
    		showFu:function(){
    			var _=this
    			$.when(_.li).then(function(){
    				if (_.next.attr('id')=='page_contact') {
    					$('#map').html('<iframe width="405" height="219" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Brooklyn,+New+York,+NY,+United+States&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=Brooklyn,+Kings,+New+York&amp;ll=40.649974,-73.950005&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>');
    				}
    				_.next.css({display:'block'}).stop().animate({height:_.next.data('height')},600,'easeInCirc');
    			});
    			$('#content').stop().animate({height:_.next.data('height')})
    		},
    		hideFu:function(){
    			var _=this	
    			_.li.stop().animate({height:0},600,'easeOutCirc', function(){
    				_.li.css({display:'none'});
    			})
    			$('#content').stop().animate({height:0})
    		},
    		preFu:function(){
    			var _=this
    			_.li.css({position:'absolute', display:'none'});
    		}
    	})
    	
    	
    })

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    So the piece of code that attaches the function to the click is:

    Code:
    $('.next').click(function(){
    		img=img+1;
    		if (img>num) img=img-num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	})
    So if we pull that anonymous function out and assign it a name we can then call it both from there and from a setInverval.

    Code:
    nextImg = function(){
    		img=img+1;
    		if (img>num) img=img-num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	});
    $('.next').click(nextImg);
    setInterval(nextImg,20000);
    You may want to modify that further so that the click actually cancels and restarts the setInterval as well as calling the current code.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for taking the time to help me, it is very much appreciated!

    So you are saying I should replace the piece of code in the JS file with this:
    Code:
    nextImg = function(){
    		img=img+1;
    		if (img>num) img=img-num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	});
    $('.next').click(nextImg);
    and then place this part in my HTML file?
    Code:
    setInterval(nextImg,20000);
    Sorry for any ignorance, as mentioned, this is all fairly new to me.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by tmparisi View Post
    Thanks for taking the time to help me, it is very much appreciated!

    So you are saying I should replace the piece of code in the JS file with this:
    Code:
    nextImg = function(){
    		img=img+1;
    		if (img>num) img=img-num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	});
    $('.next').click(nextImg);
    and then place this part in my HTML file?
    Code:
    setInterval(nextImg,20000);
    Sorry for any ignorance, as mentioned, this is all fairly new to me.
    Yes - the first part is basically doing the same as it is already doing but it gives the function a name that you can use to call it from the extra statement without having to copy the entire function.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my JS file has this:

    Code:
    	$('.prev').click(function(){
    		img=img-1;
    		if (img<0) img=img+num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	})
    	
    	
    nextImg = function(){
    		img=img+1;
    		if (img>num) img=img-num
    		$.when($('#bgStretch img')).then(function(){
    			$('#bg_pagination li a').eq(img).click();
    		})
            return false
    	}*
    $('.next').click(nextImg);
    Also, has to take a ')' out above where the * is.

    and my HTML now has this:
    Code:
    <body>
        <script>
        setInterval(nextImg,5000); </script>
    but to no avail... it just sits there.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind, both of those needed to be in the JS file... seems to work fine! Thank you very much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •