Java Script Error in HTML Page

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • imtmub
    New Member
    • Nov 2006
    • 112

    Java Script Error in HTML Page

    I have a page, Head tag Contains many Scripts and style sheet for Menu and Page. This code working fine and displaying menus and page as i wanted.

    Check this page for reference.


    --------------------------------------------------------------
    Code:
    <head>
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Marco</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <link href="../../web-content-Backup/extra.css" rel="stylesheet" type="text/css">
    <!-- InstanceEndEditable -->
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
    <script type="text/javascript" src="js/marco.js"></script>
    <link href="extra.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="marco.css"/>
    <script type="text/javascript">
    <!--
    function openMenu(a){
    	var td = $(a).parents("td")[0];
    	var menus = ["menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8"];
    	var myName = $(td).id();
    	for(var i=0;i<menus.length;i++)
    		if(menus[i] != myName)
    			hideMenu($("#" + menus[i]));
    	toggleMenu(td);
    }
    // -->
    </script></head>
    -------------------------------------------------------
    But if i include another set of java scripts for image popup My right side menu is not displaying.
    Here is my full page code including image popup javascript(ligh tbox.js).

    [HTML]<html><!-- InstanceBegin template="Templ ates/MainTemplate.dw t" codeOutsideHTML IsLocked="false " -->
    <head>
    <!-- InstanceBeginEd itable name="doctitle" -->
    <title>Marco</title>
    <!-- InstanceEndEdit able -->
    <!-- InstanceBeginEd itable name="head" -->
    <link href="../../web-content-Backup/extra.css" rel="stylesheet " type="text/css">
    <!-- InstanceEndEdit able -->
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.dimensio ns.pack.js"></script>
    <script type="text/javascript" src="js/marco.js"></script>
    <link href="extra.css " rel="stylesheet " type="text/css"/>
    <link rel="stylesheet " type="text/css" href="marco.css "/>
    <script type="text/javascript">
    <!--
    function openMenu(a){
    var td = $(a).parents("t d")[0];
    var menus = ["menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8"];
    var myName = $(td).id();
    for(var i=0;i<menus.len gth;i++)
    if(menus[i] != myName)
    hideMenu($("#" + menus[i]));
    toggleMenu(td);
    }
    // -->
    </script>


    <link rel="stylesheet " href="backbox.c ss" type="text/css" />
    <script type="text/javascript" src="js/prototype.compr essed.js"></script>
    <script type="text/javascript" src="js/scriptaculous.j s?load=effects" ></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <script type="text/javascript" src="js/dhtmlHistory.js "></script>
    <script type="text/javascript" src="js/customsignshead er.js"></script>


    </head>
    <body>
    <div align="center"> <IMG height=70 alt="" src="images/Home_01.jpg" width=800></div><table align="center" cellpadding="0" cellspacing="0" border="0" width="800" style="BACKGROU ND-COLOR: white">
    <tr>
    <td><A onmouseover="ch angeImages('hom e','images/home-on.gif');return true" onmouseout="cha ngeImages('home ','images/home.gif');retu rn true" href="index.htm l"><IMG id=home height=24 alt="" src="images/home.gif" width=53 border=0 name=home></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><A onmouseover="ch angeImages('new s','images/news-on.gif');return true" onmouseout="cha ngeImages('news ','images/news.gif');retu rn true" href="News.html "><IMG id=news height=24 alt="" src="../../web-content-Backup/images/news.gif" width=53 border=0 name=news></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><!--<a onmouseover="ch angeImages('pro ducts','images/products-on.gif');return true" onmouseout="cha ngeImages('prod ucts','images/products.gif'); return true" href="Products. html"><img id="products" src="images/products.gif" alt="" name="products" border="0" height="24" width="91"></a><img src="images/split.gif" alt="" border="0" height="23" width="8">--><A onmouseover="ch angeImages('com pany','images/company-on.gif');return true" onmouseout="cha ngeImages('comp any','images/company.gif');r eturn true" href="Company.h tml"><IMG id=company height=24 alt="" src="../../web-content-Backup/images/company.gif" width=83 border=0 name=company></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><A onmouseover="ch angeImages('car eers','images/careers-on.gif');return true" onmouseout="cha ngeImages('care ers','images/careers.gif');r eturn true" href="Careers.h tml"><IMG id=careers height=24 alt="" src="../../web-content-Backup/images/careers.gif" width=79 border=0 name=careers></a><IMG height=23 alt="" src="../../web-content-Backup/images/split.gif" width=8 border=0><A onmouseover="ch angeImages('con tact','images/contact-on.gif');return true" onmouseout="cha ngeImages('cont act','images/contact.gif');r eturn true" href="Contact.h tml"><IMG id=contact height=24 alt="" src="../../web-content-Backup/images/contact.gif" width=81 border=0 name=contact></a></td></tr></table>
    <table id="mainbar" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td width="15"></td>
    <td width="621" style="PADDING-LEFT: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px; BACKGROUND-COLOR: white"><!-- InstanceBeginEd itable name="Content" -->
    <IMG height=133 alt=Griprite src="images/renoirwebpictur e.jpg" width=623><br>
    <div class="text">
    <p>&nbsp;<img border="0" src="images/renoirwebpic1.J PG" width="83" height="30">&nb sp;<span class="text"><f ont size="1"><b>fin e
    art</b></font> </span><font face="MyriadPro-Regular" color="#8d8d8d" size="1">is
    a beautifully designed range of high quality products for drawing,
    sketching and</font> <font face="Myriad-Roman" color="#8d8d8d" size="1">hobby
    purposes. The range is used by artists, designers and illustrators&nb sp;&nbsp;as
    well as for hobby purposes. The range meets all the high
    requirements one would expect from pencils designed for
    professionals, such as subtle sense of color, good color transfer</font>
    <font face="Myriad-Roman" color="#8d8d8d" size="1">and fine color
    texture. With excellent mixing qualities and a very well coordinated
    range of colors and degrees of hardness, they provide even more
    possibilities to express oneself.</font></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <table width="616">
    <tbody>
    <tr>
    <td width="608"><im g border="0" src="images/graphitesingle. jpg" width="606" height="83"></td>
    </tr>
    <tr>
    <td width="608">
    <table width="607">
    <tbody>
    <tr>
    <td width="361">&nb sp;
    <img border="0" src="images/12%20graph%2002 .jpg" width="250" height="321">
    <div onclick="dhtmlH istory.add('loc ation1',{messag e: 'backbox'});cou ntdown()">
    <a href="images/12%20graph%2001 .jpg" rel="lightbox[slide]" caption="Renoir Graphite">
    <img src="images/3%20graphite.jp g" alt="lime" width="346" height="132" border="0" /></a>
    </div>
    <a href="images/12%20graph%2002 .jpg" rel="lightbox[slide]" caption="Renoir Graphite"></a>
    <a href="images/big%20graphite% 201.jpg" rel="lightbox[slide]" caption="Renoir Graphite"></a>

    </td>
    <td width="232" style="VERTICAL-ALIGN: top"><span class="text">
    Detail :
    </span>
    <p><span class="text">
    2H-8B Artist Graphite<br>
    Round Cedar-lite Wood<br>
    Dipped w/Band<br>
    Sharpened<br>
    Fine Art Box or Individual grade 6x2 Cardboard Box<br>
    <br>
    Item numbers :<br>
    </span>
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    [/HTML]

    [HTML] <table>
    <tbody>
    <tr>
    <td><img border="0" src="images/aquarellesingle .jpg" width="609" height="92"></td>
    </tr>
    <tr>
    <td>
    <table width="604">
    <tbody>
    <tr>
    <td width="348">

    </td>
    <td style="VERTICAL-ALIGN: top" width="242"><sp an class="text">De tail
    :&nbsp;
    </span>
    <p><span class="text">Av ailable in 12/24/48 Colors<br>
    3.7mm Fine Art Aquarelle Color lead<br>
    Round Cedar-lite Wood<br>
    Dipped w/Band<br>
    Sharpened<br>
    Fine Art Box or Individual color 6x2
    Cardboard Box<br>
    <br>
    Item numbers :&nbsp;<br>
    </span></p>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    <p>
    <a href="images/24%20Aqua%2002. jpg" rel="lightbox[slide]" caption="Renoir Aquarelle-24">
    <img src="images/5-aqua.jpg" alt="lime" width="577" height="134" border="0" /></a>
    <p><IMG alt="" src="images/24%20Aqua%2001. jpg" width="250" height="320"></p>
    <div onclick="dhtmlH istory.add('loc ation1',{messag e: 'backbox'});cou ntdown()">
    &nbsp;
    </div>
    <a href="images/big%20aqua%201. jpg" rel="lightbox[slide]" caption="Renoir Aquarelle"></a>
    <a href="images/big%20aqua%2012 %2002.jpg" rel="lightbox[slide]" caption="Renoir Aquarelle-12"></a>
    <a href="images/big%20aqua%2024 %2001.jpg" rel="lightbox[slide]" caption="Renoir Aquarelle-24"></a>
    <a href="images/big%20aq%2048%2 003.jpg" rel="lightbox[slide]" caption="Renoir Aquarelle-48"></a>
    <a href="images/big%20aq%2003.j pg" rel="lightbox[slide]" caption="Renoir Aquarelle-48"></a>

    <table>
    <tbody>
    <tr>
    <td><img border="0" src="images/coloursingle.jp g" width="613" height="71"></td>
    </tr>
    <tr>
    <td>
    <table width="613" cellspacing="1" >
    <tbody>
    <tr>
    <td width="320">
    <p><img border="0" src="images/big%20color%202 4%2003.jpg" width="350" height="372"></p>

    <div onclick="dhtmlH istory.add('loc ation1',{messag e: 'backbox'});cou ntdown()">
    <a href="images/big%20color%202 4%2002.jpg" rel="lightbox[slide]" caption="Renoir Color-24">
    <img src="images/big%20color%202 4%2002.jpg" alt="lime" width="95" height="93" border="0" /></a>
    </div>
    <a href="big%20col or%2024%2003" rel="lightbox[slide]" caption="Renoir Color"></a>


    </td>
    <td style="VERTICAL-ALIGN: top" width="279">
    <p style="line-height: 100%"><span class="text">De tail
    :&nbsp;
    </span></p>
    <p style="line-height: 100%"><span class="text">Av ailable in 12/24/48 Colors<br>
    3.7mm Fine Art Color lead<br>
    Round Cedar-lite Wood<br>
    Dipped w/Band<br>
    Sharpened<br>
    Fine Art Box or Individual color 6x2
    Cardboard Box<br>
    <br>
    Item numbers :<br>
    </span></p>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    <!-- InstanceEndEdit able --></td>
    <td width="14">
    <td width="138" style="VERTICAL-ALIGN: top"><table id="menubar" border="0" cellpadding="0" cellspacing="0" style="BACKGROU ND-COLOR: #2a2b7a">
    <tr>
    <td><IMG height=36 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu1" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -60px; WIDTH: 60px"><A href="Colorite. html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_04.gif" width=46></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_03. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu2" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -150px; WIDTH: 150px"><A href="Superb.ht ml"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_11.gif" width=77></a><A href="Griprite. html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_13.gif" width=46></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_06. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu3" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -110px; WIDTH: 110px"><A href="Neon.html "><IMG height=16 alt="" src="../../web-content-Backup/images/Home_19.gif" width=33></a><A href="Metallic. html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_21.gif" width=46></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_08. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu4" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -110px; WIDTH: 110px"><A href="Axiom.htm l"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_27.gif" width=40></a><A href="Natural.h tml"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_29.gif" width=43></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_10. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu5" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -55px; WIDTH: 200px"><A href="Raffine.h tml"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_35.gif" width=41></a><A href="marco_re. html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_42.png" width=116></a></div>
    <div></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_12. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=4 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu6" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: 0px; WIDTH: 0px"></div><A href="index.htm l"><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_14. gif" width=138></a></td>
    </tr>
    <tr>
    <td><IMG height=65 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu7" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -150px; WIDTH: 200px"><A href="newproduc ts.htm"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_40.gif" width=57></a><A href="marco_re. html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_42.png"></a></div>
    <IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_16. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=43 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu8" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -300px; WIDTH: 300px"><A href="Standards .html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_48.gif" width=59></a><A href="Packaging .html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_50.gif" width=116></a><A href="Test Reports.html">< IMG height=16 alt="" src="../../web-content-Backup/images/Home_52.gif" width=71></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/NormalPages_18. gif" width=138></td>
    </tr>
    <tr>
    <td><IMG height=36 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
    </tr>
    <tr>
    <td id="menu9" onmouseover="mo useOver(this);" ><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -60px; WIDTH: 160px"><A href="Making_Pe ncils.html"><IM G height=16 alt="" src="../../web-content-Backup/images/Home_451.gif" width=160></a></div><IMG height=16 alt="" src="../../web-content-Backup/images/Normalpages_201 .gif" width=160></td>
    </tr>
    <tr>
    <td height="108"></td>
    </tr>
    </table>
    </td>
    <td width="14">
    </td>
    </tr>
    <tr>
    <td width="15"></td>
    <td width="621" height="45"></td>
    <td width="14">
    <td width="138">
    <td width="14"></td>
    </tr>
    </table>
    <script type="text/javascript" src="js/customsignsfoot er.js"></script>
    </body>
    <!-- InstanceEnd --></html>
    [/HTML]
    -----------------
    Everything works fine except the Right side menu. is not displaying.



    Thanks
    Last edited by acoder; Jul 8 '08, 12:16 PM. Reason: Added [code] tags
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    I've moved your thread from the HTML forum since it's a JavaScript problem.

    As a full member now, you should know that we expect your code to be posted in [CODE] tags (See How to Ask a Question).

    This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

    Please use the tags in future.

    MODERATOR.

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Have you checked the error console? I see this error:
      Code:
      $.browser is undefined
      http://www.marco.com.cn/web-content/js/marco.js
      Line 42

      Comment

      • hsriat
        Recognized Expert Top Contributor
        • Jan 2008
        • 1653

        #4
        And somewhere in the code you have used mouseOver instead of onmouseover.

        Comment

        • imtmub
          New Member
          • Nov 2006
          • 112

          #5
          Originally posted by hsriat
          And somewhere in the code you have used mouseOver instead of onmouseover.
          No i didnt use mouseover, I have check the whole page. the same i m using for other pages also. Those pages are working. After i added the lightbox.js to this page i am having these problem. (Lightbox.js open a popup window to display a image)

          You can check my other page for reference:
          http://www.marco.com.c n/web-content/marco_re.html

          Thanks

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Lightbox can cause problems. You're already using jquery and Lightbox uses prototype. You can try using noConflict in jquery, or what would probably more sense is to use a lightbox clone written in jQuery. There is one, but I can't recall the name off the top of my head.

            Comment

            • imtmub
              New Member
              • Nov 2006
              • 112

              #7
              I dont understand really. do u have any other method

              Comment

              • acoder
                Recognized Expert MVP
                • Nov 2006
                • 16032

                #8
                What I'm basically saying is to avoid lightbox and use one of its clones. If you search the plugins for jQuery, you should find some decent ones. There's also one known as ThickBox.

                Comment

                Working...