BleepingComputer.com: Odd js problem?

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Odd js problem? Works on IE but not Fire Fox?

#1 User is offline   Wolfy87 

  • Senior Member
  • PipPipPipPip
  • Find Topics
  • Group: Members
  • Posts: 414
  • Joined: 25-July 08
  • Gender:Male
  • Location:England

  Posted 18 April 2009 - 01:13 PM

Hi, i am making a website for someone at the moment and i have some js onmouseover and onmouseout images, it all works in IE but when i use my fire fox it dose not work atall :S
here is the site, can somone with firefox check it out too because it might just be mine, here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="icon" href="./image/icon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="format.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en-gb">
<!--Descriptions and keywords START-->
<meta name="description" content="Description">
<meta name="keywords" content="Meta tags">
<!--Descriptions and keywords END-->
<title>Martin day entertainments</title>
</head>
<body style="background:black;">
<script type="text/javascript">
function aboutusover()
{
aboutus.src="./image/aboutusin.png";
}

function aboutusout()
{
aboutus.src="./image/aboutusout.png";
}

function enquiryover()
{
enquiry.src="./image/enquiryin.png";
}

function enquiryout()
{
enquiry.src="./image/enquiryout.png";
}

function photosover()
{
photos.src="./image/photosin.png";
}

function photosout()
{
photos.src="./image/photosout.png";
}

function contactover()
{
contact.src="./image/contactin.png";
}

function contactout()
{
contact.src="./image/contactout.png";
}
</script>
<!--Box containing all of the links to the pages START-->
<table style="width:20%;padding:0px;float:left;"><tr><td style="width:20%;border-style:solid;border-color:#ffffff;">
<a href="aboutus.htm"><img src="./image/aboutusout.png" alt="About us" style="margin: 1px;" id="aboutus" onmouseover="aboutusover()" onmouseout="aboutusout()"></a>
<br>
<a href="enquiry.htm"><img src="./image/enquiryout.png" alt="Enquiry" style="margin: 1px;" id="enquiry" onmouseover="enquiryover()" onmouseout="enquiryout()"></a>
<br>
<a href="photos.htm"><img src="./image/photosout.png" alt="Photos" style="margin: 1px;" id="photos" onmouseover="photosover()" onmouseout="photosout()"></a>
<br>
<a href="contact.htm"><img src="./image/contactout.png" alt="Contact" style="margin: 1px;" id="contact" onmouseover="contactover()" onmouseout="contactout()"></a>
<br>
<a href="http://www.essexfm.co.uk/"><img src="./image/essexfmlogo.png" alt="Essex fm" style="margin: 1px;"></a>
<br>
<p>Website by <a href="http://www.flowwebdesign.co.uk/" style="color:white;">Flow web design</a></p>
</td></table>
<!--Box containing all of the links to the pages END-->
<!--Content START-->
<table style="width:59%;border-style:none;float:left;"><tr><td><p>
This is the main content of the first page you will see, you can get back to this page by clicking on the logo, to get to any of the other pages you can click on any of the buttons to the left. 
The four navigation buttons that link to pages in this site are not active yet but Essex fm and mine work, if you like this design 
I will proceed to create this into a real page (Instead of the writing intended for you), 
and I will create the rest as well as any others you want on here.<br><br> 
I can easily insert images into this main block of writing and to the right underneath 
the button box I am thinking of adding a scrolling news box, it would scroll upwards and 
I could update it for you or I might 
be able to create a really simple way of updating it that even my dad could understand, this way you could add in any up and coming events etc to it. 
</p></td></tr></table>
<!--Content END-->
<!--MDEnts logo START-->
<table style="width:20%;border-style:none;float:right;"><tr><td><img src="./image/logo.png" alt="MDELogo" style="width:275px;height:287px;"></td></tr></table>
<!--MDEnts logo END-->
</body>


Thanks, Wolfy87.

#2 User is offline   groovicus 

  • Hail Groovicus!
  • PipPipPipPipPipPip
  • Find Topics
  • Group: Moderator
  • Posts: 9,605
  • Joined: 05-June 04
  • Gender:Male
  • Location:Centerville, SD

Posted 18 April 2009 - 01:51 PM

You are missing a closing HTML tag. It would be much easier to read your code if you took the time to format it properly.

There are a couple of plugins for Firefox that may help. One is the web developers toolbar. The other one is called Firebug. You should use them. :thumbsup:
"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 User is offline   Wolfy87 

  • Senior Member
  • PipPipPipPip
  • Find Topics
  • Group: Members
  • Posts: 414
  • Joined: 25-July 08
  • Gender:Male
  • Location:England

Posted 18 April 2009 - 02:59 PM

I have the web developers tool bar and sorry for the missing tag, cant beli8ve i missed it :thumbsup: but this still has not fixed it...

#4 User is offline   Romeo29 

  • Learning To Bleep
  • PipPipPipPipPipPip
  • Find Topics
  • Group: BC Advisor
  • Posts: 2,834
  • Joined: 06-July 08
  • Gender:Not Telling
  • Location:127.0.0.1

Posted 18 April 2009 - 03:43 PM

You forgot the javascript bit. Do something like:

<img src="blah.jpg" onMouseOver="java script:aboutusover();">

EDIT: BC automatically adds a space between java and script :thumbsup:
I guess it is done from a safety point of view. You should remove that space in your code. :flowers:

This post has been edited by Romeo29: 18 April 2009 - 03:48 PM


#5 User is offline   groovicus 

  • Hail Groovicus!
  • PipPipPipPipPipPip
  • Find Topics
  • Group: Moderator
  • Posts: 9,605
  • Joined: 05-June 04
  • Gender:Male
  • Location:Centerville, SD

Posted 18 April 2009 - 03:58 PM

Why would you have to add that before the function call? I have never had to add it, and my js works fine. What are you seeing that I am not?
"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#6 User is offline   Wolfy87 

  • Senior Member
  • PipPipPipPip
  • Find Topics
  • Group: Members
  • Posts: 414
  • Joined: 25-July 08
  • Gender:Male
  • Location:England

Posted 18 April 2009 - 04:02 PM

Groovicus is right, my javascript on my site works fine and i do not use this, i just dont see why this one dose not work.

Thanks, Wolfy87.

#7 User is offline   Romeo29 

  • Learning To Bleep
  • PipPipPipPipPipPip
  • Find Topics
  • Group: BC Advisor
  • Posts: 2,834
  • Joined: 06-July 08
  • Gender:Not Telling
  • Location:127.0.0.1

Posted 18 April 2009 - 04:17 PM

Sorry, I think I mixed up how you invoke js function in <a> and onMouseOver event :thumbsup: I need to sleep I guess

I tested your js code with modified images source (for testing at local computer) like this:

function aboutusover()
{aboutus.src="1.jpg";}
function aboutusout()
{aboutus.src="2.jpg";}


And it works in IE8. But it doesnt work in Firefox.

Then I added a semi-colon after the JS function call like this:
onmouseover="aboutusover();" onmouseout="aboutusout();">


Now it works in both IE8 and Firefox 3.08

#8 User is offline   groovicus 

  • Hail Groovicus!
  • PipPipPipPipPipPip
  • Find Topics
  • Group: Moderator
  • Posts: 9,605
  • Joined: 05-June 04
  • Gender:Male
  • Location:Centerville, SD

Posted 18 April 2009 - 04:36 PM

Oh yep. Obvious now. You can omit the semi-colon for single function calls, but it is not good practice. Here is a perfect example of why.
"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#9 User is offline   Wolfy87 

  • Senior Member
  • PipPipPipPip
  • Find Topics
  • Group: Members
  • Posts: 414
  • Joined: 25-July 08
  • Gender:Male
  • Location:England

Posted 18 April 2009 - 08:18 PM

Nice one guys, thanks alot :thumbsup:
I'm on my iPod at the moment but tomurro I will test it out tomurro, looks like it will do the trick though.

Thanks, Wolfy87.

#10 User is offline   Wolfy87 

  • Senior Member
  • PipPipPipPip
  • Find Topics
  • Group: Members
  • Posts: 414
  • Joined: 25-July 08
  • Gender:Male
  • Location:England

Posted 19 April 2009 - 05:47 AM

Erm well here is the bit of code now:

<a href="aboutus.htm"><img src="./image/aboutusout.png" alt="About us" style="margin: 1px;" id="aboutus" onmouseover="aboutusover();" onmouseout="aboutusout();"></a>
<br>
<a href="enquiry.htm"><img src="./image/enquiryout.png" alt="Enquiry" style="margin: 1px;" id="enquiry" onmouseover="enquiryover();" onmouseout="enquiryout();"></a>
<br>
<a href="photos.htm"><img src="./image/photosout.png" alt="Photos" style="margin: 1px;" id="photos" onmouseover="photosover();" onmouseout="photosout();"></a>
<br>
<a href="contact.htm"><img src="./image/contactout.png" alt="Contact" style="margin: 1px;" id="contact" onmouseover="contactover();" onmouseout="contactout();"></a>


Even with the added semi colons it still dose not work on firefox.

Thanks, Wolfy87.

#11 User is offline   Romeo29 

  • Learning To Bleep
  • PipPipPipPipPipPip
  • Find Topics
  • Group: BC Advisor
  • Posts: 2,834
  • Joined: 06-July 08
  • Gender:Not Telling
  • Location:127.0.0.1

Posted 19 April 2009 - 12:20 PM

I tested a stripped down version of your code thinking what can be wrong with non JS part. I removed similar links and left only one link. Here is what I tested:

<html lang="en">
<head>
<script type="text/javascript">
function aboutusover(){aboutus.src="1.jpg";}
function aboutusout(){aboutus.src="2.jpg";}
</script>
<title>Martin day entertainments</title>
</head>
<body style="background:black;">
<a href="aboutus.htm">
<img src="2.jpg" alt="About us" style="margin: 1px;" id="aboutus" onmouseover="aboutusover();" onmouseout="aboutusout();">
</a>
</body>
</html>


And it works in FF.

In your code you missed one </tr> and one </html>. After correcting them your full code doesnt work in FF :flowers:


It means something is wrong somewhere else. After investigating for half an hour I seem to finally trapped the error.
If you change the <!DOCTYPE to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> it works in FF

Though I know bits and pieces, I don't understand FULLY why this happens. :thumbsup:

#12 User is offline   Wolfy87 

  • Senior Member
  • PipPipPipPip
  • Find Topics
  • Group: Members
  • Posts: 414
  • Joined: 25-July 08
  • Gender:Male
  • Location:England

Posted 19 April 2009 - 02:52 PM

Thats brilliant...yet a little odd :thumbsup:, thank you so much you two, it seems to be fixed now, its reall strange because i dont have that on my site and my js works, oh well atleast it works now.

Thanks so much, Wolfy87.

#13 User is offline   Romeo29 

  • Learning To Bleep
  • PipPipPipPipPipPip
  • Find Topics
  • Group: BC Advisor
  • Posts: 2,834
  • Joined: 06-July 08
  • Gender:Not Telling
  • Location:127.0.0.1

Posted 19 April 2009 - 04:06 PM

You're welcome :thumbsup:

As this was puzzling me. I googled and found out that the Internet is full of DOCTYPE in Firefox and Javascript/CSS problems. Though I couldn't find any explanation.

Maybe groovicus can explain this behaviour.

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users