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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hide a div if javascript is disabled?

    I have a link to print the page on my site and it relies on javascript being on. So if javascript is disabled, I'd like to not have this div display. How would I do that?

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Place this into the head:

    Code:
    <head>
    <script type='text/javascript'>
    function displayDiv(){
    	var link = document.getElementById('js');
    	link.style.display = 'block';
    }
    </script>
    <noscript>
    	You need Javascript enabled to view all of the content on this page.
    </noscript>
    </head>
    Place this into the body:

    Code:
    <body onload="displayDiv()">
    <div style='display:none;' id='js'>
    Content
    </div>
    </body>
    Last edited by Dom Mv; 01-21-2012 at 12:46 AM.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That just made it not show up at all... other suggestions?

  • #4
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I just tested it again and everything works fine on my end. It should display the 'Content' if Javascript is enabled and 'You need Javascript enabled to view all of the content on this page.' if it isn't.

    What happens when you save this as a .html file and open it up with and without Javascript enabled?

    Code:
    <html>
    	
    <head>
    <script type='text/javascript'>
    function displayDiv(){
    	var link = document.getElementById('js');
    	link.style.display = 'block';
    }
    </script>
    <noscript>
    	You need Javascript enabled to view all of the content on this page.
    </noscript>
    </head>
    
    <body onload="displayDiv()">
    <div style='display:none;' id='js'>
    Content
    </div>
    </body>
    
    </html>

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well that worked. Let me try playing with it again...

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I got it working. Thanks for your help!

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The noscript tag became obsolete a long time ago. Anything you could do with that tag can now be done with far shorter code by using JavaScript. Also you don't need to wrap an entire block of content when you use this option - you can set up JavaScript to hide individual words (<noscript> is a block tag and so can only hide entire blocks). Also you may not just want to hide certain content when JavaScript is disabled, you may want to hide it if the browser doesn't support parts of JavaScript rather than the entire language).

    Code:
    <html>
    <head>
    <style>
    #js {display:none;}
    </style>
    </head>
    <body>
    <div id="njs">
    Alternate content to allow those without JavaScript enabled to use the page goes here.
    </div>
    <div  id="js">
    Content for the JavaScript enabled version of the page goes here
    </div>
    
    <script type='text/javascript'>
    document.getElementById('js').style.display = 'block';
    document.getElementById('njs').style.display = 'none';
    </script>
    </body>
    </html>
    Remember to make sure that your page is still functional without JavaScript even if it means reloading web pages a dozen times to achieve the same end result as can be done in one JavaScript enabled page. Most people with JavaScript disabled have done so because enabling JavaScript makes their browser unusable.
    Last edited by felgall; 01-21-2012 at 03:26 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    629
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by felgall View Post
    The noscript tag became obsolete a long time ago. Anything you could do with that tag can now be done with far shorter code by using JavaScript.
    Really? How should I do this with far shorter code, and how would it show up if JavaScript is disabled?
    Code:
    <noscript>
    <p>You must have scripting enabled to make full use of this page.</p>
    </noscript>

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by jalarie View Post
    Really? How should I do this with far shorter code, and how would it show up if JavaScript is disabled?
    [code]
    The code in the post where I said it does exactly that with shorter code than the original. It shows up when JavaScript is disabled because it is a part of the original page content and the JavaScript to hide it can't run.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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