PDA

View Full Version : className problem.

j3n0vacHiLd
02-11-2008, 11:51 AM
I am having a problem when attempting to change the class of an object through javascript on rollover. I had it working until I made changes to the HTML doc (not the js or css) and now it doesn't work.

Here is my code:


function Element(eId)
{
return document.getElementById(eId);
}

Newsletter.prototype.ToolboxIconHover = function(tbIcon)
{
if(Element(tbIcon + "_bg").className != 'toolBoxIcon')
Element(tbIcon + "_bg").className = 'toolBoxIcon';
else
Element(tbIcon + "_bg").className = '';
}


And the object I am trying to edit

<td width="23" id="enews_redoicon_bg"><img id="enews_redoicon" src="" ... onMouseOver="newsletter.ToolboxIconHover(this.id)"></td>

The problem I'm having is wierd. It worked fine initially when I didn't have the <html><head> tags in the document, I just had the <body></body> tags and since I've added the other tags I moved my css & js includes into the <head> section and now the rollover effect no longer works.
A1ien51
02-11-2008, 03:21 PM
Make sure you do not have a typo with the JS ro CSS file names when you moved it. Is the rest of the styling working in that CSS file?

Eric
j3n0vacHiLd
02-11-2008, 04:30 PM
Yeah everything from that CSS File is working. It's really strange if I leave everything structed exactly how it is and strip away just the <html><head><title> tags (and their appropriate closing tags) it works perfectly.

With the tags, I've tested in js with alert's to make sure all the data is correct, and the correct class is getting passed into js, it doesn't throw an error either in IE or FF it just simply doesn't work.

Below is the page it's happening on, just bare in mind its a working progress:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="js/common.js"></script>
<script language="javascript" src="js/dialogbox.class.js"></script>
<script language="javascript" src="js/newsletter.class.js"></script>

<link href="css/behaviours.css" rel="stylesheet" type="text/css">
<link href="css/format.css" rel="stylesheet" type="text/css">

<title>Untitled Document</title>
</head>
<body bgcolor="#FFFFFF">
<div id="enews_translayer" style="position: absolute; width:100%; height:100%; z-index:1; left: 0; top: 0; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; display: none;"></div>
<!-- Save DialogBox -->
<div id="enews_savelayer" class="dialogBox">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><img src="images/layout/dialogbox/topleft.png" width="20" height="27"></td>
<td width="310" class="dialogBoxTop">&nbsp;</td>
<td width="20" align="right"><img src="images/layout/dialogbox/topright.png" width="20" height="27" class="button" onClick="dialogBox.Close('SAVE')"></td>
</tr>
<tr>
<td colspan="3" class="dialogBoxBody">SAVE HEY</td>
</tr>
<tr>
<td><img src="images/layout/dialogbox/bottomleft.png" width="20" height="27"></td>
<td class="dialogBoxBottom">&nbsp;</td>
<td align="right"><img src="images/layout/dialogbox/bottomright.png" width="20" height="27"></td>
</tr>
</table>
</div>

<!-- Alert DialogBox -->
<div id="enews_alertlayer" class="dialogBox">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><img src="images/layout/dialogbox/topleft.png" width="20" height="27"></td>
<td width="310" class="dialogBoxTop">&nbsp;</td>
<td width="20" align="right"><img src="images/layout/dialogbox/topright.png" width="20" height="27" class="button" onClick="dialogBox.Close('ALERT')"></td>
</tr>
<tr>
<td colspan="3"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="dialogBoxBody">
<tr>
<td width="16%" align="left" valign="top"><img src="images/layout/dialogbox/alerticon.png" width="32" height="32"></td>
<td width="84%"><div id="enews_alertlayer_caption" class="dialogBoxCaption">hey</div><div id="enews_alertlayer_msg">hey</div>
<br>
<div align="center" style="width: 250px"><img src="images/buttons/ok.png" width="64" height="19" class="button" id="enews_alertokbutton" onClick=""> &nbsp;&nbsp;<img src="images/buttons/cancel.png" width="64" height="19" class="button" id="enews_alertcancelbutton" onClick="dialogBox.Close('ALERT')"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/layout/dialogbox/bottomleft.png" width="20" height="27"></td>
<td class="dialogBoxBottom">&nbsp;</td>
<td align="right"><img src="images/layout/dialogbox/bottomright.png" width="20" height="27"></td>
</tr>
</table>
</div>

<!-- Preview DialogBox -->
<div id="enews_previewlayer" class="dialogBoxPreview">
<table width="640" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><img src="images/layout/dialogbox/topleft.png" width="20" height="27"></td>
<td width="600" class="dialogBoxTop">&nbsp;</td>
<td width="20" align="right"><img src="images/layout/dialogbox/topright.png" width="20" height="27" class="button" onClick="dialogBox.Close('PREVIEW')"></td>
</tr>
<tr>
<td colspan="3"><div id="enews_previewlayer_body" class="dialogBoxPreviewBody"><div id="enews_previewlayer_caption" class="dialogBoxCaption">hey</div><div id="enews_previewlayer_msg">hey</div>
<br>
<div align="center" style="width: 250px"><img src="images/buttons/ok.png" width="64" height="19" class="button" id="enews_previewokbutton" onClick=""> &nbsp;&nbsp;<img src="images/buttons/cancel.png" width="64" height="19" class="button" id="enews_previewcancelbutton" onClick="dialogBox.Close('PREVIEW')"></div></div></td>
</tr>
<tr>
<td><img src="images/layout/dialogbox/bottomleft.png" width="20" height="27"></td>
<td class="dialogBoxBottom">&nbsp;</td>
<td align="right"><img src="images/layout/dialogbox/bottomright.png" width="20" height="27"></td>
</tr>
</table>
</div>


<script language="javascript">
var newsletter = new Newsletter("enews_body");
alert(newsletter._hWnd);
var dialogBox = new DialogBox();
</script>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/layout/main_top2.png" width="650" height="34"></td>
</tr>
<tr>
<td align="center"><table width="650" border="0" cellpadding="0" cellspacing="0" class="mainframe">
<tr>
<td><img src="images/layout/logo3.png" width="146" height="26"></td>
</tr>
<tr>
<td>
<div id="enews_header" class="header">
<table width="368" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="23" height="22" id="enews_newicon_bg"><img src="images/buttons/toolbox/new.png" width="23" height="22" class="button" id="enews_newicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_saveicon_bg"><img src="images/buttons/toolbox/save.png" width="23" height="22" class="button" id="enews_saveicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_boldicon_bg"><img src="images/buttons/toolbox/bold.png" width="23" height="22" class="button" id="enews_boldicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_underlineicon_bg"><img src="images/buttons/toolbox/underline.png" width="23" height="22" class="button" id="enews_underlineicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_italicicon_bg"><img src="images/buttons/toolbox/italic.png" width="23" height="22" class="button" id="enews_italicicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_lefticon_bg"><img src="images/buttons/toolbox/left.png" width="23" height="22" class="button" id="enews_lefticon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_centericon_bg"><img src="images/buttons/toolbox/center.png" width="23" height="22" class="button" id="enews_centericon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_righticon_bg"><img src="images/buttons/toolbox/right.png" width="23" height="22" class="button" id="enews_righticon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_olisticon_bg"><img src="images/buttons/toolbox/olist.png" width="23" height="22" class="button" id="enews_olisticon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_ulisticon_bg"><img src="images/buttons/toolbox/ulist.png" width="23" height="22" class="button" id="enews_ulisticon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_urlicon_bg"><img src="images/buttons/toolbox/url.png" width="23" height="22" class="button" id="enews_urlicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_highlighticon_bg"><img src="images/buttons/toolbox/highlight.png" width="23" height="22" class="button" id="enews_highlighticon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_fontcoloricon_bg"><img src="images/buttons/toolbox/fontcolor.png" width="23" height="22" class="button" id="enews_fontcoloricon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_imageicon_bg"><img src="images/buttons/toolbox/image.png" width="23" height="22" class="button" id="enews_imageicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_undoicon_bg"><img src="images/buttons/toolbox/undo.png" width="23" height="22" class="button" id="enews_undoicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
<td width="23" id="enews_redoicon_bg"><img src="images/buttons/toolbox/redo.png" width="23" height="22" class="button" id="enews_redoicon" onMouseOver="newsletter.ToolboxIconHover(this.id)" onMouseOut="newsletter.ToolboxIconHover(this.id)"></td>
</tr>
</table>
<table width="642" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="465">&nbsp;</td>
<td width="177"><img src="images/buttons/send.png" width="64" height="19" align="right"></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td align="center"><iframe src="../files/lala.php" id="enews_body" frameborder="0" framespacing="0" style="width: 640px; height: 600px; margin: 0px; padding: 0px; border: 1px solid #CCCCCC; z-index: 9999;" onLoad="newsletter.LoadComplete()"></iframe></td>
</tr>
<tr>
<td><div id="enews_footer" class="footer">
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"><select name="enews_loadBox" class="loadBox" id="enews_loadBox">
<option>dan_test</option>
<option>dan_testlocal</option>
<option>news_default</option>
<option>lala</option>
</select>
<img src="images/buttons/load.png" width="64" height="19" align="absmiddle" class="button" onClick="dialogBox.Show('ALERT','Confirmation','Are you sure you wish to load &quot;'+Element('enews_loadBox').options[Element('enews_loadBox').selectedIndex].text+'&quot;?<br>Any unsaved changes you have may be lost'); Element('enews_alertokbutton').onclick = function() { newsletter.Load(Element('enews_loadBox').options[Element('enews_loadBox').selectedIndex].text); }"></td>
<td width="33%" align="center"><img src="images/buttons/preview.png" width="64" height="19" align="absmiddle" class="button" onClick="dialogBox.Show('PREVIEW','Test',newsletter.Source, true, false)"></td>
<td width="33%" align="right"><img src="images/buttons/unchecked.png" name="enews_chkSource" width="16" height="13" align="absmiddle" class="button" id="enews_chkSource" onClick="newsletter.ToggleCheck(this.id)"> <img src="images/text/show_source.png" width="72" height="7" align="absmiddle"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="right" class="footerText">Copyright 2008 Digital Reflection</td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/layout/main_bottom.png" width="650" height="27"></td>
</tr>
</table>
</body>
</html>
j3n0vacHiLd
02-12-2008, 11:37 AM
Alright so I've found the cause that is making className not work.

At the top of my html document I'm using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If I remove all of that and just replace it with <html> the obj.className works as it is expected.

Why? Does anyone know why this would happen?

Edit: I've just tried something else.

If I have a comment at the top of the page and leave the <!DOCTYPE ..> like so:

<!-- test -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This also works. So what is going on here this is strange.

Can someone else test this out and see if it's just me?

Another Edit: Ok so there must be something in my original doc that's conflicting in some strange way and somehow the comment resolves this because

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">

function changeIt(obj)
{
if(obj.className != 'class1')
obj.className = 'class1';
else
obj.className = 'class2';
}

</script>

<style type="text/css">
.class1
{
background-color: #0000FF
}

.class2
{
background-color: #FF0000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>className test</title>
</head>

<body>
<div id="testdiv" onMouseOver="changeIt(this)" onMouseOut="changeIt(this)" class="class2"> Hover mouse here to test it </div>
</body>
</html>

Works without any issues, it's strange.
Kor
02-12-2008, 11:54 AM
You have weird and unusual js files, such as dialogbox.class.js . There is not a good idea to use dots inside the file's name. Also, you have used the deprecated language instead of type for the script codes. Should be:

<script type="text/javascript" src="js/common.js"></script>

When you omit the Doctype, the browser works in quirks mode and it is more permissive, but the Doctype is required

Another thing... Under XHTML you must close all the tags, even the "non-closed" ones:

<link href="css/behaviours.css" rel="stylesheet" type="text/css" />

But... Do you really need an XHTML Doctype? HTML strict will be good enough, in case you don't intend to work with XML files
j3n0vacHiLd
02-15-2008, 03:38 PM
Alright thanks for the tip Kor I will keep that in mind. I changed my javascriot includes and tried using just HTML Strict which didn't make any difference in IE but in Firefox it messed up my CSS formatting and things were not appearing as they should so I'm sticking with the XHTML Transitional.

I was going to leave a comment at the top of the document but that stopped my document.documentElement.scrollTop stop working. So after some research I found this interesting article.

http://javascript.about.com/library/bliebug.htm

It appears that IE has a bug with the DOCTYPE and it effects javascript. If you dont have a DOCTYPE you need to use document.body, if you do have a DOCTYPE you need to use document.documentElement, so I've finally got everything working but I still am required to have that comment on the top of the page to get className to work.
Kor
02-16-2008, 07:47 AM
It's rather a problem of the quirks/strict mode in IE:
http://www.quirksmode.org/viewport/compatibility.html