YUI: Simple show/hide div using Module

nobody@vox.com(Vani) — Thu, 01 Feb 2007 19:40:41 -0800

What you'll need from the Yahoo User Interface Library:
CSS: reset-fonts-grids.css
Javascript: yahoo-dom-event.js, container.js

Download 'em all.

Hop to it, campers! Call the YUI stuff first:

    <link rel="stylesheet" href="css/reset-fonts-grids.css" type="text/css" media="screen" charset="utf-8" />
    <script src="js/yahoo-dom-event.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/container.js" type="text/javascript" charset="utf-8"></script>

Add some styles for the prettiness factor. :o)

            .container h3 {
                font-size: 136%;
                font-weight: bold;
            }

                .container h3 a {
                    display: block;
                    float: right;
                    font-size: 77%;
                    font-weight: normal;
                    text-decoration: none;
                }

             .module {
                padding: 5px;
            }
    </style>

Apply YUI Javascript generously.

<script type="text/javascript" charset="utf-8">
YAHOO.namespace("cats.container");

    function init() {
        YAHOO.cats.container.module = new YAHOO.widget.Module("module");
        YAHOO.cats.container.show = new YAHOO.widget.Module("show");
        YAHOO.cats.container.hide = new YAHOO.widget.Module("hide");
        YAHOO.cats.container.module.render();

        YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.module.show, YAHOO.cats.container.module, true);
        YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.hide.show, YAHOO.cats.container.hide, true);
        YAHOO.util.Event.addListener("show", "click", YAHOO.cats.container.show.hide, YAHOO.cats.container.show, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.module.hide, YAHOO.cats.container.module, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.show.show, YAHOO.cats.container.show, true);
        YAHOO.util.Event.addListener("hide", "click", YAHOO.cats.container.hide.hide, YAHOO.cats.container.hide, true);
    }

YAHOO.util.Event.addListener(window, "load", init);
</script>

And the HTML. (Try holding your breath - it's really that quick!)

<div class="container">
        <h3>
            <a href="#" id="show" style="display: none;">Show</a>
            <a href="#" id="hide">Hide</a>
            Header
        </h3>
        <div id="module" class="module">
            <div class="bd">
                <ul>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                    <li><input type="checkbox" name="some_name" value="" id="some_name" />  Lorem ipsum dolor sit amet</li>
                </ul>
            </div> 
        </div> 
    </div>

And you're done! Easier than a soft-boiled egg.

Read and post comments | Send to a friend

YUI is your friend.

nobody@vox.com(Vani) — Thu, 25 Jan 2007 18:29:15 -0800

Once upon a time there was a young web developer. Each day, she trudged to work, sat in her hard, unfeeling office chair and laboriously put her CSS layout in place, block by block. Some days the graphic designer's needs were great, and she would sweat and toil for hours under the whip of Internet Explorer until the job was entirely satisfactory.
Then one day, she discovered YUI. It was like magic, and it blessed her the gift of multiple layouts in under 15 seconds. It unshackled IE's chains from her aching wrists and with a single "reset.css", freed her from being a hapless victim of browser wars forever... or at least for the next few months!

YUI. Like a dream come true. No matter what your skill level with CSS, I can only recommend that you take an afternoon or evening off, grab a beer or mug of hot tea and camp out with the excellent documentation the YDN (Yahoo Developer Network) has provided.

Reset - levels the playing field. Standardizes those annoying inconsistencies between browsers, margins being my particular bane.
Fonts - let all fonts be equal. Control all fonts from general text up to h1 using percentages. Safely!
Grids - the holy grail. There's nothing this baby can't do. (At least nothing I've run into yet.) With a handful of yui-b's and a couple of yui-u's, you can format (and maintain) a page layout faster than ever before. While some of the page layout widths may seem limited, the css is fairly easy to read and change to fit your needs.

I've also been using a couple bits in the YUI JS library: Container, Slider, and TabView. All are super-easy with not only great, step-by-step documentation, but also really great examples. (I tend to look at those first.) If you're new to flashy JS stuff, I highly recommend the book, DOM Scripting and the entire Yahoo User Interface library.

Read and post comments | Send to a friend

vaniraja.com

YUI: Simple show/hide div using Module

YUI is your friend.