Posts Tagged ‘Data Formats’

Creating a fadeOut loader with Dojo

Wednesday, March 3rd, 2010
Dojo Toolkit

Image via Wikipedia

Intro

If you’re building a large site and utilizing Dojo you can get pages that are crammed full of widgets, layout containers, dialogs and more. All these useful features give your site a clean and very user-friendly experience. One side-effect, however, is that the HTML/CSS is loaded and then Dojo begins parsing which can cause your page to jump around while each element is rendered. I found this highly annoying so I scoured the web (<3 !) and managed to find a solution. I utilize a #loader div which covers the entire screen and then fade it out using dojo.addOnLoad(). This is extremely simple to implement and should only take a few minutes.

Live Demonstration

Take a peak at the live demonstration of the basic loader (or the fancy loader) to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML consists of a single div located directly under the tag of your page and another for content that will be parsed by Dojo.

I AM SOME CONTENT!

The CSS

CSS stretches the div to the full viewport of the page. I color the #loader the same color as the background of the page I’m loading to give it a nice and smooth transition.


The Script

Even the Dojo code is easy! We tell dojo to manually parse the content div and then we add a fadeOut animation to the #loader div and onComplete set the loader display to none.



Pump it up!

So, we created a loader, and it’s pretty nifty but let’s pump it up a bit by adding a “Loading…” message a la Google’s GMail. First, we need to modify the #loader div to include a #loaderInner which will house our loading message like so:

Loading...
I AM SOME CONTENT!

Next, we tweak the CSS a bit to colorize the loading message, throw in some padding, and give it a bit of flare.

        body {
                background: #fff;
        }

        #content {
                text-align: center;
                width: 100%;
        }

        #loader {
                background: #fff;
                height: 100%;
                left: 0;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 0;
                vertical-align: middle;
                width: 100%;
                z-index: 999;
        }

        #loaderInner {
                -webkit-box-shadow: -1px 1px 5px #888;
                background-color: #FFFFCB;
                color: #c99800;
                display: table;
                font-size: 16px;
                padding: 5px 13px;
                text-align: center;
        }

That’s one sexy loader if I do say so myself – enjoy it!

Creating fancy drop-down menus with HTML, CSS, and Dojo.

Tuesday, March 2nd, 2010

Preface

Waaaaasssuuuuupppp? Kidding. Drop-down menus are always a pain for me because you have to remember to do all kinds of CSS and it has to work in 45 different browsers. Rubbish, I say! I recently decided to add an animated drop-down menu to for the user section. The HTML/CSS was pretty straight forward but I hit a snag with the JavaScript so I sent an email to the Dojo Toolkit Mailing List and got a quick response from Peter Higgins (those Dojo guys are awesome). I promised a few blogs (and more to come in the future)  to showcase some of Dojo’s quick & easy wow features. This post assumes that you already know the basics about Dojo and have included Dojo somewhere in your project. If not, please check out Dojo Campus and the Dojo Toolkit homepage to get started.

Live Demonstration

Take a peak at the live demonstration to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML is pretty straight forward and utilizes an unordered list for the layout. Note: all of the code here is going to be a straight copy/paste from the Blitzaroo source.


The only required attributes are class=”tabs” on the root

    and class=”dropdown” on each
      that is going to be a drop-down menu. The above menu has four regular links (Dashboard, Events, Profiles, and Teams.) and one drop-down menu (Add). I’ve spruced it up a bit by adding a few images but that is completely optional. I use the id tag on the root
        for styling the menu. No surprise here but the HTML renders a menu that looks like:

        The CSS

        .downArrow {
                font-size: 85%;
                vertical-align: text-bottom;
        }
        
        #userMenu {
                -webkit-border-radius: 8px;
                background: #f5faf5;
                border: 1px solid #bbcfbb;
                display: table;
                font-size: 13px;
                font-weight: bold;
                list-style-type: none;
                margin: 8px 0;
                padding: 0 12px;
                position: relative;
        }
        
        #userMenu li {
                cursor: pointer;
                font-size: 12px;
                list-style: none;
                display: table-cell;
                float: left;
                position: relative;
                text-shadow: 0px 0px 1px #fff;
        }
        
        #userMenu li a,#userMenu li div {
                color: #154f14;
                font-size: 11px;
                padding: 5px 12px;
        }
        
        #userMenu li a:hover,#userMenu li div:hover {
                background-color: #dae8da;
                text-decoration: none;
        }
        
        #userMenu img {
                margin-right: 3px;
                vertical-align: top;
        }
        
        #userMenu a {
                position: relative;
                display: block;
        }
        
        #userMenu .dropdown {
                -webkit-border-bottom-left-radius: 8px;
                -webkit-border-bottom-right-radius: 8px;
                background: #f5faf5;
                border: 1px solid #BBCFBB;
                margin: 0;
                padding: 0;
                position: absolute;
                z-index: 999;
                top: 24px;
                left: -999em;
                height: 1px;
                display: block;
        }
        
        #userMenu .dropdown li {
                margin: 0;
                padding: 0;
                list-style: none;
                width: 145px;
        }
        
        #userMenu .dropdown li:hover {
                opacity: 1;
        }
        
        #userMenu .dropdown li a {
                display: block;
                padding: 6px 14px;
                text-shadow: 0px 0px 1px #fff;
        }
        
        #userMenu .dropdown li a:hover {
                text-decoration: none;
        }
        

        I’m a huge fan of CSS3 so I use border-radius quite liberally. Blitzaroo isn’t released yet so I haven’t added the Mozilla border-radius (-moz-border-radius) equivalent so you can either add it or remove the radius all together. The CSS itself is nothing special – I use display: block with a touch of padding on tags and float

      • tags left for the parent so that we have a horizontal menu. With a slight change of the CSS you could create a vertical drop-down (slide out?) menu. I use left: -999em for accessibility (and for the Dojo animation we’ll be using).  So, with the addition of CSS the menu now looks like:

        The JavaScript

        I found the JavaScript on a tutorial to Create The Fanciest Dropdown Menu You Ever Saw which uses jQuery rather than Dojo. Personally, I think jQuery is over-hyped and I love Dojo (/me wipes nose). I took the JavaScript listed there, combined it with the mailing list love from Peter Higgins, and came up with:

        dojo.addOnLoad(function() {
                // user menu special effects
                var userMenu = dojo.byId("userMenu");
                if (userMenu) {
                        dojo.query(".dropdown").forEach(function(n) {
                        var l = dojo.query(n);
                        l.parent().at(0)
                                        .onmouseenter(function(){
                                                dojo.style(l[0], "left", "0");
                                                dojo.fx.wipeIn({node: l[0], duration: 250}).play();
                                        })
                                        .onmouseleave(function(){
                                                dojo.style(l[0], "left", "-999em");
                                                dojo.style(l[0], "display", "none");
                                        });
                    });
            }
        });
        

        This little snippet recursively checks for .dropdown and when the mouse enters sets left: 0; followed by an animated Dojo wipeIn. On mouse out it sets left: -999em; and then sets the display to none. I tried a number of CSS/FX combinations to come up with a solution that worked and this is about all I could come up with. You could use any combination of Dojo FX to stylize your own menu. My favorites are wipeIn, wipeOut, fadeIn, and fadeOut combined with easing. Try out a few combinations and see what you like best. Enjoy!