SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript is interfering with other javascript

    ON this page, http://www.btkdesigns.com/newbtk/gallery.htm . I have javascript that is for styleswitcher.js so I can obviously change the styles on my page. Well, if you were to click on another link, then change the style, then go back to the gallery page (found on the portfolio page), the styles don't stay the same because of some other javascript on the page (I think). The other javascript is for rollovers, and some tool tips, plus some scrolling layers. So the first half of my page is pretty full.

    If I move the javascript for styleswitcher to the end of the head, then in OPERA and IE, it is read fine and works, so the styles switch over, even on the gallery page. In Mozilla and Firebird, the page doesn't even get recognized and you get a page that is stripped of everything that isn't a link or text.

    So I can't figure out what to do.

    Any help.

    Thanks
    Bryan

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (1) There are html comment tags in main.js - no html is allowed in a .js file - check the other .js files.

    (2) window.onload is assigned a handler in styleswitcher.js, but it is also assigned in the attribute of the Body element. There are several options but... if styleswitcher.js is included on every page, then try something like this:

    This is in styleswitcher.js:
    Code:
    window.onload = function(e) {
      var cookie = readCookie("style");
      var title = cookie ? cookie : getPreferredStyleSheet();
      setActiveStyleSheet(title);
      // i added this:
      if (window.myOnload) window.myOnload();
    }
    Now in the html file don't assign anything to the onload attribute of the Body element, but provide this:
    Code:
    function myOnload() {
      // everything that was assigned to the
      // onload attribute of the Body element now goes in here
    }

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the response, didn't know if anyone was going to take a shot at it.

    Do you think you could elaborate a little more on that last section of code. I am very new to javascript and I am good at cut and pasting, not doing actual code.

    So would it be something like this
    Code:
    <body function myOnload() { onload="P7_Snap('theshim2','showcontent',0,0);MM_preloadImages('imageicons/3dimage.gif','imageicons/candylandsmall.jpg',
    'imageicons/justin.gif','imageicons/nincover2.jpg','imageicons/nincover.gif',
    'imageicons/smallfire.jpg','imageicons/smallsphere.jpg');P7_Snap('theshim','gallerycontain',-5,0);P7_Snap('gallerycontain','controls',100,80)" onresize="P7_Snap('theshim','gallerycontain',-5,0);P7_Snap('gallerycontain','controls',100,80);P7_ReDoIt()">
    } 




    Now, the other javascript functions are for TIPS and scrolling layers. How will they know what .myonload is? This is where it is confusing.

    Thanks for being patient.

    Bryan

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took the onload string from Body and separated the function calls into the myOnload function (you can name it whatever you want). I left the onresize assignment in Body.
    Code:
    <html>
    <head>
    <script type='text/javascript'>
    function myOnload()
    {
      P7_Snap('theshim2','showcontent',0,0);
      MM_preloadImages('icons/3dimage.gif','icons/candylandsmall.jpg','icons/justin.gif','icons/nincover2.jpg','icons/nincover.gif','icons/smallfire.jpg','icons/smallsphere.jpg');
      P7_Snap('theshim','gallerycontain',-5,0);
      P7_Snap('gallerycontain','controls',100,80);
    }
    </script>
    </head>
      
    <body onresize="P7_Snap('theshim','gallerycontain',-5,0);P7_Snap('gallerycontain','controls',100,80);P7_ReDoIt()">
    
    </body>
    </html>
    Now, the other javascript functions are for TIPS and scrolling layers. How will they know what .myonload is? This is where it is confusing.
    I agree

    I'll have to look at those files again...

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help.

    With those js files that include html, am I allowed to just remove the html?

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't find any html files within those javascript files. I looked, but couldn't find any

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are html comment tags at the beginning and end of the main.js file:
    Code:
    <!--
    
    code here...
    
    //-->
    They may not be causing a problem but I would remove those two lines.

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wrong about leaving the onresize assignment in Body because it is also assigned in main.js. Again, there are several different ways to do this - this is just one suggestion...
    Code:
    <html>
    <head>
    *** include all css files here ***
    <script type="text/javascript" src="styleswitcher.js"></script>
    <script type="text/javascript" src="main.js"></script> 
    <script type="text/javascript" src="style.js"></script> <!-- this was in the body, remove it from there and put it here -->
    <script type="text/javascript" src="myPage.js"></script> <!-- all the code in the following Script element could be removed and put into this file -->
    <script type='text/javascript'>
    function myOnload()
    {
      P7_Snap('theshim2','showcontent',0,0);
      MM_preloadImages('icons/3dimage.gif','icons/candylandsmall.jpg','icons/justin.gif','icons/nincover2.jpg','icons/nincover.gif','icons/smallfire.jpg','icons/smallsphere.jpg');
      P7_Snap('theshim','gallerycontain',-5,0);
      P7_Snap('gallerycontain','controls',100,80);
    }
    window.onresize = function()
    {
      ReloadTip();
      P7_Snap('theshim','gallerycontain',-5,0);
      P7_Snap('gallerycontain','controls',100,80);
      P7_ReDoIt();
    }
    // put all MM and P7 functions here
    </script>
    </head>
    
    <body>
    
    </body>
    </html>
    Now because we are calling ReloadTip from our own resize handler, we must comment-out the onresize assignment in main.js...
    Code:
    if(sNav) {
      //*** window.onresize = ReloadTip;
      document.onmousemove = MoveTip;
      if (nn4) document.captureEvents(Event.MOUSEMOVE);
    }
    The MM code is also trying to grap the onresize event! So let's comment-out that call (in the html file)...
    Code:
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    //*** MM_reloadPage(true);


Bookmarks

Posting Permissions

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