problems with rendering jquery in some browsers

Page 1 of 1

problems with rendering jquery in some browsers

by derektice » Wed Jul 10, 2013 5:18 am

I'm currently using JQuery animations on my website. The animations work fine; however, sometimes when the page is loaded, the divs containing the animation load in an incorrect position. If at first you dont see it, refresh the page until the divs are situated differently. The misplaced divs will stay this way until the mouse hover overs, the browser then adjusts the positioning to the correct location. The divs with the problem are the row1, row2, and row3 divs. I'm looking for a way to get the div to load in the right location 100% of the time.

this problem occurs on this page of my site: http://derektice.com/pages/thirdyear.html

Any help is very much appreciated. Thanks!

html

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>PORTFOLIO || Derek Tice</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <link href="../stylesheets/global.css" rel="stylesheet" type="text/css"> <link href="../stylesheets/thirdyear.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="../stylesheets/thirdyear.js"></script> <script type="text/javascript" language="javascript"> window.onload = function() { init(); }; </script> </head> <div style="width:1px; height:1px; visibility:hidden; overflow:hidden"> <img src="../images/nav_bar/home-hover.png" /> <img src="../images/nav_bar/about-hover.png" /> <img src="../images/nav_bar/contact-hover.png" /> <img src="../images/nav_bar/downloads-hover.png" /> <img src="../images/nav_bar/fourthyear-hover.png" /> <img src="../images/nav_bar/thirdyear-hover.png" /> <img src="../images/nav_bar/secondyear-hover.png" /> <img src="../images/nav_bar/extra-hover.png" /> </div> <body> <div id="container"> <div id="titleblock"> <a href="../index.html"><img src="../images/title.png"></a> <div id="navigation"> <a href="../index.html" class="home"></a> <a href="about.html" class="about"></a> <a href="contact.html" class="contact"></a> <a href="downloads.html" class="downloads"></a> <p> <a href="fourthyear.html" class="fourth"></a> <a href="thirdyear.html"><img src="../images/nav_bar/thirdyear-hover.png"></a> <a href="secondyear.html" class="second"></a> <a href="extra.html" class="extra"></a> </div> <div id="content"> <div class="row1"> <div class="img-wrap"> <div class="testinglabfilter"></div> <a href="testinglab.html"><div class="overlay"></div></a> <a href="testinglab.html"><img src="../images/testinglab.png"/></a> <div id="text1"></div> </div> </div> <div class="row2"> <div class="img-wrap"> <div class="cohousingfilter"></div> <div class="overlay"></div> <a href="cohousing.html"><img src="../images/cohousing.png"/></a> <div id="text2"></div> </div> </div> <div class="row3"> <div class="img-wrap"> <div class="libraryfilter"></div> <div class="overlay"></div> <a href="library.html"><img src="../images/library.png"/></a> <div id="text3"></div> </div> </div> </div> </div> <div id="copyright"> Copyright &#169 2013 || All rights reserved </div> </div> </body> </html>

css

Code: Select all: body{ width:1012px; margin-right:auto; margin-left:auto; text-align:left; font-family:arial; font-size:11px; color:#c9c9c9; margin-top:0px; } a img{ border:none; } #container{ width:1012px; height:423px; background-color:#ffffff; top:15%; position:absolute; } #titleblock{ width:200px; height:403px; background-color:#4a4a4a; opacity:.95; } #content{ width:809px; height:403px; margin-left:203px; margin-top:-37px; display:inline-block; background-color:; } #navigation{ width:195px; height:173px; position:absolute; bottom:15px; padding-left:5px; } #copyright{ width:1002px; height:20px; margin-top:2px; padding-left:7px; text-align:left; } .row1{ width:200px; height:403px; background-color:#ffffff; display:inline-block; } #text1{ width:200px; height:203px; background-image:url('../images/testinglab-text.png'); position:relative; cursor:default; } .row2{ width:200px; height:403px; background-color:#ffffff; display:inline-block; position:relative; } #text2{ width:200px; height:203px; background-image:url('../images/cohousing-text.png'); position:relative; cursor:default; } .row3{ width:200px; height:403px; background-color:#ffffff; display:inline-block; position:relative; } #text3{ width:200px; height:203px; background-image:url('../images/library-text.png'); position:relative; z-index:30; cursor:default; } .testinglabfilter{ background-image:url('../images/testinglab-filter.png'); height:200px; width:200px; position:absolute; z-index:30; pointer-events:none; } .cohousingfilter{ background-image:url('../images/cohousing-filter.png'); height:200px; width:200px; position:absolute; z-index:30; pointer-events:none; } .libraryfilter{ background-image:url('../images/library-filter.png'); height:200px; width:200px; position:absolute; z-index:30; pointer-events:none; } .img-wrap { position: relative; width: 200px; height: 403px; overflow:hidden; margin-top:; } .img-wrap:hover { cursor: pointer; } .img-wrap .overlay { position: absolute; background-color:#4a4a4a; width: 100%; height: 200px; opacity: .8; } .img-wrap2 { position: relative; width: 200px; height: 403px; overflow:hidden; margin-top:; } .img-wrap2 .overlay2 { position: absolute; background-image:url('../images/busbarn-filter.png'); width: 100%; height: 200px; opacity: 1; }

Java

Code: Select all: $(function () { $('.img-wrap') .mouseenter(function () { $(this).find('.overlay').stop().animate({top:"203px"}, 200); }) .mouseleave(function () { $(this).find('.overlay').stop().animate({top: 0}, 300); }); $('.img-wrap2') .mouseenter(function () { $(this).find('.overlay2').stop().animate({top:"203px"}, 200); }) .mouseleave(function () { $(this).find('.overlay2').stop().animate({top: 0}, 300); }); });