www.webdeveloper.com
Results 1 to 6 of 6

Thread: Show div when JS Off

  1. #1
    Join Date
    Jun 2008
    Posts
    219

    Show div when JS Off

    Hi, currently I use the Switch Content script- from Dynamic Drive to handle a couple of drop downs on my blog scripts. While it works fine, it seems an awful lot of code to do the few items I need.

    The big deal on this is that if JS is turned off in the browser, the divs can still be seen.

    There are some shorter bits of JS to do a drop down div, but none I have found will show the div if JS is off.


    This is a much shorter div drop:
    Code:
    The Javascript
    ----------------------------
    // -- drop divs - start with 2
    function showHide(elementid) {
     if (document.getElementById(elementid).style.display == 'none') {
      document.getElementById(elementid).style.display = 'block';}
       else {document.getElementById(elementid).style.display = 'none';}
    }
    
    The HTML
    ----------------------------
    <div><a href="javascript:showHide('2')"><b>First</b></a></div>
    <div id="2" style="display:none;">
    Lorem ipsum dolor sit amet.
    </div>
    
    <div><a href="javascript:showHide('3')"><b>Second</b></a></div>
    <div id="3" style="display:none;">
    Ut wisi enim ad minim veniam.
    </div>
    How do I make this show when javascsript is off?

    Hope someone can help on this - thanks.

  2. #2
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    Generally a toggle is going to take scripting.

    You could simplify it and speed it up by using CSS classes:
    .show {display:block;}
    .hide {display:none;}

    then the script can be:
    function showHide(elementId)
    {
    document.getElementById(elementId).className=
    (document.getElementById(elementId).className=='none')? 'block':'none';
    }

    You could do at least a one way change by targeting off of the click

    You might be able to get a toggle with two different clickable links but it would be a little dicey.
    Cd&
    one of my toys And my repository and my old self ranting plus a bonus Getting the most out of Q/A sites
    Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack

  3. #3
    Join Date
    Jun 2008
    Posts
    219
    but it would be a little dicey
    bit of an understatement

    I've written my own blogging software in Perl and so there's just one line for the data I call (in 2 places). I'd forgotten about the noscript tag, so think that's probably going to end up the easiest. Otherwise we'll be running around in circles.

    It's not about browser usage, but things like GoogleBot picking up my archives and category list/links.

    Thanks

  4. #4
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    Yeah no script will work as long as you can live with it just staying default. The Google spider will pick it up whether you display it or not. It does not process css or javascript; It just reads the text. As long as you are not mssking and showing users different content than Google as a normal thing then there will not be an issue with the SEs.
    Cd&
    one of my toys And my repository and my old self ranting plus a bonus Getting the most out of Q/A sites
    Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    css: (in <head>)
    Code:
    #2{ display: none;}
    .js #2{ display: block;}
    js: (early in <body> to avoid FOUC)
    Code:
    document.body.className+=" js"
    that way, it's easy to show/hide/adjust many divs using regular CSS and a tiny bit of JS rather than complex/slow/brittle DOM code by simply adding ".js " to any CSS selector you want active only when scripting works.
    you can set a default to no js and easily clobber the rules because for any selector, ".js "+selector is more specific (and thus out-cascades) the default rule's selector on its own.
    Last edited by rnd me; 02-10-2013 at 10:06 PM.

  6. #6
    Join Date
    Jun 2008
    Posts
    219
    Quote Originally Posted by COBOLdinosaur View Post
    ... Google spider will pick it up whether you display it or not. .
    Didn't know that. Thought if anything had any JS the bot ignored the div etc.

    Will leave it as is then.

    Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles