hiding/showing CSS Div using javascript on page refresh

Discussion in 'Web Design and Development' started by kalani50, Jun 17, 2008.

  1. kalani50 macrumors newbie

    Joined:
    Jun 17, 2008
    #1
    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.
     
  2. notnek macrumors 6502

    notnek

    Joined:
    Oct 25, 2007
    #2
    Try it with php/mysql. Store each highlight in a row.

    Code:
    $query = "SELECT * FROM highlights ORDER BY RAND() LIMIT 1";
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Given this HTML:
    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:
    PHP:
    <script type="text/javascript">
    var 
    ShowRandomTextBlock = function()
    {
      var 
    blocks = new Array();
      function 
    DoIt()
      {
        var 
    document.getElementById('highlights').getElementsByTagName('div');
        for (var 
    x=0y=d.lengthyx++) {
          
    // 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=0y=blocks.lengthyx++) {
          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.
     
  4. dtyson macrumors member

    Joined:
    Jan 20, 2008
    #4
    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:


    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:


    Code:
    <? 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.
     
  5. kalani50 thread starter macrumors newbie

    Joined:
    Jun 17, 2008
    #5
    Thank you!!

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

Share This Page