SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to use JS to hide CSS from non-JS browsers

    I'd like to apply 0 opacity to certain images on the page, but hide it from browsers without Javascript ('cause I'll use JS to fade them in).

    This in the HEAD works if I had just 1 image:

    Code:
    <script type="text/javascript">
    document.write("<style type='text/css'>#zero {visibility:hidden;}</style>");
    </script>
    I could then give the image an id="zero".

    However I want to do that thoughout the site with several images per page, so normally I'd like to assign them to a class, e.g. class="zero". What Javascript works for a class? Ive tried unsuccessfully:

    Code:
    <script type="text/javascript">
    document.write("<style type='text/css'>.zero {visibility:hidden;}</style>");
    </script>
    Thanks for any help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code Javascript:
    document.getElementById('idname').className = 'zero';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, but wouldn't that just apply .zero to one element with id="idname"? I'm not quite clear how that would apply the style to all elements with the class="zero".

    Sorry, I'm quite new to that and a bit confused...

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    No, that code would set the class for the element in place of whatever classes it already applies to.

    If you already have the class on all entries where you want it you can use JavaScript to look through all the elements with that class to apply whatever change you want. I have an example of a getElementsByClass() function at http://javascript.about.com/library/bldom08.htm
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by spirelli View Post
    Hmm, but wouldn't that just apply .zero to one element with id="idname"? I'm not quite clear how that would apply the style to all elements with the class="zero".

    Sorry, I'm quite new to that and a bit confused...
    You do not want the element to begin in a hidden state, because when there is no javascript available, you will then be left with the fully visible image.

    It's best to not set style attributes because of cross-browser issues, and setting new css properties is an even worse situation. Instead, set a class name onto the element itself.

    A class name can have two different purposes.
    • As a style sheet selector (when an author wishes to assign style information to a set of elements).
    • For general purpose processing by user agents.


    The second purpose is one that we can use, by applying a class name that will be processed by javascript, and changed to the desired one you want, zero.

    Code HTML4Strict:
    <img src="..." class="opaque">

    Dustin Diaz has a very good version of the function that lets you speed up the class search by limiting it to a certain area of the DOM, and/or by tag.
    http://www.dustindiaz.com/getelementsbyclass/

    Now you can easily search for the opaque images and make them zero instead.

    Code Javascript:
    var images = getElementsByClass('opaque', null, 'img');
    for (var i = 0; i < images.length; i++) {
        images[i].className = 'zero';
    }
    Last edited by paul_wilkins; Jan 29, 2008 at 13:55.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •