Click to See Complete Forum and Search --> : Mozilla DHTML
as2x2
11-16-2004, 12:38 PM
Hi!
Please someone tell me why this code works in IE but doesn't in Mozilla, I expect Mozilla requires strict DOM, but I'm not too good in DOM.. Help!
<html>
<script language=JavaScript>
var outColor = 0xff6600;
var overColor = 0x336611;
function overTD (obj) {
try {
obj.style.backgroundColor = overColor;
} catch (exception) {
// Mozilla doesn't support..
// But IE does!
// What needs Mozilla?
}
}
function outTD (obj) {
obj.style.backgroundColor = outColor;
}
</script>
<table><tr>
<td
onmouseover="overTD (this)"
onmouseout="outTD (this)"
<code>Frozen Ashes ~ </code>
</td>
</tr></table>
</html>
var outColor = "#ff6600";
var overColor = "#336611";
as2x2
11-16-2004, 01:42 PM
Still it doesn't work with the Mozilla browser, my browser version is:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2) Gecko/20021126
Fang, you probably checked the example using Internet Explorer, in IE it works,
I mean it doesn't work in Mozilla
Please, somebody, any clue?
I stil don't understand what you intend to do with those blocks try/catch. Which is the error you are expecting for?
I don't see something like
try{
var result = some statement or function call;
if(result condition){statement1}
else{statement2}
}
catch(error){
if(error condition){
do something
}
if(error another_condition){
do something else
}
}
Your code works on Mozilla 1.0 1.4 and 1.6. I dont have 1.2, but I see no reason why it shouldn't work with 1.2
as2x2
11-17-2004, 12:11 PM
The try/catch blocks are used to catch the exception that throws Mozilla, it doesn't tell you that directly, you can see this message when you go to Tools->Web Development->JavaScript Console, and there is written "Error: element has no properties".
So when you browse the page using Mozilla, you don't see the background of the word changing (when rolling the mouse over and out), it stays still, that's what I mean when I say that the code doesn't work with Mozilla. If you browse the code above with IE (Internet Explorer) you'll see the background changing when you roll the mouse over and out that word.
Fang, when you said that the code works, you meant that you see no errors displayed on the page, or that the background flickered?
You can use one function:
var outColor = "#ff6600";
var overColor = "#336611";
function overAndOut (obj) {
obj.style.backgroundColor=(obj.style.backgroundColor==overColor)? outColor : overColor;
}
It works with no error in Mozilla.
kolya3
11-17-2004, 12:48 PM
Originally posted by as2x2
The try/catch blocks are used to catch the exception that throws Mozilla, it doesn't tell you that directly, you can see this message when you go to Tools->Web Development->JavaScript Console, and there is written "Error: element has no properties".
It's not an exception, it is as Mozilla points out - an error. A try catch block isn't going to help. Chances are your "obj" object is null so accessing it's style property is not possible hence "element has no properties".
Just to quickly prove to yourself that your obj is null, put an id on your TD and do "alert(obj.id)" right at the beginning of your function. Chances are you won't see your id popup.
as2x2
11-17-2004, 01:20 PM
I realize that the try/catch block won't help, I use it to "swallow down" the error that the
browser might throw.
So, could anyone please correct the block above in order that it works in Mozilla [Fang in Mozilla
not Internet Explorer or whatever :) ]
Kolya3, you got me correctly, is there any way out?
kolya3
11-17-2004, 01:41 PM
Fang's original response was correct. You need to change your color strings to:
var outColor = "ff6600";
var overColor = "336611";
without the "0x" part.
Then it works, no errors or exceptions. I'm using Firefox 1.0 and Mozilla 1.4.1
kolya3
11-17-2004, 01:43 PM
If your obj is null you can try using Mozilla's event model to extract the event target source. Though I did try your example and obj was not null for me.
as2x2
11-17-2004, 02:06 PM
Well guys,
firstly, Fang, I apologize.
I have made 2 changes:
1. The one Fang told me: 0xff6600 -> '#ff6600'
2. Added the body tag: <body> <table... </table </body>
and after I made this the code works! Just making the first step the code did not work yet
but after I made the second step too (add a <body> tag) the code finally works!
I'm out to buy you a bier guys!
The final code is:
<html>
<script language=JavaScript>
var outColor = '#ff6600';
var overColor = '#336611';
function overTD (obj) {
try {
obj.style.backgroundColor = overColor;
} catch (exception) {
// already works in Mozilla, so this try/catch is now redundant
}
}
function outTD (obj) {
obj.style.backgroundColor = outColor;
}
</script>
<body>
<table><tr>
<td
onmouseover="overTD (this)"
onmouseout="outTD (this)"
<code>Frozen Ashes ~ </code>
</td>
</tr></table>
</body>
</html>
My oh my:rolleyes:
We thought that your lines were only some extract from your page, but not the entire page...
In this case, if elementary HTML coding was not your strong part:D let me tell you that you should have insert the HEAD tag also... And you should better use type, not language for javascript...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
var outColor = '#ff6600';
var overColor = '#336611';
function overTD (obj) {
try {
obj.style.backgroundColor = overColor;
} catch (exception) {
// already works in Mozilla, so this try/catch is now redundant
}
}
function outTD (obj) {
obj.style.backgroundColor = outColor;
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td
onmouseover="overTD (this)"
onmouseout="outTD (this)"
<code>Frozen Ashes ~ </code>
</td>
</tr>
</tbody>
</table>
</body>
</html>
as2x2
11-18-2004, 11:27 AM
Eu cunosc HTMLul, dar nu m-am gindit ca un oarecare body sa aiba asha impact asupra altu-i tag. ;)
Spune te rog, de unde ai invatsat asha de bine toate elementele astea de tipul
Content-Script-Type, fiindca nu intseleg de ce e mai bine type="text/JavaScript shi nu
language=JavaScript..
Steaua a pierdut.. ce pacat :(
ca un oarecare body sa aiba asha impact asupra altu-i tag.
The under understood rule language in the Forum is English, so if you wanna use Romanian u may use Private Message
Now. The <body> trouble
The web page has to be built in that manner
<html>
<head>
...some head content(meta tags, script, css embeded, etc.)
</head>
<body>
... main content here
</body>
</html>
This is elementary HTML building coding