Forums

mevaser

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:



	<script type='text/javascript'>
		$(function() {   
			var theWindow        = $(window),
			    $bks              = $("#bks"),
			    aspectRatio      = $bks.width() / $bks.height();
			function resizeBg() {
				
				if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
				    $bks
				    	.removeClass()
				    	.addClass('bgheight');
				} else {
				    $bks
				    	.removeClass()
				    	.addClass('bgwidth');
				}
			}
			                   			
			theWindow.resize(function() {
				resizeBg();
			}).trigger("resize");
		
		});
	</script>



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

amoss

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

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

mevaser

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

amoss

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

mevaser

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

jonathansampson

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.

mevaser

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.

treehouse : what would you like to learn today?

Forums

Full Page Background Image | jQuery Problem in IE7 and 8