AVeryNiceWeb

[Javascript] Random Content Display On Refresh

[Javascript] Random Content Display On Refresh

Postby admin » Tue Feb 13, 2018 7:51 am

Create content that displays randomly every time the page in it is refreshed.

First create a file called: random-text-javascript.js

The code is as follows:
Code: Select all
randomNumber = Math.floor(Math.random()*4+1);

window.onload = function() {
   if (randomNumber == 1) {
      document.getElementById("news1").style.display = "inline";
      document.getElementById("news2").style.display = "none";
      document.getElementById("news3").style.display = "none";
      document.getElementById("news4").style.display = "none";
   }
   if (randomNumber == 2) {
      document.getElementById("news1").style.display = "none";
      document.getElementById("news2").style.display = "inline";
      document.getElementById("news3").style.display = "none";
      document.getElementById("news4").style.display = "none";
   }
   if (randomNumber == 3) {
      document.getElementById("news1").style.display = "none";
      document.getElementById("news2").style.display = "none";
      document.getElementById("news3").style.display = "inline";
      document.getElementById("news4").style.display = "none";
   }
   if (randomNumber == 4) {
      document.getElementById("news1").style.display = "none";
      document.getElementById("news2").style.display = "none";
      document.getElementById("news3").style.display = "none";
      document.getElementById("news4").style.display = "inline";
   }
}


Insert this line in the HTML of the page you wish the content to appear (between the <head></head>):
Code: Select all
<script language="javascript" type="text/javascript" src="/wp-content/random-text-javascript.js"></script>


Now you need content. In this case we can have 4 different blocks of content and you could create a 5th one if needed (just copy and paste and add "news5" using the above as example).

The HTML part should be like this:

Code: Select all


<div id="news1"><h6>Some Title One</h6>

<div class="success2" align="left"><span style="font-size: small;"><b>Search results brought to you by:</b></span></div>
      <h6>ADVERTISE HERE AT THE DMS</h6>
   </div>

   <div id="news2"><h6>Some Title Two</h6>

<div class="success2" align="left"><span style="font-size: small;"><b>Search results brought to you by:</b></span></div>


   </div>

   <div id="news3"><h6>Some Title Three</h6>

<div class="success2" align="left"><span style="font-size: small;"><b>Search results brought to you by:</b></span></div>


   </div>

   <div id="news4"><h6>Some Title Four</h6>

<div class="success2" align="left"><span style="font-size: small;"><b>Search results brought to you by:</b></span></div>
      

   </div>


Basically you can add any type of html between div class id ( "news">) and the end div (</div>) area.
The AVNW Support Team
http://www.AVeryNiceWeb.com

If there is a false accusation made against you, then remove this fake report.

Shopping for a new website? See our design deals.

How much is your website worth? Get a free estimate.

And, if our post has provided you with great information, there are a few ways you can show your appreciation:
  1. Like us on Facebook
  2. Post a review.- Posting a good review about this site could help us provide improved support.

Thank You!
User avatar
admin
Site Admin
 
Posts: 496
Joined: Sun Jan 12, 2014 11:18 pm
Location: New York City

Return to Support

Who is online

Users browsing this forum: No registered users and 0 guests

cron