need to mock up banner rotator a little bit

@miobSep 26.2007

i have this JS code,

[CODE] var dir = 1; var dir_rem = 0;

function img_onload(){

x = document.getElementById(“allban”).scrollLeft; //document.form1.keywd.value += x+”;”; if (x>=(total_w – 312)) dir = -1; if (x<=0) dir = 1; document.getElementById(“allban”).scrollLeft = dir + x;

window.setTimeout(‘img_onload()’, 30);

}

function stop(xx){ if (xx==0){ dir_rem = dir; dir = 0; } else dir = dir_rem; } total_w = 620;[/CODE]

in <HEAD>

then

<BODY>

[CODE] <div id=”allban” style=”margin-left: 4px; margin-bottom: 10px; padding-left: 15px; _padding-left: 20px; width:606px; _width:620px; overflow: hidden; white-space:nowrap;” onmouseover=”stop(0);” onmouseout=”stop(1);”> <a href=”http://www.domain1.com” target=”_blank”><img src=”homepage/banner6.gif” border=”0″ width=”150″ height=”50″ class=”banner” id=”banner0″></a> <a href=”http://www.domain2.com” target=”_blank”><img src=”homepage/banner1.gif” border=”0″ width=”150″ height=”50″ class=”banner” id=”banner1″></a> <a href=”http://www.domain3.com” target=”_blank”><img src=”homepage/banner2.gif” border=”0″ width=”150″ height=”50″ class=”banner” id=”banner2″></a> <a href=”http://www.domain4.com” target=”_blank”><img src=”homepage/banner3.gif” border=”0″ width=”150″ height=”50″ class=”banner” id=”banner3″></a> <a href=”http://www.domain5.com” target=”_blank”><img src=”homepage/banner4.gif” border=”0″ width=”150″ height=”50″ class=”banner” id=”banner4″></a> <a href=”http://www.domain6.com” target=”_blank”><img src=”homepage/banner5.gif” border=”0″ width=”150″ height=”50″ class=”banner” id=”banner5″></a> </div>

[/CODE]

this code scrolls 6 banners from the rleft to the right, then back, it’s quite fine, but i think much better it could be for my advertisers if these 6 banners will be turning around, i mean after 6th ad will goes again 1st ad, 2ndd… and overe and over…

if that’s question of money let me know Need to do it fast !

to post a comment

JavaScript

4 Comments(s) _↴

@miobauthorOct 01.2007 — #i got help on other site, but i can't get it working in IE, when i put it on my local computer it loads fine, it also works in FF, i have no idea whats wrong, any help would be appreciated.

[CODE]<script type="text/javascript"> 
 // message to scroll 
 var marqueecontent='<a href="http://www.domain1.com" target="_blank"><img src="homepage/banner6.gif" border="0" width="150" height="50" class="banner" id="banner0"></a> <a href="http://www.domain2.com" target="_blank"><img src="homepage/banner1.gif" border="0" width="150" height="50" class="banner" id="banner1"></a> <a href="http://www.domain3.com" target="_blank"><img src="homepage/banner2.gif" border="0" width="150" height="50" class="banner" id="banner2"></a> <a href="http://www.domain4.com" target="_blank"><img src="homepage/banner3.gif" border="0" width="150" height="50" class="banner" id="banner3"></a> <a href="http://www.domain5.com" target="_blank"><img src="homepage/banner4.gif" border="0" width="150" height="50" class="banner" id="banner4"></a> <a href="http://www.domain6.com" target="_blank"><img src="homepage/banner5.gif" border="0" width="150" height="50" class="banner" id="banner5"></a>'; 
 var copyspeed=2; // <-- speed of ticker 
 var tickerWidth = 300; // <-- ticker width 
 var tickerHeight = 50; // <-- ticker height 
 
 // global variables 
 var actualWidth=''; 
 var jsMarquee1; 
 var jsMarquee2; 
 var div1Interval = 0; 
 var div2Interval = 0; 
 var timeToStartSecond= new Array(8) 
 var div1Status = 0; 
 var div2Status = 0; 
 
 document.write('<span id="temp" style="visibility:hidden;position:absolute;left:-5000px;">'+marqueecontent+'</span>'); // used to determine initial content width 
 document.write('<span id="temp2" style="visibility:hidden;position:absolute;left:-5000px;"></span>'); // used later to calculate the new width of the content 
 
 function populate(){ 
 actualWidth=document.getElementById("temp").offsetWidth; 
 actualWidthTemp=document.getElementById("temp").offsetWidth; 
 
 // first DIV 
 jsMarquee1=document.getElementById('marquee1'); 
 jsMarquee1.style.left=parseInt(tickerWidth)+"px"; 
 
 // second DIV 
 jsMarquee2=document.getElementById('marquee2'); 
 jsMarquee2.style.left=parseInt(tickerWidth)+"px"; 
 
 if(actualWidth <= (tickerWidth*2)){ 
 
 var tempContent; 
 tempContent = "<nobr>"; 
 
 // make sure that the div is larger than the ticker area 
 // if not, duplicate the content 
 while (actualWidth < (tickerWidth*2)){ 
 tempContent = tempContent + marqueecontent; 
 actualWidth = actualWidth + actualWidthTemp; 
 } 
 tempContent = tempContent + "</nobr>" 
 
 // load the content into the divs 
 jsMarquee1.innerHTML=tempContent; 
 jsMarquee2.innerHTML=tempContent; 
 
 // get the new actual width of the content 
 document.getElementById("temp2").innerHTML=tempContent; 
 actualWidth = document.getElementById("temp2").offsetWidth; 
 
 }else{ 
 // load the content into the divs 
 jsMarquee1.innerHTML="<nobr>"+marqueecontent+"</nobr>"; 
 jsMarquee2.innerHTML="<nobr>"+marqueecontent+"</nobr>"; 
 } 
 
 timeToStartSecond=(tickerWidth-actualWidth); 
 } 
 window.onload=populate 
 
 function scrollMarquee(){ 
 if ((parseInt(jsMarquee1.style.left)>(actualWidth*(-1)))){ 
 jsMarquee1.style.left=parseInt(jsMarquee1.style.left)-copyspeed+"px"; 
 
 // call function to begin the second DIV 
 if(parseInt(jsMarquee1.style.left) < timeToStartSecond && div1Status == 0){ 
 div1Status = 1; 
 div2Status = 0; 
 beginSecondMarquee(); 
 } 
 }else{ 
 //resets the div to it's original location 
 document.getElementById("marquee1").style.left = parseInt(tickerWidth)+"px"; 
 //clear the interval and stop animation 
 div1Interval = window.clearInterval(div1Interval); 
 } 
 } 
 
 function scrollSecondMarquee(){ 
 if (parseInt(jsMarquee2.style.left)>(actualWidth*(-1))){ 
 jsMarquee2.style.left=parseInt(jsMarquee2.style.left)-copyspeed+"px"; 
 
 // call function to restart the first DIV 
 if(parseInt(jsMarquee2.style.left) < timeToStartSecond && div2Status == 0){ 
 div1Status = 0; 
 div2Status = 1; 
 startMarquee(); 
 } 
 }else{ 
 //resets the div to it's original location 
 document.getElementById("marquee2").style.left = parseInt(tickerWidth)+"px"; 
 //clear the interval and stop animation 
 div2Interval = window.clearInterval(div2Interval); 
 } 
 } 
 
 /* begins the second marquee */ 
 function beginSecondMarquee(){ 
 div2Interval = window.setInterval("scrollSecondMarquee()",20); 
 } 
 
 /* begins the first marquee */ 
 function startMarquee(){ 
 div1Interval = window.setInterval("scrollMarquee()",20); 
 } 
 startMarquee(); 
 
 document.write('<div style="position:relative;width:'+tickerWidth+'px;height:'+tickerHeight+'px;overflow:hidden">'); 
 document.write('<div style="position:absolute;width:'+tickerWidth+'px;height:'+tickerHeight+'px;background-color:#DEFDD9" onMouseover="copyspeed=0" onMouseout="copyspeed='+copyspeed+'">'); 
 document.write('<div id="marquee1" style="position:absolute;left:0px;top:0px;"></div>'); 
 document.write('<div id="marquee2" style="position:absolute;left:0px;top:0px;"></div>'); 
 document.write('</div>'); 
 document.write('</div>'); 
 
 </script> 
 [/CODE]

@LeeUOct 01.2007 — #Have you checked with the script's author?

@miobauthorOct 01.2007 — #yes, he has no idea what's wrong, on his end is everything working perfectly..

@miobauthorOct 06.2007 — #i need to fix it ASAP !

Also in #JavaScript _↴

Calendar JavaScript Problem Need help with calling specific function from link using CSS in javascript

Success!

Help @miob spread the word by sharing this article on Twitter...

Tweet This

need to mock up banner rotator a little bit

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

need to mock up banner rotator a little bit

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴