theAntiGeek Posted June 2, 2006 Share Posted June 2, 2006 Hello.Im workin on a website and im using a bit of javascript to make the menus look like the poodles noodles . It all works fine in IE, but the javascript doesnt work in FF.it appears that my javascript file is simply not being accessed when the website is diplayed using FF as there are no error messages being generated..I was wondering if there is a common glitch that i need to fix for Javascript to work in FF? im sort've a noob at when it comes to websites and browsers so any help would be much appreciated.thanks. Link to comment Share on other sites More sharing options...
scott100 Posted June 2, 2006 Share Posted June 2, 2006 There could be any number of reasons why this is happening, post the code so we can have a look. Link to comment Share on other sites More sharing options...
theAntiGeek Posted June 2, 2006 Author Share Posted June 2, 2006 (edited) okie dokie.heres the code in my html page: it is importing a .js file and it is also running some javascript functions in the <head> <script type="text/JavaScript"src="javascript.js"></script> <script type="text/JavaScript"> var pagenum = 1; function toggleMenu(menu) { if(menu.style.display == "inline") { menu.style.display = "none"; } else { menu.style.display = "inline"; } } function toggleButton(butt) { if(butt.style.borderTopStyle == "inset") { butt.style.borderStyle = "outset"; } else { butt.style.borderStyle = "inset"; } } </script> and heres my code in the .js file: its a switch statement used for another menu. function menufunc(){ switch (pagenum) { case 0: nav.innerHTML = ("  HOME" + " <a href='sweet_biscuits.html'>THE PRODUCTS</a>" + " <a href='contact.html'>CONTACT US</a>"); break; case 1: nav.innerHTML = (" <a href='index.html'>HOME</a>" + "  THE PRODUCTS" + " <a href='contact.html'>CONTACT US</a>"); break; case 2: nav.innerHTML = (" <a href='index.html'>HOME</a>" + " <a href='sweet_biscuits.html'>THE PRODUCTS</a>" + "  CONTACT US"); break; default: nav.innerHTML = ("  HOME" + " <a href='sweet_biscuits.html'>THE PRODUCTS</a>" + " <a href='contact.html'>CONTACT US</a>"); break; }} this all works fine in IE, but it looks as if the java scripts arent even being run in FF. Edited June 2, 2006 by aspnetguy Link to comment Share on other sites More sharing options...
aspnetguy Posted June 2, 2006 Share Posted June 2, 2006 Try this....open FF...Open Tools->JavaScript Console, Press clear. Close the JavaScript Console.Now load your page in FF. Now re open the JavaScript Console. Are there any errors listed there??? If so please post them here. Link to comment Share on other sites More sharing options...
theAntiGeek Posted June 2, 2006 Author Share Posted June 2, 2006 (edited) ah ha!here are the errors that were produced:Error: nav is not definedSource File: file:///C:/www/Stockan%20and%20Gardens/htdocs/javascript.jsLine: 14andError: biffSub is not defined"nav" and "biffSub" are both id's for <div>s. il put the whole of my html page code up so you can see: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Stockan and Gardens</title> <link href="styles/stock_and_gardens.css" rel="stylesheet" type="text/css" /> <script type="text/JavaScript"src="javascript.js"></script> <script type="text/JavaScript"> var pagenum = 1; function toggleMenu(menu) { if(menu.style.display == "inline") { menu.style.display = "none"; } else { menu.style.display = "inline"; } } function toggleButton(butt) { if(butt.style.borderTopStyle == "inset") { butt.style.borderStyle = "outset"; } else { butt.style.borderStyle = "inset"; } } </script></head><body onload="menufunc();"> <div id="container"> <div id="header"> <div id="traditional"><h1>Traditional Scottish oatcakes and biscuits</h1> </div> </div> <div id="nav"> </div> <div id="main"> <div id="left"> <div class="button" onMouseOver="this.style.cursor='pointer'" onselectstart="return false" onmouseDown="toggleButton(this)" onmouseUp="toggleButton(this); toggleMenu(biffSub)"> Sweet Biscuits </div> <div class="sub" id="biffSub"> <div class="menuSub"><a href="">Biff 1</a></div> <div class="menuSub"><a href="">Biff 2</a></div> <div class="menuSub"><a href="">Biff 3</a></div> </div> <div class="button" onMouseOver="this.style.cursor='pointer'" onselectstart="return false" onmouseDown="toggleButton(this)" onmouseUp="toggleButton(this); toggleMenu(buffSub)"> Savoury Biscuits </div> <div class="sub" id="buffSub"> <div class="menuSub"><a href="">Biff 1</a></div> <div class="menuSub"><a href="">Biff 2</a></div> <div class="menuSub"><a href="">Biff 3</a></div> </div> </div> <div id="contentproduct"> <h1>Sweet Biscuits</h1> <table width="500px" border="0px" cellspacing="10"> <tr> <td><img align="left" src="../stuff/sweet biscuits/coconut-cookietest.jpg" /></td> <td> <h4>Coconut Cookie</h4><br /> Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty! </td> </tr> <tr> <td><img align="left" src="../stuff/sweet biscuits/lemon-cookietest.jpg" /></td> <td> <h4>Lemon Cookie</h4><br /> Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty! </td> </tr> <tr> <td><img align="left" src="../stuff/sweet biscuits/oat-and-honeytest.jpg" /></td> <td> <h4>Oat and Honey</h4><br /> Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty! </td> </tr> <tr> <td><img align="left" src="../stuff/sweet biscuits/perkinstest.jpg" /></td> <td> <h4>Perkins</h4><br /> Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty! </td> </tr> <tr> <td><img align="left" src="../stuff/sweet biscuits/stem-gingertest.jpg" /></td> <td> <h4>Stem Ginger</h4><br /> Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty!Mmmmmmmmmm biscuits, very coconutty! </td> </tr> </table> </div> <div id="footer"> Enquiries to stockan and gardens </div> </div> </div></body></html> and heres the .js file code again. the first error about "nav" orriginates in this .js file. but i dont understand why. function menufunc(){ switch (pagenum) { case 0: nav.innerHTML = ("  HOME" + " <a href='sweet_biscuits.html'>THE PRODUCTS</a>" + " <a href='contact.html'>CONTACT US</a>"); break; case 1: nav.innerHTML = (" <a href='index.html'>HOME</a>" + "  THE PRODUCTS" + " <a href='contact.html'>CONTACT US</a>"); break; case 2: nav.innerHTML = (" <a href='index.html'>HOME</a>" + " <a href='sweet_biscuits.html'>THE PRODUCTS</a>" + "  CONTACT US"); break; default: nav.innerHTML = ("  HOME" + " <a href='sweet_biscuits.html'>THE PRODUCTS</a>" + " <a href='contact.html'>CONTACT US</a>"); break; }} the second error about "biffSub", could it be caused by the fact i have given it its id in the html page only and not in my css file as well?sorry if this is confusing Edited June 2, 2006 by aspnetguy Link to comment Share on other sites More sharing options...
aspnetguy Posted June 2, 2006 Share Posted June 2, 2006 in your js file there is no declartion for nav or biffSubtry this function menufunc(){var nav = document.getElementById('nav');var biffSub = document.getElementById('biffSub');switch (pagenum){ ........ Whether it is in your CSS or not won't make any difference to JS Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now