0

I have 30 divs with different images and links and wanted to get them to be displayed in 10 different divs randomly.

Example: https://i.stack.imgur.com/PGPFM.jpg (it's an animated gif)

Something like a "random related posts" that we use in wordpress, but my page is not in wordpress. It's just a simple website in php.  

the div would be so Link Link Link etc etc etc

How to do this in javascript or php?

Gian Martins
  • 5
  • 2

4 Answers4

0

Create 10 divs with those positions (empty divs)

Create a string array with the 10 (or more) html content that will fill the divs

Shuffle the array as stated here

Pass by the array and modify the innerHtml of the 10 divs one by one (Only first 10 elements since only 10 divs)

Community
  • 1
  • 1
Moussa Khalil
  • 635
  • 5
  • 12
0

You can use different ways, depending on your needs. When using MySQL you can use a query like:

SELECT images, link FROM tablename WHERE ...... ORDER BY RAND()

Or you can use shuffle on an array.

$array = array ( 'image1', 'image2' );
shuffle ( $array );

// Display divs
Scriptman
  • 424
  • 2
  • 13
0
<div class="divPool">content 1</div>
<div class="divPool">content 2</div>
<div class="divPool">content 3</div>

etc... to 30 divs

<div class="destination">destination 1</div>
<div class="destination">destination 2</div>
<div class="destination">destination 3</div>

etc. to 10 divs,

then in JavaScript:

    //make arrays of the html elements in each class:
    var arrayOfContent=document.getElementsByClassName("divPool");
    var arrayOfDestinations=document.getElementsByClassName("destination");

    for (var i=0; i<10: i++){//for each of the 10 destination divs

    //select a random number from 0 to 29
    var random=Math.floor(Math.random() * 30);

    arrayOfDestinations[i].innerHTML=arrayOfContent[random].innerHTML
    }

Also, in css you can make the divPool class invisible like this:

.divPool{display:none}
grateful
  • 1,128
  • 13
  • 25
0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 for(i=1;i<=10;i++){
  var id = Math.floor(Math.random() * 30) + 1;
  $("#display_"+id).show();
 }    
});
</script>
<div id="display_1" style="display:none;">1</div>
<div id="display_2" style="display:none;">2</div>
<div id="display_3" style="display:none;">3</div>
<div id="display_4" style="display:none;">4</div>
<div id="display_5" style="display:none;">5</div>
<div id="display_6" style="display:none;">6</div>
<div id="display_7" style="display:none;">7</div>
<div id="display_8" style="display:none;">8</div>
<div id="display_9" style="display:none;">9</div>
<div id="display_10" style="display:none;">10</div>
<div id="display_11" style="display:none;">11</div>
<div id="display_12" style="display:none;">12</div>
<div id="display_13" style="display:none;">13</div>
<div id="display_14" style="display:none;">14</div>
<div id="display_15" style="display:none;">15</div>
<div id="display_16" style="display:none;">16</div>
<div id="display_17" style="display:none;">17</div>
<div id="display_18" style="display:none;">18</div>
<div id="display_19" style="display:none;">19</div>
<div id="display_20" style="display:none;">20</div>
<div id="display_21" style="display:none;">21</div>
<div id="display_22" style="display:none;">22</div>
<div id="display_23" style="display:none;">23</div>
<div id="display_24" style="display:none;">24</div>
<div id="display_25" style="display:none;">25</div>
<div id="display_26" style="display:none;">26</div>
<div id="display_27" style="display:none;">27</div>
<div id="display_28" style="display:none;">28</div>
<div id="display_29" style="display:none;">29</div>
<div id="display_30" style="display:none;">30</div>

`

bipin patel
  • 2,061
  • 1
  • 13
  • 22