html - Random Div Order on Page Load -
this question has answer here:
i have bunch of divs id "gallerycard". need them load in random order every time user visits page.
<div id="gallerycard"> <div id="girlname">akulina</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">martina</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">samantha</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">karen</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">jodie</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">sophie</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">olivia</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">leigh</div> <div id="girlinfo">n/a</div> </div> <div id="gallerycard"> <div id="girlname">kimberly</div> <div id="girlinfo">n/a</div> </div>
and...
here's fiddle css: http://jsfiddle.net/bwjhj/
i know simple task of struggle jquery @ times :(
thank you
html
first change of id
s classes
since id
must unique on page.
<div class="gallerycard"> <div id="girlname">akulina</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">martina</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">samantha</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">karen</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">jodie</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">sophie</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">olivia</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">leigh</div> <div id="girlinfo">n/a</div> </div> <div class="gallerycard"> <div id="girlname">kimberly</div> <div id="girlinfo">n/a</div> </div>
css (since markup uses classes switch style reflect)
.gallerycard { margin: 8px; float: left; height: 150px; width: 221px; background-color: rgba(0, 0, 0, .3); border-radius: 8px; }
javascript
select card elements dom generate 2 randoms between 0 , cards.length. use eq
select random element in selected elements , position before randomly selected element in set of selected eleemnts.
var cards = $(".gallerycard"); for(var = 0; < cards.length; i++){ var target = math.floor(math.random() * cards.length -1) + 1; var target2 = math.floor(math.random() * cards.length -1) +1; cards.eq(target).before(cards.eq(target2)); }
js fiddle: http://jsfiddle.net/bwjhj/1/
Comments
Post a Comment