SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot JonathanS's Avatar
    Join Date
    Jun 2004
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show one thing if JS is turned on, another if not?

    http://JWSquire.com <-- my website.

    I have the (CSS) opacity set to 30% on the images and use this free
    snippet of JavaScript that will reset the CSS to this when the mouse is
    NOT over a image. When it rolls over, it shows it at 100%.

    Now, how would I go about coding it so that if a user has JavaScript
    turned off in their browser, it will automatically set the opacity set back
    to 100%? So that way they see the regular image...

    Any help would be much welcomed

  2. #2
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are probably applying a class to the elements to set the opacity to 30&#37;.
    Instead of doing this directly in your HTML you need to use Javascript to apply the class (on page load), so that for JS-disabled users the images remain fully visible.

    You could apply a class to trigger the JS to add your 30% class to the elements.

    Using YUI your code would look something like this:
    Code JavaScript:
    YAHOO.util.Event.onDOMReady(function() {
      var $D = YAHOO.util.Dom;
      $D.replaceClass($D.getElementsByClassName('toFade'), 'toFade', 'faded');
    });
    Assuming your class name for 30% opacity is faded and you apply a class name of toFade to identify the elements you want to fade.

    Most other JS libraries will also have DOM methods to make searching by class name easy.

  3. #3
    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)
    You will need to start with no opacity and use JavaScript to set it to 30&#37;. But first, some cleaning up.

    Currently the images are like this

    Code HTML4Strict:
    <img id="JWSquire_Website_04" src="http://JWSquire.com/images/JWSquire-Website_04.jpg"
        width="174" height="304" border="0" alt="JWSquire.com - Landscape Gallery"
        style="-moz-opacity:0.4;filter:alpha(opacity=40)"
        onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
        onmouseout="this.style.MozOpacity=0.3;this.filters.alpha.opacity=30" />

    The inline scripts and css here is the cause for a lot of confusion. It is a bad idea to write javascript directly inline with the HTML. For the easiest time of maintaining your code, it's best to separate the content, presentation and behaviour, that is, the HTML, CSS and JavaScript.

    Because of this, inline event handlers are a big no-no. Quirksmode has a good piece about inline event handlers (early event handlers) and why traditional event registration should be used instead.

    Because you don't want the style being applied if there is no javascript, you should have no style there to begin with, and let javascript apply an existing class for you. That way the presentational styles will be all kept together.

    Let's separate out the css and javascript, with a couple of functions to be attached to the images.

    That leaves the image a lot easier to manage

    Code HTML4Strict:
    <img id="JWSquire_Website_04" src="http://JWSquire.com/images/JWSquire-Website_04.jpg"
        width="174" height="304" border="0" alt="JWSquire.com - Landscape Gallery" />

    The CSS can be added to your stylesheet

    Code CSS:
    .opaque {
        -moz-opacity:0.4;
        filter:alpha(opacity=40);
    }

    and the JavaScript should be in a separate file, called js/opacity.js

    Code Javascript:
    function partlyVisible(e) {
        e = e || window.event;
        img = e.target || e.srcElement;
        img.className = 'opaque';
    }
    function fullyVisible(e) {
        e = e || window.event;
        img = e.target || e.srcElement;
        img.className = '';
    }

    Now you only have to loop through the images and attach the events. For that it's good to have an identifier on the TR element called gallery but in this example I will just take the third TR element on the table.

    Code Javascript:
    var table, row, images, i;
    var table = document.getElementById('table');
    var row = table.getElementsById('tr')[2];
    var images = row.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].onmouseover = fullyVisible;
        images[i].onmouseout = partlyVisible;
        images[i].className = 'opaque';
    };

    Place this in a javascript file at the end of the body, and you'll be good to go.

    Code HTML4Strict:
    ...
    <script type="text/javascript" src="js/opacity.js"></script>
    </body>
    </html>
    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
  •