Showing posts with label effect. Show all posts

Wednesday, January 22, 2014

Advanced Dialog Effects

The jQuery UI dialog widget has a show, and a hide option — each of which are used to specify effect options for their respective actions. The show option is applied any time the dialog is opened, while the hide option is applied when the dialog is closed. They're one of those options that tries to be flexible, and at times this is misleading. For example, you're free to pass in a string, a boolean, a number, or an object with several effect properties. Everything other than the object type are intended to simplify the option. If you only want to enable the show/hide effect, you pass a boolean. If you want to specify the duration you pass a number while a string specifies the effect name to run.

jQuery UI: Bouncing Tab Transitions

The tabs widget, from jQuery UI, lets the developer specify show and hide transitions independently from one another. That is, when the user transitions to another tab, by either clicking or interacting with the keyboard, the hide effect will be applied to the current tab panel. Next, the show effect is applied to the new panel. Note, we're talking about the panel here, not the clickable tab portion here — two distinct elements. However, it's possible to animate these as well when activated.

jQuery UI: Sortable Rearrange Effects

The sortable widget, provided by jQuery UI, allows users to visually sort elements. It's easy for the programmer to implement too, since we need only call the sortable constructor on some container element. This let's the user sort the child elements by dragging them around. During this process of rearranging the sortable elements, can we alter the visual presentation of the elements, as they're moved about? In other words, can we apply subtle visual effects to the items as they're rearranged?

jQuery UI Progressbar Effects

The jQuery UI progressbar is a nice way to show the completion of a task. With each step, the progressbar is updated and subsequently, the user receives visual feedback. The default implementation of the progressbar simply increases the width of the completed area with each updated. So, for example, if the completion is at 30% and we update with another 10%, the width will be set to 40%. It would be nice if we could make each progression a little fancier, perhaps with a little animation?

Thankfully, jQuery UI gives us the foundation with which we can extend the default behavior of any widget, including the progressbar. The jQuery core gives us the tools necessary to do simple yet elegant CSS animations. Here is what I came up with - first the HTML:

<html>
    <head>
        
        <title>jQuery UI Progressbar Effects</title>
        
        <link type="text/css" href="jqueryuitheme.css" rel="stylesheet"/>
        <script type="text/javascript" src="jqueryui.min.js"></script>
        <script type="text/javascript" src="jqueryui.min.js"></script>
        <script type="text/javascript" src="progresseffects.js"></script>
        
    </head>
    <body>
        
        <div id="progressbar"></div>
                    
    </body>
</html>

And here is what progresseffects.js looks like:

//Create the new progeffects widget by extending  the progressbar.
$.widget('ui.progeffects', $.extend({}, $.ui.progressbar.prototype, {
 
    //We need to redefine the progressbar options and add a duration.
    options: {
        value: 0,
        max: 100,
        duration: 250
    },
    
    //This is used to keep track of the refresh frequency.
    refreshed: 0,
      
    //Initialize our widget by initializing the base progressbar.
    _init: function() {
        $.ui.progressbar.prototype._init.call(this);
    },
    
    //Redefined in our widget to provide animations.
    _refreshValue: function() {
        
        //Some variables we need.
        var value = this.value();
        var percentage = this._percentage();
        var time = new Date().getTime();
        var duration = this.options.duration;
        var max = this.options.max;
        
        //This is part of the default implementation, but still required.
        if ( this.oldValue !== value ) {
            this.oldValue = value;
            this._trigger('change');
        }
        
        //Here, we're making sure the progressbar isn't refreshed more
        //often than the animation duration will allow.
        if (time - this.refreshed < duration && value < max) {
            return;
        }
        
        //Store the time for the next refresh.
        this.refreshed = time;

        //Perform the refresh, using an animation.
        this.valueDiv
            .toggle( value > this.min )
            .toggleClass('ui-corner-right', value === this.options.max)
            .stop()
            .animate({width:percentage.toFixed(0)+'%'}, duration);
            
        this.element.attr('aria-valuenow', value);
    }
        
}));

//Example usage.
$(document).ready(function(){
    
    //Periodic update function to set the value of the progressbar.
    var update = function(){
        var value = $('#progressbar').progeffects('value');
        var max = $('#progressbar').progeffects('option', 'max');
        if (value < max) {
            $('#progressbar').progeffects('value', value + 1);
            setTimeout(update, 100)
        }
    };
    
    //Create the widget and start updating the progress.
    $('#progressbar').progeffects();
    update();
    
});

This example will continually update the progressbar value until it reaches 100. It works just like a regular progressbar widget with one minor difference - it accepts a duration parameter, used for the animation each time the value changes. Here is how it works.

First, we create a progeffects widget that extends the progressbar widget. We're only changing a couple things about it so we should reuse as much as possible. When a jQuery UI core widget is extended, the options need to be redefined by the custom widget, otherwise, they won't be recognized. We're also adding a new duration option that'll be used with the animation effect.

The bulk of the new progeffects widget is housed in _refreshValue(). This method is used by the original implementation to update the progress. We use some of the original implementation, but we've modified it to use animate() to set the CSS width instead of using CSS.

The example code that uses our new widget value 10 times per second. You may notice a problem here. By default, the animation duration of progeffects is 250. Yikes. This means the progress bar will still be updating long after it has reached 100! There are two ways to get around this problem.

The first way - pass progeffects a duration value reflective of the update frequency. So for example, we could have passed it {duration:100}. This approach, however, introduces a couple new problems. First of all, how do you know ahead of time how fast the progress will be updated? If you did, it would be nothing better than our static example. Second, try actually passing 100 as the duration value - it can be choppy to the point that it negates all we've done. I'd say this approach is out.

The solution I'm using in progeffects is to monitor the update frequency. Before the animation effect is executed, it will check if enough time has elapsed since the last update to be meaningful and to look good.

There are several variations to this, I'm sure. Its a minor enhancement, but it sure does look cool.

Friday, April 30, 2010

jQueryUI Hovering

The jQueryUI user interface library offers developers building interactive web applications not only a set of widgets to use, but also, a set of effects. An effect, in this context, can be thought of as a transition from one state to another by a user interface component. As an example, imagine you have a button element that is in a hidden state. Showing that button would be considered an effect, albeit, a very basic one. A jQueryUI effect adds some appeal to these transitions. In essence, jQueryUI effects can be thought of as user interface component state transitions that enhance the overall user experience.

Another nice feature in the jQueryUI repertoire is the CSS framework used for changing the look and feel of the widget set. This framework allows developers to choose an existing theme or to build their own. CSS classes within the framework are flexible enough that they aren't restricted to the jQueryUI widgets. Your user interface isn't going to be composed entirely of widgets. You can use these CSS classes to help give the non-widget elements of your application more of a theme.

An example use of applying the jQueryUI CSS framework to a non-widget element would be using the ui-state-hover class. Lets say we have a list of li elements. The idea is to add the ui-state-hover CSS class to each li element when the user hovers over it. This is fairly straightforward to do with the jQuery addClass() and removeClass() methods. You call these methods inside a hover in and a hover out callback respectively. Example callback functions are shown below.

function hoverin(element){
 jQuery(element).addClass("ui-state-hover");
}

function hoverout(element){
 jQuery(element).removeClass("ui-state-hover");
}

jQueryUI allows us to add an interaction to the addClass() and removeClass() methods. Typically, we would only want to add an effect to the addClass() for hover in events. Otherwise, the user interface tends to look too busy. Here is the same example modified to introduce an effect when adding the class. The the visual changes made to the element as a result of adding the class will take place over a duration of 150 milliseconds rather than instantaneously.

function hoverin(element){
  jQuery(element).addClass("ui-state-hover", 150);
}

function hoverout(element){
  jQuery(element).removeClass("ui-state-hover");
}

There is, however, one problem with this approach. There is a chance that the ui-state-hover class will not be removed from the element by hoverout(). This is because the user can, and most definitely will at some point, hover out of the element during the 150 millisecond effect duration. Keep in mind, the element doesn't actually have the ui-state-hover class until the 150 millisecond effect duration is up. When hoverout() is called during the effect, no class is removed because it hasn't been added yet. Below is a work-around for this issue that involves using a secondary state class.

function hoverin(element){
   jQuery(element).addClass("app-state-hover");
   jQuery(element).addClass("ui-state-hover", 150, function(){
       if(!jQuery(element).hasClass("app-state-hover")){
           jQuery(element).removeClass("ui-state-hover");
       }
       jQuery(query).removeClass("app-state-hover");
   });
}

function hoverout(element){
   jQuery(element).removeClass("ui-state-hover app-state-hover");
}

Here we introduce a new class called app-hover-state. This class will be used to track the hover state of the element since we are now using an effect. The hoverin() function will now add this class to the element before starting the visual effect. The hoverout() function will now remove both the ui-state-hover and the app-state-hover classes. This is important because even if the effect hasn't yet finished when the user hovers out of the element, the app-state-hover class will be removed from the element. The visual effect in hoverin() now has a callback function that is executed when the duration of the effect has completed. This callback will remove the ui-state-hover class if the app-state-hover class has been removed. In this case, if app-state-hover has been removed can only mean one thing; a hoverout() call was made during the duration of the effect and the ui-state-hover class should also be removed.

Boduch's Blog