khaki
03-05-2003, 11:34 AM
Hi guys ! ...
I hate to do this... but I'm gonna do this:
I have 2 seperate cross-browser scripts.
#1 is a Javascript Dropdown Menu that I lifted (and have used a lot) from JavascriptSource.com.
I understand it enough to modify it for my needs, but I can not, do not, and will not make claims to understanding the bulk of it.
It works fine though (and aside from being a Javascript dependent menu), I love it (it's my baby. Adopted, of course. lol).
#2 is a Javascript Slide Show that I lifted (note the pattern forming here. lol) from DynamicDrive.com.
I am able to modify it and it works fine (just please don't hold me accountable for the images that it's displaying. I think everyone knows that I have a bit more of an edge than that. wink).
The problem is.....
When both are used together on the same page... the Menu does not work (appear) in IE only (can you believe that?! It works great in Netscape of all things, but not IE!!!! unfknblvbl).
Now... I have (really) gone through both of these scripts searching for conflicting variable names or whatever... but I can't find anything (and the sad truth is... I don't even know what the heck I'm looking for really).
And unfortunately I can only do basic Javascripts myself (nothing of the scale of these 2 scripts, that's for sure).
So I was wondering if one of you resident geniuses could help me to understand the problem here.
(aside from my propensity for lifting other people's scripts and expecting them to work when they break, that is. I'm fully aware of my crimes, so please don't lecture me. I am trying to learn as i go. Really!).
Well here is the page.
I made all of the links absolute, so this will work as is (although I will provide the JS files as well, if requested. I'm not looking to make this any harder for anyone who is willing to help me with this - so please just let me know). Also, everything is default... I did not modify anything in any of the code (except the absolute references):
PLEASE PLEASE PLEASE PLEASE PLEASE help me understand why these scripts won't work together in IE.
T h a n k y o u !
2 "tired" eyes and a very unconvincing smile right now..
k
----------------------------------------------------------------------------------
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta name="Content-Script-Type" content="text/javascript">
<TITLE></TITLE>
</HEAD>
<BODY>
<script type='text/javascript' src='http://javascript.internet.com/navigation/nwrmenu_var.js'></script>
<script type='text/javascript' src='http://javascript.internet.com/navigation/menu_com.js'></script>
<script language="javascript">
var slideshow_width=140
var slideshow_height=225
var pause=3000
var fadeimages=new Array()
fadeimages[0]="http://www.dynamicdrive.com/dynamicindex14/photo1.jpg"
fadeimages[1]="http://www.dynamicdrive.com/dynamicindex14/photo2.jpg"
fadeimages[2]="http://www.dynamicdrive.com/dynamicindex14/photo3.jpg"
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
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+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.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("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
</BODY>
</HTML>
I hate to do this... but I'm gonna do this:
I have 2 seperate cross-browser scripts.
#1 is a Javascript Dropdown Menu that I lifted (and have used a lot) from JavascriptSource.com.
I understand it enough to modify it for my needs, but I can not, do not, and will not make claims to understanding the bulk of it.
It works fine though (and aside from being a Javascript dependent menu), I love it (it's my baby. Adopted, of course. lol).
#2 is a Javascript Slide Show that I lifted (note the pattern forming here. lol) from DynamicDrive.com.
I am able to modify it and it works fine (just please don't hold me accountable for the images that it's displaying. I think everyone knows that I have a bit more of an edge than that. wink).
The problem is.....
When both are used together on the same page... the Menu does not work (appear) in IE only (can you believe that?! It works great in Netscape of all things, but not IE!!!! unfknblvbl).
Now... I have (really) gone through both of these scripts searching for conflicting variable names or whatever... but I can't find anything (and the sad truth is... I don't even know what the heck I'm looking for really).
And unfortunately I can only do basic Javascripts myself (nothing of the scale of these 2 scripts, that's for sure).
So I was wondering if one of you resident geniuses could help me to understand the problem here.
(aside from my propensity for lifting other people's scripts and expecting them to work when they break, that is. I'm fully aware of my crimes, so please don't lecture me. I am trying to learn as i go. Really!).
Well here is the page.
I made all of the links absolute, so this will work as is (although I will provide the JS files as well, if requested. I'm not looking to make this any harder for anyone who is willing to help me with this - so please just let me know). Also, everything is default... I did not modify anything in any of the code (except the absolute references):
PLEASE PLEASE PLEASE PLEASE PLEASE help me understand why these scripts won't work together in IE.
T h a n k y o u !
2 "tired" eyes and a very unconvincing smile right now..
k
----------------------------------------------------------------------------------
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta name="Content-Script-Type" content="text/javascript">
<TITLE></TITLE>
</HEAD>
<BODY>
<script type='text/javascript' src='http://javascript.internet.com/navigation/nwrmenu_var.js'></script>
<script type='text/javascript' src='http://javascript.internet.com/navigation/menu_com.js'></script>
<script language="javascript">
var slideshow_width=140
var slideshow_height=225
var pause=3000
var fadeimages=new Array()
fadeimages[0]="http://www.dynamicdrive.com/dynamicindex14/photo1.jpg"
fadeimages[1]="http://www.dynamicdrive.com/dynamicindex14/photo2.jpg"
fadeimages[2]="http://www.dynamicdrive.com/dynamicindex14/photo3.jpg"
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
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+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.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("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
</BODY>
</HTML>