www.webdeveloper.com
Results 1 to 12 of 12

Thread: How to show if JS turned off?

  1. #1
    Join Date
    Jun 2008
    Posts
    223

    How to show if JS turned off?

    I've found a neat little single drop down for a link list. It works fine, but if I turn JS off in my browser the links will not show. I do have a 100 liner that will show links when JS is off, but I'd rather adapt this to do it.

    How do you make it so that the list will show regardless of whether JS is on of off. I want the drop if on, which is why I use it.

    Code:
    <html>
    <head>
    <title>Drop div</title>
    <style type="text/css">
    <!--
    #ardd{	width:180px;}
    #hide {width:180px; display:none; }
    -->
    </style>
    <script type="text/javascript">
    <!-- Begin
    // --- how do I show links if JS turned off?
    function toggle(id) {
     var state = document.getElementById(id).style.display;
      if (state == 'block') {document.getElementById(id).style.display = 'none';} 
       else {document.getElementById(id).style.display = 'block';}
    }
    // End -->
    </script>
    </head>
    <body>
    Trouble is if JS turned off it won't show and I want it to.
    <div id="ardd">
    <a href="#" onclick="toggle('hide');">Archive</a>
    </div>
    <div id="hide">
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    </div>
    </body>
    </html>
    Any help please?

    Thanks

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Lightbulb Something to consider ...

    Consider this...
    Code:
    <html>
    <head>
    <title>Drop div</title>
    <style type="text/css">
    
    #ardd{	width:180px;}
    #hide {width:180px; display:block; }
    
    </style>
    <script type="text/javascript">
    
    // --- how do I show links if JS turned off?
    function toggle(id) {
     var state = document.getElementById(id);
      if (state.style.display == 'block') { state.style.display = 'none'; } 
                                            else { style.style.display = 'block'; }
    }
    onload = function() {
      var sel = document.getElementById('hide');
      if (sel) { sel.style.display = 'none'; }
    }
    </script>
    </head>
    <body>
    
    <noscript>
    Trouble is if JS turned off it won't show and I want it to.
    </noscript>
    
    <div id="ardd">
    <a href="#" onclick="toggle('hide');">Archive</a>
    </div>
    <div id="hide">
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Jun 2008
    Posts
    223
    Hi JMRKER, gave it run and it showed a, 'style' is undefined error.

    I'm not very good at JS so couldn't really find it.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Exclamation

    Quote Originally Posted by edatz View Post
    Hi JMRKER, gave it run and it showed a, 'style' is undefined error.

    I'm not very good at JS so couldn't really find it.
    That has nothing to do with JS, it is referring to the CSS.
    I'm not getting that error on FF browser. Which browser are you using?


    Rest of it is working ... correct?

  5. #5
    Join Date
    Jun 2008
    Posts
    223
    Comes up with same error in every browser I have (IE7, FFX 4B, Chrome and NS9)

    On XP Pro

  6. #6
    Join Date
    Jun 2008
    Posts
    223
    Actually when you put the noscript tag in the reply it gave me an idea and I've solved it.

    It's actually inside a Perl sub routine on the blog script I'm writing. By putting my Perl foreach loop in a seperate sub I can call it as usual and if JS is off then I wrap the sub call again inside the noscript tag and it works a treat - never thought of that before ... hmmm other possibilities on that idea.

    The drop is for my archive list so I can have a single column blog if I want and not end up with a huge list going down the screen unless I need it.

    So you've been a real help in a sideways sort of way

    Thanks

    Here is how it can be done in HTML, for those interested.

    Code:
    <html>
    <head>
    <title>Drop div</title>
    <style type="text/css">
    #ardd {width:180px;}
    #hide {width:180px; display:none; }
    </style>
    <script type="text/javascript">
    <!-- Begin
    function toggle(id) {
     var state = document.getElementById(id).style.display;
      if (state == 'block') {document.getElementById(id).style.display = 'none';} 
       else {document.getElementById(id).style.display = 'block';}
    }
    // End -->
    </script>
    </head>
    <body>
    This is how to do it in HTML
    <div id="ardd">
    <a href="#" onclick="toggle('hide');">Archive</a>
    </div>
    <noscript>
    <div>
    <a href="#">Link</a><br>
    <a href="#">Link</a><br>
    <a href="#">Link</a><br>
    <a href="#">Link</a><br>
    </div>
    </noscript>
    <div id="hide">
    <a href="#">Link</a><br>
    <a href="#">Link</a><br>
    <a href="#">Link</a><br>
    <a href="#">Link</a><br>
    </div>
    </body>
    </html>
    Last edited by edatz; 05-03-2011 at 07:58 PM.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443
    OK, happy to help.
    Good Luck!

  8. #8
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    dont forget, I believe it's chrome, doesnt support the noscript tag unless it got updated recently

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Lightbulb

    Quote Originally Posted by edatz View Post
    Hi JMRKER, gave it run and it showed a, 'style' is undefined error.

    I'm not very good at JS so couldn't really find it.
    Simple typo in the else portion of the statement.
    This version works with or without the <noscript> tag on browsers I've tested.

    Code:
    <html>
    <head>
    <title>Drop div</title>
    <style type="text/css">
    
    #ardd{	width:180px;}
    #hide {width:180px; display:block; }
    
    </style>
    <script type="text/javascript">
    
    // --- how do I show links if JS turned off?
    function toggle(id) {
     var state = document.getElementById(id);
      if (state.style.display == 'block') { state.style.display = 'none'; } 
                                     else { state.style.display = 'block'; }
    }
    onload = function() {
      var sel = document.getElementById('hide');
      if (sel) { sel.style.display = 'none'; }
    }
    </script>
    </head>
    <body>
    
    <!--
    <noscript>
    Trouble is if JS turned off it won't show and I want it to.
    </noscript>
    -->
    
    <div id="ardd">
    <a href="#" onclick="toggle('hide');">Archive</a>
    </div>
    <div id="hide">
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    <a href="#" onFocus="if(this.blur)this.blur()">Link</a><br>
    </div>
    </body>
    </html>

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It would be a good habit, for both of you, to start the document with a Doctype. Without a Doctype, browsers will work in quirks mode, that means unpredictable

  11. #11
    Join Date
    Jun 2008
    Posts
    223
    Quote Originally Posted by DanInMA View Post
    dont forget, I believe it's chrome, doesnt support the noscript tag unless it got updated recently
    No notify came thru about the replies.

    I couldn't even find how to turn JS off in Chrome and assume you can't. Unless it's hidden so deep ......

    All the others seem to work fine with it. Since noscript is a standard thing, then Chrome will just have to get their thumb out.

    I'm trying very hard to keep the blog package under 150k and have all but finished at 146k, so will probably leave as is. I wanted to be able to post code and not have megabytes of JS WYWISYG to do it and have managed it. So am quite pleased. Perl and a baby JS HTML editor do the stuff.

    If anyone's interested in having a go with it, PM me. I've nearly completed it, just have to code the installer.

    I've grabbed the latest one JMRKER and will play with that too - thanks.

    Thanks for your input guys.

  12. #12
    Join Date
    Jun 2008
    Posts
    223
    It would be a good habit, for both of you, to start the document with a Doctype.
    That's just for here. I normally do.

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