jQuery UI & Effects: Easing Effects

This entry is part 7 of 10 in the series jQuery UI Effects

jQuery UI Effects – Easing demo

All the easing effects in one page.  Just click on the graphs above to see the effects.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Easing demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .graph {
            float: left;
            margin-left: 10px;
        }
    </style>
    <script>
        $(function () {
            if (!$('<canvas>')[0].getContext) {
                $('<div>').text(
                        'Your browser does not support canvas, which is required for this demo.'
                ).appendTo('#graphs');
                return;
            }

            var i = 0,
                    width = 100,
                    height = 100;

            $.each($.easing, function (name, impl) {
                var graph = $('<div>').addClass('graph').appendTo('#graphs'),
                        text = $('<div>').text(++i + '. ' + name).appendTo(graph),
                        wrap = $('<div>').appendTo(graph).css('overflow', 'hidden'),
                        canvas = $('<canvas>').appendTo(wrap)[ 0 ];

                canvas.width = width;
                canvas.height = height;
                var drawHeight = height * 0.8,
                        cradius = 10;
                ctx = canvas.getContext('2d');
                ctx.fillStyle = 'black';

                // draw background
                ctx.beginPath();
                ctx.moveTo(cradius, 0);
                ctx.quadraticCurveTo(0, 0, 0, cradius);
                ctx.lineTo(0, height - cradius);
                ctx.quadraticCurveTo(0, height, cradius, height);
                ctx.lineTo(width - cradius, height);
                ctx.quadraticCurveTo(width, height, width, height - cradius);
                ctx.lineTo(width, 0);
                ctx.lineTo(cradius, 0);
                ctx.fill();

                // draw bottom line
                ctx.strokeStyle = '#555';
                ctx.beginPath();
                ctx.moveTo(width * 0.1, drawHeight + .5);
                ctx.lineTo(width * 0.9, drawHeight + .5);
                ctx.stroke();

                // draw top line
                ctx.strokeStyle = '#555';
                ctx.beginPath();
                ctx.moveTo(width * 0.1, drawHeight * .3 - .5);
                ctx.lineTo(width * 0.9, drawHeight * .3 - .5);
                ctx.stroke();

                // plot easing
                ctx.strokeStyle = 'white';
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.moveTo(width * 0.1, drawHeight);
                $.each(new Array(width), function (position) {
                    var state = position / width,
                            val = impl(state, position, 0, 1, width);
                    ctx.lineTo(position * 0.8 + width * 0.1,
                                    drawHeight - drawHeight * val * 0.7);
                });
                ctx.stroke();

                // animate on click
                graph.click(function () {
                    wrap
                            .animate({ height: 'hide' }, 2000, name)
                            .delay(800)
                            .animate({ height: 'show' }, 2000, name);
                });

                graph.width(width).height(height + text.height() + 10);
            });
        });
    </script>
</head>
<body>

<div id='graphs'></div>

</body>
</html>
Try The Code

jQuery UI & Effects: Animation Effects

This entry is part 5 of 10 in the series jQuery UI Effects

jQuery UI Effects – Effect demo

Simply click on the buttons to click on the effects.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Effect demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }

        .ui-effects-transfer {
            border: 2px dotted gray;
        }
    </style>
    <script>
        $(function () {
            // run the currently selected effect
            function runEffect() {
                // get effect type from
                var selectedEffect = $('#effectTypes').val();

                // most effect types need no options passed by default
                var options = {};
                // some effects have required parameters
                if (selectedEffect === 'scale') {
                    options = { percent: 0 };
                } else if (selectedEffect === 'transfer') {
                    options = { to: '#button', className: 'ui-effects-transfer' };
                } else if (selectedEffect === 'size') {
                    options = { to: { width: 200, height: 60 } };
                }

                // run the effect
                $('#effect').effect(selectedEffect, options, 500, callback);
            };

            // callback function to bring a hidden box back
            function callback() {
                setTimeout(function () {
                    $('#effect').removeAttr('style').hide().fadeIn();
                }, 1000);
            };

            // set effect from select menu value
            $('#button').click(function () {
                runEffect();
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-widget-content ui-corner-all'>
        <h3 class='ui-widget-header ui-corner-all'>Effect</h3>

        <p>
            Of all of the Avengers, Captain America always has been the most boring. He doesn’t have anger management issues like Hulk,
            a charmingly cunning brother with daddy issues like Thor.
        </p>
    </div>
</div>

<select name='effects' id='effectTypes'>
    <option value='blind'>Blind</option>
    <option value='bounce'>Bounce</option>
    <option value='clip'>Clip</option>
    <option value='drop'>Drop</option>
    <option value='explode'>Explode</option>
    <option value='fade'>Fade</option>
    <option value='fold'>Fold</option>
    <option value='highlight'>Highlight</option>
    <option value='puff'>Puff</option>
    <option value='pulsate'>Pulsate</option>
    <option value='scale'>Scale</option>
    <option value='shake'>Shake</option>
    <option value='size'>Size</option>
    <option value='slide'>Slide</option>
    <option value='transfer'>Transfer</option>
</select>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

jQuery UI & Dialog: Basic Dialog Box

This entry is part 1 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Default functionality

The basic dialog window is an overlay positioned within the page and is protected from page content (like select elements) shining through with an iframe.

It has a title bar and a content area, and can be moved, resized and closed with the ‘x’ icon by default.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#dialog').dialog();
        });
    </script>
</head>
<body>

<div id='dialog' title='Basic dialog'>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized
        and closed with the 'x' icon.</p>
</div>

</body>
</html>
Try The Code

jQuery UI & Buttons: Mediaplayer Toolbar

This entry is part 2 of 5 in the series jQuery UI Button

jQuery UI Button – Toolbar

A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Toolbar</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #toolbar {
            padding: 4px;
            display: inline-block;
        }

        /* support: IE7 */
        * + html #toolbar {
            display: inline;
        }
    </style>
    <script>
        $(function () {
            $('#beginning').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-start'
                }
            });
            $('#rewind').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-prev'
                }
            });
            $('#play').button({
                text: false,
                icons: {
                    primary: 'ui-icon-play'
                }
            })
                    .click(function () {
                        var options;
                        if ($(this).text() === 'play') {
                            options = {
                                label: 'pause',
                                icons: {
                                    primary: 'ui-icon-pause'
                                }
                            };
                        } else {
                            options = {
                                label: 'play',
                                icons: {
                                    primary: 'ui-icon-play'
                                }
                            };
                        }
                        $(this).button('option', options);
                    });
            $('#stop').button({
                text: false,
                icons: {
                    primary: 'ui-icon-stop'
                }
            })
                    .click(function () {
                        $('#play').button('option', {
                            label: 'play',
                            icons: {
                                primary: 'ui-icon-play'
                            }
                        });
                    });
            $('#forward').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-next'
                }
            });
            $('#end').button({
                text: false,
                icons: {
                    primary: 'ui-icon-seek-end'
                }
            });
            $('#shuffle').button();
            $('#repeat').buttonset();
        });
    </script>
</head>
<body>

<div id='toolbar' class='ui-widget-header ui-corner-all'>
    <button id='beginning'>go to beginning</button>
    <button id='rewind'>rewind</button>
    <button id='play'>play</button>
    <button id='stop'>stop</button>
    <button id='forward'>fast forward</button>
    <button id='end'>go to end</button>

    <input type='checkbox' id='shuffle'><label for='shuffle'>Shuffle</label>
 
  <span id='repeat'>
    <input type='radio' id='repeat0' name='repeat' checked='checked'><label for='repeat0'>No Repeat</label>
    <input type='radio' id='repeat1' name='repeat'><label for='repeat1'>Once</label>
    <input type='radio' id='repeatall' name='repeat'><label for='repeatall'>All</label>
  </span>
</div>

</body>
</html>
Try The Code

jQuery UI & Button: Checkbox

This entry is part 3 of 5 in the series jQuery UI Button

jQuery UI Button – Checkboxes

A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.

This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Button - Checkboxes</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#check').button();
            $('#format').buttonset();
        });
    </script>
    <style>
        #format {
            margin-top: 2em;
        }
    </style>
</head>
<body>

<input type='checkbox' id='check'><label for='check'>Toggle</label>

<div id='format'>
    <input type='checkbox' id='check1'><label for='check1'>B</label>
    <input type='checkbox' id='check2'><label for='check2'>I</label>
    <input type='checkbox' id='check3'><label for='check3'>U</label>
</div>

</body>
</html>
Try The Code