Here it goes:
I have a fixed DIV containing an IMG. The DIV is fixed to the window borders (top, bottom, left. The right edge "floats free") so it adjusts to any window resizing. The IMG has height:100% so it uses all of the parent's height and width:auto to keep the aspect ratio. My goal is that when window resizing, my parent DIV needs to have the same width as it's child IMG.
The problem that occurs is that the parent DIV has the same fixed width value as the original image file, even though the child IMG is resized. For example, if the image I use is 800x600, the parent DIV's width is fixed to 800.
I'm using jQuery to assign to the parent DIV the width value of the fluid child IMG. Ideally, I'd like that to happen once on page load and once every resize event.
The jQuery code works fine with FireFox and Opera but all the other browsers are buggy:
- Chrome/Safari assign a width:0 to the parent DIV on first load. I have to minimize and maximize for the proper value to be applied.
- IE never works. It always assigns a value of width:auto.
HTML CODE:
<div class="slide_show">
<img class="image" src="images/home_slideshow/06_InnerDomains.jpg">
<div class="image_title"><span>01. Inner Domains</span></div>
<div class="image_caption"><span>Caption for 1st image</span></div>
</div>
CSS CODE:
.slide_show {
position:fixed;
top:85px;
bottom:60px;
left:100px;
margin:0px 0px 0px 0px;
overflow:hidden;
display:block;
border:1px solid #181818;
z-index:5;
}
.image {
width:auto;
height:100%;
display:block;
}
JQuery CODE:
$(document).ready(function() {
function resizeImage() {
var imageWidth = jQuery('.image').css('width');
$('.slide_show').css('width', imageWidth);
alert(imageWidth);
};
// resize DIV on Document Load
resizeImage();
// resize DIV on Window Resize
$(window).resize(function() {
var resizeTimer;
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeImage, 100);
});
});
Thanks in advance for any help.