Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts

    Basic Setting of CSS properties/innerHTML

    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

    Code:
    <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.
    Learning along the way...

  • #2
    New Coder
    Join Date
    Nov 2008
    Posts
    59
    Thanks
    5
    Thanked 4 Times in 4 Posts
    shouldn't document.getElementById('div').innerHTML=x be document.getElementById('div').innerHTML=x.innerHTML ? Otherwise you'll just get the type name instead.

  • Users who have thanked scrappy for this post:

    Kristofa (06-29-2009)

  • #3
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    That's one problem solved - thanks.

    Anyone got any ideas on why I can hide the other tables?
    Learning along the way...

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    59
    Thanks
    5
    Thanked 4 Times in 4 Posts
    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
    Last edited by scrappy; 06-29-2009 at 12:52 AM.

  • #5
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    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";
    Last edited by Kristofa; 06-29-2009 at 01:15 AM.
    Learning along the way...

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    59
    Thanks
    5
    Thanked 4 Times in 4 Posts
    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).
    Last edited by scrappy; 06-29-2009 at 09:08 AM.

  • #7
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Thanks. :-)

    Have firebug already - although never used it for javascript debugging, thanks!
    Learning along the way...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •