Stories
Slash Boxes
Comments
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

Beatnik (493)

Beatnik
  (email not shown publicly)
http://www.ldl48.org/

A 29 year old belgian who likes Mountain Dew, Girl Scout Cookies, Tim Hortons French Vanilla Flavoured Cappucinno, Belgian beer, Belgian chocolate, Belgian women, Magners Cider, chocolate chipped cookies and Perl. Likes snowboarding, snorkling, sailing and silence. Bach can really cheer him up! He still misses his dog.

Project Daddy of Spine [sf.net], a mod_perl based CMS.

In his superhero time (8.30 AM to 5.30 PM), he works on world peace.

Journal of Beatnik (493)

Tuesday April 22, 2008
12:37 PM

jQuery tricks: hiding body elements

[ #36217 ]
Someone gestured me towards jQuery recently. I've been playing around with it a bit. Yesterday I got the following idea: allow the visitor to minimize the fancy logos and just show the important stuff. I had the following:

<style type="text/css">
body {
        /* Some other stuff here */
        background-image: url(http://localhost/images/bg.jpg);
        background-repeat: repeat-x;
}
</style>
<body>
<!-- Some other stuff here -->
</body>

The background was the element I wanted to hide. I ended up with something like this:

<style type="text/css">
body {
        /* Some other stuff here */
        background-image: url(http://localhost/images/bg.jpg);
        background-repeat: repeat-x;
}
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<body>
<!-- Some other stuff here -->
<a id="mini" href="#" OnClick="
if ( $('#mini').text() == '[-]' ) { $('#mini').text('[+]') } else { $('#mini').text('[-]'); }
if ($('body').css('background-image') == 'url(http://localhost/images/bg.jpg)')
   { $('body').css('background-image','url()'); } else
   { $('body').css('background-image','url(http://localhost/images/bg.jpg)'); }
return false;">[-]</a>
<!-- and here -->
</body>

This adds a small [-] link that, when clicked, clears the background and changes to a [+]. Clicking again switches back.

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
 Full
 Abbreviated
 Hidden
More | Login | Reply
Loading... please wait.
  • Wouldn't switching the body's css class also work and make it all more maintainable? :)

    --
    Ordinary morality is for ordinary people. -- Aleister Crowley
    • Yes, ofcourse it would.. It's one of those TIMTOWTDI thingies :)
      • It’s not TMTOWTDI… it’s a matter of, as Larry likes to say, baby talk. What you did is a way to do it, but really it’s not a very good way. Switching the body class is one thing you should really do; the other is unobtrusive scripting [wikipedia.org]. Another thing is that you want to hide these links from people who don’t have Javascript in the first place.

        Consider:

        <style type="text/css">
        body { /* ... */ }
        body.with-bg { /* ... */ }
        #toggle-bg b { font-weight: normal }
        body.with-bg #to

        • Err, s/jQuery/\$/.

          • I can still remember those ugly times of NN4, where we still had to assume people who don't have JS on, might also have CSS off. The days really got better in this regard.

            --
            Ordinary morality is for ordinary people. -- Aleister Crowley