Newbie help

19812401 · Nov 1, 2006

Hi there,
Kinda new to this so any help would be appreciated.
I'm trying to insert a javascript into a web page ( a drop in content box) but i already have a javascript in that page. The issue is that i can't make both scripts work at the same time.
Here's the code for the menu on the page:
<script type="text/javascript" src="expandingMenu.js"></script> located in the <head> of the page. The other script, the drop in content box script has two sections and the first one must be put in the <head> of the page too and the other part in the <body>, beginning like this:
<script language="JavaScript1.2"> and so on. Each of theese scripts work fine one without another, if i combine them only the drop in content box script works, the expandingMenu doesn't. I'm wondering if i made something wrong or i cannot use two separate javascripts in a <head> section of a web page.
Thanks in advance.

cLFlaVA · Nov 1, 2006

could be a few things. maybe you have a function defined twice, or maybe you have two onload events...

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSon · Nov 1, 2006

It's probably the case that both scripts overwrite the "onload" event of the window object without any thought for the other. You'd need to modify any lines that look like this:

Code:

onload = <something here>

or this:

Code:

window.onload = <something here>

to this:

Code:

if (window.addEventListener) {
	window.addEventListener('load', <something here>, false);
} else if (window.attachEvent) {
	window.attachEvent('onload', <something here>);
}

This is a nicer way of attaching things to run onload that honours both.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

19812401 · Nov 1, 2006

Here's how it is, i'll paste only the scripting part:
<script type="text/javascript" src="expandingMenu.js"></script> this is the script for the menu on the webpage and it works fine till i insert the second line which is: <script language="JavaScript1.2">
this stands for the second script, the drop in box for the web page. After this line comes the whole script which is in the <head> section. The second part of the drop in window script comes at the end of the <body> section. I inserted the drop in content box script this way because instructions say to do so. I really can't understand what's wrong. I've got only one onload event.
....
<html>
<head>
<script type="text/javascript" src="expandingMenu.js"></script>
<script language="JavaScript1.2">
and so on.
Thanks again.

cLFlaVA · Nov 1, 2006

first of all, change [tt]language="JavaScript1.2"[/tt] to [tt]type="text/javascript"[/tt].

then, post the code that exists WITHIN expandingMenu.js and between your script tags. It doesn't help us when you say "and so on", because that's where the code is.

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

19812401 · Nov 1, 2006

Here is the expandingMenu.js code:

// ActionScript Document



/* 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.toUpperCase());
}

function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children, filter)) result[result.length] = children;
}
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;
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;
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;

Here is the brop in content box script for the <head> section of the page:
<script language="JavaScript1.2">

// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit
http://www.dynamicdrive.com
// This credit MUST stay intact for use

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
window.onload=initbox
</script>

AND the second part for the <body> section of the page:

<div id="dropin" style="position:absolute;visibility:hidden;left:200px;top:100px;width:500px;height:300px;background-color:#F5F5F5">

<div align="right"><a href="#" onClick="dismissbox();return false">[Close Box] </a></div>

SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML

</div>

Now i saw the two onload events.

cLFlaVA · Nov 1, 2006

first, locate and comment out this line in your separate javascript file:

[tt]if(document.createElement) window.onload = initMenu;[/tt]

in other words, put comment indicators before the line:

[tt][red]// [/red]if(document.createElement) window.onload = initMenu;[/tt]

then, locate this line in your inline script:

[tt]window.onload=initbox[/tt]

change it to this:

[tt]window.onload = function() {
initbox();
if ( document.createElement ) initMenu();
}[/tt]

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

19812401 · Nov 1, 2006

A million thank's

It works fine.
Cheers.

BillyRayPreachersSon · Nov 1, 2006

Or you could have simply followed the instructions I gave in my post...

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

cLFlaVA · Nov 1, 2006

Dan,

why do you consider that a "nicer way" of attaching events?

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSon · Nov 1, 2006

Because you can attach as many as you like without having to run one of the scripts' initialisation events frmo the other (or either of theirs from a neutral location)... Basically, then can both be in their own self-contained files, and never the twain shall meet.

A good technique, IMHO.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

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!

Newbie help

19812401

Technical User

cLFlaVA

Programmer

BillyRayPreachersSon

Programmer

19812401

Technical User

cLFlaVA

Programmer

19812401

Technical User

cLFlaVA

Programmer

19812401

Technical User

BillyRayPreachersSon

Programmer

cLFlaVA

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor