Tutorialzine

Making a Photoshoot Effect With jQuery & CSS

Martin Angelov — Wed, 03 Feb 2010 18:16:11 +0000

Often, in your design or development tasks, you are presented with challenges that require a different approach than just plunging head over heels in coding. Research and experiments are a vital part of this process.

This is why this week’s tutorial is structured in a slightly different manner than usual. First we are presented with the main problems faced and their solutions, and after this we get round to building upon it.

We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.

Before starting with the tutorial, I would suggest you download the zip archive from the buttons above.

Problem 1 – Blurring the image

JavaScript does not support blurring an image directly. For example, there is no such thing as document.getElemetById(‘image’).style.blur=2, no matter how useful it would’ve been.

The technique I’ve used and incorporated into the plug-in is actually quite simple – it just stacks up a bunch of divs, each holding the image as a background and whose opacity is lowered, one on top of the other. Those divs’ positions are off by a few pixels at random, so you end up with a blurred effect.

There is however a newer alternative to this technique, which I hope to implement in a future version of the plugin. It is achieved via the canvas HTML5 element, which allows low-level modifications of an image inside of the canvas. Unfortunately, canvas is not yet supported by a large portion of the currently used browsers, so a combination of the techniques would have to be used.

Problem 2 – Hiding the cursor

CSS does not provide a way for hiding the cursor from view. E.g. you cannot specify a CSS rule like cursor : none. There is a neat workaround though. CSS gives you the ability to specify a custom cursor in a .cur file with the css:url() rule. These files support transparency, so you just need to make a completely transparent cursor and assign it to the area in which you wish the cursor to be hidden.

Unfortunately Google Chrome has issues with completely blank cursors, so a special version has to be tailored which contains one white pixel (still better than nothing).

Another trouble maker is Opera, which does not support custom cursors altogether. There are no workarounds. It is not that much of a big deal though, everything else runs fine in Opera.

Problem 3 – No support for masks

A solution to this problem is to use the background property of the viewfinder div to display the original image. By specifying a negative top and left margin and updating it on every mouse move, we can give users the impression that the viewfinder clears up the blurring of the scenery below.

Masking is the process in which only a part of an image or shape is shown, with the rest clipped away. In the case of this tutorial, a mask would’ve given us the ability to have a regular version of the image above the blurred one, and mask it, so that only the part that intersects with the viewfinder is shown and thus giving us the impression that it un-blurs the image below.

The solutions to these problems are implemented in the plug-in for us, which lifts a lot of the development burden and we can start building upon it.

Step 1 – XHTML

As most of the work is handled by the PhotoShoot jQuery plug-in, our work is reduced to only provide a div that is going to be transformed into a photo shooting stage (we still have to pass a configuration object holding the image we want displayed, along with a few other options though).

demo.html

You can have this div anywhere on your page. You’ll need to specify a fixed width and height in the stylesheet in order for this to work properly. After the page loads and the plug-in is initialized, additional code is inserted into this div.

demo.html

A whole lot has changed here. As mentioned earlier, the blur effect is achieved by stacking transparent divs on top of each other – the blur divs. After this is the overlay div, which darkens the layers below it, according to the opacity option passed to the plug-in.

Finally we have the viewfinder, which follows the mouse movements on the area and has the non-blurred version of the image as its background.

To ensure maximum flexibility, the plug-in provides a way to execute a user-defined function when a click occurs. This is exactly what we use to simulate a camera flash and to insert a new shot in the album div, which is not part of the plug-in.

A PhotoShoot Effect With Pure jQuery & CSS

Step 2 – CSS

The plug-in comes with its own stylesheet (photoShoot/jquery.photoShoot-1.0.css in the demo files) which defines the look of the photo shoot components, so we are only left with styling the rest of the page.

styles.css

#main{
	/* This div is converted to a photoShoot stage by the Photo Shoot plug-in */
	margin:0 auto;
	width:960px;
	height:600px;
}

.shot{
	/* These contain a scaled down version of the background image: */

	border:3px solid #FCFCFC;
	float:right;
	position:relative;
	margin-left:10px;
	overflow:hidden;

	/* Adding a CSS3 shadow below the shots: */

	-moz-box-shadow:0 0 2px black;
	-webkit-box-shadow:0 0 2px black;
	box-shadow:0 0 2px black;
}

.shot img{
	display:block;
}

.album{
	/* This div holds the shots */
	bottom:50px;
	height:110px;
	overflow:hidden;
	position:absolute;
	right:20px;
	width:490px;
}

.album .slide{
	/* The slide div is contained in album  */
	width:700px;
	height:110px;
	position:relative;
	left:-210px;
}

Each shot is dynamically inserted by our own custom shoot function when a click event occurs (as you will see in the next step of the tutorial). The shots are basically a scaled down version of the background image (this means that the image is downloaded once and used multiple times), which are offset to the top and bottom, according to the position of the viewfinder in the moment the event occurred.

The album and slide divs are added by our own jQuery script (not by the plug-in). The principle here is that the slide div is larger than its parent, the album div, and the shot is slid to the left when inserted, but more on that in a moment.

The shots

Step 3 – jQuery

The photoShoot plug-in itself will not be discussed here as you can read more about it on its official page. We do need, however, some additional jQuery code which:

Inserts the .album to the #main div;
Chooses a random flickr image from an array to be fed to the plug-in;
Creates the options object;
Defines a custom shot function which is called on mouse click by the plug-in;
Calls the plug-in with the .photoshoot() method.

script.js

$(document).ready(function(){

	// This code is executed after the DOM has been completely loaded

	// Assigning the jQuery object to a variable for speed:
	var main = $('#main');

	// Setting the width of the photoshoot area to
	// 1024 px or the width of the document - whichever is smallest:

	main.width(Math.min(1024,$(document).width()));

	// Creating an array with four possible backgrounds and their sizes:
	var pics = new Array(
				{ url:'http://farm4.static.flickr.com/3595/3405361333_77f2a5e731_b.jpg', size:{x:1024,y:677}},
				{ url:'http://farm4.static.flickr.com/3028/2753126743_4249a4e948_b.jpg', size:{x:1024,y:768}},
				{ url:'http://farm4.static.flickr.com/3641/3595250019_5a1237899a_b.jpg', size:{x:1024,y:768}},
				{ url:'http://farm3.static.flickr.com/2592/4018062274_1f7f23597d_o.jpg', size:{x:1158,y:756}}
	);

	// Choosing a random picture to be passed to the PhotoShoot jQuery plug-in:
	var bg = pics[parseInt(Math.random()*4)];

	// Creating an options object (try tweeking the variables):
	var opts = {
		image		:	bg.url,
		onClick		:	shoot,
		opacity		:	0.8,
		blurLevel	:	4
	}

	// Calling the photoShoot plug-in and converting the #main div to a photo shoot stage:
	main.photoShoot(opts);

	// Adding the album holder to the stage:
	$('').html('').appendTo(main);

	// Our own shoot function (it is passed as onClick to the options array above):
	function shoot(position){
		// This function is called by the plug-in when the button is pressed

		// Setting the overlay's div to white will create the illusion of a camera flash:
		main.find('.overlay').css('background-color','white');

		// The flash will last for 100 milliseconds (a tenth of the second):
		setTimeout(function(){main.find('.overlay').css('background-color','')},100);

		// Creating a new shot image:
		var newShot = $('').width(150).height(100);
		newShot.append( $('').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );

		// Removing the fourth shot (the count starts from 0):
		$('.shot').eq(3).remove();

		// Adding the newly created shot to the album div, but moved 160px to the right.
		// We start an animation to slide it in view:

		newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow');
	}
});

Each time you click the area, a new shot is added to the slide div with a negative margin to the right. After this an animation starts, which slides it in view and pushes the other shots to the left, hiding the leftmost one.

It is important to remove the shots that are not visible with the remove() method. This way we prevent cluttering of the DOM with unneeded elements.

The jQuery Animation

With this our Photoshoot effect is complete!

Conclusion

Today we used a problem solving approach to create photo shoot effect with pure CSS and JavaScript. You can freely use the techniques demonstrated here and build upon the code. There are many possible uses especially in navigation systems and promotional sites.

If you liked this tutorial, be sure to follow us on twitter for the latest web development news and links.

A big thanks goes to haglundc for the landscape photo used throughout this tutorial.

What do you think? How would you use it?

jQuery PhotoShoot Plugin 1.0

Martin Angelov — Wed, 03 Feb 2010 18:15:44 +0000

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. You can check out the demonstration above, or a nice tutorial on how to use it here.

Usage

First, you need to upload the plug-in to your server (it would be best to keep the folder structure intact), and include the stylesheet and js file to the page where you want it to show.

The plug-in depends on version 1.3.2 of jQuery, but will work fine with newer versions as well.

After this you can convert any div on your page by calling the .photoShoot() method and passing a configuration object.

document.ready(function(){

	var config = {
		image : 'picture.jpg',
	}

	$('#selector').photoShoot(config)
});

You can pass additional parameters with the config object, according to the table below.

Parameters

The following parameters are supported:

Supported Parameters
Parameter	Default Value	Description
image	“”	Required parameter. Specify the URL of the image to be shown.
blurLevel	4	The higher the blur level, the more blurred the image.
opacity	0.92	The lower the opacity, the darker the background behind the viewfinder.
viewFinder	{ width:300, height:200, img:” }	Expects an object with the properties width, height and img. With it you can change the size and png graphic of the view finder. If no img is provided, the default one is shown.
onClick	function(){}	Expects the name of the function that is going to be executed on click. An object is passed as a parameter. See below.

The onClick function

You can provide your function to be executed when a click occurs. An object containing the location (left and top) of the viewfinder, relative to the background, is passed as the only parameter. Here is how it works:

document.ready(function(){

	var config = {
		image	: 'picture.jpg',
		blurLevel	: 6,
		opacity	: 0.8,
		onClick	: alertPosition
	}

	function alertPosition(param){
		alert("The viewfinder is located at: "+param.left+"x"+param.top);
	}

	$('#selector').photoShoot(config)
});

License

The plugin is distributed under an MIT license.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Martin Angelov — Tue, 26 Jan 2010 15:00:14 +0000

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.

Step 1 – XHTML

As usual, we start off with the XHTML markup.

demo.html

If you think the markup looks too simple to be true, you are right. As you can see, we are missing the code for the tabs, because it is inserted dynamically by jQuery on page load. This makes it extremely easy to add new tabs as you only need to add them on the JavaScript side (more on that in a moment).

demo.html


	Tab two

This is the markup that is inserted by jQuery for each tab. It consists of a LI element positioned inside of the .tabContainer unordered list above, and contains a hyperlink with two spans. Those show the left and the right part of the background image and thus enable the tabs to stretch and give room for the text label inside.

Also notice the green class of the link – it determines the background, text color and hover state of the tab, as you will see in the next step of this tutorial.

Sweet AJAX-ed Tabs With jQuery 1.4 & CSS3

Step 2 – CSS

With the markup in place, we can take a more detailed look at the styling of the tab page.

styles.css – Part 1

.tabContainer{
	/* The UL */
	float:right;
	padding-right:13px;
}

#contentHolder{
	background-color:#EEEEEE;
	border:2px solid #FFFFFF;
	height:300px;
	margin:20px;

	color:#444444;
	padding:15px;
}

#tabContent{
	background-color:#333;
	border:1px solid #444;
	margin-top:-15px;
	width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
	-webkit-box-shadow:0 0 2px black;
	-moz-box-shadow:0 0 2px black;
	box-shadow:0 0 2px black;
}

.tabContainer li{
	/* This will arrange the LI-s next to each other */
	display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */

	float:left;
	font-size:18px;

	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;

	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;

	/* Giving positioning */
	position:relative;

	/* CSS3 text-shadow */
	text-shadow:1px 1px 1px #CCCCCC;
}

Here we use a number of CSS3 rules that add up to the overall feel of the page. First is the box-shadow property, which adds a shadow below the tabs, the #tabContent div and the #contentHolder.

After this we have the text-shadow property, which adds a light-colored shadow (more of a outer glow in this case), which adds an inset feel to the text of the tabs.

styles.css – Part 2

#overLine{
	/* The line above the active button. */
	position:absolute;

	height:1px;
	background-color:white;
	width:90px;

	float:left;
	left:1px;
	top:-5px;
	overflow:hidden;
}

#main{
	margin:0 auto;
	position:relative;
	width:700px;
}

ul .left{
	/* The left span in the hyperlink */

	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}

ul .right{
	/* The right span in the hyperlink */

	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

/* Styling the colors individually: */

ul a.green{	background:url(img/green_mid.png) repeat-x top center;	color:#24570f;}
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}

/* .. Analogical styles for the red, blue and orange color .. */

/* The hover states: */
ul a:hover{	background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
	display:block;
	margin:120px auto;
}

In the second part of the code, you can see that we define different backgrounds for the hyperlink and the left and right spans, depending on the color class that is assigned. This way we can successfully change a number of CSS styles and as a result have a completely different design of the tab, by just setting a different class name for the hyperlink.

The Tabs

Step 3 – jQuery

This is where the magic happens. First we need to include the jQuery library in the page:

demo.html

We include the latest version of jQuery from Google’s CDN and immediately after it, we add our own script.js file, which contains all of our scripts.

Here is a detailed explanation of what exactly jQuery does:

The page is opened in a visitor’s browser and the jQuery library is downloaded from Google’s Content Depository Network;
$(document).ready() is queued for execution and the function that is provided as a parameter is run when the DOM has finished loading;
The Tabs object is looped with the $.each() method and individual

elements are created and appended to the .tabContainer

Event listeners for the click event on the tabs are set up.

You can view the code below:

script.js – Part 1

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* Defining an array with the tab text and AJAX pages: */

	var Tabs = {
		'Tab one'	: 'pages/page1.html',
		'Tab two'	: 'pages/page2.html',
		'Tab three'	: 'pages/page3.html',
		'Tab four'	: 'pages/page4.html'
	}

	/* The available colors for the tabs: */
	var colors = ['blue','green','red','orange'];

 	/* The colors of the line above the tab when it is active: */
	var topLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	}

	/* Looping through the Tabs object: */
	var z=0;
	$.each(Tabs,function(i,j){
		/* Sequentially creating the tabs and assigning a color from the array: */

		var tmp = $(''+i+' ');

		/* Setting the page data for each hyperlink: */

		tmp.find('a').data('page',j);

		/* Adding the tab to the UL container: */
		$('ul.tabContainer').append(tmp);
	})

The source above is the first part of script.js, which you can find in the download archive. You can add your own tabs on the page by inserting a new property to the Tabs object. The left part holds the name of the tab in single quotes, and the right part (after the semicolon) contains the AJAX URL which is going to be fetched and displayed in the #contentHolder div.

In the following second part of the script, you’ll see jQuery 1.4 in action, as we create a new div element (that acts as the line above the active tab) and pass an object with the ID and CSS properties instead of setting them separately with the .attr() and .css() methods.

script.js – Part 2

	/* Caching the tabs into a variable for better performance: */
	var the_tabs = $('.tab');

	the_tabs.click(function(e){

		/* "this" points to the clicked tab hyperlink: */
		var element = $(this);

 		/* If it is currently active, return false and exit: */
		if(element.find('#overLine').length) return false;

 		/* Detecting the color of the tab (it was added to the class attribute in the loop above): */

		var bg = element.attr('class').replace('tab ','');

 		/* Removing the line: */
		$('#overLine').remove();

 		/* Creating a new div element with jQuery 1.4 by passing an additional object parameter: */

		$('',{
			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');

 		/* Checking whether the AJAX fetched page has been cached: */

		if(!element.data('cache'))
		{
			/* If no cache is present, show the gif preloader and run an AJAX request: */
			$('#contentHolder').html('');

 			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);

 				/* After page was received, add it to the cache for the current hyperlink: */
				element.data('cache',msg);
			});
		}
		else $('#contentHolder').html(element.data('cache'));

 		e.preventDefault();
	})

	/* Emulating a click on the first tab, so that the content area is not empty: */
	the_tabs.eq(0).click();

});

Notice the use of the jQuery data() method throughout the code. It assigns arbitrary data to an element by calling the method with two parameters $(‘#selector’).data(‘label’,”String Data”). This assigns the string “String Data” to the element and we can later access it (or check if it has been set) by calling the data method without the second parameter.

This way we set up a simple caching system for the AJAX requests. The first time an AJAX call is made, the text of the response (held in the msg variable) is stored at data(‘cache’). On consecutive calls we check for this cache variable and return it instead of firing a new request. This way we remove unnecessary server load and improve the responsiveness of the tabs.

Active Tab

With this our sweet AJAX-ed tabs are complete!

Conclusion

Today we created AJAX – enabled colorful tabs with jQuery 1.4 and CSS3. We also implemented a simple caching mechanism using the data() method. The source code is easily modifiable and adding new tabs is as easy as adding new properties to the Tabs object.

If you liked this tutorial, be sure to follow us on twitter for early previews and interesting links from the world of web development.

What do you think? How would you improve this example?

AJAX-enabled Sticky Notes With PHP & jQuery

Martin Angelov — Mon, 18 Jan 2010 21:45:02 +0000

Today we are making an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen. Every movement is going to be sent to the back-end via AJAX and saved in the database.

We are using version 1.4 of jQuery and the fancybox plugin (you can also check our CSS3 Lightbox Gallery Tutorial, where we also used fancybox).

You can download the example files and keep the demo site open in a tab so that it is easier to follow the steps of the tutorial.

Step 1 – XHTML

The first step is to create the necessary XHTML structure. The markup in the main demonstration file – demo.php is pretty straightforward, as you can see for yourself from the code below.

demo.php


Add a note

It contains the main div, which holds all the notes and limits their movement during the dragging process. The rest is generated dynamically by PHP after running a SELECT query against the database, and after storing the result in the $notes variable as you will see in the next step.

If you click the “Add a note” button on the demonstration site, you will see that a form with a live preview pops up. This functionality is provided by the fancybox, which fetches add_note.html (which contains the form) and shows it within a pop-up.

add_note.html

Add a new note








 


Text of the note


Your name


Color 





Submit

In the form you can fill in the text of the note, your name and choose a color. Providing a way for users to see how their note will appear in the page in real time is a useful addition which serves another practical purpose – when clicking the submit button and the lightbox window closes, the preview note is copied to the main div, which saves us from writing additional code.

Note Creation Form With Live Preview

Step 2 – PHP

As mentioned earlier, PHP fills the $notes variable by running a query againts the database and outputs it on the page. Lets see how this works.

demo.php

$query = mysql_query("SELECT * FROM notes ORDER BY id DESC");

$notes = '';
$left='';
$top='';
$zindex='';
while($row=mysql_fetch_assoc($query))
{
	// The xyz column holds the position and z-index in the form 200x100x10:
	list($left,$top,$zindex) = explode('x',$row['xyz']);
	$notes.= '
		
		'.htmlspecialchars($row['text']).'
		'.htmlspecialchars($row['name']).'
		'.$row['id'].'
	';
}

The notes table not only stores the text and the author of the note, but it also has a dedicated column for the x and y coordinates, as well for the z-index (or stacking order). Those are stored in the xyz field of the table, which is updated by AJAX.

After the visitor clicks on the “Add a note” button, fancybox grabs add_note.html (which was covered in step one) and displays the live preview form. When it is submitted, the data is sent via AJAX to post.php, given below.

post.php

// Escaping the input data:
$author = mysql_real_escape_string(strip_tags($_POST['author']));
$body = mysql_real_escape_string(strip_tags($_POST['body']));
$color = mysql_real_escape_string($_POST['color']);
$zindex = (int)$_POST['zindex'];

/* Inserting a new record in the notes DB: */
mysql_query('	INSERT INTO notes (text,name,color,xyz)
VALUES ("'.$body.'","'.$author.'","'.$color.'","0x0x'.$zindex.'")');

if(mysql_affected_rows($link)==1)
{
	// Return the id of the inserted row:
	echo mysql_insert_id($link);
}
else echo '0';

After escaping all the input data and inserting it in the table, the script checks whether there were any rows affected after the insert query. If mysql_affected_rows returns 1, this would mean that the insert was successful and the automatically assigned auto_increment ID is outputted.

AJAX is also used to save the positions of the individual notes after the end of each movement. The JavaScript code that actually requests these AJAX calls is presented in step 4 of this tutorial. The PHP code is included below:

update_position.php

// Validating the input data:
if(!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z']))
die("0");

// Escaping:
$id = (int)$_GET['id'];
$x = (int)$_GET['x'];
$y = (int)$_GET['y'];
$z = (int)$_GET['z'];

// Saving the position and z-index of the note:
mysql_query("UPDATE notes SET xyz='".$x."x".$y."x".$z."' WHERE id=".$id);

echo "1";

After making sure that the input data is valid, the script updates the xyz field of the row for the note in question and prints 1 on success.

Lets continue with step three.

Step 3 – CSS

All the markup is in place, so it is time to throw in some fancy styling. The styles are defined in styles.css. I divided the file in three parts.

styles.css – Part 1

.note{
	height:150px;
	padding:10px;
	width:150px;
	position:absolute;
	overflow:hidden;
	cursor:move;

	font-family:Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif;
	font-size:22px;

	/* Adding a CSS3 shadow below the note, in the browsers which support it: */
	-moz-box-shadow:2px 2px 0 #DDDDDD;
	-webkit-box-shadow:2px 2px 0 #DDDDDD;
	box-shadow:2px 2px 0 #DDDDDD;
}

#fancy_ajax .note{ cursor:default; }

/* Three styles for the notes: */

.yellow{
	background-color:#FDFB8C;
	border:1px solid #DEDC65;
}

.blue{
	background-color:#A6E3FC;
	border:1px solid #75C5E7;
}

.green{
	background-color:#A5F88B;
	border:1px solid #98E775;
}

/* Each note has a data span, which holds its ID */
span.data{ display:none; }

/* The "Add a note" button: */
#addButton{
	position:absolute;
	top:-70px;
	left:0;
}

In the first part we define the appearance of the notes and provide three color schemes – yellow, blue and green. Those color classes are also used in the live preview form when creating a note.

Every note has special span element with a class name of data, which holds the internal ID it is assigned in the database. This ID is used by jQuery and returned with the AJAX calls back to the server in order to update the note’s position and z-index. We are hiding this span from view with display:none.

Three Styles Of Notes

styles.css – Part 2

/* Green button class: */
a.green-button,a.green-button:visited{
	color:black;
	display:block;
	font-size:10px;
	font-weight:bold;
	height:15px;
	padding:6px 5px 4px;
	text-align:center;
	width:60px;

	text-shadow:1px 1px 1px #DDDDDD;
	background:url(img/button_green.png) no-repeat left top;
}

a.green-button:hover{
	text-decoration:none;
	background-position:left bottom;
}

.author{
	/* The author name on the note: */
	bottom:10px;
	color:#666666;
	font-family:Arial,Verdana,sans-serif;
	font-size:12px;
	position:absolute;
	right:10px;
}

#main{
	/* Contains all the notes and limits their movement: */
	margin:0 auto;
	position:relative;
	width:980px;
	height:500px;
	z-index:10;
	background:url(img/add_a_note_help.gif) no-repeat left top;
}

The second part of the file defines the green button class, complete with a hover state and a CSS3 text-shadow. These are a few tiny details that may not look like much, but leave a good overall impression to the user.

styles.css – Part 3

h3.popupTitle{
	border-bottom:1px solid #DDDDDD;
	color:#666666;
	font-size:24px;
	font-weight:normal;
	padding:0 0 5px;
}

#noteData{
	/* The input form in the pop-up: */
	height:200px;
	margin:30px 0 0 200px;
	width:350px;
}

.note-form label{
	display:block;
	font-size:10px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	padding-bottom:3px;
}

.note-form textarea, .note-form input[type=text]{
	background-color:#FCFCFC;
	border:1px solid #AAAAAA;
	font-family:Arial,Verdana,sans-serif;
	font-size:16px;
	height:60px;
	padding:5px;
	width:300px;
	margin-bottom:10px;
}

.note-form input[type=text]{	height:auto; }

.color{
	/* The color swatches in the form: */
	cursor:pointer;
	float:left;
	height:10px;
	margin:0 5px 0 0;
	width:10px;
}

#note-submit{	margin:20px auto; }

In the last part of styles.css, we add CSS rules for the live preview form, staring from the H3 heading and finishing with the color swatches on the bottom.

Step 4 – jQuery

jQuery manages the front-end and all of the AJAX requests. In order to be able to use the library, we first need to include a few lines to the head section of demo.php:

demo.php

We include jQuery and jQuery UI from Google’s content repository network, as well as the rest of the css and js files needed for this tutorial. Now lets dig a bit deeper into our jQuery script.

script.js – Part 1

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	var tmp;

	$('.note').each(function(){
		/* Finding the biggest z-index value of the notes */

		tmp = $(this).css('z-index');
		if(tmp>zIndex) zIndex = tmp;
	})

	/* A helper function for converting a set of elements to draggables: */
	make_draggable($('.note'));

	/* Configuring the fancybox plugin for the "Add a note" button: */
	$("#addButton").fancybox({
		'zoomSpeedIn'		: 600,
		'zoomSpeedOut'		: 500,
		'easingIn'			: 'easeOutBack',
		'easingOut'			: 'easeInBack',
		'hideOnContentClick': false,
		'padding'			: 15
	});

	/* Listening for keyup events on fields of the "Add a note" form: */
	$('.pr-body,.pr-author').live('keyup',function(e){

		if(!this.preview)
			this.preview=$('#previewNote');

		/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
		this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
	});

	/* Changing the color of the preview note: */
	$('.color').live('click',function(){

		$('#previewNote').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));
	});

First the script finds the maximum z-index value, so that it can cache it into the zIndex variable and increment it before assigning it to the notes in the beginning of every drag movement. This way, when you start dragging a note, it is moved to the top of the stack.

Another interesting moment is that we use the jQuery live() method to listen for events, instead of the regular bind(). This is so, because the page elements we are listening for events on, are created only when the form is shown and, once defined, live() event listeners are active on all elements yet to be created.

script.js – Part 2

	/* The submit button: */
	$('#note-submit').live('click',function(e){

		if($('.pr-body').val().length<4)
		{
			alert("The note text is too short!")
			return false;
		}

		if($('.pr-author').val().length<1)
		{
			alert("You haven't entered your name!")
			return false;
		}

		$(this).replaceWith('');

		var data = {
			'zindex'	: ++zIndex,
			'body'		: $('.pr-body').val(),
			'author'		: $('.pr-author').val(),
			'color'		: $.trim($('#previewNote').attr('class').replace('note',''))
		};

		/* Sending an AJAX POST request: */
		$.post('ajax/post.php',data,function(msg){

			if(parseInt(msg))
			{
				/* msg contains the ID of the note, assigned by MySQL's auto increment: */
				var tmp = $('#previewNote').clone();

				tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});
				tmp.appendTo($('#main'));

				make_draggable(tmp)
			}

			$("#addButton").fancybox.close();
		});

		e.preventDefault();
	})
});

Here we are listening for the click event on the form submit link. Once clicked, the data is validated and sent with the $.post method. If the insert was successful, the lightbox is hidden and the newly created note is added to the page. Notice that we are using the make_draggable function, which is included below.

The Note Position And Stacking Are Saved With AJAX

script.js – Part 3

var zIndex = 0;

function make_draggable(elements)
{
	/* Elements is a jquery object: */
	elements.draggable({
		containment:'parent',
		start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
		stop:function(e,ui){

			/* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
			$.get('ajax/update_position.php',{
				x		: ui.position.left,
				y		: ui.position.top,
				z		: zIndex,
				id	: parseInt(ui.helper.find('span.data').html())
			});
		}
	});
}

In the last part of script.js, we have the make_draggable function. It turns a set of jQuery elements passed as a parameter into draggable objects. I’ve moved this functionality into a separate function because we need to create draggables in twice – once on initial page load, and once when we add a new note to the page.

Step 5 – MySQL

If you plan on running and building upon this demo, you’ll need to set up a working version on your server. You’ll need to execute the code from table.sql of the download archive in phpMyAdmin and fill in your database credentials in connect.php.

With this our AJAX-ed Sticky Note system is complete!

Conclusion

Today we created an Ajax Enabled Sticky Note Management System and demonstrated how we could use one of the readily available plug-ins for the jQuery library to build a dynamic interface, complete with a live preview.

What do you think? How would you improve this code?

Halftone Navigation Menu With jQuery & CSS3

Martin Angelov — Mon, 11 Jan 2010 12:14:57 +0000

Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Halftone is the reprographic technique that simulates continuous tone imagery through the use of dots, varying either in size or in spacing. “Halftone” can also be used to refer specifically to the image that is produced by this process.

The original article at Wikipedia.

So lets start with step one!

Step 1 – XHTML

The first step is to lay down the XHTML structure of the menu. The whole menu is positioned inside an unordered list UL, which is the most suitable way of organizing your site’s navigation. Inside each of the LI elements are the hyperlinks, that are later styled to look like buttons via some interesting CSS code that you will see in a moment.

demo.html







Home
Services
Contact
About

If you plan to use this menu on your site, you’ll first need to modify the href attributes, so that they correspond to your site’s structure.

Worth noticing are also the class names that are assigned to each of the links. Those are not used to style them, but rather to tell jQuery which shape to render.

Lastly, there is our #stage div, which is filled with special .dot divs that act as pixels for our shapes. You can create custom shapes by setting the menu in service mode, which is covered in step three.

The Grid

Step 2 – CSS

It is time to add some life to the design, by specifying the CSS rules. I divided the style sheet in two parts. You can see the rest of the code in styles.css in the demonstration files.

styles.css – Part 1

.menuUL li{
	/* This will arrange the LI-s next to each other */
	display:inline;
}

.menuUL li a,.menuUL li a:visited{
	/* Styling the hyperlinks of the menu as buttons */

	float:left;
	font-weight:bold;
	background:url(img/button_bg.jpg) repeat-x center bottom #666666;

	/* display:block allows for additional CSS rules to take effect, such as paddings: */
	display:block;
	border:1px solid #4D4D4D;
	color:#CCCCCC;
	border-top-color:#565656;

	padding:4px 6px;
	margin:4px 5px;
	height:16px;

	/* Setting a CSS3 box shadow around the button */

	-moz-box-shadow:0 0 1px black;
	-webkit-box-shadow:0 0 1px black;
	box-shadow:0 0 1px black;

	/* CSS3 text shadow */
	text-shadow:0 1px black;
}

.menuUL li a:hover{
	/* On hover show the top, lighter, part of the background: */
	background-position:center top;
	text-decoration:none;
}

In this first part, you can see that we are displaying the LI elements inline, which will arrange them one next to each other and thus allow us to form a horizontally oriented navigation menu in a compatible cross-browser fashion.

The hyperlinks inside them are displayed as block elements and floated to the left. Also some CSS3 rules are applied such as box-shadow, for casting a shadow under the buttons, and text-shadow, for shadows under the text of the button.

Those are all small details that contribute to the overall feel of the page, but are in no way compulsory for the browsing process. This is great for users whose browsers don’t support CSS3 yet (most notably the IE family).

styles.css – Part 2

#navigation{
	/* The navigation menu bar: */
	background:#222222;
	border:1px solid #111111;
	float:left;
	padding:5px 10px;
}

#navigation,.menuUL li a{
	/* CSS3 rounded corners for both the navigation bar and the buttons: */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	border-radius:4px;
}

#stage{
	/* The stage contains the individual divs that comprise the halftone icon: */
	height:300px;
	position:absolute;
	right:50px;
	top:20px;
	width:400px;
}

.dot{
	/* The stage contains 192 .dot divs: */
	float:left;
	height:25px;
	width:25px;
}

.dot.active{
	/* When assigned the active class, the div shows a background image of a dot: */
	background:url(img/dot.png) no-repeat center center;
}

.clear{
	/* Old-school clear fix hack to clear the floats: */
	clear:both;
}

#main{
	margin:0 auto;
	position:relative;
	width:900px;
}

In the lines above you can see the rest of the CSS3 rules that are used. There we add rounded corners via the border-radius property (supported by most of the modern browsers) for both the navigation bar and individual buttons at once.

A Halftone Navigation Menu

Step 3 – jQuery

After finishing with all the styling, it is time to throw in some JavaScript. The first step is to include the jQuery library to the head section of the document we are working on.

As I mentioned earlier, there are two modes available for the navigation menu. The first one is the default one, which shows a previously defined shape in a smooth animation when you hover your mouse over a navigation button.

The second one allows you to create your own shapes by clicking on the grid. You can later export the shape and insert it as an array in the shapes object. To make jQuery show it, you just need to insert the name of your just-created shape in the class attribute of the navigation link you wish to associate it with.

Now lets see how this works.

script.js – Part 1

/* Set serviceMode to true to create your own shapes: */
var serviceMode=false;

$(document).ready(function(){

	/* This code is executed after the DOM has been completely loaded */

	var str=[];
	var perRow = 16;

	/* Generating the dot divs: */
	for(var i=0;i<192;i++)
	{
		str.push('');
	}

	/* Joining the array into a string and adding it to the inner html of the stage div: */
	$('#stage').html(str.join(''));

	/* Using the hover method: */
	$('#navigation li a').hover(function(e){

		/* serviceDraw is a cut-out version of the draw function, used for editing and composing shapes: */

		if(serviceMode)
			serviceDraw($(this).attr('class'));
		else
			draw($(this).attr('class'));
	}, function(e){});

	/* Caching the dot divs into a variable for performance: */
	dots = $('.dot');

	if(serviceMode)
	{
		/* If we are in service mode, show borders around the dot divs, add the export link, and listen for clicks: */

		dots.css({
			border:'1px solid black',
			width:dots.eq(0).width()-2,
			height:dots.eq(0).height()-2,
			cursor:'pointer'
		});

		$('').css({
			position:'absolute',
			bottom:-20,
			right:0
		}).html('[Export Shape]').appendTo('#stage');

		dots.click(function(){
			$(this).toggleClass('active');
		});
	}
});

In the topmost part of the file is the serviceMode variable. By setting it to true, you can start creating your own shapes. Just don’t forget to set it back to false after you’ve finished, so that your visitors don’t see the grid and the export link. It would be even better if you keep a dedicated service mode version locally and use a different one for your site (this way you can also strip the unnecessary code for the service mode from the production version).

After the DOM has finished loading (on $(document).ready()) we populate the #stage with a grid of 192 divs (16 per row), that will form the pixels of the image.

script.js – Part 2

var shapes={
	/* Each shape is described by an array of points. You can add your own shapes here, just don't forget to add a coma after each array, except for the last one */

	house:[22,37,38,39, .... 166,167,168,169],
	wrench:[22,23,24,25,26 .... 148,163],
	envelope:[34,35,36,37, .... 153,154,155,156],
	info:[22,23,38,39, .... 151,166,167,168]
}

var stopCounter = 0;
var dots;

function draw(shape)
{
	/* This function draws a shape from the shapes object */

	stopCounter++;
	var currentCounter = stopCounter;

	dots.removeClass('active').css('opacity',0);

	$.each(shapes[shape],function(i,j){

		setTimeout(function(){
		/* If a different shape animaton has been started during the showing of the current one, exit the function  */

		if(currentCounter!=stopCounter) return false;

 		dots.eq(j).addClass('active').fadeTo('slow',0.4);

		/* The fade animation is scheduled for 10*i millisecond into the future: */
	},10*i);

});
}

function serviceDraw(shape)
{
	/* A cut out version of the draw function, used in service mode */

	dots.removeClass('active');

	$.each(shapes[shape],function(i,j){
		dots.eq(j).addClass('active');
	});
}

function outputString()
{
	/* Exports the positions of the active dot divs as a comma-separated string: */

	var str=[];
	$('.dot.active').each(function(){
		str.push(this.id.replace('d-',''));
	})

	prompt('Insert this string as an array in the shapes object',str.join(','));
}

In the second part, you can see the shapes object. It contains four default shapes, which are set as class names to the navigation links. You can customize them by loading them in the service mode, or you can remove them completely and add your own.

After this we define the draw, serviceDraw and the outputString function. The latter two are used only in serviceMode and help you create your own shapes. If you do not plan to use the service mode, you can go ahead and remove them (just don’t forget to also remove lines 34-54 from the first part of script.js above).

Creating Your Own Shapes

With this our CSS3 & jQuery navigation menu is complete!

Conclusion

Today we created a sleek animated navigation menu with the help of jQuery and CSS3. The menu is compatible with all the major browsers and works perfectly fine even if JavaScript is disabled. As most of the XHTML markup necessary for the animation is inserted dynamically by JavaScript, the page holds a bare amount of code and is SEO friendly.

What do you think? How would you improve this code?

Advanced Event Timeline With PHP, CSS & jQuery

Martin Angelov — Mon, 04 Jan 2010 21:00:46 +0000

First I want to take the time to thank you, Tutorialzine’s readers, for all your support the past year and to wish you a happy new 2010! A lot of interesting tutorials are on their way and there are also some nice changes planned which I am sure you’ll like.

Now lets start the year with a brand new tut!

It all began last week, when I received this letter from one of our readers:

Hi,

I love your site! It’s the best out there.

I was wondering if you could create one day a tutorial on how to create a sleek event timeline like Google’s 10th Birthday Timeline, available at http://www.google.com/tenthbirthday/. That would be much appreciated! I am sure many other people would be grateful for that tutorial too.

Thanks, and happy new year!

Vinnie

I am always on the look for good tutorial ideas, so Vinnie sent his email right on time!

Today we are making an Advanced Event Timeline with the help of PHP, MySQL, CSS & jQuery, that will display a pretty time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

Step 1 – XHTML

First, be sure to grab the example files from the button above, so that you can easily follow what is going on.

The first step of this tut is to create the XHTML structure, as seen in demo.php.

demo.php

I have omitted some of the PHP code that generates the events so we can take a better look at the markup (we will get back to it in the next step).

Te main idea is that we have two divs – timelineLimiter and timelineScroll positioned inside it. The former takes the width of the screen, and the latter is expanded to fit all the event sections that are inserted inside it. This way only a part of the larger inner div is visible and the rest can be scrolled to the left and right by a jQuery slider we will be making in step 4.

Now lets take a look at the PHP back-end.

Advanced Event Timeline With PHP MySQL CSS jQuery

Step 2 – PHP

PHP selects all the events in the database and groups the events by year in the $dates array. It later loops through it and outputs all the events as

elements inside of unordered lists which belong to each of the event years.

demo.php

// We first select all the events from the database ordered by date:

$dates = array();
$res = mysql_query("SELECT * FROM timeline ORDER BY date_event ASC");

while($row=mysql_fetch_assoc($res))
{
	// Store the events in an array, grouped by years:
	$dates[date('Y',strtotime($row['date_event']))][] = $row;
}

$colors = array('green','blue','chreme');
$scrollPoints = '';

$i=0;
foreach($dates as $year=>$array)
{
	// Loop through the years:

	echo '
		
		'.$year.'
		';

	foreach($array as $event)
	{
		// Loop through the events in the current year:

		echo '
			
			'.htmlspecialchars($event['title']).'

 			
				'.($event['type']=='image'?'
':nl2br($event['body'])).'
				'.htmlspecialchars($event['title']).'
				'.date("F j, Y",strtotime($event['date_event'])).'
			
 			';
	}

	echo '';

 	// Generate a list of years for the time line scroll bar:
	$scrollPoints.=''.$year.'';

}

Thus the complete markup for the page is generated. Now we are ready to apply some styles.

The Event Sections

Step 3 – CSS

After we’ve inserted the CSS stylesheet to the head section of the document, we can start laying down the rules. Only the more interesting ones are included here. You can view the rest in styles.css.

styles.css

.event{
	/* Contains the section title and list with events */
	float:left;
	padding:4px;
	text-align:left;
	width:300px;
	margin:0 5px 50px;
}

.eventList li{
	/* The individual events */
	background:#F4F4F4;
	border:1px solid #EEEEEE;
	list-style:none;
	margin:5px;
	padding:4px 7px;

	/* CSS3 rounded corners */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

.eventList li:hover{
	/* The hover state: */
	cursor:pointer;
	background:#E6F8FF;
	border:1px solid #D4E6EE;
	color:#548DA5;
}

li span{
	/* The event icon */
	display:block;
	float:left;
	height:16px;
	margin-right:5px;
	width:16px;
}

/* Individual background images for each type of event: */

li.news span.icon { 	background:url(img/icons/newspaper.png) no-repeat; }
li.image span.icon { 	background:url(img/icons/camera.png) no-repeat; }
li.milestone span.icon { 	background:url(img/icons/chart.png) no-repeat; }

#timelineLimiter{
	/* Hides the overflowing timeline */
	width:100%;
	overflow:hidden;
	padding-top:10px;
	margin:40px 0;
}

#scroll{
	/* The small timeline below the main one. Hidden here and shown by jQuery if JS is enabled: */
	display:none;
	height:30px;

	background:#F5F5F5;
	border:1px solid #EEEEEE;
	color:#999999;
}

.scrollPoints{
	/* The individual years */
	float:left;
	font-size:1.4em;
	padding:4px 10px;
	text-align:center;
	width:100px;

	position:relative;
	z-index:10;
}

Here the .event class styles the event years sections (these are the divs that group events that have happened in the same year).

Near the middle of the code you can see that we’ve used some CSS3 rounded corners which work in the majority of browsers (not supported by IE and Opera).

We also define individual background images for each of the event types – image, news or milestone.

Step 4 – jQuery

The last step is to insert a layer of interactivity into the browser. We will be doing this with the help of the jQuery JavaScript library, included in the head section of demo.php.

I’ve split the code below in two parts so they are more comprehensible.

script.js – Part 1

$(document).ready(function(){

	/* This code is executed after the DOM has been completely loaded */

	/* The number of event sections / years with events */

	var tot=$('.event').length;

	$('.eventList li').click(function(e){

		showWindow(''+$(this).find('div.content').html()+'');
	});

	/* Each event section is 320 px wide */
	var timelineWidth = 320*tot;

	var screenWidth = $(document).width();

	$('#timelineScroll').width(timelineWidth);

	/* If the timeline is wider than the screen show the slider: */
	if(timelineWidth > screenWidth)
	{
		$('#scroll,#slider').show();
		$('#centered,#slider').width(120*tot);

		/* Making the scrollbar draggable: */
		$('#bar').width((120/320)*screenWidth).draggable({

			containment: 'parent',
			drag: function(e, ui) {

			if(!this.elem)
			{
				/* This section is executed only the first time the function is run for performance */

				this.elem = $('#timelineScroll');

				/* The difference between the slider's width and its container: */
				this.maxSlide = ui.helper.parent().width()-ui.helper.width();

				/* The difference between the timeline's width and its container */
				this.cWidth = this.elem.width()-this.elem.parent().width();

				this.highlight = $('#highlight');
			}

			/* Translating each movement of the slider to the timeline: */
			this.elem.css({marginLeft:'-'+((ui.position.left/this.maxSlide)*this.cWidth)+'px'});

			/* Moving the highlight: */
			this.highlight.css('left',ui.position.left)
		}

	});

	$('#highlight').width((120/320)*screenWidth-3);
}
});

As you may have noticed in the PHP section of the tut (if not check it out – around line 33) that with each event we include a set of div elements which contain additional information (title, text and date). Those are hidden with display:none in our CSS file, and are accessed by jQuery so that the pop-up window can be populated with data without the need of sending AJAX requests (not to mention that this content is visible to search engines and is great for SEO). So it is a win-win solution.

The data itself is being fetched in the second part of the script below:

script.js – Part 2

function showWindow(data)
{
	/* Each event contains a set of hidden divs that hold
additional information about the event: */

	var title = $('.title',data).text();
	var date = $('.date',data).text();
	var body = $('.body',data).html();

	$('').css({

		width:$(document).width(),
		height:$(document).height(),
		opacity:0.6

	}).appendTo('body').click(function(){

		$(this).remove();
		$('#windowBox').remove();
 	});

 	$('body').append(''+title+'
'+body+''+date+'');

 	$('#windowBox').css({

		width:500,
		height:350,
		left: ($(window).width() - 500)/2,
		top: ($(window).height() - 350)/2
	});
}

In this function we are basically treating the parameter passed from Part 1 above, where the function is called, as regular HTML and use the standard jQuery selectors thus populating the title, date and body variables.

The Timeline Explained

Step 5 – MySQL

This last step is only needed if you plan to run the demo on your own server, or like an addition to your current site.

To make it all tick, you have to recreate the timeline MySQL table from timeline.sql, provided in the download archive. You will also need to fill in your database credentials in connect.php.

With this our Event Timeline is complete!

Conclusion

Today we created a timeline that you can modify to showcase the important events that mark your days. It is easily modifiable and you are free to use it in your or your clients’ projects.

Be sure to leave a comment if you liked it : )

A Colorful Clock With CSS & jQuery

Martin Angelov — Mon, 28 Dec 2009 20:13:10 +0000

The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months.

And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year.

This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own).

Go ahead, download the demo files and continue with step one.

Step 1 – XHTML

As usual, we start with the XHTML markup. The difference is, that the XHTML is not contained in demo.html, but is dynamically inserted into the page by jQuery (well there is some markup left there after all we need at least one container div for the clock to be inserted in).

This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds).

Lets take a look at the XHTML that is inserted by jQuery:

jquery.tzineClock.js

This code is contained in jquery.tzineClock/jquery.tzineClock.js. It is generated three times – once for the hours, minutes and seconds. Those are later animated and updated every second, as you’ll see in a moment.

There are three classes that are assigned to the topmost container during the generation process – green, blue and orange. Just by assigning one of those classes, we change the color of the dial.

Lets continue with the next step.

A Colorful jQuery & CSS Clock

Step 2 – CSS

Before our style sheets can have any effect on the page, we have to include them in the head section of the file:

demo.html

Those lines import styles.css and jquery.tzineClock.css in the page. The first one styles the demo page, and the second – the colorful dials (it is part of the plugin).

We can now take a closer look at the CSS rules.

styles.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Simple page reset */
	margin:0;
	padding:0;
}

body{
	/* Setting default text color, background and a font stack */
	color:#dddddd;
	font-size:13px;
	background: #302b23;
	font-family:Arial, Helvetica, sans-serif;
}

#fancyClock{
	margin:40px auto;
	height:200px;
	border:1px solid #111111;
	width:600px;
}

Those few lines are all that is needed to style the demo page. We first implement a simple CSS reset, which will insure that the elements on the page look the same across the different browsers.

Later we style the body of the page and finally the fancyClock div, in which we will later insert the three dials.

jquery.tzineClock.css

.clock{
	/* The .clock div. Created dynamically by jQuery */
	background-color:#252525;
	height:200px;
	width:200px;
	position:relative;
	overflow:hidden;
	float:left;
}

.clock .rotate{
	/* There are two .rotate divs - one for each half of the background */
	position:absolute;
	width:200px;
	height:200px;
	top:0;
	left:0;
}

.rotate.right{
	display:none;
	z-index:11;
}

.clock .bg, .clock .front{
	width:100px;
	height:200px;
	background-color:#252525;
	position:absolute;
	top:0;
}

.clock .display{
	/* Holds the number of seconds, minutes or hours respectfully */
	position:absolute;
	width:200px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	z-index:20;
	color:#F5F5F5;
	font-size:60px;
	text-align:center;
	top:65px;
	left:0;

	/* CSS3 text shadow: */
	text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:100px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
	left:0;
	z-index:10;
}

jquery.tzineClock.css is a part of our plugin (alongside jquery.tzineClock.js) and it styles the colorful dials themselves.

One of the more interesting moments is the use of individual rules that style the colors of the dials, as I mentioned in step one.

You can learn more about the animation from the illustration below:

The animation explained

Step 3 – jQuery

Moving all the JavaScript to the plugin makes it really easy to reuse the code and at the same time enables us to leverage the power of jQuery’s selectors and methods.

To be able to use the jQuery library, we first need to include a couple of scripts in the page:

demo.html

The first file is the library itself, included from Google’s CDN, later we have the plug-in and lastly the script file that runs the demo.

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	$('#fancyClock').tzineClock();

});

If you’ve followed some of our previous tutorials, you are probably expecting to see some 50+ lines of code here, but this time our scripts file contains only one line of code – a call to our plug-in.

This makes it extremely easy to include the code in an existing site (which is the purpose of jquery plugins in the first place).

Lets dig a little deeper into the plugin:

jquery.tzineClock.js – Part 1

(function($){
	// A global object used by the functions of the plug-in:
	var gVars = {};

	// Extending the jQuery core:

	$.fn.tzineClock = function(opts){

		// "this" contains the elements that were selected when calling the plugin: 		$('elements').tzineClock();
		// If the selector returned more than one element, we use the first one:
		var container = this.eq(0);
		if(!container)
		{
			try{
				console.log("Invalid selector!");
			} catch(e){}

			return false;
		}

		if(!opts) opts = {};

		var defaults = {
			/* Additional options will be added in future versions of the plugin. */
		};

		/* Merging the provided options with the default ones (will be used in future versions of the plugin): */

		$.each(defaults,function(k,v){
			opts[k] = opts[k] || defaults[k];
		});

		// Calling the setUp function and passing the container,
		// will be available to the setUp function as "this":

		setUp.call(container);

		return this;
	}

	function setUp()
	{
		// The colors of the dials:
		var colors = ['orange','blue','green'];

		var tmp;
		for(var i=0;i<3;i++)
		{
			// Creating a new element and setting the color as a class name:

			tmp = $('').attr('class',colors[i]+' clock').html(
				''+
				''+
				''+
				''+
				''+
				''+
				''+
				''
			);

			// Appending to the fancyClock container:
			$(this).append(tmp);

			// Assigning some of the elements as variables for speed:
			tmp.rotateLeft = tmp.find('.rotate.left');
			tmp.rotateRight = tmp.find('.rotate.right');
			tmp.display = tmp.find('.display');

			// Adding the dial as a global variable. Will be available as gVars.colorName
			gVars[colors[i]] = tmp;
		}

		// Setting up a interval, executed every 1000 milliseconds:
		setInterval(function(){

			var currentTime = new Date();
			var h = currentTime.getHours();
			var m = currentTime.getMinutes();
			var s = currentTime.getSeconds();

			animation(gVars.green, s, 60);
			animation(gVars.blue, m, 60);
			animation(gVars.orange, h, 24);
		},1000);
	}

Making a plug-in for jQuery comes down to defining a custom function through the jQuery.fn method. This way your function is available on any elements that you normally use jQuery on.

For example, in script.js we select the div width an id of fancyClock and use the tzineClock() method on it: $(‘#fancyClock’).tzineClock();. The elements we selected are later passed to the tzineClock function and are available through the “this” property.

I have left place for future improvements of the plugin, like passing configuration options for the dimensions of the clock, color themes etc. Those will however be implemented in future releases of the plugin.

Because there might be more than one element selected, we extract only the first one of the set with the eq(0) method. Later we have the setUp() function that inserts the markup for the dials and sets up the interval which will update the figures every second.

jquery.tzineClock.js – Part 2

	function animation(clock, current, total)
	{
		// Calculating the current angle:
		var angle = (360/total)*(current+1);

		var element;

		if(current==0)
		{
			// Hiding the right half of the background:
			clock.rotateRight.hide();

			// Resetting the rotation of the left part:
			rotateElement(clock.rotateLeft,0);
		}

		if(angle<=180)
		{
			// The left part is rotated, and the right is currently hidden:
			element = clock.rotateLeft;
		}
		else
		{
			// The first part of the rotation has completed, so we start rotating the right part:
			clock.rotateRight.show();
			clock.rotateLeft.show();

			rotateElement(clock.rotateLeft,180);
			element = clock.rotateRight;

			angle = angle-180;
		}

		rotateElement(element,angle);

		// Setting the text inside of the display element, inserting a leading zero if needed:
		clock.display.html(current<10?'0'+current:current);
	}

	function rotateElement(element,angle)
	{
		// Rotating the element, depending on the browser:
		var rotate = 'rotate('+angle+'deg)';

		if(element.css('MozTransform')!=undefined)
			element.css('MozTransform',rotate);

		else if(element.css('WebkitTransform')!=undefined)
			element.css('WebkitTransform',rotate);

		// A version for internet explorer using filters, works but is a bit buggy (no surprise here):

		else if(element.css("filter")!=undefined)
		{
			var cos = Math.cos(Math.PI * 2 / 360 * angle);
			var sin = Math.sin(Math.PI * 2 / 360 * angle);

			element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
			element.css("left",-Math.floor((element.width()-200)/2));
			element.css("top",-Math.floor((element.height()-200)/2));
		}
	}
})(jQuery)

The last two of the functions used by the plug-in are animation and rotateElement. The first one updates the dials according to the value passed (we also pass a parameter with the maximum value so that the function can calculate the rotation).

The next function is the one that actually rotates the passed element. The rotation works only for Firefox, Safari, Chrome and IE6+. Internet Explorer does not support the CSS3 rotation used by the other browsers, but provides a proprietary filter property which allows for a similar transformation.

With this our colorful jQuery clock is complete!

Conclusion

Today we created a colorful clock with the help of CSS, jQuery and our first plug-in. You are free to use the code given here in your own projects. As a bonus, I’ve included the PSD file that I used to make the backgrounds, so you can easily create new colors and designs for the dials.

What do you think? How would you improve this code?

Christmas Wishes With Facebook Connect

Martin Angelov — Tue, 22 Dec 2009 01:52:01 +0000

Providing a simple way for users to authenticate themselves can turn a web application in a much more personal place. But a registration is a time taking process which visitors prefer to go without.

This is exactly where services such as Facebook Connect step in. They let you dive inside their multimillion user base, skipping that tedious registration process that drives people off. Another benefit is that Connect enables you to communicate user activity back to facebook, which is a great promotional tool.

Today, we will develop a webapp which will allow users to add christmas wishes using facebook connect and share them with their friends. We are using CSS, jQuery, PHP, AJAX and MySQL for data storage.

Feel free to download the tutorial files and continue with step one.

Step 1 – Creating a facebook application

The first step you have to take, is to enable developer functionality for your facebook account. Providing that you already have a registration, you have to visit the following URL and install the developer application.

After you’ve done that, you’ll need to set up a new application, which will generate a special API key you’ll later have to include in your JavaScript files (more on that in a moment).

For more information on facebook connect, you can watch this great video by the facebook team, and visit the facebook wiki.

Facebook Developers

The main idea is that we are going to allow users to authenticate themselves with facebook connect, and store only their unique facebook IDs in the database as their identity. We are later using Connect to dynamically fetch additional details about the person (such as the profile picture and the person’s name) and insert it directly into the page.

Another benefit of using Connect is that the wish can easily be posted to the user’s wall with a link to your web app – a great way to promote your site.

Step 2 – XHTML

Now that we’ve set everything up, we can start off by laying down the XHTML structure of the site.

The main part of the markup is generated at run time by the PHP back-end and inserted into the page at designated places.

index.php



Christmas Wishes With Facebook Connect

















Connect with facebook to post a wish









Post my wish to facebook as well

On line 9 you can see that we output the contents of the $wishes variable on the page. It holds all the markup formed according to the individual entries in the database (covered in detail in Step 4).

Also worth noting are those unfamiliar fb: tags that you’ve probably never seen before. Those are special tags used by facebook (hence the fb prefix) and are dynamically replaced with real data from facebook’s severs based on the attributes of those tags.

But in order to use those, we have to insert a special xmlns (XML namespace) attribute in the opening tag of our document:

Also you can see the submit form that allows the visitors to add their Christmas wishes to the webapp. Worth noting is that this form is only shown if the user is on the first (or home) page of the site.

Lets continue with the next step.

Christmas Wishes With Facebook Connect

Step 3 – CSS

Functionality is nothing without looks. So lets add in some styles.

All of our styles are positioned positioned in demo.css. I’ve divided the code into three chunks so it is easier to digest:

demo.css – Part 1

body{
	/* Setting default text color, background and a font stack */
	color:#eeeeee;
	font-size:13px;
	background:url(img/flakes.jpg) repeat;
	font-family:Arial, Helvetica, sans-serif;
}

h1.tutTitle{
	/* Hiding the H1 - it is only visble by search engines */
	display:none;
}

#main{
	/* The main container */
	margin:15px auto;
	text-align:center;
	width:865px;
	position:relative;
	display:none;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

#header{
	width:100%;
	height:160px;

	/* Setting the background of the header to show in the center of the page
	   and blend seemlessly with the background color: */

	background:url(img/header_bg.jpg) no-repeat #ad0303 center bottom;
	border-bottom:1px solid #d84b4e;
	text-align:center;
	margin-bottom:60px;

	/* Relative positioning, so that the #backToTut div is positioned accordingly */
	position:relative;
}

#backToTut{
	/* Positioning the "Back to the tut" link */
	position:absolute;
	right:30px;
	top:40px;
}

#logo{
	width:880px;
	text-align:left;
	margin:0 auto;
}

.wish{
	/* A common class, shared by all .wish divs */
	padding:10px;
	text-align:left;
	width:600px;
	margin:0 auto 45px;
	position:relative;
}

/* Individual CSS rules for each color: */

.wish.green{
	background:url(img/green_bg.jpg);
	border:1px solid #3ccd1b;
}

.wish.red{
	background:url(img/red_bg.jpg);
	border:1px solid #e9403c;
}

.wish.add{
	background:url(img/blue_bg.jpg);
	border:1px solid #2976BB;
}

The site has a basic structure with a header on the top (the div with an id of header), which takes the full width of the page and the main container, which holds all the content of the site and is centered on the page.

The header’s background is an image with a fixed width (aren’t they all) which fades gracefully to the background color of this same div. This way no matter how wide the visitor’s screen is, they are guaranteed to see a uniform heading section of the site.

You can also see that we’ve defined a general .wish class, which we build on by defining custom backgrounds for the different color classes.

demo.css – Part 2

.profile-pic{
	float:left;
	margin-right:10px;
}

div div.profile-pic img{
	/* Re-designing the facebook avatars */
	border:2px solid white;

	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 1px #666666;
	-webkit-box-shadow:0 0 1px #666666;
	box-shadow:0 0 1px #666666;
}

a.fbconnect_login_button {
	/* The facebook button */
	display:block;
	margin-top:7px;
}

.stage{
	/* The .stage divs, which hold the text of the wish */
	background:url(img/bg_gwg.png) repeat-y  center top #eeeeee;
	border:3px solid white;
	padding:8px;

	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #666666;
	-webkit-box-shadow:0 0 3px #666666;
	box-shadow:0 0 3px #666666;

	/* Fixing the peekaboo bug in IE by triggering the
	   hasLayout mechanism with the zoom property */
	zoom:1;
}

.topIcon{
	/* The icons at the top */
	width:128px;
	height:120px;
	position:absolute;
	top:-40px;
	right:-40px;
}

.wish.red .topIcon{
	background:url(img/mistletoe.png) no-repeat;
}

.wish.green .topIcon{
	background:url(img/jingle.png) no-repeat;
}

.name{
	color:#888888;
	margin-left:114px;
}

.body{
	/* Text of the wish */
	color:#555555;
	font-size:20px;
	padding-top:6px;
	margin-left:114px;
}

#addWish .name{
	/* Initially hiding the name field of the comment form */
	display:none;
}

#cb{
	/* The checkbox */
	position:relative;
	top:2px
}

#sbutton{
	/* The submit button */
	background:#155C9C;
	border:1px solid #093F6F;
	color:white;
	cursor:pointer;
	font-family:Arial,Verdana,Sans-serif;
	font-size:12px;
	padding:3px;
}

There is one aspect of Facebook Connect that might surprise you at first – it automatically includes a stylesheet in your page that might overwrite the styles you’ve set up for things such as the user avatars and names.

For this purpose you can use the !important modifier next to your rules (font-size:12px !important;) or do what I’ve done – provide more elements in the description of the classes, which adds more weight to your rules and overrides those of facebook ( div div.profile-pic img instead of just .profile-pic img, line 6).

demo.css – Part 3

#wish{
	/* The textarea */
	border:1px solid #AAAAAA;
	color:#606060;
	font-family:Arial,Verdana,Sans-serif;
	font-size:20px;
	padding:3px;
	width:400px;
	display:block;
}

label{
	font-size:10px;
}

a img{
	border:none;
}

/* Styling the pagination at the bottom of the page: */

.pagination{
	font-size:10px;
	margin:-15px auto 10px;
	text-transform:capitalize;
	width:620px;
}

.pagination a,.pagination a:visited,.pagination span{
	background-color:#F2F2F2;
	border:1px solid white;
	color:#545454;
	display:inline;
	float:left;
	margin:3px 5px 0 0;
	padding:4px 6px;
	text-decoration:none;
}

.pagination a:hover{
	background-color:#eaf7ff;
	color:#444444;
}

.pagination span{
	background-color:#BBBBBB;
	border:1px solid #CCCCCC;
	color:#666666;
}

/* The clearfix hack */

.clear{
	clear:both;
}

p{
	/* The tut info on the bottom of the page */
	padding:10px;
	text-align:center;
}

In the third part of the code, we style the form elements and the pagination, displayed on the bottom of the page.

The Wish Container

Step 4 – PHP

As I mentioned in step one, PHP generates all of the christmas wishes XHTML markup dynamically, after fist selecting them from the database. Lets see how this works.

index.php

// Error reporting

error_reporting(E_ALL^E_NOTICE);

// Including additional files
require "connect.php";
require "functions.php";

// If there is no key, create a new one
if(!$_SESSION['key'])
{
	// Making a new unique key:
	$key = md5(time().$_SERVER['REMOTE_ADDR']);
	// Saving it to the session. Will be used in post.php;
	$_SESSION['key'] = $key;
}

// The total number of wishes. Used in the pagination:
list($total)=mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM christmas_wishes"));

$results_per_page=5;
$page=1;
if((int)$_GET['page']>1) $page = (int)$_GET['page'];

$start=($page-1)*$results_per_page;

// Selecting the wishes from the database. Using te LIMIT cause:
$res = mysql_query("SELECT * FROM christmas_wishes ORDER BY id DESC LIMIT ".$start.",".$results_per_page);

$wishes='';
$c = '';
$i=0;

while($row=mysql_fetch_assoc($res))
{
	$c='red';
	if($i++%2 == 0) $c='green';
	$wishes .= '
		
		
		
		
		 wished
		'.htmlspecialchars($row["wish"]).'
		
		
		
	';
}

First we generate a special key which is used to check whether the form has been submitted properly and put it add it as a session variable.

As you can see from the XHTML section of the tut, this key is also inserted as a hidden field inside of the form and is later submitted back to the server along the textual body and other data.

It is then checked whether it corresponds with the key in the session. If it does not, this means that the form was submitted without visiting index.php first (a sure sign of a spam bot).

This technique will also prevent double posting, because the session key is unset after a successful insert in the database.

The form is submitted via AJAX, which sends the data to post.php, which is given below:

ajax/post.php

// Error reporting

error_reporting(E_ALL^E_NOTICE);
require "../connect.php";
require "../functions.php";

if(!$_POST['uid'] || !$_POST['wish'] || !$_POST['key']) die('0');

// Checking to see whether the key is in place:
if(!$_SESSION['key'] || $_SESSION['key']!=$_POST['key']) die('0');

$uid = (int)$_POST['uid'];
if(!$uid) die(err('Please login to facebook first!'));

// Escaping the string and stripping the HTML:
$wish = mysql_real_escape_string(strip_tags($_POST['wish']),$link);

if(mblen($wish)<4) die(err('Your wish is too short!'));

/* Inserting a new record in the christmas_wishes DB: */
mysql_query('	INSERT INTO christmas_wishes (facebook_id,wish)
			VALUES ('.$uid.',"'.$wish.'")');

if(mysql_affected_rows($link)==1)
{
	echo '{status:1}';
	unset($_SESSION['key']);
}
else echo err('Something went wrong. Try again!'.mysql_error($link));

It is pretty straightforward. The variables are validated, the data is escaped and inserted in the database. A JSON object is returned which has a status and text property (the latter is initialized only if there is an error and contains the error message).

There is another PHP file – functions.php, which will not be discussed here, but is worth taking a look. Now lets take a look at jQuery.

The Submit Form

Step 5 – jQuery

Before being able to use the jQuery library, we have to include it into the page.

index.php

I included jQuery directly from Google’s AJAX CDN – this enables us to have the benefits of their huge infrastructure and the likely possibility that the library is already cached in the visitors browser.

The next scripts are the facebook connect library, the jQuery scrollTo plugin (which you’ll see in action in a moment) and our own script file.

All of our JavaScript code is located inside script.js. I’ve split the code in two parts:

script.js – Part 1

$(function(){

	/* This code is run on page load */

	/* Showing the wishes, hidden by the CSS. */
	$('#main').show();

	/* Listening for the submit event on the form */
	$('#wForm').submit(function(e){
		addWish();
		e.preventDefault();
	});

	function init(){
		/* Run on page load if the user is logged into facebook */
		$('#share .toggleContent').toggle();

		$('#addWish .name').html('Hi, , add your wish below:').show();
		$('#addWish .profile-pic').children().attr('uid',FB.Connect.get_loggedInUser());
		FB.XFBML.Host.parseDomTree();
	}

	/* Initializing facebook connect */
	FB.init("bcf260ae02d453654be01ec11e2d0aa0","xd_receiver.htm",{"ifUserConnected" : init});

In this first part of the script, we set the code to be run after the DOM has been completely loaded (and all page elements are accessible).

We later define a init() function that displays the submit form and initialize facebook connect (notice the ifUserConnected property – the init() functon is run on page load if the user has logged in previously).

The first parameter of the FB.init function is the API key of the app we created earlier.

script.js – Part 2

var commencing = false;

function addWish()
{
	/* If there is another AJAX process already active stop the function: */
	if(commencing) return false;

	/* Stripping HTML tags */
	var wish = $('#wish').val().replace(/<[^>]*>/g,'');

	if(wish.length<3) { alert('Your wish is too short or empty!'); return false; }
	if(!FB.Connect.get_loggedInUser()) { alert('You are not logged in!'); return false; }

	commencing=true;

	/* Sending the data to post.php */
	$.post('ajax/post.php',{uid:FB.Connect.get_loggedInUser(),wish:wish,key:$('#key').val()},function(msg){

		/* This function is run if the data was successfully sent */
		commencing=false;

		if(msg.status)
		{
			/* If there were no errors */
			if($('#cb').attr('checked'))
			{
				var attachment = {
					name:'Christmas Wishes',
					href:'http://christmas-wishes.tutorialzine.com/',
					description:'What do you wish for this christmas?'
				};

				var action_link='';

				setTimeout(function(){
					FB.Connect.streamPublish(wish, attachment, action_link);
				},1000);
			}

			/* Insert a new wish by duplicating and changing the first wish currently on the page */
			var el = $('.wish').eq(0).clone()

			if(el.hasClass('green'))
			{
				el.addClass('red').removeClass('green');
			}
			else el.addClass('green').removeClass('red');

			el.find('.body').html(wish);
			el.hide().html(el.html().replace(/uid=\"\d+\"/g,'uid="'+FB.Connect.get_loggedInUser()+'"'));
			$('#wishesContainer').prepend(el);

			/* Parsing the fb tags: */
			FB.XFBML.Host.parseDomElement(el.get(0));

			el.fadeIn('slow');

			/* Scrolling the page to show the newly added wish into view: */
			$.scrollTo(el,800);
			$('#share').html('Thank you!');
		}
		else
		{
			alert('There was an error trying to add your comment!\nPlease try again in a few moments.');
			return false;
		}
	},'json')
}
});

The second part of the code holds the addWish() function which posts the data via AJAX.

You can see that I’ve used a variable called commencing to figure out whether there is an active transfer in the progress, which allows only one AJAX call at once (and thus preventing unnecessary double-posting caused by multiple clicks on the submit button).

Also, you can see on line 39 that I’ve used the jQuery ScrollTo plugin to scroll the window smoothly so that the newly inserted element is in view.

Step 6 – MySQL

In order to make this work on your own server, you’ll need to create the christmas_wishes MySQL table by running tables.sql, which is included in the download archive.

You’ll have to change your MySQL credentials in connect.php and replace the API key used in script.js with your own.

With this our Christmas Wishes webapp is complete!

Conclusion

Today we created a fully blown webapp which implemented facebook connect. You are free to build upon this source code and use it in your own personal or commercial projects.
Have a merry Christmas and a happy New Year!

What do you think? How would you improve it this code?

Animated Sharing Bar With jQuery & CSS

Martin Angelov — Mon, 14 Dec 2009 22:13:48 +0000

Social networks can make a big difference on the popularity of a blog. Sites that communicate better and understand social media are usually the most popular.

A move towards this goal would be to find a way to encourage your visitors to share your content on the networks they are most active on.

Today we are doing just that, by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.

Go ahead and download the demo files and continue with step one of this tut.

Step 1 – XHTML

As usual, we start off with the XHTML markup. The sharing area is constructed by using three main div containers:

#share – this element acts as a container which holds the other two. It also has some CSS3 properties applied, such as rounded corners;
#stage – this is where the animation takes place. On page load jQuery detects the horizontal and vertical centers and uses them to position the rotating divs. It is also floated to the left;
#share-label – this has the “share the love” image as a background. It is also floated to the left and thus positioned right next to the #stage div.

But lets have a detailed look:

demo.html








Share

The code above is all you need to add to your page (in addition to the js and css files), so you can show the animated bar below your articles.

Each button has a generic btn class and an individual one (digg, tweetmeme, etc). This makes it possible to gather the common rules shared by the buttons in a single class and make it easier to customize at a later time.

Also notice that inside of each of the button divs, there is an individual JavaScript file that actually generates the button on the page. Those are provided by the social networks and usually display the button exactly where the script tag is inserted.

Now lets see how these elements are styled.

An Animated Sharing Bar

Step 2 – CSS

I’ve divided the CSS code into two parts.

demo.css – Part 1

#share{
	/* The share box container */
	width:500px;
	background:#ececec;
	height:220px;
	margin:60px auto;
	overflow:hidden;

	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

#share-label{
	/* The image on the right */
	background:url(img/share.png) no-repeat 50% 50%;
	float:left;
	height:220px;
	width:200px;
}

#stage{
	/* This is where the animation takes place */
	position:relative;

	border-right:1px solid #DDDDDD;
	width:290px;
	height:220px;
	background:white;
	float:left;

	border-bottom-left-radius:12px;
	border-top-left-radius:12px;

	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-topleft:12px;

	-webkit-border-bottom-left-radius:12px;
	-webkit-border-top-left-radius:12px;
}

.btn{
	/* This class is assigned to every share button */
	background-color:white;
	height:90px;
	left:0;
	top:0;
	width:60px;
	position:relative;
	margin:20px 0 0 10px;
	float:left;
}

.bcontent{
	/* Positioned inside the .btn container */
	position:absolute;
	top:auto;
	bottom:20px;
	left:0;
}

Maybe at this stage you are wondering how the actual buttons are animated in a circular movement on the page.

A major part of the technique takes place inside the #stage CSS class above. The stage itself is relatively positioned, which enables the buttons (which have absolute positioning assigned by jQuery below, and are direct descendants) to be positioned accordingly.

This means that setting top and left to zero on the buttons, positions them in the top-left corner of the stage.

You’ll see the rest of the technique in step 3.

demo.css – Part 2

/* Individual rules for every share button */

.digg{	background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{	background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{	background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{	background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{	background:url(img/dzone_reflection.png) no-repeat -7px bottom;}

.thanksto{
	position:absolute;
	bottom:2px;
	right:4px;
	font-size:10px;
}

.thanksto a,.thanksto a:visited{
	color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
	display:block;
}

span.fb_share_count_top.fb_share_no_count {
	line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
	display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
	background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
	display:block;
}

In the second part of the style sheet, we assign individual rules to each button which define a unique background image with the reflection. After this we customize the facebook button, so that its styling matches the rest of the buttons.

With this we can continue with step 3.

The Sharing Bar Deconstructed

Step 3 – jQuery

With the speed with which modern browsers render JavaScript, it gets easier to make eye-catching animations, previously reserved only for technologies as Adobe Flash.

But before getting down to work, we need to include two script files in the head of our page:

The first one includes the jQuery library from Google’s CDN, and the second line includes our own script.js file, covered in detail below:

script.js

$(document).ready(function(){

	/* This code is run on page load */

	var deg=0;
	var dif=-3;

	/* Assigning the buttons to a variable for speed: */
	var arr = $('.btn');

	/* Caching the length of the array in a vаriable: */
	var len = arr.length;

	/* Finding the centers of the animation container: */
	var centerX = $('#stage').width()/2 - 40;
	var centerY = $('#stage').height()/2 - 60;

	/* Applying relative positioning to the buttons: */
	arr.css('position','absolute');

	/* The function inside the interval is run 25 times per second */
	setInterval(function(){

		/* This forms an area with no activity on mouse move in the middle of the stage */
		if(Math.abs(dif)<0.5) return false;

		/* Increment the angle: */
		deg+=dif;

		/* Loop through all the buttons: */
		$.each(arr,function(i){

			/* Calculate the sine and cosine with the new angle */
			var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
			var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);

			/* Setting the css properties */
			$(this).css({
				top:centerY+25*eSin,
				left:centerX+90*eCos,
				opacity:0.8+eSin*0.2,
				zIndex:Math.round(80+eSin*20)
			});
		})
	},40);

	/* Detecting the movements of the mouse and speeding up or reversing the rotation accordingly: */
	var over=false;
	$("#stage").mousemove(function(e){

		if(!this.leftOffset)
		{
			/* This if section is only run the first time the function is executed. */
			this.leftOffset = $(this).offset().left;
			this.width = $(this).width();
		}

		/* If the mouse is over a button, set dif to 0, which halts the animation */
		if(over) dif=0;
		else
			dif = -5+(10*((e.pageX-this.leftOffset)/this.width));

		/* In the other case calculate the speed according to the X position of the mouse */
	});

	/* Detecting whether the mouse is positioned above a share button: */
	$(".bcontent").hover(
		function(){over=true;dif=0;},
		function(){over=false;}
	);
});

The main idea here, is that we use setInterval to set up a function to be run every 40 milliseconds. This means that it is run 25 times a second, or if you compare it with a movie screen, this is 25 frames per second. In other words more than enough to display a smooth animation (providing that the rendering speed of the browser is fast enough, and that there are no other scripts interfering).

As this is not a computation-heavy animation, it runs pretty smoothly on all browser versions (even as old as IE6). However, the smoothest animation I’ve observed is in Safari and Chrome (it would run nicely in Firefox too, providing that you don’t have a lot of add-ons or opened tabs).

You can see throughout the code above, that I tend to assign the results of jQuery selectors or other functions to variables. This is done to improve the speed of the script, otherwise all those functions and methods would be calculated on every frame (for a total of 25 times per second) which would ultimately bring down the performance and smoothness of the animation.

With this our animated sharing bar is complete!

Conclusion

In this tutorial, we created an animated social sharing bar which encourages visitors to share articles on a number of social networks with an eye-catching animation.

To include new services, in addition to the five currently active, you just have to include a new btn element in the stage div with an appropriate script that would generate the button.

What do you think? How would you improve this script?

Making a Fresh Content Accordion

Martin Angelov — Mon, 07 Dec 2009 21:42:46 +0000

When developing a website, it is a great challenge to be able to organize the content in such a way, that it is both intriguing and eye-catching. Not to mention how important it is to prevent information overloading by exposing your visitors to too much data in a single view.

This is why there are certain techniques that help designers group content and show it only if the user is interested in what you have to offer and interacts with the page.

Today we are making a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

You can go ahead and download the demo files before we continue with step one.

Step 1 – XHTML

As you can see from the demo, the accordion is divided into four sections, each defined by a LI element with a class name of menu. They are positioned inside the main unordered list (ul.container) and share a common XHTML structure:

demo.html

 

 


Kiwis 




 


Read on Wikipedia
Flickr Stream

Each menu LI contains another UL, which forms a title area (li.button), and a content area (li.dropdown).

We then have an anchor element positioned inside li.button (button being the assigned class name) . This hyperlink is later bound to a jQuery event handler, which slides open the section’s drop down list once the link is clicked.

It is also worth noting that the dropdown list elements are hidden by default with the display:none CSS property as you will see in a moment.

The accordion explained

Step 2 – CSS

If styled properly, even the simplest idea can make a big difference in the overall feeling your site gives to the visitors.

It is important to take extra care so that the CSS code you produce is valid and that it works well across different browsers. I’ve included all the styles used in the demo below:

demo.css – part 1

body{
	/* Setting default text color, background and a font stack */
	color:#cccccc;
	font-size:13px;
	background: #302b23;
	font-family:Arial, Helvetica, sans-serif;
}

ul{
	margin:0;
	padding:0;
}

ul.container{
	/* The main UL */
	width:240px;
	margin:0 auto;
	padding:50px;
}

li{
	list-style:none;
	text-align:left;
}

li.menu{
	/* The main list elements */
	padding:5px 0;
	width:100%;
}

li.button a{
	/* The section titles */
	display:block;
	font-family:BPreplay,Arial,Helvetica,sans-serif;
	font-size:21px;
	height:34px;
	overflow:hidden;
	padding:10px 20px 0;
	position:relative;
	width:200px;
}

Here we style the main UL – ul.container, which holds the rest of the elements. Lastly, we define the looks of the hyperlinks that act as section titles (notice that the actual background images are not yet assigned).

demo.css – part 2

li.button a:hover{
	/* Removing the inherited underline from the titles */
	text-decoration:none;
}

li.button a span{
	/* This span acts as the right part of the section's background */
	height:44px;
	position:absolute;
	right:0;
	top:0;
	width:4px;
	display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}

li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(img/green.png) repeat-x top right;}

li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}

li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(img/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
	/* The expandable lists */
	display:none;
	padding-top:5px;
	width:100%;
}

.dropdown li{
	/* Each element in the expandable list */
	background-color:#373128;
	border:1px solid #40392C;
	color:#CCCCCC;
	margin:5px 0;
	padding:4px 18px;
}

The most interesting part here is how we specify the individual background property for every section color. We also provide a background for the span element, which holds the right part of the background image, as explained in the illustration below.

The buttons

Step 3 – jQuery

After we’ve laid the layout of the accordion, it is time to make it tick. First we need to include a few scripts in the page (this code is put inside the head section of the document):

We first include the jQuery library from Google’s CDN, which will help us write compact and compatible code. Later we include the easing plugin and lastly our own script file, which I’ve covered in detail below.

As you may have noticed from the demo, the slide down effect is not your regular linear movement, but more bounce-like and lively. This is achieved with the help of the easing plug-in for jQuery. It provides a number of interesting effects which can put those lovely details in your web design.

Now lets continue with our own scripts file.

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
	$.easing.def = "easeOutBounce";

	/* Binding a click event handler to the links: */
	$('li.button a').click(function(e){

		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).parent().next();

		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');

		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
	})

});

We first set the easing method that is going to be used by the slideUp/slideDown effects, and then bind a specially crafted function to the click event of the li.button hyperlink. When this link is clicked, we get the corresponding li.dropDown and show it, hiding all the others.

I am using the slideToggle jQuery method, which checks to see if the element is already visible on the page, and decides whether to show or hide it. This way, when you click on an open section of the accordion, it is contracted instead of just staying opened.

After this, we use e.preventDefault() to prevent the browser from navigating away from the page (after all we’ve just clicked a link and this is the normal behavior).

With this our fruity CSS & jQuery accordion is complete!

A CSS & jQuery accordion

Conclusion

This time we created a fresh accordion script that is both easily modifiable end embeddable.

Can you think of any awesome uses of this script?

How would you like to change it?