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 ids 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

Popular posts from this blog

Unable to remove the www from url on https using .htaccess -