TypeError: $(...).SetHeight is not a function

Question

I'm writing a fluid layout for my website and I use jQuery to set the DIVs height and width. In the SetHeight function I give the wanted height as the function's first parameter than I subtract the margins and apply the new height.

function SetHeight(height){
    var outer = $(this).outerHeight(true);
    var current = $(this).height();
    var margin = o-c;
    height = height-margin;
    $(this).css("height",height);   
};

Here's the code which triggers the error message:

var h = $(window).height();
$("#Slider").SetHeight(h-260).removeClass("mobile");

I'm using $(document).ready and $(window).resize with a timer to check if I need to resize any DIV.

What I've missed?

Answer 1

You've defined a function, but you're using it like a method on the jQuery object.

if you do this:

function f(param1, param2){
    // code
}

you need to use it like this:

f(div, 4);

If you want to use it like you are, you need to do something like this:

$.fn.SetHeight = function(param1, param2){
    // code
}

So you might want this:

function SetHeight(height){
    var outer = this.outerHeight(true);
    var current = this.height();
    var margin = outer-current;
    height = height-margin;
    this.css("height",height);
    return this;  // to allow chaining
};
$.fn.SetHeight = SetHeight;  // add as a jQuery method

Then you can use your code:

$("#Slider").SetHeight(h-260).removeClass("mobile");

Which you can use as you did in your example.

Notice that this is already a jQuery object, so you don't need to wrap it like: $(this). And you should return this at the end to support chaining - like calling .removeClass("mobile") at the end.

---

See also: http://api.jquery.com/jQuery.fn.extend/

Answer 2

You are seeing that error because no Jquery object has a function like SetHeight() You should change your function definition and function call like below to achieve your need.

Try,

function SetHeight(xElement,height){
    var outer = xElement.outerHeight(true);
    var current = xElement.height();
    var margin = o-c;
    height = height-margin;
    xElement.css("height",height);   

   return xElement;
};

Function call,

var h = $(window).height();
SetHeight($("#Slider"),h-260).removeClass("mobile");

Answer 3

Your SetHeight function is not part of the jQuery object's prototype.

Make it one, or have it take a jQuery or DOM object as the first argument.