CCFD1Bill
asked on
JavaScript Conflict
Have two scripts on a webpage...one that changes the header image depending on the time of day and the other is a slideshow of several images. They work fine on different pages but the "time of day" script does not work (but the slideshow does) when on the same page. Any suggestions to get them working together on the same page?
Here are the scripts....
HEAD---------->
//SCRIPT ONE - Time Of Day
<script type="text/javascript">
function onInit()
{
var date = new Date();
var time = date.getHours();
//image for dawn
if (time >= 6 && time < 10 ){
document.getElementById("p icture").s rc = "http://www.domain.com/images/dawn.jpg";
}
//image for dusk
else if (time >= 18 && time < 22 ){
document.getElementById("p icture").s rc = "http://www.domain.com/images/dusk.jpg";
}
//image for night
else if (time >= 22 || time < 6){
document.getElementById("p icture").s rc = "http://www.domain.com/images/night.jpg";
}
//image for day
else {
document.getElementById("p icture").s rc = "http://www.domain.com/images/day.jpg";
}
}
</script>
========================== ===
BODY---------->
//SCRIPT ONE - Time Of Day
<body onload='onInit()'>
<td colspan="2"><img src="http://www.domain.com/images/day.jpg" width="700" height="100" border="0" id="picture" class="picture"/></td>
//SCRIPT TWO - Slideshow
<script language="" type="text/javascript">
/************************* ********** ********** **
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
************************** ********** ********** */
var slideshow_width='500px' //SET IMAGE WIDTH
var slideshow_height='100px' //SET IMAGE HEIGHT
var pause=6000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["images/mai n01.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/mai n02.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/mai n03.jpg", "", ""] //plain image syntax
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p ++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fad eimages[p] [0]
}
var ie4=document.all
var dom=document.getElementByI d
if (ie4||dom)
document.write('<div style="position:relative;w idth:'+sli deshow_wid th+';heigh t:'+slides how_height +';overflo w:hidden"> <div id="canvas0" style="position:absolute;w idth:'+sli deshow_wid th+';heigh t:'+slides how_height +';top:0;l eft:0;filt er:alpha(o pacity=10) ;-moz-opac ity:10"></ div><div id="canvas1" style="position:absolute;w idth:'+sli deshow_wid th+';heigh t:'+slides how_height +';top:0;l eft:0;filt er:alpha(o pacity=10) ;-moz-opac ity:10;vis ibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][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.opac ity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=c urpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="ca nvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextc anvas) : document.getElementById(ne xtcanvas)
tempobj.innerHTML=insertim age(nextim ageindex)
nextimageindex=(nextimagei ndex<fadei mages.leng th-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextc anvas) : document.getElementById(ne xtcanvas)
tempobj2.style.visibility= "hidden"
setTimeout("rotateimage()" ,pause)
}
}
function insertimage(e){
var tempcontainer=fadeimages[e ][1]!=""? '<a href="'+fadeimages[e][1]+' " target="'+fadeimages[e][2] +'">' : ""
tempcontainer+='<img src="'+fadeimages[e][0]+'" border="0">'
tempcontainer=fadeimages[e ][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curca nvas) : document.getElementById(cu rcanvas)
crossobj.style.zIndex++
tempobj.style.visibility=" visible"
var temp='setInterval("fadepic ()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="can vas0")? "canvas1" : "canvas0"
}
else
document.images.defaultsli de.src=fad eimages[cu rimageinde x][0]
curimageindex=(curimageind ex<fadeima ges.length -1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(wh at)
if (crossobj.filters)
crossobj.filters.alpha.opa city=curpo s
else if (crossobj.style.MozOpacity )
crossobj.style.MozOpacity= curpos/101
}
function startit(){
var crossobj=ie4? eval("document.all."+curca nvas) : document.getElementById(cu rcanvas)
crossobj.innerHTML=inserti mage(curim ageindex)
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage() ",pause)
</script>
Here are the scripts....
HEAD---------->
//SCRIPT ONE - Time Of Day
<script type="text/javascript">
function onInit()
{
var date = new Date();
var time = date.getHours();
//image for dawn
if (time >= 6 && time < 10 ){
document.getElementById("p
}
//image for dusk
else if (time >= 18 && time < 22 ){
document.getElementById("p
}
//image for night
else if (time >= 22 || time < 6){
document.getElementById("p
}
//image for day
else {
document.getElementById("p
}
}
</script>
==========================
BODY---------->
//SCRIPT ONE - Time Of Day
<body onload='onInit()'>
<td colspan="2"><img src="http://www.domain.com/images/day.jpg" width="700" height="100" border="0" id="picture" class="picture"/></td>
//SCRIPT TWO - Slideshow
<script language="" type="text/javascript">
/*************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
**************************
var slideshow_width='500px' //SET IMAGE WIDTH
var slideshow_height='100px' //SET IMAGE HEIGHT
var pause=6000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["images/mai
fadeimages[1]=["images/mai
fadeimages[2]=["images/mai
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p
preloadedimages[p]=new Image()
preloadedimages[p].src=fad
}
var ie4=document.all
var dom=document.getElementByI
if (ie4||dom)
document.write('<div style="position:relative;w
else
document.write('<img name="defaultslide" src="'+fadeimages[0][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.opac
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=c
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="ca
tempobj=ie4? eval("document.all."+nextc
tempobj.innerHTML=insertim
nextimageindex=(nextimagei
var tempobj2=ie4? eval("document.all."+nextc
tempobj2.style.visibility=
setTimeout("rotateimage()"
}
}
function insertimage(e){
var tempcontainer=fadeimages[e
tempcontainer+='<img src="'+fadeimages[e][0]+'"
tempcontainer=fadeimages[e
return tempcontainer
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curca
crossobj.style.zIndex++
tempobj.style.visibility="
var temp='setInterval("fadepic
dropslide=eval(temp)
curcanvas=(curcanvas=="can
}
else
document.images.defaultsli
curimageindex=(curimageind
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what)
if (crossobj.filters)
crossobj.filters.alpha.opa
else if (crossobj.style.MozOpacity
crossobj.style.MozOpacity=
}
function startit(){
var crossobj=ie4? eval("document.all."+curca
crossobj.innerHTML=inserti
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()
</script>
ASKER
Changed function onInit() to...
function startit(){
var crossobj=ie4? eval("document.all."+curca nvas) : document.getElementById(cu rcanvas)
crossobj.innerHTML=inserti mage(curim ageindex)
rotateimage()
onInit();
}
and changed <body onload='onInit()'> to <body>
Is that correct? The slideshow script still works but the time-of-day script does not...even when it is on its own page.
function startit(){
var crossobj=ie4? eval("document.all."+curca
crossobj.innerHTML=inserti
rotateimage()
onInit();
}
and changed <body onload='onInit()'> to <body>
Is that correct? The slideshow script still works but the time-of-day script does not...even when it is on its own page.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Here is what I have now- although the time-of-day script is still not working.
HEAD---------->
//SCRIPT ONE - Time Of Day
<script type="text/javascript">
function onInit()
{
var date = new Date();
var time = date.getHours();
//image for dawn
if (time >= 6 && time < 10 ){
document.getElementById("p icture").s rc = "http://www.domain.com/images/dawn.jpg";
}
//image for dusk
else if (time >= 18 && time < 22 ){
document.getElementById("p icture").s rc = "http://www.domain.com/images/dusk.jpg";
}
//image for night
else if (time >= 22 || time < 6){
document.getElementById("p icture").s rc = "http://www.domain.com/images/night.jpg";
}
//image for day
else {
document.getElementById("p icture").s rc = "http://www.domain.com/images/day.jpg";
}
}
</script>
========================== ===
BODY---------->
//SCRIPT ONE - Time Of Day
<body>
<td colspan="2"><img src="http://www.domain.com/images/day.jpg" width="700" height="100" border="0" id="picture" class="picture"/></td>
//SCRIPT TWO - Slideshow
<script language="" type="text/javascript">
/************************* ********** ********** **
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
************************** ********** ********** */
var slideshow_width='500px' //SET IMAGE WIDTH
var slideshow_height='100px' //SET IMAGE HEIGHT
var pause=6000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["images/mai n01.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/mai n02.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/mai n03.jpg", "", ""] //plain image syntax
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p ++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fad eimages[p] [0]
}
var ie4=document.all
var dom=document.getElementByI d
if (ie4||dom)
document.write('<div style="position:relative;w idth:'+sli deshow_wid th+';heigh t:'+slides how_height +';overflo w:hidden"> <div id="canvas0" style="position:absolute;w idth:'+sli deshow_wid th+';heigh t:'+slides how_height +';top:0;l eft:0;filt er:alpha(o pacity=10) ;-moz-opac ity:10"></ div><div id="canvas1" style="position:absolute;w idth:'+sli deshow_wid th+';heigh t:'+slides how_height +';top:0;l eft:0;filt er:alpha(o pacity=10) ;-moz-opac ity:10;vis ibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][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.opac ity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=c urpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="ca nvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextc anvas) : document.getElementById(ne xtcanvas)
tempobj.innerHTML=insertim age(nextim ageindex)
nextimageindex=(nextimagei ndex<fadei mages.leng th-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextc anvas) : document.getElementById(ne xtcanvas)
tempobj2.style.visibility= "hidden"
setTimeout("rotateimage()" ,pause)
}
}
function insertimage(e){
var tempcontainer=fadeimages[e ][1]!=""? '<a href="'+fadeimages[e][1]+' " target="'+fadeimages[e][2] +'">' : ""
tempcontainer+='<img src="'+fadeimages[e][0]+'" border="0">'
tempcontainer=fadeimages[e ][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curca nvas) : document.getElementById(cu rcanvas)
crossobj.style.zIndex++
tempobj.style.visibility=" visible"
var temp='setInterval("fadepic ()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="can vas0")? "canvas1" : "canvas0"
}
else
document.images.defaultsli de.src=fad eimages[cu rimageinde x][0]
curimageindex=(curimageind ex<fadeima ges.length -1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(wh at)
if (crossobj.filters)
crossobj.filters.alpha.opa city=curpo s
else if (crossobj.style.MozOpacity )
crossobj.style.MozOpacity= curpos/101
}
function startit(){
var crossobj=ie4? eval("document.all."+curca nvas) : document.getElementById(cu rcanvas)
crossobj.innerHTML=inserti mage(curim ageindex)
rotateimage()
onInit();
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage() ",pause)
</script>
HEAD---------->
//SCRIPT ONE - Time Of Day
<script type="text/javascript">
function onInit()
{
var date = new Date();
var time = date.getHours();
//image for dawn
if (time >= 6 && time < 10 ){
document.getElementById("p
}
//image for dusk
else if (time >= 18 && time < 22 ){
document.getElementById("p
}
//image for night
else if (time >= 22 || time < 6){
document.getElementById("p
}
//image for day
else {
document.getElementById("p
}
}
</script>
==========================
BODY---------->
//SCRIPT ONE - Time Of Day
<body>
<td colspan="2"><img src="http://www.domain.com/images/day.jpg" width="700" height="100" border="0" id="picture" class="picture"/></td>
//SCRIPT TWO - Slideshow
<script language="" type="text/javascript">
/*************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
**************************
var slideshow_width='500px' //SET IMAGE WIDTH
var slideshow_height='100px' //SET IMAGE HEIGHT
var pause=6000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["images/mai
fadeimages[1]=["images/mai
fadeimages[2]=["images/mai
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p
preloadedimages[p]=new Image()
preloadedimages[p].src=fad
}
var ie4=document.all
var dom=document.getElementByI
if (ie4||dom)
document.write('<div style="position:relative;w
else
document.write('<img name="defaultslide" src="'+fadeimages[0][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.opac
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=c
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="ca
tempobj=ie4? eval("document.all."+nextc
tempobj.innerHTML=insertim
nextimageindex=(nextimagei
var tempobj2=ie4? eval("document.all."+nextc
tempobj2.style.visibility=
setTimeout("rotateimage()"
}
}
function insertimage(e){
var tempcontainer=fadeimages[e
tempcontainer+='<img src="'+fadeimages[e][0]+'"
tempcontainer=fadeimages[e
return tempcontainer
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curca
crossobj.style.zIndex++
tempobj.style.visibility="
var temp='setInterval("fadepic
dropslide=eval(temp)
curcanvas=(curcanvas=="can
}
else
document.images.defaultsli
curimageindex=(curimageind
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what)
if (crossobj.filters)
crossobj.filters.alpha.opa
else if (crossobj.style.MozOpacity
crossobj.style.MozOpacity=
}
function startit(){
var crossobj=ie4? eval("document.all."+curca
crossobj.innerHTML=inserti
rotateimage()
onInit();
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Problem solved.
Change <body onload='onInit()'> to <body>
and modify startit() as:
function startit(){
var crossobj=ie4? eval("document.all."+curca
crossobj.innerHTML=inserti
rotateimage()
onInit();
}