Help prevent jQuery rotator set to 100% width & height from hiding lower divs

i’m using jquery to crossfade images… after much searching i found a script that works for me… capable of displaying images at 100% width of container (height is not set therefore remains variable to width) and remain partially overlapped by nav bar…

the only problem i face… since height is not set… the div’s below the rotator are hidden behind the images… i cannot realize how to get the text to appear below the images… here’s a look at the code… any thought’s or ideas would be greatly appreciated:


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
function theRotator() {
    $('div.rotator ul li').css({opacity: 0.0});
    $('div.rotator ul li:first').css({opacity: 1.0}); 
    setInterval('rotate()',6000);
}
function rotate() {    
    var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));
    if ( current.length == 0 ) current = $('div.rotator ul li:first');
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
    current.animate({opacity: 0.0}, 1000) 
    .removeClass('show');    
};
$(document).ready(function() {        
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000);
});
</script>
<style type="text/css">
BODY {color:#000;overflow:hidden;}
#head {position:absolute;top:20px;left:150px;padding:0;margin:0px;overflow:visible !important;z-index:700;background:blue;color:#FFF;}
#nav {overflow:visible;position:absolute;top:130px;left:25px;bottom:50px;z-index:800;white-space:nowrap;line-height:36px;font-weight:bold;z-index:90;}
#nav ul {list-style:none;padding:0;margin:0;}
#nav ul li a {list-style:none !important;padding:0px;margin:0;}
#nav a {color:#FFF;text-decoration:none;}
#nav a:hover {text-decoration:underline;}
#navcolbg {width:190px;height:100%;position:absolute;left:0px;top:0px;z-index:1; background:blue;}
.navcolbg {width:190px;height:100%;min-height:600px;}
#columnRight {overflow:auto;position:absolute;top:125px;left:150px;right:0px;bottom:25px;}
#headline {margin:0 24px 0 50px;}
#slide {width:100%;padding:12px 0;}
.slidePic {width:100%;}
#bodyCopy {margin:0 24px 0 50px;}
.clr {clear:both;}
#footer {overflow:hidden;position:absolute;bottom:0;left:0;height:25px;color:#000;z-index:1;}
/* SLIDESHOW */
div.rotator {position:relative;width:100%;display:none;}
div.rotator ul {width:100%;padding:0;margin:0;}
div.rotator ul li {float:left;position:absolute;width:100%;list-style:none;padding:0;margin:0;}
div.rotator ul li img {width:100%;padding:0;margin:0;}
div.rotator ul li.show {z-index:1;padding:0;margin:0;}
</style>
</head>
<body>
<div id="columnRight">
<div id="headline"><H2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."<br />
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</H2></div>
<div id="slide">
<div class="rotator">
  <ul>
    <li class="show"><img src="pics-00.jpg"  class="slidePic"  alt="pic1" /></li>
    <li><img src="pics-01.jpg"  class="slidePic" alt="pic2" /></li>
    <li><img src="pics-02.jpg"  class="slidePic" alt="pic3" /></li>
    <li><img src="pics-03.jpg"  class="slidePic" alt="pic4" /></li>
  </ul></div></div>
<div class="clr"></div>  
<div id="bodyCopy"><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales justo posuere eros malesuada rutrum. Phasellus tincidunt blandit lacus vitae interdum. Donec mollis mattis ipsum, et viverra erat dapibus eget. Suspendisse et leo tortor, ut tincidunt ipsum. Donec sed lacus arcu. Aliquam sed elit est. Curabitur volutpat turpis vel leo blandit ac cursus sem porta.</h3>
<p>&nbsp;</p>
<p>Etiam nibh felis, hendrerit a venenatis quis, elementum at nunc. Phasellus ac tortor tristique diam rhoncus mollis non non diam. Proin luctus adipiscing rutrum. Donec pharetra, nisl ac accumsan sagittis, odio odio adipiscing sem, id sodales nulla mauris sit amet tellus. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="navcolbg"></div>
<div id="nav"><ul><li><a href="">MENU ONE</a></li><li><a href="">MENU TWO</a></li><li><a href="">MENU THREE</a></li><li><a href="">MENU FOUR</a></li><li><a href="">MENU FIVE</a></li></ul></div>
<div id="footer"></div>
<div id="head"><h1>Sed posuere posuere diam eu pellentesque.</h1></div>
      
  </body>

The images in the slide are placed absolutely and so take no space in the flow and sit ion the text.

Why don’t you just add an arbitrary height and hide the overflow.


#slide {
    width:100%;
    padding:12px 0;
[B]    height:500px;
    overflow:hidden;[/B]
}


Otherwise some images are going to stretch all the way down the page unless you have cropped images to all the same initial size.

Be careful with absolute positioning for your columns as it means you won’t be able to have a footer stretch under both columns. Usually in a two column layout you would float one of the columns if you need a full width footer.

Yes, all images are of equal height… to maintain some consistency so nothing funky happens between transitions…

I also thought about adding a min-height to the slide div… however … since the layout is fluid in width and height… a smaller browser window creates greater spacing between the slideshow images and the copy… and a larger browser window creates smaller spacing between images and copy… this is not consistent… therefore undesirable

would it be possible… to have a place holder image… one that loads before the slide show… or maybe a transparent gif over the slide area… and actually that might be a viable solution… any ideas to quickly put a transparent gif (png) on top of the slide area?

GOT IT!

Thanks Paul O’B for hinting to a solution “The images in the slide are placed absolutely and so take no space in the flow” … so filling the space with a transparent image of the same dimensions and set to 100% width… will work to offset the lack of space set by the rotator and cause copy div to show up underneath the slideshow:

[COLOR=#000080]<div id=[COLOR=#0000FF]"slide"[/COLOR]>[/COLOR]
[COLOR=#000080]<div class=[COLOR=#0000FF]"rotator"[/COLOR]>[/COLOR]
  [COLOR=#000080]<ul>[/COLOR]
    [COLOR=#000080]<li class=[COLOR=#0000FF]"show"[/COLOR]>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000FF]"pics-00.jpg"[/COLOR]  class=[COLOR=#0000FF]"slidePic"[/COLOR]  alt=[COLOR=#0000FF]"pic1"[/COLOR] />[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000FF]"pics-01.jpg"[/COLOR]  class=[COLOR=#0000FF]"slidePic"[/COLOR] alt=[COLOR=#0000FF]"pic2"[/COLOR] />[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000FF]"pics-02.jpg"[/COLOR]  class=[COLOR=#0000FF]"slidePic"[/COLOR] alt=[COLOR=#0000FF]"pic3"[/COLOR] />[/COLOR][COLOR=#000080]</li>[/COLOR]
    [COLOR=#000080]<li>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000FF]"pics-03.jpg"[/COLOR]  class=[COLOR=#0000FF]"slidePic"[/COLOR] alt=[COLOR=#0000FF]"pic4"[/COLOR] />[/COLOR][COLOR=#000080]</li>[/COLOR]
  [COLOR=#000080]</ul>[/COLOR][COLOR=#000080]</div>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000FF]"transparent-overlay.png"[/COLOR]  class=[COLOR=#0000FF]"slidePic"[/COLOR] alt=[COLOR=#0000FF]"pic4"[/COLOR] />[/COLOR][COLOR=#000080][/COLOR]
[COLOR=#000080]</div>[/COLOR]