SpinOneSolutions » JavaScript http://www.spinonesolutions.com I waste my time so that you don't have to... Mon, 16 May 2011 17:01:16 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 JavaScript reports 0 (Zero) Height and Width for hidden image http://www.spinonesolutions.com/2009/07/javascript-reports-0-zero-height-and-width-for-hidden-image/ http://www.spinonesolutions.com/2009/07/javascript-reports-0-zero-height-and-width-for-hidden-image/#comments Thu, 09 Jul 2009 23:00:14 +0000 Will Wright http://www.spinonesolutions.com/?p=298 The Problem:

I was recently modifying an image gallery for a customer that used a pretty slick JavaScript Carousel for the presentation.  The Basic idea was that the images were all outputted within an LI, hidden via CSS, and then the JavaScript carousel used that LI as the datasource to build the gallery.

Everything worked great except that the images were being re-sized and their aspect ratio was not being maintained.  The solution was to obtain their original size so that the aspect ratio could be computed, and then applied during the re-sizing process.

The issue I ran into is that JavaScript (jQuery) always reported that the height and width was 0 (zero) for the images.

After some digging I found that elements marked “display:none” don’t have to load their hidden contents into the DOM and therefore there was no IMG object for JavaScript to report on!

IE

IE

IE Display None

IE Display None

Mozilla Display None

Mozilla Display None

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 #myImage {
 border:1px solid red;
 }
 .hidden {
 display:none;
 float:left;
 margin:10px;
 }
</style>

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imgHeight = $("#myImage").height();
 var imgWidth = $("#myImage").width();
 alert("Height = " + imgHeight + "px\nWidth = " + imgWidth + "px");

});
</script>

</head>
<body>

 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mauris quis ante mollis sit amet dapibus erat semper. Nunc vitae nisi sapien, at ultricies neque. Ut interdum eleifend iaculis. Ut a auctor turpis. Sed in neque eget nulla vestibulum porttitor. Donec urna magna, feugiat vel interdum vitae, vestibulum vel nibh. Integer pellentesque bibendum pulvinar. Praesent orci turpis, porttitor id laoreet eget, fringilla in tortor. Nam sollicitudin mi vitae odio luctus nec fringilla mauris rutrum. Aenean tristique mi felis. Fusce eget justo eros, vel rhoncus dui.
 <div><img id="myImage" src="images/lol_cat.jpg" /></div>
 </p>
 <p>
 Curabitur feugiat ornare sapien, eu placerat magna aliquet placerat. Curabitur at vestibulum felis. Maecenas sagittis, lorem ac imperdiet mattis, nisi diam porta nibh, vel molestie odio turpis ut nisl. In hac habitasse platea dictumst. Quisque augue massa, tempor nec molestie id, facilisis non tortor. Pellentesque dapibus, massa a ornare placerat, erat urna blandit justo, sagittis sodales lectus odio et lacus. Suspendisse congue ipsum quis massa ornare vel vehicula sapien gravida. Mauris pretium elit ut mi malesuada pellentesque. Phasellus pulvinar nulla at sem eleifend ac sollicitudin est tincidunt. Proin lorem urna, viverra quis gravida in, scelerisque at dui.
 </p>
 <p>
 Nullam et erat vitae lacus porttitor pharetra. Nullam tincidunt tempor fermentum. Nulla rutrum, urna ac dapibus consequat, nisl lectus commodo arcu, ultrices auctor ante elit eget enim. Etiam enim massa, volutpat in venenatis mattis, placerat id sapien. Duis vel ante sit amet neque accumsan sollicitudin ac consequat sapien. Proin dapibus rhoncus libero vitae tristique. Quisque at neque in metus sodales vestibulum. Cras lacinia eleifend sapien, a pellentesque arcu pellentesque at. In hac habitasse platea dictumst. Ut porta sodales euismod. Donec ligula arcu, aliquet sed pretium vitae, aliquam quis lorem. Morbi fermentum semper volutpat. Sed porttitor posuere augue et imperdiet. Cras gravida diam at diam accumsan accumsan. Duis turpis erat, mollis ac tempor eu, elementum faucibus mi. Fusce et urna id dui pharetra consectetur. Nulla facilisis feugiat libero, eu ullamcorper purus placerat sed. Donec nisi sem, volutpat eu pellentesque non, consequat eget nibh.
 </p>

</body>
</html>

The Solution:

The solution to this issue is to alter the method in which we hide the content.  Using “visibility:hidden” works; the height and width are reported correctly, but the browser allocates space for the content which “breaks” the layout.

IE Visibility Hidden

IE Visibility Hidden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 #myImage {
 border:1px solid red;
 }
 .hidden {
 visibility:hidden;
 float:left;
 margin:10px;
 }
</style>

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imgHeight = $("#myImage").height();
 var imgWidth = $("#myImage").width();
 alert("Height = " + imgHeight + "px\nWidth = " + imgWidth + "px");

});
</script>

</head>
<body>

 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mauris quis ante mollis sit amet dapibus erat semper. Nunc vitae nisi sapien, at ultricies neque. Ut interdum eleifend iaculis. Ut a auctor turpis. Sed in neque eget nulla vestibulum porttitor. Donec urna magna, feugiat vel interdum vitae, vestibulum vel nibh. Integer pellentesque bibendum pulvinar. Praesent orci turpis, porttitor id laoreet eget, fringilla in tortor. Nam sollicitudin mi vitae odio luctus nec fringilla mauris rutrum. Aenean tristique mi felis. Fusce eget justo eros, vel rhoncus dui.
 <div><img id="myImage" src="images/lol_cat.jpg" /></div>
 </p>
 <p>
 Curabitur feugiat ornare sapien, eu placerat magna aliquet placerat. Curabitur at vestibulum felis. Maecenas sagittis, lorem ac imperdiet mattis, nisi diam porta nibh, vel molestie odio turpis ut nisl. In hac habitasse platea dictumst. Quisque augue massa, tempor nec molestie id, facilisis non tortor. Pellentesque dapibus, massa a ornare placerat, erat urna blandit justo, sagittis sodales lectus odio et lacus. Suspendisse congue ipsum quis massa ornare vel vehicula sapien gravida. Mauris pretium elit ut mi malesuada pellentesque. Phasellus pulvinar nulla at sem eleifend ac sollicitudin est tincidunt. Proin lorem urna, viverra quis gravida in, scelerisque at dui.
 </p>
 <p>
 Nullam et erat vitae lacus porttitor pharetra. Nullam tincidunt tempor fermentum. Nulla rutrum, urna ac dapibus consequat, nisl lectus commodo arcu, ultrices auctor ante elit eget enim. Etiam enim massa, volutpat in venenatis mattis, placerat id sapien. Duis vel ante sit amet neque accumsan sollicitudin ac consequat sapien. Proin dapibus rhoncus libero vitae tristique. Quisque at neque in metus sodales vestibulum. Cras lacinia eleifend sapien, a pellentesque arcu pellentesque at. In hac habitasse platea dictumst. Ut porta sodales euismod. Donec ligula arcu, aliquet sed pretium vitae, aliquam quis lorem. Morbi fermentum semper volutpat. Sed porttitor posuere augue et imperdiet. Cras gravida diam at diam accumsan accumsan. Duis turpis erat, mollis ac tempor eu, elementum faucibus mi. Fusce et urna id dui pharetra consectetur. Nulla facilisis feugiat libero, eu ullamcorper purus placerat sed. Donec nisi sem, volutpat eu pellentesque non, consequat eget nibh.
 </p>

</body>
</html>

Almost there.  All we need to do now is get rid of the space that’s been allocated for the element.  There are a number of different strategies for doing this and you’ll probably have to pick a particular one based on the other attributes of your layout. I’m just going to use “postition:absolute” because it’s an easy one liner.

IE Visibility Hidden Position Absolute

IE Visibility Hidden Position Absolute

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="screen">
 #myImage {
 border:1px solid red;
 }
 .hidden {
 visibility:hidden;
 float:left;
 margin:10px;
 position:absolute;
 }
</style>

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var imgHeight = $("#myImage").height();
 var imgWidth = $("#myImage").width();
 alert("Height = " + imgHeight + "px\nWidth = " + imgWidth + "px");

});
</script>

</head>
<body>

 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit mauris quis ante mollis sit amet dapibus erat semper. Nunc vitae nisi sapien, at ultricies neque. Ut interdum eleifend iaculis. Ut a auctor turpis. Sed in neque eget nulla vestibulum porttitor. Donec urna magna, feugiat vel interdum vitae, vestibulum vel nibh. Integer pellentesque bibendum pulvinar. Praesent orci turpis, porttitor id laoreet eget, fringilla in tortor. Nam sollicitudin mi vitae odio luctus nec fringilla mauris rutrum. Aenean tristique mi felis. Fusce eget justo eros, vel rhoncus dui.
 <div><img id="myImage" src="images/lol_cat.jpg" /></div>
 </p>
 <p>
 Curabitur feugiat ornare sapien, eu placerat magna aliquet placerat. Curabitur at vestibulum felis. Maecenas sagittis, lorem ac imperdiet mattis, nisi diam porta nibh, vel molestie odio turpis ut nisl. In hac habitasse platea dictumst. Quisque augue massa, tempor nec molestie id, facilisis non tortor. Pellentesque dapibus, massa a ornare placerat, erat urna blandit justo, sagittis sodales lectus odio et lacus. Suspendisse congue ipsum quis massa ornare vel vehicula sapien gravida. Mauris pretium elit ut mi malesuada pellentesque. Phasellus pulvinar nulla at sem eleifend ac sollicitudin est tincidunt. Proin lorem urna, viverra quis gravida in, scelerisque at dui.
 </p>
 <p>
 Nullam et erat vitae lacus porttitor pharetra. Nullam tincidunt tempor fermentum. Nulla rutrum, urna ac dapibus consequat, nisl lectus commodo arcu, ultrices auctor ante elit eget enim. Etiam enim massa, volutpat in venenatis mattis, placerat id sapien. Duis vel ante sit amet neque accumsan sollicitudin ac consequat sapien. Proin dapibus rhoncus libero vitae tristique. Quisque at neque in metus sodales vestibulum. Cras lacinia eleifend sapien, a pellentesque arcu pellentesque at. In hac habitasse platea dictumst. Ut porta sodales euismod. Donec ligula arcu, aliquet sed pretium vitae, aliquam quis lorem. Morbi fermentum semper volutpat. Sed porttitor posuere augue et imperdiet. Cras gravida diam at diam accumsan accumsan. Duis turpis erat, mollis ac tempor eu, elementum faucibus mi. Fusce et urna id dui pharetra consectetur. Nulla facilisis feugiat libero, eu ullamcorper purus placerat sed. Donec nisi sem, volutpat eu pellentesque non, consequat eget nibh.
 </p>

</body>
</html>

All done!  We now have a hidden element and jQuery is reporting the correct dimensions for the img within it!

]]> http://www.spinonesolutions.com/2009/07/javascript-reports-0-zero-height-and-width-for-hidden-image/feed/ 2