SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict agentforte's Avatar
    Join Date
    May 2007
    Location
    Toronto, ON, Canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Standard compliant vs Usability. disabled javascript? another way?

    Hello,

    I developed a strategy on my website, which will I explain here, and I have a question below. Some feedback would be appreciated.

    Using JavaScript, it is possible to make an element appear only when a checkbox is clicked. Unfortunately, the element will not appear for people with JavaScript diabled. Even if it is enabled, they might have a firewall that strips the JavaScript (i.e. on work computers, shared computers, etc).

    To fix this, here is a strategy I developed:

    1) Have the element (id="A") in the page with style display:block" or display:inline.

    2) Have the checkbox in another element (id="B") with style display:none

    If JavaScript is disabled:
    A) The onload event "disappear" does not work, so Element A displays right from the beginning;
    B)The onload event "appear" does not work, so Element B (with the checkbox) does not appear (the checkbox would not control Element A anyway, so we don't want it there)

    If JavaScript is enabled:
    A) The onload event "disappear" works, and makes Element A disappear;
    B) The onload event "appear" makes the checkbox appear (which can contrel Element A, making it appear again, or disappear again)

    Please read on. (I was nice enough to include the code for the above actions)

    *******
    I am aiming to make my website compliant with HTML 4 Strict,
    unfortunately to make a link open in a new window, javascript is required for compliance.
    I plan to use the same strategy as above, so it still opens in a new window if javascript is disabled. For example:

    if javascript is disabled, a link appears like so:
    <a href="hello.html" target="_blank">helloworld</a>

    if javascript is enabled, this link appears instead:
    <a href="hello.html" rel="external">helloworld</a>
    Where JavaScript handles the open in new window request.

    If I use the same strategy as above, would the site be comliant with HTML 4 Strict?
    Also, is there any disadvantages to this approach?

    ********

    The following helps usability for people with JavaScript disabled:

    Code HTML4Strict:
    <head>
    <style type="text/css">
    #appearance {display: block}
    </style>
     
    <script type="text/javascript">
    function toggle(targetId, sourceId){
      target = document.getElementById( targetId );
      if (sourceId.checked){
      target.style.display = "inline";
      } else {
      target.style.display = "none";
      }
    }
     
    function disappear(targetId, sourceId){
      target = document.getElementById( targetId );
      target.style.display = "none";
    }
     
    function appear(targetId, sourceId){
    target = document.getElementById( targetId );
    target.style.display = "inline";
    }</script>
    <head>
     
    <body onload="disappear('A'); appear('B')">
     
     
    <p id="B">
    Turn A on and off: <input type="checkbox" onClick="toggle('A', this)" />
    </p>
     
    <div id="A"><p>A (Displays after clicking checkbox, or right when page loads if javascript disabled)</p></div>
     
    </body>
    <!-- copyright  2007 Frank Forte -->

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the w3 validator to check your code for formal compliance:
    cut and paste it into a textarea at
    validator.w3.org

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by agentforte View Post
    Using JavaScript, it is possible to make an element appear only when a checkbox is clicked.
    A general strategy would be to design the page so that when javascript is disabled, the form fully loads, including all hidden inputs. This way, someone without javascript can access the full page. Then, in javascript, these optional fields become hidden, only to be revealed when appropriate. The page then has to be designed to make it clear which fields are optional.

    Code:
    function toggle(targetId, sourceId){
      target = document.getElementById( targetId );
      if (sourceId.checked){
      target.style.display = "inline";
      } else {
      target.style.display = "none";
      }
    }
     
    function disappear(targetId, sourceId){
      target = document.getElementById( targetId );
      target.style.display = "none";
    }
     
    function appear(targetId, sourceId){
      target = document.getElementById( targetId );
      target.style.display = "inline";
    }
    Some tips on the code above:

    • the sourceId parameter in disappear and appear is never used, so you can remove that from those functions
    • appear is designed to only work with inline elements, so it won't work properly with block elements, such as divs. You can make it more general by setting display to an empty, which will make the element inherit it's original style, whether it is block or inline
    • toggle takes two parameters, targetId and sourceId, but to make the function work, you have to pass in an element to sourceId, not an actual ID. So it might be a good idea to rename the parameter sourceElement or sourceEl
    • the inline comment also applies to toggle, you could just set display to an empty string


    With that in mind, you could re-write your code like this:

    HTML Code:
    function setShown(id, show){
      var el = document.getElementById(id);
      el.style.display = show ? "" : "none";
    }
    
    Turn A on and off: <input type="checkbox" onclick="setShown('A', this.checked)" />
    If you'd like to make the "hide unless javascript is on" code more general, you could make a class name for it, like so:

    HTML Code:
    <html>
    <head>
    <style type="text/css" media="screen">
    .show-only-if-script-on {
      display: none;
    }
    </style>
    <script type="text/javascript">
    function setShown(id, show){
      var el = document.getElementById(id);
      el.style.display = show ? "" : "none";
    }
    
    function initScriptOnlyEls() {
      var els = document.getElementsByTagName("*");
      for (var i=0; i < els.length; i++) {
        if (els[i].className) {
          var classes = els[i].className.split(" ");
          for (var i=0; i < classes.length; i++) {
            if (classes[i] == "show-only-if-script-on") {
              classes[i] = "";
            }
          }
          els[i].className = classes.join(" ");
        }
      }
    }
    </script>
    <head>
     
    <body>
     
    <p class="show-only-if-script-on">
      Turn A on and off: <input type="checkbox" onclick="setShown('A', this.checked)" />
    </p>
     
    <p id="A">
      A: Shown after clicking the checkbox, or as soon as the page loads if javascript is disabled.
    </p>
    <script type="text/javascript" charset="utf-8">
      initScriptOnlyEls();
      setShown('A', false);
    </script>
     
    </body>
    </html>
    If I use the same strategy as above, would the site be comliant with HTML 4 Strict?
    Probably not. If you want to use frameset attributes, just use a frameset dtd.

    hth,
    Douglas
    Last edited by DougBTX; Jun 5, 2007 at 11:36.
    Hello World

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is in response to DougBTX's post. (I'm going to save space by not quoting it.)

    1) It's best to avoid using inline even handlers, especially on <body>.

    There is a way to call functions before the page completely loads. Check these out:
    window.onload (again)
    DomLoaded Object Literal

    2) What happens if an element belongs to more than one class? Your initScriptOnlyEls function can't deal with that possibility.

    3) I wouldn't set the display property to "inherit". That would set the property to the value of that element's parent's property, so it might not always act as expected. I would just set the display property to an empty string.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All valid points. As I was criticising someone else's code, I probably shouldn't have left things like that in. I've made some improvements along those lines, though perhaps it muddies the points I was trying to raise. A better solution would be to out-source these things to a common library.
    Hello World

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I consider class handling functions to be an essential feature left out of the HTML DOM.

    I posted the ones I created and use in this thread.

    P.S. I like your Basic CSS Box Model Demo. I've included it in my list of links on the box model for a while now.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Addict agentforte's Avatar
    Join Date
    May 2007
    Location
    Toronto, ON, Canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you! keep the comments coming

    I really appreciate all the replies. They are very helpful.

    When I started out making my website, I thought knowing some basic MySQL, PHP, and html would get me by. This is going to make the website so much easier to maintain and work how I want it to.


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
  •