Question

I’ve tried all the combinations I could think about and didn’t figure it out. Here’s my working code (all in the HTML document):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var $alert = $('.alert');
        if ($alert.length) {
            var alerttimer = window.setTimeout(function () {
                $alert.trigger('click');
            }, 3000);
            $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
                window.clearTimeout(alerttimer);
                $alert.animate({ height: '0' }, 200);
            });
        }
    });
</script>

And here’s the call:

<div id="alert"><a href="../Home/English">English</a></div>

Now I want to refactor so the script goes in a .js file. How would it look like once refactored? Thanks!

Answer 1

Just put your custom code inside a .js file, upload it to your server, and reference it below the jQuery Core include:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>

and then inside the custom.js file you put your custom JS:

$(function () {
    var $alert = $('.alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
});

Update

I just noticed that your sample HTML has an element with the ID of alert and your JS code is searching for elements with the CLASS of alert. If you want to target an ID then you prepend a hash (#), not a period:

var $alert = $('.alert');

Should change to:

var $alert = $('#alert');

You will probably want to bone-up on jQuery selectors (it will save you a lot of time in the future): http://api.jquery.com/category/selectors/