hiding/showing CSS Div using javascript on page refresh

[kalani50]

Hey all, I could use a little help.

I'm trying to figure out how to hide and show a CSS Div, using javascript, so that when the page is refreshed, it randomly chooses a different block of text to display in the same place.

For example, on the a home page there is a Highlights section, and in this section the content will randomly change each time the page is reloaded/refreshed.

Any help would be appreciated.

Thanks.

 

[notnek]

Try it with php/mysql. Store each highlight in a row.

$query = "SELECT * FROM highlights ORDER BY RAND() LIMIT 1";

 

[angelwatt]

Given this HTML:

<div id="highlights">
  <div class="textspot">text1</div>
  <div>text-a</div> <!-- Always present since it doesn't have class name textspot -->
  <div class="textspot">text2</div>
  <div class="textspot">text3</div>
  <div class="textspot">text4</div>
  <noscript>Text for people with JavaScript disabled.</noscript>
</div>

Put this JavaScript inside the head tag:

<script type="text/javascript">
var ShowRandomTextBlock = function()
{
  var blocks = new Array();
  function DoIt()
  {
    var d = document.getElementById('highlights').getElementsByTagName('div');
    for (var x=0, y=d.length; x < y; x++) {
      // capture the divs with the right class name
      if (d[x].className == 'textspot') { blocks.push(d[x]); }
    }
    // find random number
    var spot = Math.floor(Math.random() * blocks.length);
    // Set whether each div block should be seen or not
    for (var x=0, y=blocks.length; x < y; x++) {
      if (spot == x) { blocks[x].style.display = ''; }
      else { blocks[x].style.display = 'none'; }
    }
  }
  window.onload = DoIt;
}();
</script>

This will randomly show one of the div tags inside the highlights div tag that has a class name of 'textspot.' You'll notice a flicker when the page loads as it makes the other text spots disappear. You can fix this by having all of the div tags hidden first, but this has a downside that someone with JavaScript disabled (like myself) won't see any of the text blocks. Though you could get around this by using a noscript tag to show people without JavaScript something. Let me know if you have any questions.

 

[dtyson]

Hmmm... you shouldn't need to use javascript or a database here. You can accomplish the same thing and probably faster by creating a PHP include file with the following code:

<?
$quote[1]="quote one";
$quote[2]="quote two";
$quote[3]="quote three";
$quote[4]="quote four";

$randnum = mt_rand(0,4);
$quotes = $quote[$randnum];
?>

// HTML/CSS around the following echo for form and style

<? echo $quotes ?>

// **** end include file, name and save as desired ****

Then add the following in your page wherever you want the quotes to appear:

<? include("path/filename.inc"); ?>

A couple of things: when adding quotes to the include file (whatever you decide to call it), make sure you continue in increments of one $quote[5]...etc.

Also, make sure to change the mt_rand(0,4) (in particular, the 4) to whatever the number of quotes you have.

Oh, and don't forget that you'll need to use the .php extension (index.php rather than index.html) for the script to work. It depends on your setup whether or not a standard html/htm page will run php. So if you just use .php, you'll be fine.

That should do quite nicely.

Good luck.

 

[kalani50]

Thank you!!

Thank you all for your help! The script works great!!