JQuery slide animation reveal div height issue

Question

Hi, I have added a JQuery slide reveal effect to a page which partially shows the main content div (with text, flash and or images) for a couple of seconds then it animates to reveal the full content div. The scripted animation is added to the ".slide" class div on the page which can have various amount of height based on how much text or other elements are placed in. I have tested it on IE6 and FF 3 and it works "somewhat" fine.

However testing the animation in IE7 doesn't reveal the div fully and it still covers most of the content very badly. Also sometimes incorrect cover up or crop happens on other browsers too so the slide reveal div animation doesn't open all the way.

I guess the browsers don't calculate the full height of the div correctly with all the contained content including spacings, padding and line height.

Is there any way to make this work properly so the script gets the exact div height and then the animation slides to the correct position?

Thanks, Attila

I have included the link and the JQuery code below:

Here is the link: http://www.attilareinhardt.com/clients/test/mainWhoWeAre_slide2.html

JQuery code:

// Set the initial open height for sliding div:
var sliderHeight = "485px";

var initialDelay = 2000;
var slideDuration = 2000;

$(document).ready(function(){

 // Show the slider content
 $('.slider').show();

 $('.slider').each(function () {
  var current = $(this);
  current.attr("box_h", current.height());
 });

 $(".slider").css("height", sliderHeight);

var delay = function() { sliderOpen(); };

setTimeout(delay, initialDelay);

});


function sliderOpen()
{
 var open_height = $(".slider").attr("box_h") + "px";
 $(".slider").animate({"height": open_height}, {duration: slideDuration });
}

Answer 1

hi,

Here is a more elegant four-liner solution that doesn’t rely on absolute height in px:

$(function() {
    var initialDelay = 2000;
    var slideDuration = 2000;
    $(".slider").show().children().not(".showAtFirst").hide();  //show the parent container but hide all children.  
    window.setTimeout(function() { $(".slider").children(":hidden").slideDown(slideDuration) }, initialDelay);
});

all you have to do is make sure the elements visible at the beginning have the showAtFirst class.

Answer 2

Thanks matdumsa,

Your suggested script works with adding the ".showAtFirst" class to elements if the full element need to be visible initially. However on this design the content elements don't always end clearly in order to have a clean assignment of class. I want to maintian a consistent hide line height on the pages.

So if I have a long paragraph on the page then it will need to hide maybe right at the middle of the "p" element so I can't assign the class to the whole element and show it all. So how can I add a working pixel height value for the beginning visible portion in your script?