SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tricky div hiding issue

    Hi,

    I have a div that I set its display to 'none' and becomes visible (on invisible again) when users click on a span that triggers a js function that switches display from 'none' to 'block' and vise versa.

    Since this div will remain hidden if javascript is not enabled in the user's browser, I'm looking for a way to have it displayed such case.

    What I did is I changed the display to 'block' as default, and added a js function that changes display to 'none' as soon as the page loads (using the onload command in the <body> tag).

    The only problem that I have with this method is that the div does show up and only disappears once the page finishes loading. I want it to be completely unnoticeable until the user invokes the function that makes it visible.

    Can anyone think of a way to do it?

    Thanks,
    BB

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could put the div that you hide within a noscript tag.

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    javascript contained in (or loaded from a src) script in the head of a document can load a stylesheet for javascript enabled users,
    using either document.write or document.createElement('link'). The stylesheet will download and be in effect when the body renders.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That will still trigger the flicker issue though, since you are changing something after the DOM is loaded.

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test dom</title>

    <script type="text/javascript">
    Code:
    if(document.createTextNode){
    	onload= function(){
    		document.close();
    		document.getElementById('showlist').onclick= function(){
    			var targ= document.getElementById('thelist');
    			if(targ.className== 'hidelistClass') targ.className='';
    			else targ.className= 'hidelistClass';
    		}
    	}
    	document.write('<style>.hidelistClass{display:none}button{margin:0 1em;cursor:pointer;font-size:1em}<\/style>');
    }
    </script>

    </head>

    <body>
    <h1 id="p_opts">Dom test <button id="showlist">List</button></h1>
    <ul id="thelist" class="hidelistClass">
    <li>First list item</li>
    <li>Second list item</li>
    </ul>
    </h1>
    </body>
    </html>

    The script can be loaded via a src attribute, the style can be a dom created link element with a href to a style sheet url.
    The script is evaluated before the body starts to render, and any links to stylesheets download before the rendering continues.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But then again, why not just use the noscript tag?


Bookmarks

Posting Permissions

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