web 2.0 javascript, jQuery, Ajax, javascript web 2.0, web 2.0 javascript/example
Random Fading Rotator with jQuery
A quick demo of what this article will build can be seen here:
http://www.duellweb.com/examples/randomfadingrotator/images.html
First of all, setup a list of elements on your page something like below:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html>
<head>
<title>Fading Image Rotator</title>
<link href=”rfr.css” rel=”stylesheet” type=”text/css” media=”all”/>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”></script>
<script type=”text/javascript” src=”rfr.js”></script>
</head>
<body>
<div id=”rotating_items”>
<div class=”rotating_item”>
<img src=”first_image.jpg” />
</div>
<div class=”rotating_item”>
<img src=”second_image.jpg” />
</div>
<div class=”rotating_item”>
<img src=”third_image.jpg” />
</div>
</div>
</body>
</html>
Viewing the above code will show you a simple list of images in an unordered list, nothing fancy at all, so to get the items in the right place and remove the default styling we need to generate the css file (which as you may have noticed we are going to call rfr.css)
body {
font-family: “Trebuchet MS”, “Geneva CY”, Verdana;
font-size: 12px;
color: #414141;
}
h3{
font-size: 18px;
margin: 20px 0px;
}
#rotating_items{
position: relative;
}
#rotating_items h3{
margin: 0px;
}
#rotating_items div.rotating_item{
position: absolute;
}
Again, there’s nothing overly complicated in this set of css classes, all that is happening is that each of the elements is being told to display on top of each other, so refreshing your page now you will see only one image. The other images are tucked in behind it, ready to be rotated through.
Now comes the fun part, the javascript. Again, you may have noticed that this javascript file we are going to call rfr.js
As noted earlier, we’re going to pick an element at random from the list available to fade in while the current image fades out.
jQuery(document).ready(function(){
showing = jQuery(#rotating_items div.rotating_item:first); // Initiate the ishowing variable as the first rotating_item
showing.siblings( wouldiv).hide(); // Hide all other rotating_items
setInterval(“show_next_rotating_item(showing)”, 5000); // Set the rotate time to 5 seconds
});
// Below is the code that picks an item at random to display
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
random: function(a, i, m, r) {
if (i == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
};
return i == jQuery.jQueryRandom;
}
});
// The below function repeatedly gets called, to do the rotating
function show_next_rotating_item(t){
jQuery(t).fadeOut( islow);
var next_rotating_item = jQuery(t).siblings(.rotating_item:random);
if(!next_rotating_item.attr(class)){
next_rotating_item = jQuery(#rotating_items div.rotating_item:first);
}
next_rotating_item.fadeIn( islow);
showing = next_rotating_item;
}
The main things to notice here are the ‘random’ extension of jQuery, and the use of the randoms selector when using the ’siblings’ function call. This allows is to pick a random sibling element of the element that is currently being displayed.
This can be used with pretty much anything, including content based divs. The example here:
http://www.duellweb.com/examples/randomfadingrotator/testimonials.html
Shows a set of testimonials that rotate at random, the added bonus here if you view the javascript source for this version, is that the entire element becomes a hot spot for the link, so the use can click anywhere on the item. It also has some extra code in there to allow you to track the clicks as an event in Google if you so wish.
Full Reference Source:http://www.duellweb.com/development/ajax_and_javascript/random-fading-rotator-with-jquery/
Introduction to Server-side JavaScript
Some History on Server-side JavaScript
Server-side JavaScript (SSJS) refers to JavaScript that runs on server-side and is therefore not downloaded to the browser. This term is used to differentiate it from regular JavaScript, which is predominantly used on the client-side (also referred to as client-side JavaScript or CSJS for short). The first implementation of SSJS was Netscape is LiveWire, which was included in their Enterprise Server 2.0 back in 1996. Since then, a number of other companies have followed suit in offering an alternative to the usual server-side technologies. One of the biggest players in the field was Microsoft. They supported the use of JavaScript on the server within what is now knows as “classic” ASP. Along with the most common VBScript language, it also supported JavaScript and PerlScript. In reality, Microsoft utilized JScript, their own version of JavaScript. To use JScript/JavaScript, all you had to do was set the LANGUAGE attribute in the opening script tag:
1 <%@LANGUAGE=”JavaScript”%>
2 <%
3 Response.Write(“<HTML> “)
4 Response.Write(“<FONT COLOR=”red”>”Hello World”</FONT><BR> “)
5 Response.Write(“</HTML> “)
6 %>
<%@LANGUAGE=”JavaScript”%> <% Response.Write(“<HTML> “) Response.Write(“<FONT COLOR=”red”>”Hello World”</FONT><BR> “) Response.Write(“</HTML> “) %>
Since the code runs on the server, what is sent to the client is the output of the script rather than the source code. Hence only the tags produced by the Response.Write() functions are found in the page source:
1 <HTML>
2 <FONT COLOR=”red”>”Hello World”</FONT><BR>
3 </HTML>
<HTML> <FONT COLOR=”red”>”Hello World”</FONT><BR> </HTML>
In addition to alleviating development complexity, server-side JavaScript offers a few other benefits that you may not have considered:
* The same code can validate data on both the client (for immediate user feedback) and on the server (for security), so validations never get out of sync.
* The same code can prepare both the HTML DOM server side and modify it client-side, when the user changes the data or it is refreshed from the server.
* Using the same code on both the client and the server, developers have fewer technologies to learn and stay on top of, and fewer parts of the application or site to maintain.
The Aptana Jaxer Server
Jaxer is server-side engine is based on Mozilla Gecko, the same browser engine that is in the Firefox browser. The Mozilla engine allows web pages to be manipulated in the same way that client-side code can. Jaxer is server-side JavaScript APIs are even more powerful than client-side JavaScript in that they enable database access, file system access, network communications, user sessions, and other functions that are typically only found in web application languages. Jaxer even provides support to access Java objects via the DWR project.
Jaxer is not a stand-alone server, but rather, acts as a plug-in to another server such as Apache, Jetty or Tomcat so that it can handle the traffic load. Jaxer provides the server-side DOM and API processing for pages served by the web server before delivering the results to the browser.
Create Your First AJAX Request (Part Two)
The complete script can be downloaded here AjaxRequest (30.91 KB) Create your first AJAX Request
In the first part, we created a function, getRequestObj(), that we can now use to initiate a new XMLHttpRequest object. This is as simple as…
var myReq = new getRequestObj();
However,it’s important to remember that JavaScript should always be added to the page to enhance the page. So with that in mind, we’ll create the basic html and php that works without any JavaScript involved. This ensures that the page will still be functional for those users without JavaScript enabled (albeit without the ajax slickness). We’ll also create a simple MySQL table to pull the data from. In fact, let’s do that first. Run this script inside your mysql client (phpMyadmin) or alternatively through a php script:
CREATE TABLE `users` (
`user_id` INT(3) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`user_name` VARCHAR(20) NOT NULL,
`user_interests` TEXT NOT NULL,
`user_avatar` VARCHAR(40) NOT NULL)
This is pretty straight forward. Obviously, you’ll need to populate the table with your own data. The ‘user_avatar’ field needs to hold a path to the image on the file system (for example, ‘images/myavatar’). Now for the html:
index.php
<?php
include (cnx.php);
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Show Dynamic Details With Ajax</title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
<script src=”xhrobj.js” type=”text/javascript”></script>
<script src=”showdetails.js” type=”text/javascript”></script>
</head>
<body>
<div id=”wrapper”>
<h1>Show User Details With Ajax</h1>
<div id=”users”>
<h2>Users</h2>
</div>
<div id=”user_details”>
</div>
</div>
</body>
</html>
This is a simple page consisting of a ‘wrapper’ div which contains 2 other divs, ‘users’ and ‘user_details’. At the moment, both of these divs are empty. Notice the php code at the very start of the page:
<?php
include (cnx.php);
?>
This is the script that connects to our database:
cnx.php
<?php
DEFINE (DB_USER, wouldbuser);
DEFINE (DB_PASSWORD, wouldbpassword);
DEFINE (DB_HOST, wouldbhost);
DEFINE (DB_NAME, wouldbtable);
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die (Could not connect to MySQL);
@mysql_select_db (DB_NAME) OR die (Could not select the database);
?>
Again, you’ll need to use your own database details here!
To populate the ‘users’ div with a list of users, we’ll query the database. Place the following code inside the ‘users’ div just after the level 2 heading:
<?php
$query = “SELECT `user_id`, `user_name` FROM `users` ORDER BY user_id”;
$result = mysql_query($query) OR die (Could not perform the query);
if ($result)
{
echo <ul>;
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo<li><a href=”index.php?user= . $row[user_id] . ” title=”View my profile”> . ucfirst($row[user_name]) . </a></li>;
}
echo </ul>;
}
?>
This produces a list of user’s names. Each one is a link back to ‘index.php’ with that user’s ‘user_id’ passed as a parameter (for example, ‘index.php?user=1′).
To display a user’s info, we need to check for the ‘user’ parameter using the $_GET superglobal. Place the following code at the top of the page just after the line that includes ‘cnx.php’:
$output = FALSE;
if (isset($_GET[user]))
{
$user_id = (int) $_GET[user];
$query = “SELECT * FROM `users` WHERE `users`.`user_id` = $user_id LIMIT 1″;
$result = mysql_query($query) OR die (Could not perform the query);
if(mysql_num_rows($result) ==1) {
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$output .= <ul>;
$output .= <li><h3> . ucfirst($row[user_name]) . </h3>;
$output .= <img src= . $row[user_avatar] . /><p> . $row[user_interests] . </p></li>;
$output .= </ul>;
}
else
{
$output = <p>There isn a user with that name</p>;
}
}
This performs a simple query that pulls out the data for the relevant user. It then builds a list containing the user’s details and assigns it to a variable called $output. If a user doesn’t exist with that user_id, $output contains an error message instead.
Inside the ‘user_details’ div, we check for the existence of $output. If it exists, we echo it to the page:
<div id=”user_details”>
<?php if ($output) {echo $output;} else {echo <p>The user is profile details will appear here.</p>;} ?>
</div>
After all of that, your final ‘index.php’ should look like the following:
index.php
<?php
include (cnx.php);
$output = FALSE;
if (isset($_GET[user]))
{
$user_id = (int) $_GET[user];
$query = “SELECT * FROM `users` WHERE `users`.`user_id` = $user_id LIMIT 1″;
$result = mysql_query($query) OR die (Could not perform the query);
if(mysql_num_rows($result) ==1) {
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$output .= <ul>;
$output .= <li><h3> . ucfirst($row[user_name]) . </h3>;
$output .= <img src= . $row[user_avatar] . /><p> . $row[user_interests] . </p></li>;
$output .= </ul>;
}
else
{
$output = <p>There isn a user with that name</p>;
}
}
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Show Dynamic Details With Ajax</title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
<script src=”xhrobj.js” type=”text/javascript”></script>
<script src=”showdetails.js” type=”text/javascript”></script>
</head>
<body>
<div id=”wrapper”>
<h1>Show User Details With Ajax</h1>
<div id=”users”>
<h2>Users</h2>
<?php
$query = “SELECT `user_id`, `user_name` FROM `users` ORDER BY user_id”;
$result = mysql_query($query) OR die (Could not perform the query);
if($result) {
echo <ul>;
while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo<li><a href=”index.php?user= . $row[user_id] . ” title=”View my profile”> . ucfirst($row[user_name]) . </a></li>;
}
echo </ul>;
}
?>
</div>
<div id=”user_details”>
<?php if ($output) {echo $output;} else {echo <p>The user is profile details will appear here.</p>;} ?>
</div>
</div>
</body>
</html>
All that remains is to add some simple styling:
style.css
* {
margin:0;
padding:0;
}
body {
text-align:center;
}
#wrapper {
width:760px;
margin: 10px auto;
text-align:left;
}
h1 {
text-align:center;
color:#555;
margin-bottom:10px;
}
h3 {
color:#017dc7;
margin-bottom:10px;
}
ul {
list-style:none;
}
li {
margin:10px;
}
p {
color:#555;
}
a {
text-decoration:none;
color:#000;
}
a:hover {
color:#f00;
}
#users {
width:210px;
height:300px;
padding:20px;
float:left;
background:#dee9f0;
}
#user_details {
width:462px;
height:292px;
padding:20px;
border:4px dashed #dee9f0;
float:right;
}
We now have a functional web page. In the next part we’ll add the ajax functionality by creating ’showdetails.js’
For Full Reference Source:
http://www.elanman.co.uk/2009/07/create-your-first-ajax-request-part-two/
|
 |
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
No comments yet.
Leave a comment