jQuery: Toggle an image

This entry is part 21 of 33 in the series jQuery Tutorial

Here I show an example where you can toggle an image using toggle().

Clicking inside the <div> which I have defined with a border will toggle the image to show and hide in the screen.

hide demo

<!doctype html>
<html>
<head>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            border: 2px solid;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        $(function () {
            $('div').click(function () {
                $('img').toggle('slow');
            });
        });
    </script>
</head>
<body>

<div><img src="//codecrawl.com/code/images/ushuaia1.jpg"></div>

</body>
</html>

The syntax for toggle is:

.toggle(duration [,easing] [,function()])

Duration:  A string or number determining how long the animation will run.

Easing:  A string indicating which easing function to use for the transition.

Function():  A function to call once the animation is completed, this is also known as callback function.

jQuery UI & Datepicker: Show the week of the year

This entry is part 2 of 14 in the series jQuery UI Datepicker

jQuery UI Datepicker – Show week of the year

The datepicker can show the week of the year.  There are 52 weeks to a year.  

The default calculation follows the ISO 8601 definition: the week starts on Monday, the first week of the year contains the first Thursday of the year.

This means that some days from one year may be placed into weeks ‘belonging’ to another year.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Show week of the year</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.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 () {
            $('#datepicker').datepicker({
                showWeek: true,
                firstDay: 1
            });
        });
    </script>
</head>
<body>

<p>Date: <input type='text' id='datepicker'></p>

</body>
</html>
Try The Code Datepicker Widgets API Doc

jQuery UI & Effects: Diplay and show elements

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

jQuery UI Effects – Show Demo

Display elements using custom effects.

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

        #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;
        }
    </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: 100 };
                } else if (selectedEffect === 'size') {
                    options = { to: { width: 280, height: 185 } };
                }

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

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

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

            $('#effect').hide();
        });
    </script>
</head>
<body>

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

        <p>
            Just show up, baby.
        </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='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>
</select>

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

</body>
</html>
Try The Code

jQuery: Show effect

This entry is part 22 of 33 in the series jQuery Tutorial

The show effect will display the matched elements.

Its code is .show(duration).

<!doctype html>
<html>
<head>
    <title>show demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>
<body>

<button>Show it</button>
<p style='display: none'>Hello 2</p>

<script>
    $('button').click(function () {
        $('p').show('slow');
    });
</script>

</body>
</html>

Try The Code

To make this demo, we first need to hide the text inside the <p> elements.

This can be done by style=’display: none’.