In building Groupsinteractive.com, we tried to incorporate several elements to make the site more, well, interactive. One of those features is the randomly pulled quotes about our product that appear in the bottom right hand corner. Each time the page is refreshed, a new quote appears. We are obviously not the first company to incorporate this technique. I have been reading an advertising blog for several years now which has this feature, and I love it. I though I would take a few minutes and explain how we got it working on our site.

My user interface magic tool of choice is Jquery, which is a javascript library built by John Resig. I love it because it simplifies some of the more tedious elements of javascript, and allows me to do more coding in less time.

Step 1 – The Markup

I built my html and css before I knew I would do the randomly appearing quotes in Jquery, so this may not be the most efficient markup, but this is how I did it.

In the footer, I put the following html:

<div id="quote-box-text">
    <div>This is my first quote</div>
    <div>This is my second quote</div>
    <div>This is my third quote</div>
</div>

  <div id="quote-author">
    <div>
      <h3>Author1</h3>
      <h4>AuthorPlace1</h4>
    </div>

    <div>
      <h3>Author2</h3>
      <h4>AuthorPlace2</h4>
    </div>

    <div>
      <h3>Author3</h3>
      <h4>AuthorPlace3</h4>
    </div>
  </div>

  <div id="quote-box">
    <img src="images/quote-box.png">
  </div>

</div>

You will notice that there are three elements- the quote text, the author and where they are from, and the quote box itself (which is an absolutely positioned png image). These three elements all sit inside a div with a class of “grid_3.” (I am using the 960 grid system developed by Nathan Smith.)

Nothing too fancy here.

Step 2 – The CSS

Next, we look at the styling. Now, you can style the elements anyway you like, what I am going to show you is the styling necessary to make the quotes randomly appear.

css:

#quote-box-text div, #quote-author div {
 display: none;
}

Simple, right? All I do is tell the browser not to display any div element contained in an element with an id of #quote-box-text or #quote-author.

At this point, if someone were to load the page, nothing would appear in the quote box because the content is hidden. When we add the Jquery, that’s when the magic happens.

Step 3 – The Jquery

The first step here is, obviously, to include the Jquery library in your header. Fortunately, google hosts Jquery, so you don’t even have to download if you don’t want. You can link to it directly at:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/Jquery/1.3.2/Jquery.min.js"></script>

Once you have placed that in your header, open a script tag and input the following:

<script type="text/javascript" charset="utf-8">
$(function() {
 var randomNum = Math.floor(Math.random()*3);
$('div#quote-box-text div:eq(' + randomNum + ')').css("display", "block");
$('div#quote-author div:eq(' + randomNum + ')').css("display", "block");
});
</script>

Let me explain what is happening here.

First, we use 2 javascript functions, math.floor and math.random, to generate a random number. We use the combination so that the randomly generated number does not lean too far to either side (up or down). Thanks to http://www.javascriptkit.com/javatutors/randomnum.shtml for that explanation

The number after the Math.random function MUST match the number of quotes you have, or else one of two things will happen:

Not all of your quotes will be “put in the hat” to be randomly pulled or it will try to access a div that does not exist and nothing will show up.

Secondly, we use some Jquery to display a div based on the random number we just created. The Jquery function :eq() will find the nth child of a given element, in this case the nth (where n is the random number we generated) div of the div with an id of #quote-box-text. You can read more about the eq() function here.

We then do the same thing to display the quote author, using the same randomly generated number, and we are done.

Notice that the only thing Jquery is really doing for us is changing the css to display:block instead of display:none. CSS and HTML do the rest.

See a better way this could be accomplished? Please comment and let me know.

Tags: jquery, Random Quotes

This entry was posted on Wednesday, July 15th, 2009 at 4:22 pm and is filed under Code Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.