jQuery UI & Effects: Color Animation

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

jQuery UI Effects – Animate demo

Toggling and changing of colors.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Animate 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;
            background: #fff;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            var state = true;
            $('#button').click(function () {
                if (state) {
                    $('#effect').animate({
                        backgroundColor: '#aa0000',
                        color: '#fff',
                        width: 500
                    }, 1000);
                } else {
                    $('#effect').animate({
                        backgroundColor: '#fff',
                        color: '#000',
                        width: 240
                    }, 1000);
                }
                state = !state;
            });
        });
    </script>
</head>
<body>

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

        <p>
            I am changing color and please ignore me my friend.
        </p>
    </div>
</div>

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


</body>
</html>
Try The Code

Clicking on the Toggle Effect button will change the background color of the div box with id=’effect’ to #aa0000.

jQuery UI & Effects: Add Class

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

jQuery UI Effects – addClass demo

This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - addClass 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;
            padding: 1em;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }

        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('#effect').addClass('newClass', 1000, callback);
                return false;
            });

            function callback() {
                setTimeout(function () {
                    $('#effect').removeClass('newClass');
                }, 1500);
            }
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-corner-all'>
        I am getting bigger and bigger and please do not stop me.
    </div>
</div>

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

</body>
</html>
Try The Code

In the line

$('#effect').addClass('newClass', 1000, callback);

A new class newClass will be added to the div in a duration of 1000ms.

Once the animation is completed, the callback function will be called removing the newly added class.  The newClass will be removed in 1500ms as in this line below.

$('#effect').removeClass('newClass');

jQuery UI & Dialog: Modal Dialog Box Alert

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

jQuery UI Dialog – Modal message

Use a modal dialog to explicitly acknowledge information or an action before continuing their work.

Set the modal option to true, and specify a primary action (Ok) with the buttons option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal message</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-message').dialog({
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id='dialog-message' title='Download complete'>
    <p>
        <span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>

    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>

<p>Modal Dialog Box Alert Demo</p>

</body>
</html>
Try The Code

jQuery UI & Dialog: A Modal Mode Dialog Form

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

jQuery UI Dialog – Modal form

Use a modal dialog to require that the user enter data during a multi-step process.

Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal form</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>
        body {
            font-size: 62.5%;
        }

        label, input {
            display: block;
        }

        input.text {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }

        div#users-contain table td, div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
    <script>
        $(function () {
            var name = $('#name'),
                    email = $('#email'),
                    password = $('#password'),
                    allFields = $([]).add(name).add(email).add(password),
                    tips = $('.validateTips');

            function updateTips(t) {
                tips
                        .text(t)
                        .addClass('ui-state-highlight');
                setTimeout(function () {
                    tips.removeClass('ui-state-highlight', 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass('ui-state-error');
                    updateTips('Length of ' + n + ' must be between ' +
                            min + ' and ' + max + '.');
                    return false;
                } else {
                    return true;
                }
            }

            function checkRegexp(o, regexp, n) {
                if (!( regexp.test(o.val()) )) {
                    o.addClass('ui-state-error');
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }

            $('#dialog-form').dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    'Create an account': function () {
                        var bValid = true;
                        allFields.removeClass('ui-state-error');

                        bValid = bValid && checkLength(name, 'username', 3, 16);
                        bValid = bValid && checkLength(email, 'email', 6, 80);
                        bValid = bValid && checkLength(password, 'password', 5, 16);

                        bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, 'Username may consist of a-z, 0-9, underscores, begin with a letter.');
                        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                        bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, 'eg. ui@jquery.com');
                        bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, 'Password field only allow : a-z 0-9');

                        if (bValid) {
                            $('#users tbody').append('<tr>' +
                                    '<td>' + name.val() + '</td>' +
                                    '<td>' + email.val() + '</td>' +
                                    '<td>' + password.val() + '</td>' +
                                    '</tr>');
                            $(this).dialog('close');
                        }
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                },
                close: function () {
                    allFields.val('').removeClass('ui-state-error');
                }
            });

            $('#create-user')
                    .button()
                    .click(function () {
                        $('#dialog-form').dialog('open');
                    });
        });
    </script>
</head>
<body>

<div id='dialog-form' title='Create new user'>
    <p class='validateTips'>All form fields are required.</p>

    <form>
        <fieldset>
            <label for='name'>Name</label>
            <input type='text' name='name' id='name' class='text ui-widget-content ui-corner-all'>
            <label for='email'>Email</label>
            <input type='text' name='email' id='email' value='' class='text ui-widget-content ui-corner-all'>
            <label for='password'>Password</label>
            <input type='password' name='password' id='password' value='' class='text ui-widget-content ui-corner-all'>
        </fieldset>
    </form>
</div>


<div id='users-contain' class='ui-widget'>
    <h1>Existing Users:</h1>
    <table id='users' class='ui-widget ui-widget-content'>
        <thead>
        <tr class='ui-widget-header '>
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
            <td>johndoe1</td>
        </tr>
        </tbody>
    </table>
</div>
<button id='create-user'>Create new user</button>

</body>
</html>
Try The Code

jQuery UI & Dialog: Confirmation With Modal Dialog Box

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

jQuery UI Dialog – Modal confirmation

Confirm an action that may be destructive or important.

Set the modal option to true, and specify primary and secondary user actions with the buttons option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal confirmation</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-confirm').dialog({
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Delete all items': function () {
                        $(this).dialog('close');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id='dialog-confirm' title='Empty the recycle bin?'>
    <p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>These items will be
        permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href='http://example.com'>rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus
    rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor
    elit eros a lectus.</p>

</body>
</html>
Try The Code