These instructions will show you how to create a div with a field of text in it, and upon clicking a link, will load a JQuery animation, replace the text inside the box, and then load another jquery animation.
<p id="nextButton"><a id="updateQuote" href="#">NEXT</a>
As you can see, this is a simple establishment of the elements required. You have the "wrapper" ID to identify the outer box (which will carry the animation) and the "quoteContainer" ID which currently contains no information at all, but will contain the output of a PHP script
So a couple things need to happen with this box:
// On page load, fill the box with content.
// On click of the Next button...
// Use the Slide Up animation to close the #wrapper div...
// Then load INTO the quoteContainer div the output of randomquote.php
// And after that, execute the Slide Down animation
Now would probably be a good time to look at that PHP script:
// 'text' is the name of your table that contains
// the information you want to pull from
$rowcount = mysql_query("select count() as rows from text");
// Gets the total number of items pulled from database.
while ($row = mysql_fetch_assoc($rowcount))
$max = $row["rows"];
// Selects an item's index at random
$rand = rand(1,$max)-1;
$result = mysql_query("select from quotables limit $rand, 1");
$row = mysql_fetch_array($result);
$randomOutput = $row['storedText'];
echo '<p>' . $randomOutput . '</p>';
There are much more efficient ways to write this script. I simply encapsulated it to show the process of what should be done in a standard script. Ideally, global access to the array that is pulled from the database would be the best course of action; that way, you wouldn't have to make a call to the database every time the button is clicked. Here's more information about sessions, where you can find solutions.
If you have any questions or comments about my implementation of this code, please feel free to contact me.
Some other articles you might enjoy...
|E-mail Newsletter Form with jQuery, AJAX, MySQL and PHP||Sunday, March 14, 2010|
|Snazzy jQuery Form Alert Boxes||Tuesday, February 9, 2010|
|How to Talk Like PHP: Part 1||Tuesday, June 9, 2009|
|jQuery Vertical Align Function||Wednesday, October 27, 2010|
|Creating An Image Management System for Your Website with Smart Image Resizer and Lightbox 2||Saturday, July 11, 2009|