Jump to content

is there a common glitch?


theAntiGeek
 Share

Recommended Posts

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

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 = ("         &nbspHOME"				+ "          <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>"				+ "         &nbspTHE 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>"				+ "         &nbspCONTACT US");			break;			default:				nav.innerHTML = ("         &nbspHOME"				+ "          <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 by aspnetguy
Link to comment
Share on other sites

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

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 = ("         &nbspHOME"				+ "          <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>"				+ "         &nbspTHE 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>"				+ "         &nbspCONTACT US");			break;			default:				nav.innerHTML = ("         &nbspHOME"				+ "          <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 by aspnetguy
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...