...

View Full Version : Basic Setting of CSS properties/innerHTML



Kristofa
06-28-2009, 11:27 PM
I'm trying to create a script which allows multiple different tables to be shown on mouseover of an area (in this case, a table cell). However, I want the tables to appear in a long list for those who have JS disabled. For obvious reasons I don't want two copies of the tables in my html, and obviously only want the mouseover section to appear for those with JS enabled.

The basic problems I have so far is that I can't get the div "plaintables" (which contains all the tables) to be hidden when JS is enabled, and when I mouseover (activating scim()), I get the message [object HTMLTableElement] rather than the actual table.

Pretty much just starting out with Javascript, so this is probably something really simple I have done wrong. Thanks


<script type="text/javascript">

document.getElementById("plaintables").style.display="none";

function scim(){
var x=document.getElementById('t1');

document.getElementById('div').innerHTML=x

}

</script>

<!--Misc content here-->

<table>
<tr><td onmouseover="scim()">scims</td><td>2h</td></tr></table>

<div id="div">table hole</div>

<div id="plaintables" style="display:block;">

<table id="t1">
<tr><td>text about sscims here</td></tr>
</table>

<table id="t2">
<tr><td>text about 2h here</td></tr>
</table>

</div>

Just incase it matters, I don't have access to the contents of the <head> tag (This is for a site with an existing template) - it would be easier if everything could be done in the <body> section.

scrappy
06-28-2009, 11:34 PM
shouldn't document.getElementById('div').innerHTML=x be document.getElementById('div').innerHTML=x.innerHTML ? Otherwise you'll just get the type name instead.

Kristofa
06-28-2009, 11:39 PM
That's one problem solved - thanks.

Anyone got any ideas on why I can hide the other tables?

scrappy
06-28-2009, 11:48 PM
Hmmm, you want all the tables shown if no javascript and none shown if there is javascript. I think the best your going to get is to hide all tables when you detect javascript (eg. on form load) which may look a little unprofessional.

I suppose you could use the <noscript> tag, and then if javascript is supported, you could travel the tags in the document and clone (element.clonenode) the contents, modify the display properties, and then just set the display to visible on the table you want to view.

I wouldn't use innerHTML either, as the contents are not guaranteed to be reparsed. Use element.clonenode instead:
http://www.w3schools.com/dom/met_node_clonenode.asp

Kristofa
06-29-2009, 12:11 AM
Thanks scrappy, I'll get googleing :-)

Out of interest - why won't the way I did it work? I presume the problem is with this line:
document.getElementById("plaintables").style.display="none";

scrappy
06-29-2009, 08:01 AM
due to the fact that document.getElementById("plaintables") is null when your script runs as the page hasn't finished loading yet. Look into your JS error log and you'll see the error. Or even better, download Firefox and Firebug and you'll be able to see and step through the javascript and notice it returning null :)

you could try:
<body onload="document.getElementById('plaintables').style.display='none';">

but if you have a lot or a large table, the table could view before the above makes it invisible, hence my other suggestion which means it'll never be visible until the page is fully loaded and your javascript is running (hopefully, not tested).

Kristofa
06-29-2009, 02:49 PM
Thanks. :-)

Have firebug already - although never used it for javascript debugging, thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum