Multiple scripts

katiekat · Jul 8, 2002

Hell-o there,

I have recently dipped my toes in the javascript universe, and I know almost nothing. If the answer to my question can be more easily solved by further learning on my part, just say so.

I have two scripts that I would like to run on the same page. One is a navbar which calls an outside script and resides in the <head></head> tags. The other is a self contained slide show that needs code placement only within the <body></body> tags. Both work seperately, but when I place them on the same page, the navbar refuses to display.

Is there something I need to know about making scripts happy with eachother? Also, if someone could recommend a spot or two where I can go to learn more about the nature of javascript and it's cousins in programming, that would be great.

Thank you!!

Kate Holy tek-tips batman!:-0

trollacious · Jul 8, 2002

You probably have a variable name the same in both scripts, and one is messing up the other that way. One piece of advice I give is to stay away from using i as a counter, and use something more descriptive of what you're counting. speed is another variable name notorious for breaking otherwise perfectly good scripts when combined with other scripts. If you show your code, it'd be easier to evaluate it for bugs.

GUJUm0deL · Jul 8, 2002

Both scripts probably have an onload event...you can fix the problem easily by doing this: <body onload="menu(); return slideshow();">
What you are doing here is calling both scripts via the onload even handler...since I do not know what functions yor script has, I called the menu script with the menu() function, and called the slideshow script with the slideshow() function...
Like all programmers, its always a good idea to have a backup of your work... I have not failed; I merely found 100,000 different ways of not succeding...

katiekat · Jul 8, 2002

Here's the slideshow script, I didn't write it, obviously.

This one doesn't have any onload="whatev()" command that I could figure out.

Code:

<script language=&quot;JavaScript1.2&quot;>

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit [URL unfurl="true"]http://www.dynamicdrive.com[/URL]
//This credit MUST stay intact for use

var slideshow_width=300 //SET IMAGE WIDTH
var slideshow_height=202 //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=&quot;index/1.jpg&quot;
fadeimages[1]=&quot;index/2.jpg&quot;
fadeimages[2]=&quot;index/4.jpg&quot;
fadeimages[3]=&quot;index/5.jpg&quot;
fadeimages[4]=&quot;index/6.jpg&quot;

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

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(&quot;Opera&quot;)==-1
var dom=document.getElementById&&navigator.userAgent.indexOf(&quot;Opera&quot;)==-1

if (ie4||dom)
document.write('<div style=&quot;position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden&quot;><div  id=&quot;canvas0&quot; style=&quot;position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10&quot;></div><div id=&quot;canvas1&quot; style=&quot;position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10&quot;></div></div>')
else
document.write('<img name=&quot;defaultslide&quot; src=&quot;'+fadeimages[0]+'&quot;>')

var curpos=10
var degree=10
var curcanvas=&quot;canvas0&quot;
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==&quot;canvas0&quot;)? &quot;canvas0&quot; : &quot;canvas1&quot;
tempobj=ie4? eval(&quot;document.all.&quot;+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src=&quot;'+fadeimages[nextimageindex]+'&quot;>'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout(&quot;rotateimage()&quot;,pause)
}
}

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

function resetit(what){
curpos=10
var crossobj=ie4? eval(&quot;document.all.&quot;+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(&quot;document.all.&quot;+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src=&quot;'+fadeimages[curimageindex]+'&quot;>'
rotateimage()
}

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

</script>

Here's the navbar script that lives in the <head>, minus the formatting lines. This one uses <body onload="init()">.

Code:

<script language=&quot;JavaScript&quot; src=&quot;navcond.js&quot;></script>
<script language=&quot;JavaScript&quot;>
/*
Top Navigational Bar II (By Mike Hall)
Last updated: 00/05/08
Permission granted and modified by Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit [URL unfurl="true"]http://dynamicdrive.com[/URL]
*/
var myNavBar1 = new NavBar(0);
var dhtmlMenu;
//define menu items (first parameter of NavBarMenu specifies main category width, second specifies sub category width in pixels)
//add more menus simply by adding more &quot;blocks&quot; of same code below

dhtmlMenu = new NavBarMenu(140,190);
dhtmlMenu.addItem(new NavBarMenuItem(&quot;Home&quot;, &quot;index.html&quot;));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(140, 190);
dhtmlMenu.addItem(new NavBarMenuItem(&quot;Services&quot;, &quot;[URL unfurl="true"]http://www.nefco.net/aboutus.html&quot;));[/URL]
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(140, 190);
dhtmlMenu.addItem(new NavBarMenuItem(&quot;Analysts&quot;, &quot;[URL unfurl="true"]http://www.nefco.net/analysts&quot;));[/URL]
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(140, 190);
dhtmlMenu.addItem(new NavBarMenuItem(&quot;Contact Us&quot;, &quot;[URL unfurl="true"]http://www.nefco.net/contact.html&quot;));[/URL]
myNavBar1.addMenu(dhtmlMenu);

var fullWidth;

function init() {

  // Get width of window, need to account for scrollbar width in Netscape.

  fullWidth = getWindowWidth() 
    - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

  myNavBar1.resize(780);
  myNavBar1.create();
  myNavBar1.setzIndex(2);
  //UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
  myNavBar1.moveTo(0, 200);
  //myNavBar1.moveTo(0, 50);
}
</script>

And that's that. I couldn't find any obvious overlaps in varible names, but I'm thinking maybe some sort of issues with browser compatibility? Or both of them asking for browser identification?

I thank you very much for any help you can give me!!

k Holy tek-tips batman!:-0

trollacious · Jul 8, 2002

You have both:

window.onload=startit

and

<body onload="init()">

which is what GUJUmOdel was refering to, and will cause problems like you're having.

katiekat · Jul 8, 2002

So if I remove the window.onload and include it in the <body onload> event, will that solve the problem? Somehow, I think it couldn't be that easy. Holy tek-tips batman!:-0

katiekat · Jul 8, 2002

no, it won't that's a dumb question. What <i>can</i> I do though? Holy tek-tips batman!:-0

trollacious · Jul 8, 2002

Add this function to the top

function loadit()
{
if (ie4||dom) startit;
else setInterval("rotateimage()",pause);

init();
}

and change to this:

<body onload="loadit()">

GUJUm0deL · Jul 8, 2002

OK, I got here slightly too late, but looks like trollacious has it solved...
Good job... I have not failed; I merely found 100,000 different ways of not succeding...

katiekat · Jul 8, 2002

I eliminated this:

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

and used GUJUm0deL solution and put this:

<body onload="init(); return startit();">

This fixed the problem. Is there something doing with that if/else statement that is crutial? Or is canning it alright?

Thank you very very much! Holy tek-tips batman!:-0

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Multiple scripts

katiekat

Technical User

trollacious

Programmer

GUJUm0deL

Programmer

katiekat

Technical User

trollacious

Programmer

katiekat

Technical User

katiekat

Technical User

trollacious

Programmer

GUJUm0deL

Programmer

katiekat

Technical User

Similar threads

Part and Inventory Search

Sponsor