PDA

View Full Version : Two scripts on same page

esm
08-01-2003, 08:37 PM
Hi Y'all,

I am trying to run these two scripts on the same page. It works in Opera but not in IE 6. Can someone help?

Thanks,

Ed
<!doctype html public "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="description" content=""></meta>
<meta name="keywords" content=""></meta>
<meta name="classification" content=""></meta>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252"></meta>
<SCRIPT LANGUAGE="JavaScript1.2">
var l1 = 400; // left of ticker in pixel, or 0 to position relative
var t1 = 102; // top of ticker in pixel, or 0 to position relative
var w1 = 600; // width of ticker in pixel
var ie = document.all ? true : false;
var first = true;
var l2 = l1 + w1;
var l3 = l1 - l2;
var l = l2;
function tickinit() {
if (ie) {
if (l1 == 0 && t1 == 0) {
pos = document.all['tickpos'];
l1 = getLeft(pos);
t1 = getTop(pos);
}
ticktext.style.posTop = t1;
}
else {
if (l1 == 0 && t1 == 0) {
pos = document.anchors['tickpos'];
l1 = pos.x;
t1 = pos.y;
}
document.ticktext.pageY = t1;
}
l2 = l1 + w1;
l3 = l1 - l2;
l = l2;
setInterval('tick()', 10);
}
function getLeft(ll) {
if (ll.offsetParent)
return (ll.offsetLeft + getLeft(ll.offsetParent));
else
return (ll.offsetLeft);
}
function getTop(ll) {
if (ll.offsetParent)
return (ll.offsetTop + getTop(ll.offsetParent));
else
return (ll.offsetTop);
}
function tick() {
l = l - 1.5;
if (l < l3) l = l2;
cl = l1 - l;
cr = l2 - l;
if (ie) {
ticktext.style.posLeft = l;
ticktext.style.posTop = t1;
ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";
if (first) ticktext.style.visibility = "visible";
}
else {
document.ticktext.pageX = l;
document.ticktext.clip.left = cl;
document.ticktext.clip.right = cr;
if (first) document.ticktext.visibility = "show";
}
first = false;
}
</script>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#ffffff" OnLoad="tickinit()">
<br /><br /><br /><br />
<table border="0" cellspacing="0" cellpadding="0" width="790"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="400"><tr><td align="center" valign="middle">
<script language="JavaScript1.2">

//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use

var slideshow_width='500px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='100px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=20000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="pics/abo.gif"


var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]=""

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
</td></tr></table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0" width="390" height="100"><tr><td>
<a name="tickpos"></a>
<div id="ticktext" style="position:absolute;font-family:arial;font-size:14pt;visibility:hidden;">
<nobr><font face="Arial,Verdana,Tahoma,Helvetica" size="6" color="#ff3000">A</font><font face="Arial,Verdana,Tahoma,Helvetica"size="5" color="#000000">Text</font>&nbsp;&nbsp;&nbsp;<img src="pics/bigblackdot.gif" name="" alt="" border="0" />&nbsp;&nbsp;
<font face="Arial,Verdana,Tahoma,Helvetica" size="6" color="#ff3000">B</font><font face="Arial,Verdana,Tahoma,Helvetica"size="5" color="#000000">Text</font>&nbsp;&nbsp;&nbsp;<img src="pics/bigblackdot.gif" name="" alt="" border="0" />&nbsp;&nbsp;
<font face="Arial,Verdana,Tahoma,Helvetica" size="6" color="#ff3000">C</font><font face="Arial,Verdana,Tahoma,Helvetica"size="5" color="#000000">Text</font></nobr>
</div>
</td></tr></table>
</td></tr></table>
</body>
</html>
MotherNatrsSon
08-01-2003, 08:41 PM
This should be in the Dynamic Drive forum. Check out these two links.

http://www.javascriptkit.com/javatutors/eventaction4.shtml

http://wsabstract.com/javatutors/multiplejava3.shtml

MNS
esm
08-01-2003, 09:08 PM
I know about those two links, but unfortunately, their explanation didn't help in my case. If you look at the scripts, you'll see that the script that doesn't run in IE is called with "Onload". The one that does run is not even called. And why do both run in Opera?
MotherNatrsSon
08-01-2003, 09:18 PM
One is called in the body tag, the other is still in the script (window.onload=startit) and needs to be put into the body tag as well?

Got a link to the page? I know you posted the code but if it is up I can see it. I can get errors that way also.

MNS

edit:
The other reason may be the doctype at the top of the page. For some reason having a doctype at the top of the page causes scripts to cease to function. I have a couple scripts on my site that I tracked down to the doctype and as long as it is not there the scripts work fine.
MotherNatrsSon
08-01-2003, 09:33 PM
There are syntax errors in this part of the code:

if (ie4||dom)
document.write('<div style=" position:relative;width:'+slideshow_width+';height
:'+slideshow_height+';overflow:hidden"><div id="canvas0" style=" position:absolute;width:'+slideshow_width+';height
:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style=" position:absolute;width:'+slideshow_width+';height
:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="java script:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

see attached file.

MNS
esm
08-01-2003, 09:55 PM
Thanks for the help. I downloaded the attached and it doesn't make any difference. This is the script that runs anyway, it's the other one that doesn't work.

Sorry for the hassle.

Ed
MotherNatrsSon
08-02-2003, 04:48 AM
Originally posted by esm
I know about those two links, but unfortunately, their explanation didn't help in my case. If you look at the scripts, you'll see that the script that doesn't run in IE is called with "Onload". The one that does run is not even called. And why do both run in Opera?

If you know, how come it seems you did not read from this link (http://http://www.javascriptkit.com/javatutors/eventaction4.shtml)

This is so because JavaScript always chooses the last "body onload=...." statement to execute, whether it's defined using the regular HTML syntax, or JavaScript syntax. Good for JavaScript, but in this case, it's NOT what you want! In order for both of the scripts to work on the page, you have to come up with a way to allow both functions to execute when the page loads. The solution? You guessed it! Simply embed both of the functions inside the body tag, separating each with a semicolon, remembering to remove the now useless "window.onload=dothis" line from script 1. So, the result would look like:



<body onload="dothat();dothis()">

So with the syntax corrected and the onload event taken care of they should both work. Right?

MNS
esm
08-02-2003, 05:18 PM
I tried that and it didn't work at first. I only deleted the useless windowonload line and got a syntax error. Then I deleted the entire "if" routine and it worked.

Thanks a lot for your patience. I am new to this stuff and I have a lot to learn, I know that.

Now, if I could figure out how to stop the text scroll on the right after the first scroll. :-)

Cheers,

Ed