Random Order Content using JavaScript

Submitted by alpha_luna on Tuesday, September 27, 2016 - 14:15.

This project Random Order Content was created using HTML and JavaScript. This kind of system lets you shuffle the display order of your regular content on your page. Just wrap it with the participating contents each inside a tags with a CSS class name, and this will scramble or will shuffle the order in which contents are shown on your page from top to bottom. Also, you can make a multiple "groups" of a random order content. Each group will shuffle independently. Check the LIVE DEMO below.

Directions:

First, Kindly add this code below to the HEAD section of your page.

.random_class body .random_title {
display:none;
}
 
p {
color:#00f;
}

Second, add this code below to the BODY section of your page to see how to apply the script on your page.

<!---Order 1-->
<h4>Random Source Code 1</h4>
<div class="random_title group1">
   <a href="https://www.sourcecodester.com/tutorials/php/4341/how-create-login-page-phpmysql.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">How to Create Login Page in PHP/MySQL</p>
   </a>
</div>
<div class="random_title group1">
   <a href="https://www.sourcecodester.com/visual-basic-net/9145/advanced-hotel-management-system-vbnet-and-sql-server.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Advanced Hotel Management System (VB.NET and SQL Server )</p>
   </a>
</div>
<div class="random_title group1">
   <a href="https://www.sourcecodester.com/php/9245/add-edit-delete-data-table-using-phpmysql.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Add, Edit, Delete with data table using PHP/MySQL</p>
   </a>
</div>
<div class="random_title group1">
   <a href="https://www.sourcecodester.com/php/9329/information-system-database.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Information System Database</p>
   </a>
</div>
<!---End of Order1-->
<!---Order 2-->
<h4>Random Source Code 2</h4>
<div class="random_title group2">
   <a href="https://www.sourcecodester.com/cc/prime-number-determiner-version-10.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Prime Number Determiner Version 1.0</p>
   </a>
</div>
<div class="random_title group2">
   <a href="https://www.sourcecodester.com/java/8863/undo-text-using-ctrl-z-java.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Undo Text using Ctrl Z in Java</p>
   </a>
</div>
<div class="random_title group2">
   <a href="https://www.sourcecodester.com/java/9072/android-image-databaseurl.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Android Image From DatabaseUrl</p>
   </a>
</div>
<div class="random_title group2">
   <a href="https://www.sourcecodester.com/visual-basic/7145/sales-and-inventory-monitoring-system-maureens-ukay-ukay-visual-basic-mysql.html">
      <p style="border:1px dotted red; background-color:antiquewhite; padding: 10px">Sales and Inventory Monitoring System for </p>
   </a>
</div>
<!---End of Order2-->

The classname should follow the syntax:

class="random_title groupX"

Where the "X" is an integer that should be shared to all content within the same group. This work, there are two kinds of content, the Random Source Code 1 and the Random Source Code 2, and it will shuffle their display order when shown. Lastly, at the end of your page, just add this code below to call the script.

<script type="text/javascript">
    random_titledisplay.init()
</script>

Output

Download the full source code to have this kind of project and try to debug this code. Thank you.

Add new comment

46 views