Reusing a jQuery function without causing an error on pages that do not utilize it

Question

I use this function to make a help box stay visible when a user scrolls down:

var top = $('.help-box').offset().top - parseFloat($('.help-box').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
        $('.help-box').addClass('fixed');
    } else {
        $('.help-box').removeClass('fixed');
    }
});

I want to reuse it across several pages, so I included it in my layout (on every page load). The problem now is that I get an error on pages that do not have the help box: $(".help-box").offset() is null

Is there a way to write this function so it can be reused without causing an error? I want to avoid selectively including where it's need it as it's easier to just leave the include in my layout.

@freakish, I guess that should have been obvious... I didn't think that was the "right way" to go about it... — Mohamad, Sep 24 '11 at 00:09
Why not? Hardly anyone seems to use try-catch, don't know why. It is perfectly suited for handling such situations. It is simple, fast and does the job. You don't need to wrap your code or use many strange `if` statements. — freakish, Sep 24 '11 at 00:12
Because try-catch blocks are meant for exception handling. This means "things out of the ordinary". In this case, the helpbox not being on the page is not "out of the ordinary". if-else is better and easier to read. You can see what went wrong in the if clause. — Jay, Sep 24 '11 at 00:19
Well now, you do realize that every JavaScript code (or any code in any language) can be written without using try-catch block? But still this is a tool to make things easier, just like in this case. There is no such thing as "exception handling". In most cases it is just logging, nothing more. — freakish, Sep 24 '11 at 00:24
http://stackoverflow.com/questions/3217294/javascript-try-catch-performance-vs-error-checking-code This has been asked before. Seems that there's no right answer for every situation. — Jay, Sep 24 '11 at 00:29

Jay · Accepted Answer · 2011-09-24T00:09:09.663

2

var helpBox = $(".help-box"), top;
if(helpBox !== null && helpbox != undefined && helpBox.length > 0) {
    top = helpBox.offset();
}

Just check whether you have a helpbox before calling the function.

edited Sep 24 '11 at 00:09

answered Sep 24 '11 at 00:02

Jay

3,471
4
35
49

Noted. Although for JSLint valid-ness, the preferred form is `if (helpBox.length !== 0)` – Jay Sep 24 '11 at 00:11
@Jayraj, it's funny. That doesn't seem to work. It still gives the same error. The script `if (helpBox !=== null)` always evaluates true... – Mohamad Sep 24 '11 at 00:13
See my modification above. Also it's only `!==` not `!===` – Jay Sep 24 '11 at 00:15

score 1 · Answer 2 · answered Sep 24 '11 at 00:06

Put everything in try-catch block:

try
{
var top = $('.help-box').offset().top - parseFloat($('.help-box').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
        $('.help-box').addClass('fixed');
    } else {
        $('.help-box').removeClass('fixed');
    }
});
}
catch(err)
{
}

score 1 · Answer 3 · answered Sep 24 '11 at 00:08

    var helpBox = $('.help-box');

    function initHelpBox(){
      var top = helpBox.offset().top - parseFloat(helpBox.css('marginTop').replace(/auto/, 0));
    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        if (y >= top) {
            helpBox.addClass('fixed');
        } else {
            helpBox.removeClass('fixed');
        }
    });
    }

 if (helpBox.length){initHelpBox()}

Reusing a jQuery function without causing an error on pages that do not utilize it

3 Answers3