jQuery: Back to Top Button

By using the animate and scrollTop methods in jQuery you don’t need a plugin to create a simple scroll-to-top animation.

Changing the scrollTop value changes where you want the scrollbar to land. All you’re really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>To The Top Page</title>      
        <script>
            $('a.top').click(function (e) {
                e.preventDefault();
                $(document.body).animate({scrollTop: 0}, 800);
            });
        </script>
    </head>
    <body>
        <a class='top' href='#'>To the top</a>
    </body>
</html>

button

jQuery: To check if an element ID is used

A simple way to check if an element ID is used.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>HTML element ID check</title>      
    </head>
    <body>
        <div id = "myDiv">HTML Div Element</div>
        <script>
            //jquery if exists DOM element
            $(function () {
                if ($('#myDiv').length) {
                    $('#myDiv').html('ID is found');
                }
            })
        </script>
    </body>
</html>

button

Loading jQuery using document.write

If you load jQuery using document.write, the jQuery will not be loaded immediately.  You can use setTimeout to set a brief delay before using it.

Here I set a brief delay of 0.1s as in line 17.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            (function () {
                if (window.jQuery === undefined)
                {
                    document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"><\/script>');
                }
                else
                {
                    jQuery = window.jQuery;
                }

                setTimeout(function () {
                    $('#demo').html('Document is ready and loaded');
                }, 100);

            }());
        </script>
    </head>
    <body>
        <h4 id='demo'>Document Not Ready</h4>
    </body>
</html>

Try The Code

 

jQuery: A simple slider

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

This is a simple jQuery slider and notice how I have used the if else statement to determine the state of the slider.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #hideme { 
                background:#de9a44; 
                width:120px;
                height:25px; 
                display:none; 
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Hover On Me!</p>
        <div id="hideme"><h3>Rock & Roll</h3></div>

        <script>
            $(document.body).hover(function () {
                if ($("#hideme").is(":hidden")) {
                    $("#hideme").slideDown("slow");
                } else {
                    $("#hideme").hide();
                }
            });

        </script>

    </body>
</html>

Try The Code

 

jQuery Selectors: Appending a li to an ul element

This entry is part 6 of 33 in the series jQuery Selectors

Using jQuery selector, we can append a <li> item to a <ul> list.

We can use the same selector ul.rock to append an item to the second list.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('ul.rock').append('<li>Tracy Chapman</li>');
        });
    </script>
</head>
<body>

<h4>British Pop</h4>
<ul>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
</ul>

<h4>American Rock</h4>
<ul class='rock'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>