PDA

Click to See Complete Forum and Search --> : dynamically change overflow doesn't work in IE/PC



sigmundSquirrel
12-17-2006, 08:57 PM
Here's a link to my problem (disclaimer: site is still in early prototype, most links have no content...)

http://www.poddesign.com/myvu2

Click to the "Buzz" section. I want to be able to click on the images in the bottom half of the page and have them expand or contract based on their current state (I'm actually contracting and cropping, then expanding and removing the cropping). This already works on the Mac (Safari and Firefox) and on PC/Firefox -- but doesn't work on IE. Can anyone explain why, or suggest an alternative?

Right now I'm dynamically assigning a class to the image onclick. The two classes are .open and .closed, which basically set the image size and the overflow property from hidden to visible. All the styles and javascript on the page so you can view source and see what I'm doing. In IE, when you click on the image, it disappears -- but you can see that the page flow makes room for its expanded size, it just isn't showing the image anymore. If you click to another subheader (e.g. Awards) then back to the Gallery section, the image is now visible and expanded. Click on it and it contracts back to its cropped size successfully -- but disappears if you click again.

Another note: if you do the above and the image disappears, then click to another subheader, then back to see the image expanded -- it is now overflow:visible but has not resized to its normal size. When in the closed state (class="closed") I set the img height to 200 (half size). In the open state (class="open") I don't reference the img height -- which on Mac and Firefox, sets it at its normal size, but in IE it stays at half size. This is a secondary problem, I'd first rather know why it disappears onclick.

Here's the function and the two classes it references:

<script>
function toggleImg(which) {
var temp = document.getElementById(which).className;
var tempImg = which + "_label";
if(temp=='closed') {document.getElementById(which).className = 'open'; document.images[tempImg].src="global/images/image_close.jpg";}
else {document.getElementById(which).className = 'closed'; document.images[tempImg].src="global/images/image_view.jpg";}
}
</script>

<style type="text/css">
.closed {
position: relative;
left: -160px;
margin-top: 10px;
margin-bottom: 50px;
height: 70px;
width:400;
overflow:hidden;
}
.closed .main img {height:200px;}
.open {
position: relative;
left: -160px;
margin-top: 10px;
margin-bottom: 50px;
height:auto;
width:400;
overflow:visible;
}
</style>

Any help?

Thanks,
sig