CODEWITHSUNDEEP
javascripthtmlcssdebugginglayout
heron
heron

Reputation: 3661

Strange JS or CSS (Can't figure out which one makes issue) related issue

Please visit this link.

When I open it on chrome or firefox and refresh multiple times I'm getting following screen:

enter image description here

I really can't understand why this problem happens. Also, no error in firebug on both browsers: Chrome and Firefox. Any suggestions?

Upvotes: 0

Views: 105

Answers (3)

Tural Ali
Tural Ali

Reputation: 23280

The problem is, your functions (related with slider) fires before all images load. Move the, into window.onload like below

window.onload = function () {
    //##########################################
    // Front slides
    //##########################################

    $('#front-slides').slides({
        preload: true,
        preloadImage: 'design/img/elems/loading.gif',
        generateNextPrev: false,
        play: 5000,
        pause: 2500,
        hoverPause: true,
        animationStart: function(current){
            $("#headline h6").fadeOut("slow");
        },
        animationComplete: function(current){
            $slideCaption = $(".slides_container div.slide:eq("+ (current-1) +") .caption").text();
            $("#headline h6").text($slideCaption);
            if($slideCaption != ''){
                $("#headline h6").fadeIn("slow");
            }else{
                $("#headline").hide("slow");
            }
        }

    });

    // default headline
    $firstCaption = $(".slides_container div.slide:eq(0) .caption").text();
    if($firstCaption != ''){
        $("#headline h6").text($firstCaption);
    }else{
        $("#headline").hide();
    }

}

Upvotes: 0

sbr
sbr

Reputation: 4823

the height for dom element with class "slides_control" is getting set dynamically.

Sometimes it is 18px , but in other cases it is 370px.

If you set the height explicitly to 370 px, it works , but you may want to look into it further as to why in your code it is setting different values.

Upvotes: 1

A.M.K
A.M.K

Reputation: 16785

Try giving #front-slides a height (370px in this case) and setting it to overflow: hidden;, then removing the overflow on .slides_container.

This seems to fix the issue for me, the problem appears to have been that .slides_control's height is being set wrong, apparently it's set to the images height before they have loaded.

Your other solution would be to manually set .slides_control's height to 370px or change the calculation till after the page has been loaded.

Upvotes: 1

Related Questions