...

View Full Version : Are these two setInterval(); conficting with each other?



betoranaldi
02-22-2007, 05:53 PM
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:

<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

<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

<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>

glenngv
02-22-2007, 09:45 PM
I don't know that scriptaculous library. But is there any error? Can you post the code for Effect.Fade function?

GJay
02-22-2007, 09:56 PM
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

betoranaldi
02-22-2007, 10:49 PM
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!


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum