html - Height of image is not getting through jquery height() in chrome and opera -


i having slider, in there image container li displaying li depends on slide timing. issue if finding image height or li height @ first not displaying in chrome , opera (only time). how fix issue .

html

<!doctype html> <html>  <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title>demo slider</title> <link href="sample.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body>  <div class="slidestoryhome"> <div class="slider">         <ul class="sliderwrapper">             <li>                 <div class="slidepart1">                     <a href="#">                         <img src="img/slideshow_1.jpg" alt="one" />                      </a>                 </div>                 <div class="slidepart2">                     demo heading                 </div>             </li>                    </ul>     </div> </div> <script type="text/javascript"> $(document).ready(function() {     $('ul.sliderwrapper li').first().addclass('active');     var xyz = $('.sliderwrapper li').height();     alert(xyz);  });  </script> </body>  </html> 

css

 ul, li,body {     margin:0;     padding:0;     border:0;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent; } .slidestoryhome {     float: left;     width: 500px;     height: auto;     padding: 0px;     margin: 0px 0px 10px 0px; } .slider{     width: 100%;     height: auto;     position: relative;     overflow: hidden;     float: left;     background: #303030; } ul.sliderwrapper {     top:0px;     left:0px;     margin-left: 0px;     margin-top: 0px;     width: 100%;     height: auto;     position: relative;     overflow: hidden; } ul.sliderwrapper li {     float: left;     position:absolute;     left:0px;     width: 100%;     height: 100%;     background: #303030;     list-style: none; } ul.sliderwrapper li.active { position: relative; } ul.sliderwrapper li img{     width: 100%;     height: auto;     float: left; } .slidepart1{     height: auto;     width: 100%;     float: left;     background: #303030;     position: relative;     overflow: hidden; } .slidepart2{     background-color:#ccc;     background-position: left bottom;     background-repeat: repeat-x;     bottom: 0;     opacity: .6;     display: block;     height: auto;     left: 0;     padding-bottom: 10px;     position: absolute;     width: 100%; } .displaynone{display: none; } 

i creating filddle click here
note: in fiddle working properly, once copied local , run through chrome or opera, wont.

try this

$(".sliderwrapper li img").load(function() { var xyz = $('.sliderwrapper li').height();     alert(xyz);     }) 

demo : http://jsfiddle.net/a5j4n/4/

problem :

you getting li height before image loaded completely


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -