CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Arpit Gupta
Arpit Gupta

Reputation: 1277

offset() is undefined 'error'

While loading a page, I want to get the top of the panel. But it is showing errors. In Firefox and IE its saying "offset() is undefined" and in Chrome the error is "Uncaught TypeError: Cannot read property 'top' of undefined". Please Help out.

$(window).resize(function () {
    tabPanelAdjust();
});

function tabPanelAdjust() {
    var theTabPanel = $(".TabPanel");
    var tabPanelTop = parseInt(theTabPanel.offset().top);
    var winHeight = $(document).height();
    tabPanelHeight = winHeight - tabPanelTop;
    theTabPanel.css({ "min-height": tabPanelHeight - 20 });
}

<div class="TabPanel">
</div>

Upvotes: 4

Views: 29677

Answers (2)

Jai
Jai

Reputation: 74738

Try this: http://jsbin.com/ecumag/1/edit

function tabPanelAdjust() {
   var theTabPanel = $(".TabPanel");
   alert(theTabPanel.offset().top);
   var tabPanelTop = theTabPanel.offset().top;
   var winHeight = $(document).height();
   tabPanelHeight = winHeight - tabPanelTop;
   theTabPanel.css({ "min-height": tabPanelHeight - 20,"background":"yellow" });
}

$(function(){

    tabPanelAdjust();

});

and please make sure you are loading the jquery

Upvotes: 2

Vivek S
Vivek S

Reputation: 5540

There's nothing wrong with the code. include your code within document ready method. May be your code is fired before the div is loaded.

$(function(){
$(window).resize(function () {
  tabPanelAdjust();
});

function tabPanelAdjust() {
 var theTabPanel = $(".TabPanel");
 var tabPanelTop = parseInt(theTabPanel.offset().top);
 var winHeight = $(document).height();
 tabPanelHeight = winHeight - tabPanelTop;
 theTabPanel.css({ "min-height": tabPanelHeight - 20 });
}
});

Here's a working fiddle:

http://jsfiddle.net/SX5U4/

Upvotes: 10

Related Questions