Grow your CSS skills. Land your dream job.

Full Page Background Image | jQuery Problem in IE7 and 8

  • # June 26, 2012 at 6:19 pm

    Hello every one, I am trying to finish this website, but I found out that IE7 and 8 as I scroll down, the image blinks (disappears for a few secs). Here is the website: http://bit.ly/L6r1tu

    I can’t figure out why it blinks! Any one?

    Here is the script I used:







    #bks { position: fixed; top:0; left:0; } /* fixed */
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; }

    # June 26, 2012 at 8:59 pm

    Try a higher z-index for the #nav to see if that may help.

    #nav {
    position: absolute;
    top: 58px;
    right: 1px;
    z-index: 2;

    # June 27, 2012 at 6:07 pm

    I tried that, but in IE7 and 8 still jerks, it disappears, then appears.

    # June 28, 2012 at 10:37 am

    For me the image would partly blink/disappear the same height as the hover drop downs.
    If you disable the nav menu hovers does it still jerk/disappear?
    Maybe a higher z-index for the hovers?

    .sf-menu li.sfHover ul {
    left: 0;
    top: 48px; /* match top ul list item height */
    z-index: 99;
    }

    # June 28, 2012 at 4:48 pm

    Thanks every one, still not cigar! what a bugger!

    # June 28, 2012 at 6:43 pm

    You are re-using ID values on key elements. You should avoid this and use classes instead when you have multiple elements that should share a handler. I see that you’re doing this with #bks specifically, which is the element jQuery tries to manipulate. This will definitely cause problems with jQuery’s access to those elements.

    You could avoid using the id values altogether and reduce your code a bit:

    $(function() {
    $(window).on("resize", function(){
    var self = $(this);
    $(".slide > img").prop("class", function(){
    return self.width() > self.height() ? "bgwidth" : "bgheight" ;
    });
    }).trigger("resize");
    });​

    I would also encourage you to run your code through a validator and cleanup any errors it reports. I passed your front page through the w3 validator and it turned up 9 errors I believe.

    # June 28, 2012 at 8:12 pm

    Hi Jonathan, the makers of this slider made it that each slider is called not with its own ID or CLASS. And in order to have the Full Screen Slider you must use ID to set it apart. I forgot to though take away some ID’s and make them class, and you reminded me. Thank you.

    I did some changes on the slider, YEA, not does not jerk, and it looks the same in all browsers! GREAT!

    Thank you guys.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".