Call Now 407.243.8420

Tutorials

« Older Entries

jQuery Dropdown User Menu

Monday, December 19th, 2011

In this tutorial we explain how to make a dropdown menu to display a username and allow the user to access their settings, history and sign out button. We started using the reinventing a dropdown with css and jquery tutorial and modified it to our needs and to improve the overall look and feel by using CSS3 shadows and gradients.

View the Demo »

First the HTML markup:

<dl class="dropdown">
	<dt><a href=""><span>johndoe<img src="images/user.png" alt="" /></span></a></dt>
	<dd>
	    <ul>
		<li><a href="">Edit Profile<img src="images/profile.png" alt="" /></a></li>
		<li><a href="">Settings<img src="images/settings.png" alt="" /></a></li>
		<li><a href="">History<img src="images/history.png" alt="" /></a></li>
		<li><a href="">Sign Out<img src="images/signout.png" alt="" /></a></li>
	    </ul>
	</dd>
</dl>

Next the CSS styles:

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; z-index: 1; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#fff; text-decoration:none; outline:none;}
.dropdown a:hover { color: #fff;}
.dropdown dt a:hover { color: #fff; border: 1px solid #444; }
.dropdown dt a {
    border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #666, #333); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #666, #333); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(top, #666, #333); /* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666', endColorstr='#333',GradientType=0 ); /* M$ */
    background-image: -o-linear-gradient(top, #666, #333); /* Opera 11.10+ */
    display: block;
    padding-right: 20px;
    border: 1px solid #444;
    width: 150px;
}
.dropdown dt a:active,
.dropdown dt a.active {
    border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #444, #666); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #444, #666); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(top, #444, #666); /* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#666',GradientType=0 ); /* M$ */
    background-image: -o-linear-gradient(top, #444, #666); /* Opera 11.10+ */
}
.dropdown dt a span {
    background: transparent url(../images/arrow.png) no-repeat scroll 150px 5px;
    cursor: pointer;
    display: block;
    padding: 4px;
    width: 160px;
    line-height: 18px;
}
.dropdown dt a.active span {
    background: transparent url(../images/arrow.png) no-repeat scroll 150px -12px;
}
.dropdown dd ul {
    border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background: #333 none repeat scroll 0 0;
    border: 1px solid #666;
    color: #fff;
    display: none;
    left: 0px;
    padding: 0 0 4px;
    position: absolute;
    top: 1px;
    width: auto;
    min-width: 170px;
    list-style:none;
}
.dropdown span.value { display:none; }
.dropdown dd ul li a { padding:5px; display:block; border-bottom: 1px solid #444; }
.dropdown dd ul li a:hover {
    background-color: #444;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #444, #666); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #444, #666); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(top, #444, #666); /* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#666',GradientType=0 ); /* M$ */
    background-image: -o-linear-gradient(top, #444, #666); /* Opera 11.10+ */
}
.dropdown img { border:none; vertical-align:middle; margin-right: 10px; float: left; }

And finally, the jQuery script:

$(document).ready(function() {
        $(".dropdown dt a").click(
	    function(e) {
		$(".dropdown dd ul").toggle();
		$(".dropdown dt a").toggleClass('active');
		e.preventDefault();
	    }
	);
        $(".dropdown dd ul li a").click(function() {
            $(".dropdown dd ul").hide();
        });
        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown")) {
                $(".dropdown dd ul").hide();
	        $(".dropdown dt a").removeClass('active');
	    }
        });
});

Download as a Zip file »

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | No Comments »

PHP-CLI Script to Monitor Domain Name

Friday, December 2nd, 2011

This is a PHP CLI (Command Line Interface) script to monitor domain name availability. You must have PHP CLI compiled on the server to use this script, and have the proper permissions to set up a cron job to run it periodically. When a domain name becomes available for registration, the domain name is appended to a text file. This text file is then referred to so we don’t send more than one e-mail notice about that domain.

The PHP CLI script:

#!/usr/local/bin/php -q
<?php
// assign variables from command line input
$domain = $argv[1];
$email = $argv[2];
// this is a file to store the notified domains into
$file = "/path/to/ns_check.txt";
 
// validate input and execute command on success
if (!$domain || !$email) {
        print("
	nscheck 0.99+beta
        usage:
        nscheck [domain] [email]\n\n");
} else {
	// prepare command variable
	$command = "whois " . $domain . " | egrep -i 'NOT FOUND'";
	// execute command
	$return = @exec($command);
 
	// assign file contents into an array
	$notified = file($file);
 
        // if return is not empty and email has not already been notified then send the email
        if($return && !in_array($domain."\n", $notified)) {
                $subject = 'Domain ' . $domain . ' Available for Registration';
                $headers = 'From: Your Name <noreply@yourdomain.com' . "\r\n" .
                        'Return-Path: noreply@yourdomain.com' . "\r\n" .
                        'Reply-To: noreply@yourdomain.com' . "\r\n" .
                        'X-Mailer: SMTP/4.1';
                $message = "The domain name " . $domain . " is now available for registration.\n\n";
                mail($email, $subject, $message, $headers);
		if (is_writable($file)) {
			// open file for writing
			if(!$handle = fopen($file, 'a')) {
				echo "Cannot open file ($file)";
				exit;
			}
			// write domain to our opened file.
			if(fwrite($handle, $domain."\n") === FALSE) {
				echo "Cannot write to file ($file)";
				exit;
			}
			fclose($handle);
		} else {
			echo "The file $file is not writable";
		}
	}
}
 
?>

Be sure to edit “Your Name” and “noreply@yourdomain.com” to reflect your actual name and e-mail address. Also change “/path/to/ns_check.txt” to the correct file path for a text file to store the domain names in.

Place the above script in a file called “nscheck” and put it in /usr/local/sbin/ or another location. Be sure its permissions are set to executable. To run the script periodically, enter a cron job in your crontab:

0 11 * * * /usr/local/sbin/nscheck domaintocheck.com user@yourdomain.com

Once again, be sure to edit “domaintocheck.com” and “user@yourdomain.com” to reflect the domain you would like to check, and your e-mail address. If you placed the script somewhere besides /usr/local/sbin/ be sure and change the path in the above crontab entry to the proper path.

Posted in PHP Tutorials, Tutorials | 1 Comment »

jQuery iTunes-like Content Slider w/ Looping

Sunday, July 24th, 2011

In our previous tutorials we showed you how to create a content slider similar to the one found in the iTunes program. Some readers requested the content slider loop continuously instead of rewinding back to the first thumbnail. We have modified the content slider to add this new feature.

View the Demo »

We start with the following HTML markup:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" />
</div>
<div id="thumbs">
	<ul>
		<li><a href="#" onclick="return false;" class="5" class="thumblink"><img src="images/slider/1.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="4" class="thumblink"><img src="images/slider/2.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="3" class="thumblink"><img src="images/slider/3.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="2" class="thumblink"><img src="images/slider/4.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="1" class="thumblink"><img src="images/slider/5.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="0" class="thumblink"><img src="images/slider/6.jpg" alt="" /></a></li>
	</ul>
</div>

And here’s the CSS:

#gallery, #thumbs {
	float: left;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
	z-index: 2000;
	border: hidden;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
#gallery img {
	position: absolute;
	width: 600px;
	height: 300px;
	display: block;
	overflow: hidden;
	z-index: 0;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
	border-right: none;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
#thumbs {
	height: 300px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-top: none;
	border-left: none;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	-moz-border-radius-bottomright: 6px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}
#thumbs ul {
    margin:0;
    padding:0;
    list-style:none;
}
#thumbs li {
	float: left;
	clear: both;
	width: 200px !important;
	height: 100px !important;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}
#thumbs img {
	width: 200px !important;
	height: 100px !important;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	z-index: 0;
}
.clear {
	clear: both;
}
img {
	border: 0;
}

And finally, the jQuery script:

// document ready
$(document).ready(function() {
	// user settings
	siftSpeed = 3800; // how often to switch slides
	actionPause = 8800; // how long to pause if action
 
	// internal script settings
	// (do not change below here unless you know what you're doing)
	var images = $("#gallery img");
	var thumbs = $("#thumbs");
	var thumbimages = $("#thumbs img");
	var thumblinks = $("#thumbs a");
	var thumbslist = $("#thumbs ul");
	var thumbitems = $("#thumbs li");
	var index = thumbitems.length-1;
	var thumbsHeight = 100;
	var areaHeight = 300;
 
	// clone markup for thumbs to create thumbs above the last thumb
	thumbitems.slice(0, 1).clone().attr('rel', '2').appendTo(thumbslist);
	thumbitems.slice(1, 2).clone().attr('rel', '2').appendTo(thumbslist);
	thumbitems.slice(2, 3).clone().attr('rel', '2').appendTo(thumbslist);
 
	// assign css classes to images and thumbs
	for (i=0; i<thumbimages.length; i++) {
		var tdiff = (images.length - i - 1);
		//$(thumbimages[i]).addClass("thumb-"+tdiff);
		$(images[i]).addClass("image-"+tdiff);
	}
 
	// reverse the order of the thumbs
	thumbslist.children().each(function(i,li){thumbslist.prepend(li)});
 
	// run the show function to show the first image
	show(index);
 
	// run the sift function every so often
	var $timer = setInterval(function() { sift(); }, siftSpeed);
 
	function sift(num) {
		if(num) { index = num; }
		if ( index < thumbimages.length && index > 0) {index -= 1 ; }
		else { index = thumbimages.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(200);
		$("img.image-"+num).stop().fadeIn(200);
		var scrollPos = (num * thumbsHeight) - areaHeight;
		if(scrollPos < 400) scrollPos = scrollPos + areaHeight;
		if (num == thumbitems.length-1 || num > thumbitems.length-4) {
		    thumbs.stop().animate({scrollTop: scrollPos+thumbsHeight}, -1).animate({scrollTop: scrollPos}, 200);
		    // console.log("number: "+num, ", scrollPos: "+scrollPos+"+"+thumbsHeight, ", duration: -1");
		} else {
		    thumbs.stop().animate({scrollTop: scrollPos}, 200);
		}
		// console.log("number: "+num, ", scrollPos: "+scrollPos, ", duration: 200");
	}
 
	// after the actionPause takes place start the timer again
	function resetTimer() {
	    clearInterval($timer);
	    $timer = setInterval(function() { sift(); }, siftSpeed);
	}
 
	// add onclick function to thumb links
	thumbslist.find('a').each(function(){
		$(this).click(function() {
		    var showid = $(this).attr("class");
		    // console.log("showid: "+showid, ", timer: "+$timer);
		    show(showid);
		    index = showid;
		    clearInterval($timer);
		    var $timer = setTimeout(resetTimer, actionPause);
		    return false;
		});
	});
});

Download as a Zip file »

Tags: , , , , ,
Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | 6 Comments »

Zipcode Proximity Search

Friday, May 6th, 2011

The following PHP function is to search for zipcodes within X miles away from the zipcode searched.

function getZipCodes($search, $miles_away) {
	ini_set('memory_limit', '256M'); // set 128 MB memory limit
	$lines = file($_SERVER["DOCUMENT_ROOT"].'/demos/zipcode-proximity-search/zipcodes.csv');
	foreach($lines AS $line) {
		$parts = explode("\",\"", $line);
		$zipcode = str_replace('"', "", $parts[0]);
		$latitude = $parts[1];
		$longitude = $parts[2];
		$type = $parts[5];
		if($type != "MILITARY") {
			if($zipcode == $search) {
				$search_coords = array(
					'zipcode' =&gt; $zipcode,
					'lat' =&gt; $latitude,
					'long' =&gt; $longitude
				);
			}
			$zipcode_coords[] = array(
				'zipcode' =&gt; $zipcode,
				'lat' =&gt; $latitude,
				'long' =&gt; $longitude
			);
		}
	}
	foreach($zipcode_coords AS $coords) {
		if(calc_distance($coords, $search_coords) &lt; $miles_away) {
			$return[] = $coords['zipcode'];
		}
	}
	return $return;
}
 
function calc_distance($point1, $point2) {
	$radius      = 3958;      // Earth's radius (miles)
	$pi          = 3.1415926;
	$deg_per_rad = 57.29578;  // Number of degrees/radian (for conversion)
	$distance = ($radius * $pi * sqrt(
				($point1['lat'] - $point2['lat'])
				* ($point1['lat'] - $point2['lat'])
				+ cos($point1['lat'] / $deg_per_rad)  // Convert these to
				* cos($point2['lat'] / $deg_per_rad)  // radians for cos()
				* ($point1['long'] - $point2['long'])
				* ($point1['long'] - $point2['long'])
				) / 180);
	return $distance;  // Returned using the units used for $radius.
}

You would then call the function by using:

$zipcodes = getZipCodes($_POST['search'], "5.01");

You could then use this function to create your SQL query:

$sql = "SELECT id, zipcode FROM directory";
$total_query = mysql_query($sql) or die(mysql_error());
$total_numrows = mysql_num_rows($total_query);
if($_POST['doSearch'] &amp;&amp; $searchby == "zipcode") {
	$zipcodes = getZipCodes($_POST['search'], "5.01");
	$i = "0";
	foreach($zipcodes AS $zipcode) {
		if($i == "0") $sql .= " WHERE "; else $sql .= " OR ";
		$sql .= "zipcode = '" . $zipcode . "'";
		$i++;
	}
} elseif($_POST['doSearch']) {
	$sql .= " WHERE " . $searchby . " LIKE '%" . $_POST['search'] . "%'";
}

You may download the CSV file of all zip codes here. If this post was helpful please leave a comment to let us know!

Tags: , , , , , , , , , ,
Posted in PHP Tutorials, Tutorials, Web Design Tutorials | No Comments »

Display Top Posts in WordPress with Google Analytics

Thursday, March 24th, 2011

In today’s tutorial we show you one way of displaying a list of the most popular posts in your WordPress template or sidebar. To do this you must first set up your site to use Google Analytics and make sure you’ve placed the code snippet in your theme’s footer.php. Next install the “Google Analytics Dashboard” plugin which can be found here:

http://wordpress.org/extend/plugins/google-analytics-dashboard/

We tested this with version 2.0.3 of the Google Analytics Dashboard wordpress plugin.

<?php
	// options
	$showposts = 3; // how many posts/pages to display?
	$days = 30; // how many days back to calculate?
 
	// do not edit below this line
	$thispost = 1;
	$start = date('Y-m-d', (time() - (60 * 60 * 24 * $days)));
	$end = date('Y-m-d');
	$login = new GADWidgetData(get_option('gad_auth_token'), get_option('gad_account_id'));
	$ga = new GALib('client', $login->auth_token, '', '', $login->account_id);
	$pages = $ga->pages_for_date_period($start, $end);
	echo "<ul>";
	foreach($pages as $page) {
		$url = $page['value'];
		$title = $page['children']['value'];
		// ignore these page titles
		$ignore = array(
			'(not set)',
			'Page Title 1',
			'Page Title 2'
		);
		if(!in_array($title, $ignore)){
			// list any strings you would like to remove from the titles
			$remove = array(
				" | Company Name",
				" « Company Name"
			);
			$newtitle = str_replace($remove, "", $title);
			echo '<li><a href="' . $url . '" rel="nofollow">' . $newtitle . '</a></li>';
			$thispost++;
		}
		if($thispost > $showposts) break;
	}
	echo "</ul>";
?>

Tags: , , , , , , , , , , , , ,
Posted in PHP Tutorials, Tutorials, Web Design Tutorials, Wordpress Tutorials | 6 Comments »

How To Communicate with Web Developers

Saturday, October 30th, 2010

If you aren’t tech savvy, working with web developers can make you feel like you’re trying to speak to someone who speaks a different language than you. This simple tutorial can help you understand a few effective methods of speaking a web developer’s language.

Referencing URLs

URL stands for Uniform Resource Locator, that’s the http:// address you use to find a particular page on a website. Go to the page on which you like a Web Developer to work on, and highlight and copy the entire http:// address and copy and paste it into your e-mail or message to them when referencing the page. You could say something like:

“On http://www.domain.com/about/ please make the text size larger”

Referencing Images

Often times, especially on larger websites, the descriptions we use to refer to an image on a website can lead to confusion for the web developer. In a few short steps, you can provide the web developer with a URL to the image, so they know exactly which image you are talking about.

In Internet Explorer, you can right-click on the image and choose “Properties”. Then highlight the value of the “address:” field in the dialog box which pops up.

In Mozilla Firefox, you can simply right click the image and choose “View Image” and then paste the URL to the web developer from the address bar as above.

Then you could use this URL to say something like:

“Please replace http://www.domain.com/images/splash.jpg with the attached image”

Communicating in this way to a web developer will save both your time and theirs. Since they will know exactly what you are talking about, they can get straight to working on the task at hand, and won’t have to take more time from your already busy work day to ask for clarification.

Tags: , , , ,
Posted in Tutorials | No Comments »

jQuery iTunes-like Content Slider Revisited

Monday, July 26th, 2010

Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.

In our previous tutorial, we showed you how to create an iTunes-like content slider. Today we will show you how to modify the content slider so clicking on one of the thumbnails loads the image in the main area.

View The Demo

We start with the following HTML markup:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" />
</div>
<div id="thumbs">
	<a id="1" class="thumblink" onclick="return false;" href="#"><img src="images/slider/1.jpg" alt="" /></a>
	<a id="2" class="thumblink" onclick="return false;" href="#"><img src="images/slider/2.jpg" alt="" /></a>
	<a id="3" class="thumblink" onclick="return false;" href="#"><img src="images/slider/3.jpg" alt="" /></a>
	<a id="4" class="thumblink" onclick="return false;" href="#"><img src="images/slider/4.jpg" alt="" /></a>
	<a id="5" class="thumblink" onclick="return false;" href="#"><img src="images/slider/5.jpg" alt="" /></a>
	<a id="6" class="thumblink" onclick="return false;" href="#"><img src="images/slider/6.jpg" alt="" /></a>
</div>

And here’s the CSS styles:

#gallery, #thumbs {
	float: left;
}
#gallery-overlay {
	background: transparent url('../images/home-slider-overlay.png');
	position: absolute;
	display: block;
	width: 800px;
	height: 300px;
	z-index: 200;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
}
#gallery img {
	position: absolute;
	display: block;
}
#thumbs {
	width: 200px;
	height: 300px;
	overflow: hidden;
}
#thumbs img {
	width: 200px;
	height: 100px;
}
.clear {
	clear: both;
}

The jQuery script:

$(document).ready(function() {
	$("a#1").click(function() { show(0); return false; });
	$("a#2").click(function() { show(1); return false; });
	$("a#3").click(function() { show(2); return false; });
	$("a#4").click(function() { show(3); return false; });
	$("a#5").click(function() { show(4); return false; });
	$("a#6").click(function() { show(5); return false; });
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumblinks = $("#thumbs a");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumblinks.slice(thumblinks.length-3,thumblinks.length).clone().attr('id', function() { var id = $(this).id; return 'b' + this.id}).prependTo("#thumbs");
	$("a#b4").click(function() { show(3); return false; });
	$("a#b5").click(function() { show(4); return false; });
	$("a#b6").click(function() { show(5); return false; });
	for (i=0; i
 0) {index -= 1 ; }
		else { index = thumbs.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = ( (num-1) * thumbsHeight ) + 100;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | 14 Comments »

Table Sorting with jQuery tablesorter

Thursday, June 24th, 2010

jQuery tablersorter is a jQuery plugin that allows sorting columns in a table by their header.
(more…)

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | No Comments »

jQuery iTunes-like Content Slider

Wednesday, June 23rd, 2010

Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.

NetTuts has a great iTunes-like Content Slider tutorial that explains how to make a content slider in jQuery.

We’ve made a few modifications to their example:

  • Thumbnails are made by showing a smaller version of the same image using CSS, so an additional thumbnail graphic does not need to be created and so the user only has to load the graphic once.
  • Rounded corners were added using a PNG graphic overlay on top of the content slider.
  • We made a second version of the jQuery code to reverse the order of the content in the slider.

First we added the rounded corners and left the order in which it displays the content alone:
View The Demo

Then we created another version with the order in which it displays the content reversed:
View The Demo

Both examples use the following HTML markup & CSS:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" /></div>
 
 
<div id="thumbs">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" /></div>
#gallery, #thumbs {
	float: left;
}
#gallery-overlay {
	background: transparent url('../images/home-slider-overlay.png');
	position: absolute;
	display: block;
	width: 800px;
	height: 300px;
	z-index: 200;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
}
#gallery img {
	position: absolute;
	display: block;
}
#thumbs {
	width: 200px;
	height: 300px;
	overflow: hidden;
}
#thumbs img {
	width: 200px;
	height: 100px;
}
.clear {
	clear: both;
}

The upwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumbsHeight = 100;
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i
&lt;(thumbs.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*thumbsHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

The downwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumbs.slice(thumbs.length-3,thumbs.length).clone().prependTo("#thumbs");
	for (i=0; i
&lt; thumbs.length &amp;&amp; index &gt; 0) {index -= 1 ; }
		else { index = thumbs.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = ( (num-1) * thumbsHeight ) + 100;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | 9 Comments »

HTML E-mail Signatures in Thunderbird

Saturday, April 24th, 2010

In this tutorial we explore creating an HTML signature for your e-mail account. This tutorial explains creating and using a signature in Mozilla Thunderbird, but other e-mail clients should have similar functionality.
(more…)

Tags: , , , , , ,
Posted in Computer Tutorials, Tutorials, Web Design Tutorials | No Comments »

« Older Entries