Posted on

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

Posted on

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

Posted on

jQuery: Disable a button

At times, you may want the submit button of a form or one of its text inputs to be disabled until the user has performed a certain action (e.g., checking the “I’ve read the terms” checkbox).

Add the disabled attribute to your input so you can enable it when you want.  You can try clicking on the submit button to see its effect.

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <title>Check image load</title>      
        <script>
            $(function () {
                $('input[type="submit"]').prop('disabled', true);
            })
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="first" value="Taylor Swift">
            <br><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

button

All you need to do is run the prop method again on the input, but set the value of disabled to false to enable the button.

$('input[type="submit"]').prop('disabled', false);
Posted on

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

Posted on

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