Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Full Page Background Image | jQuery Problem in IE7 and 8

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #38662
    mevaser
    Participant

    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%; }

    #104913
    amoss
    Participant

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

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

    #104952
    mevaser
    Participant

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

    #104981
    amoss
    Participant

    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;
    }

    #105019
    mevaser
    Participant

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

    #105030

    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.

    #105035
    mevaser
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.