running multiple javascripts

[chuco61]

I have a simple webpage that where i am using one javascript to control the rollover buttons, another to control a expandable and collapsible sub menu and i would like to use a third which would allow a contact button to stay at the top right hand corner of the site no matter the scrolling, it will float and follow.

initially, the first two scripts were canceling each other out, so i added an onLoad-function1(); function2() (or something to that affect) to the body tag, but now my code will not validate.

any suggestions on making all three of these work at the same time?

they are externally being called in to the index.

thanks, and im new to the forum, great to be here.

[Costin Trifan]

Welcome to v7n, Chuco!

To solve your problem and validate your page, add the following script into the head tag of your page:

window.onload = function() {
      // Call every function you need here.

     // control the rollover buttons:
     rolloverButtons();

     // expand collapse the submenu
     expandCollapse();

     //  contact button
     contactButton();
};

Of course, you have to rename those functions with your own functions' names.

[Boogle]

Ah cost you didn't let me use your wisdom to explain it did you- too fast!

[Costin Trifan]

hehe!!

[chuco61]

so i just paste in the appropriate javascript?

am i supposed to leave the () in after the vode?

thanks alot!!!

[Costin Trifan]

Yes. All you have to do is to replace:

rolloverButtons();

expandCollapse();

contactButton();

with your own functions names. And yes, you must leave the brackets in place. They mean something like : execute the function which name is in front of me. ok?

[chuco61]

GREAT! thanks so much.

so to clarify the function name is the name of the javascript like script1.js or is there another way to name these within the .js code to be called in the html?

sorry i dont know too much about javascript, i only know how to tweak them. much appreciated.

[chuco61]

so to clarify the function name is the name of the javascript like script1.js or is there another way to name these within the .js code to be called into the html?

[Costin Trifan]

<script src="myScript.js" type="text/javascript"></script>

<script id="WindowLoad" type="text/javascript">

// The following three functions can either be hard-coded in your page
// or in the myScript.js file.

function function1() {
    // code here something
}
function function2() {
    // code here something
}
function function3() {
    // code here something
}


window.onload = function() {
    function1(); // execute function 1.
    function2(); // execute function 2.
    function3(); // execute function 3.
};

</script>

hth.

[chuco61]

so this is what i have at the head of my html:
<script src="scripts/myScript.js" type="text/javascript"></script>

(i have nothing else at the head aside from a css call.)

This is what i have in my external javascript doc:

// JavaScript Document
<script id="WindowLoad" type="text/javascript">

// The following three functions can either be hard-coded in your page
// or in the myScript.js file.

function function1() {
function MM_swapImgRestore() { //v3.0
var u,x,w=document.MM_sr; for(u=0;w&&u<w.length&&(x=w[u])&&x.oSrc;u++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var u,j=d.MM_p.length,w=MM_preloadImages.arguments; for(u=0; u<w.length; u++)
if (w[u].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=w[u];}}
}

function MM_findObj(n, d) { //v4.01
var p,u,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (u=0;!x&&u<d.forms.length;u++) x=d.forms[u][n];
for(u=0;!x&&d.layers&&u<d.layers.length;u++) x=MM_findObj(n,d.layers[u].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var u,j=0,x,w=MM_swapImage.arguments; document.MM_sr=new Array; for(u=0;u<(w.length-2);u+=3)
if ((x=MM_findObj(w[u]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=w[u+2];}
}
}
function function2() {
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[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;
}
function function3() {
// code here something
}


window.onload = function() {
function1(); // execute function 1.
function2(); // execute function 2.
function3(); // execute function 3.
};

</script>

----------------------------------------------------------
WHAT AM I DOING WRONG???

[chuco61]

anyone?

[nasty.web]

You don't need the script tag in your external document.

[chuco61]

at the top or the bottom or both?

i tried it all three ways and still couldnt get it to work

[Costin Trifan]

He meant that you don't need this : "<script src="scripts/myScript.js" type="text/javascript"></script>" while you have all those functions in the page header.

As about your question:
-- replace the window.onload function with this :

window.onload = function() {
       function1();
       function2();
       initMenu();
};

hth, because I really hate DW's generated code.

[chuco61]

ideally i would like to have it called in externally, so how would my html page look and how would my external javascript page look?

sorry this has become more of a problem than i had anticipated.

thanks so much for everyones help so far!

[Costin Trifan]

the content of the external script file named myScript.js that will be saved in the scripts folder:

function function1() {
function MM_swapImgRestore() { //v3.0
var u,x,w=document.MM_sr; for(u=0;w&&u<w.length&&(x=w[u])&&x.oSrc;u++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var u,j=d.MM_p.length,w=MM_preloadImages.arguments; for(u=0; u<w.length; u++)
if (w[u].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=w[u];}}
}

function MM_findObj(n, d) { //v4.01
var p,u,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (u=0;!x&&u<d.forms.length;u++) x=d.forms[u][n];
for(u=0;!x&&d.layers&&u<d.layers.length;u++) x=MM_findObj(n,d.layers[u].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var u,j=0,x,w=MM_swapImage.arguments; document.MM_sr=new Array; for(u=0;u<(w.length-2);u+=3)
if ((x=MM_findObj(w[u]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=w[u+2];}
}
}
function function2() {
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[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;
}
function function3() {
// code here something
}

And now, add this in the head tag of your HTML page:

<head>
      <script src="scripts/myScript.js" type="text/javascript"></script>

      <script type="text/javascript">

window.onload = function() {
       function1();
       function2();
       initMenu();
};
      </script>
<head>

okay?

[chuco61]

YES! thanks. ill try when i get home.

Thanks a million.

[Costin Trifan]

don't mention it!