jquery - divs don't load correctly -


solved!!! scroll end of question!

as can see here:

i've made page soundtracks of show website's about, when load it, divs in div create rows aren't displayed correctly until hover 1 of divs, particular 1 looks has to. don't want visitors have find out how fix , it's irritating, it.

dom:

<body>     <div> <!--row wrapper-->         <div class="track"> <!--track information-->             <img src="" />        <!--album cover-->             <h3></h3>             <!--artist-->             <p></p>               <!--title-->         </div> <!--/track information-->     </div> <!--/row wrapper-->      <div> <!--row wrapper-->         <div class="track"> <!--track information-->             <img src="" />        <!--album cover-->             <h3></h3>             <!--artist-->             <p></p>               <!--title-->         </div> <!--/track information-->     </div> <!--/row wrapper-->      ... </body>

js (jquery):

$(document).ready(function() {         $('div.track').mouseenter(function() {             $(this).stop();                 //stop previous animation             $(this).animate({height:'250'});   //expand, title , artist visible.         });         $('div.track').mouseleave(function() {             $(this).stop();                 //stop previous animation             $(this).animate({height:'160px'}); //enlarge div it's original size         });     });

css:

<style>     .track{         vertical-align:top;         margin-right: 26px;         background-color: #a90000;         padding: 10px;         width: 160px;         height: 160px;         overflow: hidden;         border-radius: 6px;         color: #fff;         cursor: default;         margin-bottom: 20px;         display: inline;     } </style>

solved! added

css:

.track {      float: left; } .row{      clear: left; }

html:

<div class="row">      <div class="track"></div>      <div class="track"></div>      <div class="track"></div>      <div class="track"></div>      <div class="track"></div> </div>

result

thanx hungerstar

to red around each image, remove display: inline; .track. or if wan them in row pieter suggested , add float: left; .track. if want tracks below "push down" together, have wrap of .track divs in div , make sure containing div has clear: left; on start new row.

add

.track {      float: left; }

and containing divs add class of .row.

.row{      clear: left; }

and html

<div class="row">      <div class="track"></div>      <div class="track"></div>      <div class="track"></div>      <div class="track"></div>      <div class="track"></div> </div>

Comments

Post a Comment