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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Are these two setInterval(); conficting with each other?

    Using the scriptaculous library I am trying to fade in and out two different areas of a homepage I am building.

    It appears that there is a problem with the setInterval(); conflicting with each other. if I only have one or the other the fading appears as intended but when they are both called in they go spastic.

    The code is below, anyone have any ideas?

    Thanks
    Brian


    Javascript:
    Code:
    <script src="assets/js/scriptaculous/lib/prototype.js" type="text/javascript"></script>
    <script src="assets/js/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    <script language="javascript">
    	// Featured Topics
    	var divs_to_fade = new Array('box-1', 'box-2');
    	var i = 0;
    	
    	// Ads
    	var ads_to_fade = new Array('ad-1', 'ad-2');
    	var iads = 0;
    	
    	function swapFade() {
    		Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
    		i++;
    		if (i == 2) i = 0;
    			Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0 });
    	}
    	
    	function swapFade2() {
    		Effect.Fade(ads_to_fade[iads], { duration:1, from:1.0, to:0.0 });
    		iads++;
    		if (iads == 2) iads = 0;
    			Effect.Appear(ads_to_fade[iads], { duration:1, from:0.0, to:1.0 });
    	}
    
    	// the onload event handler that starts the fading.
    	function startPage() {
    		setInterval('swapFade()',5000);
    		setInterval('swapFade2()',10000);
    	}
    HTML code for first area
    Code:
    <div class="fade-box" id="box-1" style="position: absolute; width: 502px; display: none;"><div class="header mainAwaken"><img src="res/titleAwakenMain.gif" alt="Awaken" class="left"><a href="/awaken.htm" class="readmore right">More in Awaken</a><br class="clear" /></div><a href="/awaken/a-force-of-two.htm"><img src="/assets/images/articles/awaken/feb07/two/featured.jpg" alt="A Force of Two" class="block" width="502"></a></div>
    <div class="fade-box" id="box-2" style="position: absolute; width: 502px;"><div class="header mainFeatures"><img src="res/titleFeaturesMain.gif" alt="Features" class="left"><a href="/features.htm" class="readmore right">More in Features</a><br class="clear"></div><a href="/features/reluctant-neighbors.htm"><img src="/assets/images/articles/features/feb07/neighbors/featured.jpg" alt="Reluctant Neighbors" class="block" width="502"></a></div>
    HTML code for second area
    Code:
    <div class="fade-box" id="ad-1" style="padding: 10px; text-align: center; width: 750px; position: absolute; display: none;"><a href="index.php?id=283"><img src="assets/images/random/283.gif" alt=""></a></div>
    <div class="fade-box" id="ad-2" style="padding: 10px; text-align: center; width: 750px; position: absolute;"><a href="index.php?id=282"><img src="assets/images/random/282.gif" alt=""></a></div>
    Last edited by betoranaldi; 02-22-2007 at 06:56 PM. Reason: cleaned up some code formatting.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I don't know that scriptaculous library. But is there any error? Can you post the code for Effect.Fade function?

  • #3
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    you will need to use the effect queues if you want multiple effects to be happening at the same time, the scriptaculous wiki has more details: http://wiki.script.aculo.us
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow didn't even know that a queue exisited, I am totaly new to this javascript stuff.

    It did the trick, just in case anyone is having this same problem the changed code is below.

    Thanks again!

    Code:
    <script language="javascript">
    	// Featured Topics
    	var divs_to_fade = new Array('box-1', 'box-2');
    	var i = 0;
    	var wait = 5000;
    	
    	// Ads
    	var ads_to_fade = new Array('ad-1', 'ad-2');
    	var iads = 0;
    	var waitads = 5000;
    	
    	function swapFade() {
    		Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0, queue: {position:'end', scope: 'scopea'} });
    		i++;
    		if (i == 2) i = 0;
    			Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0, queue: {position:'end', scope: 'scopeb'} });
    	}
    
    	
    	function swapFadeAds() {
    	   Effect.Fade(ads_to_fade[iads], { duration:1, from:1.0, to:0.0, queue: {position:'end', scope: 'scopea'} });
    		iads++;
    		if (iads == 2) iads = 0;
    			Effect.Appear(ads_to_fade[iads], { duration:1, from:0.0, to:1.0, queue: {position:'end', scope: 'scopeb'} });
    	}
    	
    	// the onload event handler that starts the fading.
    	function startPage() {
    		setInterval('swapFade()',wait);
    		setInterval('swapFadeAds()',waitads);
    	}
    </script>
    Last edited by betoranaldi; 02-23-2007 at 01:52 AM.


  •  

    Posting Permissions

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