Question

I’ve got a pretty minor problem that I think can be resolved by re-thinking my CSS.

On a part of a page, I’ve got a series of images. Initially, each image is hidden (See CSS Below). I’ve got it working fine. When the page loads, the first image fades in via jquery. There’s a timer set up where after X seconds, the current image fades out and the next fades in.

Each image is contained in a larger DIV. The image is supposed to sitting exactly in the middle of the div (Vertically and Horizontally). Since each image could be a different size, i had to write in a bit of logic to check the height of the image and adjust its margins on-the-fly (Again, see code below). And this works fine, except for the very first image. The calculated height of the first image is always 0… which makes it appear lower than the middle of the div.

Can this same effect be acheived using vertical-alignment? So far I’ve been unsuccessful.

Any help is much appreciated.

Thanks

CODE

Markup

    <div id="logowrapper">
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
    </div>

CSS

#logowrapper
{
    border-right: 2px solid #DDD;
    display: block;
    position: absolute;
    top: 12px;
    left: 10px;
    text-align: center;
    width: 370px;
    height: 208px;
    background-color: #FFF;
}
.logo
{
    display: none;
}

JS

$(document).ready(function() {
    var currentLogo = 0;
    var numLogos = $(".logo").size();
    var interval = 3000; 
    var boxHeight = $("#logowrapper").height();
    function updateLogo() {
        if (currentLogo >= numLogos) {
            currentLogo = 0;
        }


        $(".logo").hide();  
        var thisLogo = $(".logo:eq(" + currentLogo + ")");
        thisLogo.fadeIn();
        var logoHeight = thisLogo.height();

        var newMargin = parseInt((boxHeight / 2), 10) - parseInt((logoHeight / 2), 10);

        thisLogo.css({ marginTop: newMargin });

        currentLogo++;

    }
    setInterval(updateLogo, interval);
    updateLogo();


});

Answer 1

The first image is probably not done loading when you try to get its height. The others work because by the time you get to those, they are completely loaded.

You can use the load event instead of ready to wait for the images to load. With jQuery:

$(window).load(function() {
    ...
});

I think you could use "#logowrapper" instead of window to only wait for the images inside the wrapper to load, but I’ve never done that.