Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Two javascripts won't work together on the same page

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    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.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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:
    Code:
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    Last edited by Philip M; 08-16-2008 at 08:45 PM. Reason: Typo


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •