#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9

    Question Alternative for javascript, noscript??


    Hi, I have an 'about us' page which uses javascript to switch between 'tabs' to display different content. Trouble is, if the user switches off JS in their browser, my page no longer works. I tried using the <noscript> tag to create an alternative but my original content is still being displayed.

    Here is my code, which uses the javascript:
    Code:
    <div id="about_container">
       <div id="tabs">
       
           <div id="tab1">
    	      <h4 id="head1" onclick="change_content(1);">History</h4>
    	   </div>
    	   
    	   <div id="tab2">
    	      <h4 id="head2" onclick="change_content(2);">General Information</h4>
    	   </div>
       </div>
       
       <div id="wrapper">
           
    	   <div id="tab1content" class="tabBody">
    	      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
    		  dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 
    		  been the industry's standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting 
    		  industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the 
    		  printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is 
    		  simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    		  the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
    		  dummy text ever since the 1500s</p>
    		  <img src="/GardenableImproved/images/conservatory.jpg" alt="Workplace" title="Workplace" id="workplace_img" border="0" />
    	   </div>
    	   
    	   <div id="tab2content" class="tabBody">
    	      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by 
    		     injected humour, or randomised words which don't look even slightly believable.There are many variations of passages of Lorem 
    			 Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't 
    			 look even slightly believable.There are many variations of passages of Lorem Ipsum available, but the majority have suffered 
    			 alteration in some form, by injected humour, or randomised words which don't look even slightly believable.There are many variations 
    			 of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words
    			 which don't look even slightly believable.There are many variations of passages of Lorem Ipsum available, but the majority have 
    			 suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many 
    			 variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or 
    			 randomised words which don't look even slightly believable. or randomised words which don't look even slightly believable. There 
    			 are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
    			 or randomised words which don't look even slightly believable.</p>
    	   </div>
    	   
       </div>
    </div>
    As you can see I have 'tab1' and 'tab2' which both have a heading 4 inside them, which uses the function to change the content when they are clicked. If javascript is turned off, I wanted to create 2 separate div's containing both sets of information separately.

    Hope I explained well enough.

    Look forward to your replies.

    Regards,

    NM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    It's not clear to me what you mean by this:
    If javascript is turned off, I wanted to create 2 separate div's containing both sets of information separately.
    Anyway, I would not use noscript elements. The best approach is to use progressive enhancement techniques for writing the JavaScript. I suggest you read these:
    You cannot rely on JavaScript being available. Period.
    Progressive Enhancement and the Future of Web Design
    Accessibility is seldom just up to the interface developer
    "This is not another XMLHttpRequest article"

    Here's an old demo which does something similar to what you're doing. It's a basic example of progressive enhancement.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript"><!--
    function toggleDisplay(elId) {
      if(!document.getElementById) return;
      var el = document.getElementById(elId);
      if(!el || !el.style) return;
      el.style.display = el.style.display=='none'?'':'none';
    }
    
    window.onload = function(){
      if(!document.getElementById) return;
      document.getElementById('demoBtn').onclick=function(){
        toggleDisplay('one');
        toggleDisplay('two');
      }
      toggleDisplay('two');
    }
    // -->
    </script>
    </head>
    <body>
    
    <div><input id="demoBtn" type="button" value="swap elements"></div>
    <div id="one">element one</div>
    <div id="two">element two</div>
    
    </body>
    </html>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    What I mean is that if javascript is turned off, rather than not being able to switch between the content, I wanted to display 2 separate div's containing the relevant information.

    Kind regards,

    NM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Yeah, that's what I thought you meant but I wanted to be sure.

    Do you have any questions about my previous reply? One thing I should note (which is not done correctly in the demo I posted), is that if you have a link or button that only works when JavaScript is enabled, you should use JavaScript to add it to the page in the first place.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Yea i like that example you posted. Works exactly how I want, trouble is I can't understand that code which is annoying me right now so I'm gonna scrap JS for that page and just display it as 2 separate div's and 2 separate headings.

    Thanks anyway.

    Regards,

    NM.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Some intermediate techniques were used in the demo script. I would be happy to try to explain them if you'd like. Is it just the things in the "toggleDisplay" function that are mysteries to you or do you not fully understand the onload event handler either?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    I understand the window.onload event handler as I have used it in conjunction with a setInterval() to display/update time every second (on a different site).

    What I'll do is, explain what I think is happening, then if you would be so kind to tell me my errors, I would really appreciate it.

    Ok so, when the document loads you run an anonymous function. You check to see if document.getElementById() does not return TRUE, if so return.

    Just to note, I'm not sure why you haven't passed an ID to the getElementById function....

    If we get past this, when the button is clicked we run a function, this function will take in the id of the div elements and swap them accordingly. To finish the onload, if nothing was clicked, we display <div id="two"> by default.

    When the button is clicked, we go into another function called toggleDisplay(). This function accepts 1 parameter, the id of the div element. Again we check to see if getElementById doesn't return true and if it doesn't, we return from the function. If we do have the element we carry on.

    This is pretty much where I get completely lost and also I don't understand how this works without JS. Like I said though it is exactly the effect I wanted I just hate to copy and paste code which I don't understand how it works because I'll never learn anything!

    Kind regards,

    NM.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Just to note, I'm not sure why you haven't passed an ID to the getElementById function....
    It's a best practice to check for support for a feature before you try to use it (it's often referred to as "object detection"). However, in this case, since it's a DOM Level 1 (DOM1) feature, you have to go back to ancient browsers, like IE4 and Netscape 4, to find a major browser that doesn't support it.

    To finish the onload, if nothing was clicked, we display <div id="two"> by default.
    Not quite. The fact that the onclick handler was defined doesn't matter. Also the element with the ID "two" is hidden by default.

    This is pretty much where I get completely lost and also I don't understand how this works without JS.
    Without JS support enabled, nothing happens. The elements are all visible, because the JS script didn't hide any when the page loaded.

    The following line gets (or attempts to anyway) a reference to the element with a given ID and stores it in a the "el" variable. If it fails, the "null" value will be returned.
    Code:
    var el = document.getElementById(elId);
    This line makes sure that such an element exists and that it has the style property/object we need to use to show or hide it:
    Code:
    if(!el || !el.style) return;
    This line uses the "ternary operator" (follow the link for more information), which is just a basic if/else conditional that can be used within a statement, allowing for shorter code (which, in this case, is about half):
    Code:
    el.style.display = el.style.display=='none'?'':'none';
    it's the same as this, which checks if the element is hidden (via a certain method) and if so shows it, otherwise it hides it:
    Code:
    if(el.style.display=='none'){
      el.style.display = '';
    } else {
      el.style.display = 'none';
    }
    Does that more sense to you now?
    Last edited by Kravvitz; November 20th, 2012 at 03:13 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Ah ok I never knew you could check for support using that. I'll remember that one!

    Riiight so because the JavaScript is what set's the display to none (depending on certain things), is it's turned off, both are displayed because the 'display' code never executes.

    I am aware of ternary operators and used them before in PHP.

    so it's basically saying, if this element's display attribute is equal to 'none' already, do nothing, else, set it to none...

    Thanks for your help to understand the code. I have a better understanding now.

    Kind regards,

    Nm.

IMN logo majestic logo threadwatch logo seochat tools logo