SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

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 Make things disappear only if javascript enabled

    Hello,

    I have a form field that appears when a checkbox is clicked.
    The problem is: if JavaScript is disabled, the field does not appear.

    Does anyone have a simple script or suggestion on:

    1) if JavaScript is disabled, have the form field always showing

    2) if JavaScript is enabled, have the form field disappear, and only appear when a checkbox beside it is "on" or checked.

    I think this will be very useful to keep things tidy.

    P.S. what is the proper, standards compliant way to have a checkbox selected?
    1) <input type="checkbox" checked="checked" >, or
    2) <input type="checkbox" CHECKED>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use javascript to hide the field (on page load perhaps) so it stays visible to those with no javascript.


    Use javascript to toggle the field with the checkbox onclick.

    proper way I *believe* is checked="checked" but the 2nd way might still be OK in some HTML versions. Not exactly sure.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    NL, Rotterdam
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another option is to add the disappearing/showing elements in a noscript tag or use a noscript tag to include a little additional stylesheet. Then in your 'normal' stylesheet you can initially hide the element (display:none), but in the no-js style-sheet you overrule that by setting display to block.

    In xHTML all attributes should have values, so go for the 1st one, the second one is not valid xHTML.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by agentforte View Post
    1) if JavaScript is disabled, have the form field always showing

    2) if JavaScript is enabled, have the form field disappear, and only appear when a checkbox beside it is "on" or checked.
    Include the form fields in the markup.
    Add an onload event listener (which will only trigger if JavaScript is enabled) which hides the fields if the checkbox is unchecked.

    Quote Originally Posted by agentforte View Post
    P.S. what is the proper, standards compliant way to have a checkbox selected?
    1) <input type="checkbox" checked="checked" >, or
    2) <input type="checkbox" CHECKED>
    Both are valid HTML. #2 uses an HTML feature called attribute minimisation.
    #1 may not be understood by some ancient browsers, but it's the only one you can use for XHTML (in which case you close the tag with />).

    Quote Originally Posted by Type-O View Post
    Another option is to add the disappearing/showing elements in a noscript tag or use a noscript tag to include a little additional stylesheet.
    NOSCRIPT is not a very good solution. If JavaScript is enabled in the browser, but the user is behind a firewall that strips JavaScript code, there will be no script to run and the NOSCRIPT element won't be applied.

    Besides, you can't use NOSCRIPT to include a style sheet, because NOSCRIPT is not allowed in the HEAD. (It's for alternate content, and you can't have content in the HEAD.) LINK and STYLE elements can only occur in the HEAD.
    Birnam wood is come to Dunsinane

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

    Thumbs up thanks

    That is very helpful.

    I never thought about firewalls stripping javascript.

    cheers!

  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)
    There is a way to call a function before the page completely loads. Check these out:
    window.onload (again)
    DomLoaded Object Literal
    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.


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
  •