Equalheights not working in JQuery 1.4. but working fine in 1.3.2
Hi,
below code is
working fine in jquery1.3.2 but not working in jquery1.4. it is giving following error
Error: a.ownerDocument is null
Source file - file:///C:/....../jquery-1.4.2.js
Line: 117
Please suggest a work around.
Note:
Download the latest jquery 1.4.2 to preview. The below code will work only in Firefox
CODE -
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Examble</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/default1.css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/default1.js"></script>
</head>
<body class="">
<div class="equalHeightContainer">
<div class="area">
<div class="container equalHeight">
<div class="equalHeightSizer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac varius dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ligula urna, molestie in ultricies vitae, vehicula vel felis. Suspendisse consectetur tortor a nisl bibendum ultrices. Aenean vel metus augue. Quisque interdum dignissim feugiat. Ut dignissim, velit quis auctor lobortis, ipsum diam dignissim turpis, eget ultrices dui turpis a purus. Cras dignissim consequat cursus. Morbi et neque sem. Cras turpis erat, suscipit eget volutpat vitae, adipiscing et est. Donec sed nulla libero. Duis bibendum magna eget orci congue sit amet pharetra turpis molestie. </p>
</div>
</div>
</div>
<div class="area">
<div class="container equalHeight">
<div class="equalHeightSizer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac varius dui. Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="area">
<div class="container equalHeight">
<div class="equalHeightSizer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac varius dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ligula urna, molestie in ultricies vitae, vehicula vel felis. Suspendisse consectetur tortor a nisl bibendum ultrices. Aenean vel metus augue. Quisque interdum dignissim feugiat. Ut dignissim, velit quis auctor lobortis, ipsum diam dignissim turpis, eget ultrices dui turpis a purus. Cras dignissim consequat cursus. Morbi et neque sem. Cras turpis erat, suscipit eget volutpat vitae, adipiscing et est. Donec sed nulla libero. Duis bibendum magna eget orci congue sit amet pharetra turpis molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac varius dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ligula urna, molestie in ultricies vitae, vehicula vel felis. Suspendisse consectetur tortor a nisl bibendum ultrices. Aenean vel metus augue. Quisque interdum dignissim feugiat. Ut dignissim, velit quis auctor lobortis, ipsum diam dignissim turpis, eget ultrices dui turpis a purus. Cras dignissim consequat cursus. Morbi et neque sem. Cras turpis erat, suscipit eget volutpat vitae, adipiscing et est. Donec sed nulla libero. Duis bibendum magna eget orci congue sit amet pharetra turpis molestie. </p>
</div>
</div>
</div>
</div>
</body>
</html>
JS code
- $(document).ready(
function(){
/* !Equalize Columns */
$(".equalHeightContainer").equalHeights(".equalHeightSizer",".equalHeight");
}
);
(function($)
{
$.fn.extend(
{
equalHeights: function(targets,containers)
{
return this.each(
function()
{
var $this = $(this);
var $targets = $this.find(targets);
var $containers = $this.find(containers);
var heights = [];
$.sortNumber = function(a,b)
{
return a - b;
};
$containers.each(
function(i)
{
var $this = $(this);
var height = $this.height();
var extra = parseInt($this.css("borderTopWidth"),10) +
parseInt($this.css("borderBottomWidth"),10) +
parseInt($this.css("paddingTop"),10) +
parseInt($this.css("paddingBottom"),10);
heights[i] = height + extra;
$this.data("height",height + extra)
.data("extra",extra);
}
);
heights.sort($.sortNumber);
var maxHeight = heights[heights.length - 1];
$containers.each(
function()
{
var $this = $(this);
if ($this.height() === maxHeight)
{
$this.addClass("isMax");
}
}
);
// Modify heights
$targets.each(
function()
{
var $this = $(this);
alert($this.html())
var $topParent = $this.parents(containers).length ? $this.parents(containers) : $this; // IE6 fails here without this check.
var parentHeight = $topParent.data("height");
var parentExtra = $topParent.data("extra");
var multiple = $topParent.find(targets).length === 0 ? 1 : $topParent.find(targets).length; // IE6 fails again.
if (parentHeight !== maxHeight)
{
// Grab extra pixels.
var paddings = [];
function getParentOffset($el,index)
{
if ($el.hasClass(containers))
{
return;
}
else
{
var extra = parseInt($el.css("borderTopWidth"),10) +
parseInt($el.css("borderBottomWidth"),10) +
parseInt($el.css("paddingTop"),10) +
parseInt($el.css("paddingBottom"),10) +
parseInt($el.css("marginTop"),10) +
parseInt($el.css("marginBottom"),10);
paddings[index] = extra;
//return getParentOffset($el.parent(),++index);
}
}
getParentOffset($this,0,paddings);
var totalAmt = 0;
var i = 0;
while (i < paddings.length)
{
totalAmt += paddings[i];
i++;
}
// Adding one for mozilla and I'm not sure why...might be some rounding issue...
var delta = maxHeight - (parentHeight + parentExtra + totalAmt);
$this.height((parentHeight + delta) / multiple);
} // end if
}
); // end $targets.each()
}
); // end of each()
} // end equalHeights plugin
}
);
}
)(jQuery);
CSS
- .container
{
width: 328px;
float: left;
border:1px solid #000;
margin:0 0 0 5px;
}