[SOLVED] slideshow banner IE -> FF problem

[miob]

Can someone help me why this code ?
it works only in FF, guy who provided me this code said that he can get it working...

Code: Select all

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

send me PM i will provide you with URL
if that is question of money just tell me will pay cuz needto fix it very very fast !!

[Rakuli]

Hi Miob,

That script works for me in FF and IE, how do you have it in your page?

[miob]

please try this http://www.autobazar.eu/banners/facal.html

thanx

[Rakuli]

Okay,

The script you are using utilizes the DOM but you have no document. You can't just drop that scirpt inside a page.

If you create an actual page and put the script in the <body> tags, it will work.

eg:

HTML: Select all

<html>
<head>
<title>Title of Page</title>
</head>
<body>
<script type="text/javascript">
// etc....
</script>
</body>
</html>

Cheers

[miob]

okay, updated it


can you load it ?

http://www.autobazar.eu/banners/facal.html


me neither ;-(

[Rakuli]

Okay, you need to change the script slightly

HTML: Select all

<html>
<head>
<title>Title of Page</title>
</head>
<body>

<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('<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>'); 

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> 

</body>
</html>

That makes the ID's of the marquee divs available for javascript.

[miob]

ok i updated that file, as you stated above.

still no scrolling ;-(


even FF is not working...

[Rakuli]

Okay, that's because you've copied the code straight from this thread and there are line breaks in the middle of javascript statements. I have attached the file to this thread.

[miob]

uploaded your html to server

http://www.autobazar.eu/banners/facal.html

it's weird i think it was working on my local pc, but on the server it isn't

anyway, you're very helpful, thanx

[Rakuli]

Okay, it works on your computer as load time is much faster.

Try the attached which has a delay before the script tries executing anything.

Cheers,

[miob]

AWESOME !

finallly get it working...

i have idea what about preloading script for banners ?

cuz it takes some time till it gets scrolling.. i need to do it fast as is possible cuz it's ads

tell me pls what number i can test lower...

and is that possible to put ads from left: 0px, not from the end on the right..
thanx

[Rakuli]

Okay, this should do what you want.

Have attached to post.

[miob]

Awesome

http://autobazar.eu/sk/b.html


can i have those ads with padding 3px, i'm not sure where to put that for saving space

once again thanx

[Rakuli]

Put this under the title tag in the html

HTML: Select all

<style type="text/css">

#marquee1 img, #marquee2 img
{
	margin: 3px;
}
</style> 

[miob]

yeah looks better, and please tell me how to add padding after all ads, when is turning next round there is no space.

[Rakuli]

Okay that's because there is no padding on the marquee divs themselves

Code: Select all

#marquee1, #marquee2, #marquee1 img, #marquee2 img
{
	margin: 3px;
}

[miob]

that last one has not padding...

http://autobazar.eu/sk/b.html

[Rakuli]

try

[code]
<style type="text/css">

.banner
{
margin: 3px;
}
</style>

[miob]

YES, AWESOME,

thank you very much again