jQuery: Disable a link

The method below is quite commonly used.  Now if you click on yahoo, you will not be brought to the web site.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Disable A Link</title>      
        <script>
            $(function () {
                $('a').click(function (e) {
                    e.preventDefault();
                });
            })
        </script>
    </head>
    <body>
        <a href="http://yahoo.com">Yahoo</a>
    </body>
</html>

button

jQuery: Setting the division height

The example below will loop through a set of div elements and set the height for them to the height of the tallest element.  In this case, 200px.

I have also used setTimeOut function so that you could see the before and after effects of implementing the div height changes.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Set Division Height</title>      
        <style>
            #header {
                background-color:black;
                color:white;
                text-align:center;
                padding:5px;
            }
            #section {
                background-color:lightgrey;
                width:350px;
                height:200px;
                float:left;
                padding:10px;	 	 
            }
        </style>
        <script>
            setTimeout(function () {
                var $div = $('.division');
                var height = 0;
                $div.each(function () {
                    if ($(this).height() > height) {
                        height = $(this).height();
                    }
                });
                $div.height(height);
            },3000)
        </script>
    </head>
    <body>
        <div id="header" class="division">
            <h1>City Gallery</h1>
        </div>
        <div id="section" class="division">
            <h1>London</h1>
            <p>London is the capital city of England.</p>
            <p>Standing on the River Thames, London has been a major settlement for two millennia.</p>
        </div>
    </body>
</html>

button

jQuery: Amending the path of image source

Imagine that the image path is not written correctly.  It will show a broken link and you could fix it automatically.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Check image load</title>      
        <script>
            $(function () {
                $('img').on('error', function () {
                    $(this).prop('src', 'https://codecrawl.com/code/images/drawing.png');
                    $('p').html('Image amended and it is loaded successfully now')
                });
            })
        </script>
    </head>
    <body>
        <img src='https://codecrawl.com/code/images/drawing.p'>
        <p>Loading image.....</p>
    </body>
</html>

button

jQuery: Check if an image is loaded successfully

An easy method to check if an image is loaded successfully using the load function.

You can edit the image source path to generate a loading image error.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Check image load</title>      
        <script>
            $(function () {
                $('img').load(function () {
                    $('p').html('image loaded successfully')
                });
            })
        </script>
    </head>
    <body>
        <img src='https://codecrawl.com/code/images/drawing.png'>
        <p>Loading image.....</p>
    </body>
</html>

button

jQuery: Preload images

If your web page uses a lot of images that aren’t visible initially (e.g., on hover) it makes sense to preload them.

A typical image tag is <img src=”photo.jpg”>.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Preload Images</title>      
        <script>
            $(function () {
                $.preloadImages = function () {
                    for (var i = 0; i < arguments.length; i++) {
                        $('img').attr('src', arguments[i]);
                    }
                };

                $.preloadImages('http://i1.wp.com/www.trrvel.com/wp-content/uploads/2015/12/image-2.jpeg', 'http://i1.wp.com/www.trrvel.com/wp-content/uploads/2015/12/image-1.jpeg');
                alert('images loaded');
            })
        </script>
    </head>
    <body>
        <p>Preload images</p>
    </body>
</html>

button