By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,934 Members | 1,677 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > java script error in html page
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,934 IT Pros & Developers. It's quick & easy.

Java Script Error in HTML Page

100+
P: 112
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.
http://www.marco.com.cn/web-content/marco_re10.html

--------------------------------------------------------------
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <!-- InstanceBeginEditable name="doctitle" -->
  3. <title>Marco</title>
  4. <!-- InstanceEndEditable -->
  5. <!-- InstanceBeginEditable name="head" -->
  6. <link href="../../web-content-Backup/extra.css" rel="stylesheet" type="text/css">
  7. <!-- InstanceEndEditable -->
  8. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  9. <script type="text/javascript" src="js/jquery.js"></script>
  10. <script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
  11. <script type="text/javascript" src="js/marco.js"></script>
  12. <link href="extra.css" rel="stylesheet" type="text/css"/>
  13. <link rel="stylesheet" type="text/css" href="marco.css"/>
  14. <script type="text/javascript">
  15. <!--
  16. function openMenu(a){
  17.     var td = $(a).parents("td")[0];
  18.     var menus = ["menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8"];
  19.     var myName = $(td).id();
  20.     for(var i=0;i<menus.length;i++)
  21.         if(menus[i] != myName)
  22.             hideMenu($("#" + menus[i]));
  23.     toggleMenu(td);
  24. }
  25. // -->
  26. </script></head>
  27.  
-------------------------------------------------------
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(lightbox.js).

[HTML]<html><!-- InstanceBegin template="Templates/MainTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<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>


<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?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/customsignsheader.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="BACKGROUND-COLOR: white">
<tr>
<td><A onmouseover="changeImages('home','images/home-on.gif');return true" onmouseout="changeImages('home','images/home.gif');return true" href="index.html"><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="changeImages('news','images/news-on.gif');return true" onmouseout="changeImages('news','images/news.gif');return 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="changeImages('products','images/products-on.gif');return true" onmouseout="changeImages('products','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="changeImages('company','images/company-on.gif');return true" onmouseout="changeImages('company','images/company.gif');return true" href="Company.html"><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="changeImages('careers','images/careers-on.gif');return true" onmouseout="changeImages('careers','images/careers.gif');return true" href="Careers.html"><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="changeImages('contact','images/contact-on.gif');return true" onmouseout="changeImages('contact','images/contact.gif');return true" href="Contact.html"><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"><!-- InstanceBeginEditable name="Content" -->
<IMG height=133 alt=Griprite src="images/renoirwebpicture.jpg" width=623><br>
<div class="text">
<p>&nbsp;<img border="0" src="images/renoirwebpic1.JPG" width="83" height="30">&nbsp;<span class="text"><font size="1"><b>fine
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&nbsp;&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"><img border="0" src="images/graphitesingle.jpg" width="606" height="83"></td>
</tr>
<tr>
<td width="608">
<table width="607">
<tbody>
<tr>
<td width="361">&nbsp;
<img border="0" src="images/12%20graph%2002.jpg" width="250" height="321">
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/12%20graph%2001.jpg" rel="lightbox[slide]" caption="RenoirGraphite">
<img src="images/3%20graphite.jpg" alt="lime" width="346" height="132" border="0" /></a>
</div>
<a href="images/12%20graph%2002.jpg" rel="lightbox[slide]" caption="RenoirGraphite"></a>
<a href="images/big%20graphite%201.jpg" rel="lightbox[slide]" caption="RenoirGraphite"></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"><span class="text">Detail
:&nbsp;
</span>
<p><span class="text">Available 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="RenoirAquarelle-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="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
&nbsp;
</div>
<a href="images/big%20aqua%201.jpg" rel="lightbox[slide]" caption="RenoirAquarelle"></a>
<a href="images/big%20aqua%2012%2002.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-12"></a>
<a href="images/big%20aqua%2024%2001.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-24"></a>
<a href="images/big%20aq%2048%2003.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-48"></a>
<a href="images/big%20aq%2003.jpg" rel="lightbox[slide]" caption="RenoirAquarelle-48"></a>

<table>
<tbody>
<tr>
<td><img border="0" src="images/coloursingle.jpg" 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%2024%2003.jpg" width="350" height="372"></p>

<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/big%20color%2024%2002.jpg" rel="lightbox[slide]" caption="RenoirColor-24">
<img src="images/big%20color%2024%2002.jpg" alt="lime" width="95" height="93" border="0" /></a>
</div>
<a href="big%20color%2024%2003" rel="lightbox[slide]" caption="RenoirColor"></a>


</td>
<td style="VERTICAL-ALIGN: top" width="279">
<p style="line-height: 100%"><span class="text">Detail
:&nbsp;
</span></p>
<p style="line-height: 100%"><span class="text">Available 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>

<!-- InstanceEndEditable --></td>
<td width="14">
<td width="138" style="VERTICAL-ALIGN: top"><table id="menubar" border="0" cellpadding="0" cellspacing="0" style="BACKGROUND-COLOR: #2a2b7a">
<tr>
<td><IMG height=36 alt="" src="../../web-content-Backup/images/spacer.gif" width=138></td>
</tr>
<tr>
<td id="menu1" onmouseover="mouseOver(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="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -150px; WIDTH: 150px"><A href="Superb.html"><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="mouseOver(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="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -110px; WIDTH: 110px"><A href="Axiom.html"><IMG height=16 alt="" src="../../web-content-Backup/images/Home_27.gif" width=40></a><A href="Natural.html"><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="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -55px; WIDTH: 200px"><A href="Raffine.html"><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="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: 0px; WIDTH: 0px"></div><A href="index.html"><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="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -150px; WIDTH: 200px"><A href="newproducts.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="mouseOver(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="mouseOver(this);"><div class="menu" style="DISPLAY: none; MARGIN-LEFT: -60px; WIDTH: 160px"><A href="Making_Pencils.html"><IMG 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/customsignsfooter.js"></script>
</body>
<!-- InstanceEnd --></html>
[/HTML]
-----------------
Everything works fine except the Right side menu. is not displaying.



Thanks
Jul 8 '08 #1
Share this Question
Share on Google+
7 Replies
acoder
Expert Mod 15k+
P: 16,027
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.
Jul 8 '08 #2
acoder
Expert Mod 15k+
P: 16,027
Have you checked the error console? I see this error:
Expand|Select|Wrap|Line Numbers
  1. $.browser is undefined
  2. http://www.marco.com.cn/web-content/js/marco.js
  3. Line 42
Jul 8 '08 #3
hsriat
Expert 100+
P: 1,654
And somewhere in the code you have used mouseOver instead of onmouseover.
Jul 8 '08 #4
100+
P: 112
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.cn/web-content/marco_re.html

Thanks
Jul 9 '08 #5
acoder
Expert Mod 15k+
P: 16,027
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.
Jul 9 '08 #6
100+
P: 112
I dont understand really. do u have any other method
Jul 14 '08 #7
acoder
Expert Mod 15k+
P: 16,027
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.
Jul 14 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Question stats

  • viewed: 3068
  • replies: 7
  • date asked: Jul 8 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates