Two javascripts won't work together on the same page

[werxie]

Looked through both .js files and can't find any functions named the same or variables (which I assumed would be the problem). Admittedly though my understanding of javascript is very basic. One script is a scrolling image gallery and the other is an expanding menu script. Whichever script is loaded second works on the site. Code as follows.

Expanding Menu:

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Travis Beckham :: http://www.squidfingers.com ¦ http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
return (filter == null ¦¦ node.nodeType == Node[filter] ¦¦ node.nodeName.toUpperCase() == filter.toUpperCas`e());
}

function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}

function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}

function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}

function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}

if(document.createElement) window.onload = initMenu;

Motion Gallery:

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicdrive.com/forums/s...ad.php?t=11839 by jschuer1 8/5/06
***********************************************/

//1) Set width of the "neutral" area in the center of the gallery.
var restarea=6;
//2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=7;
//3) Set to maximum width for gallery - must be less than the actual length of the image

train.
var maxwidth=500;
//4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=2;
//5) Set message to show at end of gallery. Enter "" to disable message.
var endofgallerymsg='<span style="font-size: 10px;">End</span>';

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as

desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "300px" //set 600px to default

width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default

height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all¦¦document.getElementById, scrollspeed=0, movestate='',

actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement

: document.body;
}

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
var mainobjoffset=getposOffset(crossmain, "left"),
menuheight=parseInt(crossmain.offsetHeight),
mainobjoffsetH=getposOffset(crossmain, "top");
statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
statusdiv.style.top=menuheight+mainobjoffsetH+"px";
}

function showhidediv(what){
if (endofgallerymsg!="") {
positiondiv();
statusdiv.style.visibility=what;
}
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :

totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function moveleft(){
if (loadedyes){
movestate="left";
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
lefttime=setTimeout("moveleft()",10);
}

function moveright(){
if (loadedyes){
movestate="right";
if (iedom&&parseInt(cross_scroll.style.left)<0){
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}

function motionengine(e){
var mainobjoffset=getposOffset(crossmain, "left"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientX : e.clientX? e.clientX: "";
curposy-=mainobjoffset-dsocx;
var leftbound=(menuwidth-restarea)/2;
var rightbound=(menuwidth+restarea)/2;
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(righttime);
if (movestate!="left") moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(lefttime);
if (movestate!="right") moveright();
}
else
scrollspeed=0;
}

function contains_ns6(a, b) {
if (b!==null)
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if (!window.opera¦¦(window.opera&&e.relatedTarget!==null))
if ((window.event&&!crossmain.contains(event.toElement)) ¦¦ (e && e.currentTarget &&

e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
clearTimeout(lefttime);
clearTimeout(righttime);
movestate="";
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") :

document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") :

document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth :

document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
}
window.onload=fillup;

onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

If anyone can help out here I'd much appreciate it

[Philip M]

This question has been asked (and answered) a zillion times in this forum.

See:-

http://www.javascriptkit.com/javatut...iplejava.shtml


"A single parent would only be able to claim benefits for two years, and after those two years
they would be literally pushed over the cliff." Political commentator.

[VIPStephan]

I’ll have to oppose to the JSkit article, though. It’s not advisable to use the inline onload event, you should always do this in an external file.

A solution could be to either use a separate JS file where you bundle all the script executions in one load event like:

window.onload= function() {
    fillup();
    initMenu();
}

or to use addLoadEvent where you replace all window.onload occurrences with that function.

The important part is that unobtrusive JavaScript has got to be the only thing to use, and <body onload=""> is not unobtrusive.

[Philip M]

Originally Posted by VIPStephan

I’ll have to oppose to the JSkit article, though. It’s not advisable to use the inline onload event, you should always do this in an external file.

The important part is that unobtrusive JavaScript has got to be the only thing to use, and <body onload=""> is not unobtrusive.

You are entirely and completely right, separating markup, style and functionality is the way to go! But werxie is a newcomer to the forum and says that his understanding of Javascript is very basic. That means that he needs assistance appropriate to his level. Graduate level answers to basis-school students' questions are unlikely to be fully understood or appreciated.