Tutorialzine » CSS

Making a jQuery Countdown Timer

Martin Angelov — Fri, 30 Dec 2011 11:02:06 +0000

When building a coming soon or event page, you find yourself in search for a good way to display the remaining time. A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter.

Today we are going to build a neat jQuery plugin for displaying a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates on every second. Note: the plugin is also available on Github.

Let’s start with the markup!

The HTML

We will give the plugin the creative name of “countdown”. Called on an empty element, it will fill it with the HTML that is needed for the countdown timer. You don’t need to do anything but choose the element in which you want to show it.

Generated markup

In the above example, the plugin has been originally called on a div with an id of countdown. The plugin has then added a countdownHolder class to it (so a few styles are applied to the element via CSS).

Inside is the markup for the digits. There are two digit spans for every time unit (days, hours, minutes and seconds), which means that you can count down towards a date that is no more than 99 days in the future (for such time frames you should probably not use the timer anyway, it would be discouraging).

The static class of the digits gives them their gradient background and box-shadow. When animated, this class is removed so that these CSS3 touches don’t slow down the animation. The digits are brought together in groups so you can easily style them. Adding a font-size declaration to .countDays, will affect the size of both day digits.

A jQuery Countdown Timer

The .countDiv spans are the dividers between the units. The colon is formed with :before/:after elements.

But how is this markup generated exactly?

The jQuery

First let’s write two helper functions used by the plugin:

init generates the markup you saw above;
switchDigit takes a .position span and animates the digits inside it;

Extracting this functionality as separate functions allows us to keep the plugin code clean.

assets/countdown/jquery.countdown.js

	function init(elem, options){
		elem.addClass('countdownHolder');

		// Creating the markup inside the container
		$.each(['Days','Hours','Minutes','Seconds'],function(i){
			$('').html(
				'\
					0\
				\
				\
					0\
				'
			).appendTo(elem);

			if(this!="Seconds"){
				elem.append('');
			}
		});

	}

	// Creates an animated transition between the two numbers
	function switchDigit(position,number){

		var digit = position.find('.digit')

		if(digit.is(':animated')){
			return false;
		}

		if(position.data('digit') == number){
			// We are already showing this number
			return false;
		}

		position.data('digit', number);

		var replacement = $('',{
			'class':'digit',
			css:{
				top:'-2.1em',
				opacity:0
			},
			html:number
		});

		// The .static class is added when the animation
		// completes. This makes it run smoother.

		digit
			.before(replacement)
			.removeClass('static')
			.animate({top:'2.5em',opacity:0},'fast',function(){
				digit.remove();
			})

		replacement
			.delay(100)
			.animate({top:0,opacity:1},'fast',function(){
				replacement.addClass('static');
			});
	}

Great! Now let’s move on with the plugin body. Our plugin must take an object with parameters for better configurability – a timestamp of the period we are counting towards, and a callback function, executed on every tick and passed the remaining time. For brevity, I’ve omitted the functions above from the code.

assets/countdown/jquery.countdown.js

(function($){

	// Number of seconds in every time division
	var days	= 24*60*60,
		hours	= 60*60,
		minutes	= 60;

	// Creating the plugin
	$.fn.countdown = function(prop){

		var options = $.extend({
			callback	: function(){},
			timestamp	: 0
		},prop);

		var left, d, h, m, s, positions;

		// Initialize the plugin
		init(this, options);

		positions = this.find('.position');

		(function tick(){

			// Time left
			left = Math.floor((options.timestamp - (new Date())) / 1000);

			if(left < 0){
				left = 0;
			}

			// Number of days left
			d = Math.floor(left / days);
			updateDuo(0, 1, d);
			left -= d*days;

			// Number of hours left
			h = Math.floor(left / hours);
			updateDuo(2, 3, h);
			left -= h*hours;

			// Number of minutes left
			m = Math.floor(left / minutes);
			updateDuo(4, 5, m);
			left -= m*minutes;

			// Number of seconds left
			s = left;
			updateDuo(6, 7, s);

			// Calling an optional user supplied callback
			options.callback(d, h, m, s);

			// Scheduling another call of this function in 1s
			setTimeout(tick, 1000);
		})();

		// This function updates two digit positions at once
		function updateDuo(minor,major,value){
			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
			switchDigit(positions.eq(major),value%10);
		}

		return this;
	};

	/* The two helper functions go here */

})(jQuery);

The tick function calls itself every second. Inside it, we calculate the time difference between the given timestamp and the current date. The updateDuo function then updates the digits comprising the time unit.

The plugin is ready! Here is how to use it (as seen in the demo):

assets/js/script.js

$(function(){

	var note = $('#note'),
		ts = new Date(2012, 0, 1),
		newYear = true;

	if((new Date()) > ts){
		// The new year is here! Count towards something else.
		// Notice the *1000 at the end - time must be in milliseconds
		ts = (new Date()).getTime() + 10*24*60*60*1000;
		newYear = false;
	}

	$('#countdown').countdown({
		timestamp	: ts,
		callback	: function(days, hours, minutes, seconds){

			var message = "";

			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
			message += seconds + " second" + ( seconds==1 ? '':'s' ) + " 
";

			if(newYear){
				message += "left until the new year!";
			}
			else {
				message += "left to 10 days from now!";
			}

			note.html(message);
		}
	});

});

Of course, for this to work, you will have to include the css and js file from the countdown folder in your page.

Done!

You can use this script as the perfect addition to every launch page. The best thing about it is that it doesn’t use a single image, everything is done with CSS alone. Increasing or decreasing the font size will result in everything scaling nicely, and you only need a display:none declaration to hide the units you don’t need.

Shiny Knob Control with jQuery and CSS3

Martin Angelov — Wed, 30 Nov 2011 15:00:50 +0000

In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.

KnobKnob is also on Github.

Update: Thanks to ranyefet the plugin now works on mobile devices [changes].

The HTML

The HTML markup for the page is rather straightforward. We are only going to need a placeholder element for the control – the rest is going to be dynamically generated by the plugin. Just in case, here is the complete markup of the page:

index.html



    
        
        Shiny Switches with CSS3 & jQuery | Tutorialzine Demo

First we include the latest version of jQuery, transform.js which levels cross-browser support of the CSS3 transform properties we will be using, the knobKnob plugin file and script.js, which pulls everything together.

The #control div is where the plugin markup will be generated. Below we will insert divs that will become the colorful bars around it. They are not part of the KnobKnob plugin, we will be showing them depending on the chosen value in the control. KnobKnob also comes with a stylesheet that determines the looks of the knob. You can see it included in the head section.

Now lets write this plugin!

Shiny Knob Control

The jQuery Code

You can find the plugin source files in the knobKnob folder. To use it in your project simply unzip it in your website’s assets folder and include the files you find inside. Here is the actual plugin file:

assets/knobKnob/knobKnob.jquery.js

/**
 * @name		jQuery KnobKnob plugin
 * @author		Martin Angelov
 * @version 	1.0
 * @url			http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
 * @license		MIT License
 */

(function($){

	$.fn.knobKnob = function(props){

		var options = $.extend({
			snap: 0,
			value: 0,
			turn: function(){}
		}, props || {});

		var tpl = '\
				\
				\
			';

		return this.each(function(){

			var el = $(this);
			el.append(tpl);

			var knob = $('.knob',el)
				knobTop = knob.find('.top'),
				startDeg = -1,
				currentDeg = 0,
				rotation = 0,
				lastDeg = 0,
				doc = $(document);

			if(options.value > 0 && options.value <= 359){
				rotation = currentDeg = options.value;
				knobTop.css('transform','rotate('+(currentDeg)+'deg)');
				options.turn(currentDeg/359);
			}

			knob.on('mousedown', function(e){

				e.preventDefault();

				var offset = knob.offset();
				var center = {
					y : offset.top + knob.height()/2,
					x: offset.left + knob.width()/2
				};

				var a, b, deg, tmp,
					rad2deg = 180/Math.PI;

				knob.on('mousemove.rem',function(e){

					a = center.y - e.pageY;
					b = center.x - e.pageX;
					deg = Math.atan2(a,b)*rad2deg;

					// we have to make sure that negative
					// angles are turned into positive:
					if(deg<0){
						deg = 360 + deg;
					}

					// Save the starting position of the drag
					if(startDeg == -1){
						startDeg = deg;
					}

					// Calculating the current rotation
					tmp = Math.floor((deg-startDeg) + rotation);

					// Making sure the current rotation
					// stays between 0 and 359
					if(tmp < 0){
						tmp = 360 + tmp;
					}
					else if(tmp > 359){
						tmp = tmp % 360;
					}

					// Snapping in the off position:
					if(options.snap && tmp < options.snap){
						tmp = 0;
					}

					// This would suggest we are at an end position;
					// we need to block further rotation.
					if(Math.abs(tmp - lastDeg) > 180){
						return false;
					}

					currentDeg = tmp;
					lastDeg = tmp;

					knobTop.css('transform','rotate('+(currentDeg)+'deg)');
					options.turn(currentDeg/359);
				});

				doc.on('mouseup.rem',function(){
					knob.off('.rem');
					doc.off('.rem');

					// Saving the current rotation
					rotation = currentDeg;

					// Marking the starting degree as invalid
					startDeg = -1;
				});

			});
		});
	};

})(jQuery);

The plugin takes a number of options as a parameter object – snap, value and turn:

snap is a number of degrees that are snapped to zero. You can test this by slowly turning the knob down;
value is the initial rotation of the knob (also in degrees);
turn is a callback function that is called every time the knob is turned. Its only argument is a ratio (from 0 to 1) of the rotation. We will use this function in a moment to determine how many of the colorful dividers to show.

In the code above you can see that we are using the Math.atan2 function (as we did in the PointPoint plugin) to calculate the angle (in radians) between the mouse pointer and the center of the knob. By keeping track of the angle in the start and end position of the drag, we can determine how much to rotate the knob.

Later we are also using jQuery 1.7′s new methods for manipulating event listeners – on and off.

Now lets see how we can use this plugin.

assets/js/script.js

$(function(){

	var colors = [
		'26e000','2fe300','37e700','45ea00','51ef00',
		'61f800','6bfb00','77ff02','80ff05','8cff09',
		'93ff0b','9eff09','a9ff07','c2ff03','d7ff07',
		'f2ff0a','fff30a','ffdc09','ffce0a','ffc30a',
		'ffb509','ffa808','ff9908','ff8607','ff7005',
		'ff5f04','ff4f03','f83a00','ee2b00','e52000'
	];

	var rad2deg = 180/Math.PI;
	var deg = 0;
	var bars = $('#bars');

	for(var i=0;i').css({
			backgroundColor: '#'+colors[i],
			transform:'rotate('+deg+'deg)',
			top: -Math.sin(deg/rad2deg)*80+100,
			left: Math.cos((180 - deg)/rad2deg)*80+100,
		}).appendTo(bars);
	}

	var colorBars = bars.find('.colorBar');
	var numBars = 0, lastNum = -1;

	$('#control').knobKnob({
		snap : 10,
		value: 154,
		turn : function(ratio){
			numBars = Math.round(colorBars.length*ratio);

			// Update the dom only when the number of active bars
			// changes, instead of on every move

			if(numBars == lastNum){
				return false;
			}
			lastNum = numBars;

			colorBars.removeClass('active').slice(0, numBars).addClass('active');
		}
	});

});

The colorful bars that are displayed around the knob are not part of the plugin. And they shouldn’t be – the plugin only handles the control itself which makes it easier to reuse it.

The code above creates a set of 30 divs with colors gradually going from green to red. These are then rotated by 12 degree increments. Thanks to the turn callback function passed to the plugin, this code can determine how many of the colorful bars to show. You can see the rest of the bar styling in assets/css/styles.css.

We are done!

With this our plugin is complete! You can use it as part of control panels and other administrative pages, everywhere you want to give users the ability to choose from a pool of values. Next time we will use this plugin to enhance the new range form element.

Chained AJAX Selects

Martin Angelov — Thu, 03 Nov 2011 15:40:06 +0000

In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database.

The idea for this tutorial was suggested by Casper Hansen from Denmark.

The HTML

As you can see from the screenshot below, the select box is accompanied by a title that explains what the selection is about. The title and the selectbox are enclosed in a LI item.

Chained AJAX Selects with jQuery and PHP

When adding more questions, additional LIs are created by jQuery. All of these sit inside an unordered list called #questions. The title and options for these items are served as JSON, as you will see in the PHP part of the tut. Here is the markup that is generated for the li items:

index.html – generated code


	
	
		What would you like to purchase?

You might notice in the demo page that we aren’t using the default browser select controls. This is because we are making use of the Chosen jQuery plugin to upgrade our selects into the fancy widgets you see. We simply need to call the chosen() method on the selects, and the plugin will handle the rest.

The jQuery code

Here is what our jQuery code does in short – it fetches the select boxes information as JSON from the server, generates their HTML, and sets up event listeners for selection changes. If a change in the selection does occur, the process is repeated for the new select item.

In the code, this is achieved using two JavaScript functions:

refreshSelects triggers the Chosen plugin and binds event listeners every time an item is added to the page;
fetchSelect requests a JSON feed from the server and generates the markup from the response.

You can see them below.

assets/js/script.js

$(function(){

	var questions = $('#questions');

	function refreshSelects(){
		var selects = questions.find('select');

		// Improve the selects with the Chose plugin
		selects.chosen();

		// Listen for changes
		selects.unbind('change').bind('change',function(){

			// The selected option
			var selected = $(this).find('option').eq(this.selectedIndex);
			// Look up the data-connection attribute
			var connection = selected.data('connection');

			// Removing the li containers that follow (if any)
			selected.closest('#questions li').nextAll().remove();

			if(connection){
				fetchSelect(connection);
			}

		});
	}

	var working = false;

	function fetchSelect(val){

		if(working){
			return false;
		}
		working = true;

		$.getJSON('ajax.php',{key:val},function(r){

			var connection, options = '';

			$.each(r.items,function(k,v){
				connection = '';
				if(v){
					connection = 'data-connection="'+v+'"';
				}

				options+= '';
			});

			if(r.defaultText){

				// The chose plugin requires that we add an empty option
				// element if we want to display a "Please choose" text

				options = ''+options;
			}

			// Building the markup for the select section

			$('\
				'+r.title+'\
				\
				\
			').appendTo(questions);

			refreshSelects();

			working = false;
		});

	}

	$('#preloader').ajaxStart(function(){
		$(this).show();
	}).ajaxStop(function(){
		$(this).hide();
	});

	// Initially load the product select
	fetchSelect('productSelect');
});

Great! We are now left with generating the actual JSON feed. Notice that the fetchSelect function takes a string argument. This is the key we will be passing back to PHP, denoting which set of items we want.

Here is a sample response from our PHP script:

{
    "items": {
        "Phones": "phoneSelect",
        "Notebooks": "notebookSelect",
        "Tablets": ""
    },
    "title": "What would you like to purchase?",
    "defaultText": "Choose a product category"
}

fetchSelect loops through the items and uses the keys as content of the option elements, and the values as connections. Phones and Notebooks would cause the script to generate new select boxes, while Tablets would not.

Improved Select boxes using the Chosen Plugin

The PHP

We need to somehow store the information about the select boxes, the options they contain and the connections between them. With a database this could be done by selecting a specific set of rows. But here we will be storing this data statically as objects. For this purpose, we will define a simple class that will hold the information for a select box:

ajax.php / 1

// Each select box will be an instance of this class

class SelectBox{
	public $items = array();
	public $defaultText = '';
	public $title = '';

	public function __construct($title, $default){
		$this->defaultText = $default;
		$this->title = $title;
	}

	public function addItem($name, $connection = NULL){
		$this->items[$name] = $connection;
		return $this;
	}

	public function toJSON(){
		return json_encode($this);
	}
}

Now we only need to create an instance of this class for every select box, and call the addItem() to add options. This method has an optional $connection parameter, that holds the name of a dependent select box.

ajax.php / 2

/* Configuring the selectboxes */

// Product selectbox

$productSelect = new SelectBox('What would you like to purchase?','Choose a product category');
$productSelect->addItem('Phones','phoneSelect')
			  ->addItem('Notebooks','notebookSelect')
			  ->addItem('Tablets','tabletSelect');

// Phone types

$phoneSelect = new SelectBox('What kind of phone are you interested in?', 'Pick a phone type');
$phoneSelect->addItem('Smartphones','smartphoneSelect')
			->addItem('Feature phones','featurephoneSelect');

// Smartphones

$smartphoneSelect = new SelectBox('Which is your desired smartphone?','Choose a smartphone model');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
				 ->addItem('iPhone 4S','iphoneSelect')
				 ->addItem('Samsung Galaxy S2')
				 ->addItem('HTC Sensation');

// Feature phones

$featurephoneSelect = new SelectBox('Which is your desired featurephone?','Choose a feature phone');
$featurephoneSelect->addItem('Nokia N34')
				   ->addItem('Sony Ericsson 334')
				   ->addItem('Motorola');

// iPhone colors

$iphoneSelect = new SelectBox('What color would you like?','Choose a color');
$iphoneSelect->addItem('White')->addItem('Black');

// Notebook select

$notebookSelect = new SelectBox('Which notebook would you like to buy?', 'Choose a notebook model');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
			   ->addItem('Macbook Air','caseSelect')
			   ->addItem('Acer Aspire','caseSelect')
			   ->addItem('Lenovo Thinkpad','caseSelect')
			   ->addItem('Dell Inspiron','caseSelect');

// Tablet select

$tabletSelect = new SelectBox('Which tablet would you like to buy?', 'Pick a tablet');
$tabletSelect->addItem('Asus Transformer','caseSelect')
			 ->addItem('Samsung Galaxy Tab','caseSelect')
			 ->addItem('iPad 16GB','caseSelect')
			 ->addItem('iPad 32GB','caseSelect')
			 ->addItem('Acer Iconia Tab','caseSelect');

// Case select

$caseSelect = new SelectBox('Buy protective casing?','');
$caseSelect->addItem('Yes')->addItem('No');

// Register all the select items in an array

$selects = array(
	'productSelect'			=> $productSelect,
	'phoneSelect'			=> $phoneSelect,
	'smartphoneSelect'		=> $smartphoneSelect,
	'featurephoneSelect'	=> $featurephoneSelect,
	'iphoneSelect'			=> $iphoneSelect,
	'notebookSelect'		=> $notebookSelect,
	'tabletSelect'			=> $tabletSelect,
	'caseSelect'			=> $caseSelect
);

The code above defines a number of select items and places them in the $selects array. When this script receives an AJAX request, it will look into this array and return a response:

ajax.php / 3

// We look up this array and return a select object depending
// on the $_GET['key'] parameter passed by jQuery

// You can modify it to select results from a database instead

if(array_key_exists($_GET['key'],$selects)){
	header('Content-type: application/json');
	echo $selects[$_GET['key']]->toJSON();
}
else{
	header("HTTP/1.0 404 Not Found");
	header('Status: 404 Not Found');
}

By calling the toJSON() method we defined in the beginning, we output all the data for the select object as JSON, ready for use by our jQuery frontend.

With this our Chained AJAX Selects example is complete!

Done

You can use this example to power user guides, product recommendations or search pages. Upgrading the script to use a live database is straightforward and it will actually simplify the PHP script.

Creating an iOS-like Home Screen with CoffeeScript

Martin Angelov — Thu, 20 Oct 2011 10:46:33 +0000

Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language.

We are also going to use the Touchable plugin, so we can listen for touch-based events.

First, what is CoffeeScript?

CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good. It makes OOP easy and introduces a number of useful additions such as comprehensions, new syntax for functions and scope handling, along with numerous small improvements.

CoffeeScript works in every browser out there, and is compatible with all your existing JavaScript code (including libraries like jQuery and plugins). But how does this work if it is a different language? Simple – CoffeeScript compiles down to JavaScript, so it works in any browser that supports it.

Before you start following this tutorial, I would suggest that you read through the examples on the CoffeeScript website (be sure to check out the “Try CoffeeScript” tab), and The Little Book on CoffeeScript for an introduction to the language.

iOS -like Home Screen with CoffeeScript

The HTML

Lets start with the HTML markup of our iOS-like home screen. As usual, this is a regular HTML5 document with stylehseets in the head and JS includes before the closing body tag.

index.html



    
        
        iOS Home Screen with CoffeeScript | Tutorialzine Demo

We have the #homeScreen section, which is the main container of our experiment. Inside it is the #mask, which uses overflow:hidden to show only one screen at the time. The #allScreens div inside it, as the name suggests, contains all the dynamically generated .screen divs with icons.

The #mask div shows only one screen at a time with overflow:hidden.

Following is the #indicators UL, which shows the little dots with the currently shown screen, and the #dock div.

As mentioned previously, CoffeeScript requires an extra compilation step, which will convert the source code to JavaScript. You can do this with the coffeescript package for node.js (as explained on their website), or with coffeescript.exe for windows, which is standalone and ready for use executable. For small scripts, you can also include the compiler directly in your page and write your code inline in a

The only div that the Filedrop interacts with, is #dropbox. We will pass this element to the plugin, which will detect when a file is dropped on top of it. The message span is updated if there is an error condition (for example if your browser does not support one of the HTML5 APIs that this example relies on).

HTML5 File Upload Center with PHP and jQuery

Later, when we drop a file, our jQuery code will display a preview by adding the following markup to the page:

This snippet contains a preview of the image (the source attribute is going to be populated with a DataURL of the picture) and a progress bar. The whole preview can have the “.done” class, which causes the “.uploaded” span to show up (it is hidden by default). This span has the green check mark as its background, and indicates the upload is complete.

Great, lets move on to our script.js file!

The jQuery Code

As all of the actual file transfer functionality is handled by the Filedrop plugin, we only need to call it and pass a few callbacks, so we can hook it to our Upload Center. We will be writing a small PHP script that handles the uploads on the server in the next section.

The first step is to write a helper function that takes a file object (a special object which is created by the web browser on file drop, and has properties like file name, path and size), and creates the markup for previewing the upload.

assets/js/script.js

var template = ''+
						''+
							''+
							''+
						''+
						''+
							''+
						''+
					''; 

	function createImage(file){

		var preview = $(template),
			image = $('img', preview);

		var reader = new FileReader();

		image.width = 100;
		image.height = 100;

		reader.onload = function(e){

			// e.target.result holds the DataURL which
			// can be used as a source of the image:

			image.attr('src',e.target.result);
		};

		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);

		message.hide();
		preview.appendTo(dropbox);

		// Associating a preview container
		// with the file, using jQuery's $.data():

		$.data(file,preview);
	}

The template variable holds the HTML5 markup of the preview. We get the DataURL of the image (a base64 encoded representation of the image bytes) and add it as the source of the image. Everything is then appended to the dropbox container. Now we are left with calling the filedrop plugin:

assets/js/script.js

$(function(){

	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);

	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname:'pic',

		maxfiles: 5,
    	maxfilesize: 2, // in mb
		url: 'post_file.php',

		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
		},

    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Your browser does not support HTML5 file uploads!');
					break;
				case 'TooManyFiles':
					alert('Too many files! Please select 5 at most!');
					break;
				case 'FileTooLarge':
					alert(file.name+' is too large! Please upload files up to 2mb.');
					break;
				default:
					break;
			}
		},

		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Only images are allowed!');

				// Returning false will cause the
				// file to be rejected
				return false;
			}
		},

		uploadStarted:function(i, file, len){
			createImage(file);
		},

		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}

	});

	var template = '...'; 

	function createImage(file){
		// ... see above ...
	}

	function showMessage(msg){
		message.html(msg);
	}

});

With this, every valid image file that is dropped on the #dropbox div gets uploaded to post_file.php, which you can see in the next section.

Upload Complete!

The PHP Code

On the PHP side of things, there is no difference between a regular form file upload and a drag and drop one. This means that you can easily provide a fallback solution to your application and reuse the same backend.

post_file.php

// If you want to ignore the uploaded files,
// set $demo_mode to true;

$demo_mode = false;
$upload_dir = 'uploads/';
$allowed_ext = array('jpg','jpeg','png','gif');

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Error! Wrong HTTP method!');
}

if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){

	$pic = $_FILES['pic'];

	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
	}	

	if($demo_mode){

		// File uploads are ignored. We only log them.

		$line = implode('		', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));
		file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);

		exit_status('Uploads are ignored in demo mode.');
	}

	// Move the uploaded file from the temporary
	// directory to the uploads folder:

	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('File was uploaded successfuly!');
	}

}

exit_status('Something went wrong with your upload!');

// Helper functions

function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}

The script runs some checks on the HTTP method that was used to request the page and the validity of the file extension. Demo mode is mainly for demo.tutorialzine.com, where I don’t want to store any file uploads (if you don’t call move_uploaded_file in your script, the file is deleted automatically at the end of the request).

Now lets make it pretty!

The CSS Styles

I left out the parts of the stylesheet that are not directly related to the uploads. You can see everything in styles.css.

assets/css/styles.css

/*-------------------------
	Dropbox Element
--------------------------*/

#dropbox{
	background:url('../img/background_tile_3.jpg');

	border-radius:3px;
	position: relative;
	margin:80px auto 90px;
	min-height: 290px;
	overflow: hidden;
	padding-bottom: 40px;
    width: 990px;

	box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

#dropbox .message{
	font-size: 11px;
    text-align: center;
    padding-top:160px;
    display: block;
}

#dropbox .message i{
	color:#ccc;
	font-size:10px;
}

#dropbox:before{
	border-radius:3px 3px 0 0;
}

/*-------------------------
	Image Previews
--------------------------*/

#dropbox .preview{
	width:245px;
	height: 215px;
	float:left;
	margin: 55px 0 0 60px;
	position: relative;
	text-align: center;
}

#dropbox .preview img{
	max-width: 240px;
	max-height:180px;
	border:3px solid #fff;
	display: block;

	box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
	display: inline-block;
	position:relative;
}

#dropbox .uploaded{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
	display: none;
}

#dropbox .preview.done .uploaded{
	display: block;
}

/*-------------------------
	Progress Bars
--------------------------*/

#dropbox .progressHolder{
	position: absolute;
	background-color:#252f38;
	height:12px;
	width:100%;
	left:0;
	bottom: 0;

	box-shadow:0 0 2px #000;
}

#dropbox .progress{
	background-color:#2586d0;
	position: absolute;
	height:100%;
	left:0;
	width:0;

	box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#dropbox .preview.done .progress{
	width:100% !important;
}

The .progress div is positioned absolutely. Changing its width (in percent) makes for a natural progress indicator. Throw in a 0.25 transition, and you have animated increments which would be a bit tricky to do with jQuery alone.

With this our HTML5 Upload Center is complete!

We’re done!

You can use this as a starting point for a file upload service, HTML5 gallery, file manager or your app’s new admin panel. Add your thoughts or suggestions in the comments.

Display your Favorite Tweets using PHP and jQuery

Martin Angelov — Fri, 05 Aug 2011 14:22:01 +0000

If you have a twitter account, you oftentimes find yourself looking for a way to display your latest tweets on your website or blog. This is pretty much a solved problem. There are jQuery plugins, PHP classes and tutorials that show you how to do this.

However, what happens if you only want to display certain tweets, that you have explicitly marked to show? As minimalistic twitter’s feature set is, it does provide a solution to this problem – favorites.

In this tutorial, we will be writing a PHP class that will fetch, cache, and display your favorite tweets in a beautiful CSS3 interface.

HTML

You can see the markup of the page that we will be using as a foundation below. The #container div will hold the tweets (which we will be generating in the PHP section of the tutorial).

index.php



    
        
        Display your Favorite Tweets using PHP and jQuery | Tutorialzine Demo

We will be using the splitLines plugin, which as its name suggest, will split the tweets into separate divs, one for each line of text. This is necessary as it is the only we can apply padding to the lines individually (as an illustration, view the demo with JS disabled). However, the demo will still keep most of its design without it.

As for the generation of the tweets, we will be creating a PHP class that will handle it for us. We will only need to call its generate method inside the #container div like this: $tweets->generate(5), which will show the 5 most recent liked tweets. This method will output an unordered list with tweets:

Tweet markup



	The text of the tweet goes here
	
		Tutorialzine

		19

		3 days ago

The text of the tweet will be held in a paragraph, with additional information available in the .info div. Now lets write the PHP class.

Display Your Favorite Tweets with jQuery and PHP

PHP

We will name our class FavoriteTweetsList. It will take a twitter username as a parameter, and expose a number of useful methods for fetching tweets and generating HTML markup.

The class will fetch the favorite tweets json feed, located at http://api.twitter.com/1/favorites/USERNAME.json (see Tutorialzine’s feed as an example). Additionally, it will include caching, so that a request is made only once every three hours, which will speed things up.

FavoriteTweetsList.class.php

class FavoriteTweetsList{
	private $username;
	const cache = "cache_tweets.ser";

	public function __construct($username){
		$this->username = $username;
	}

	/* The get method returns an array of tweet objects */

	public function get(){

		$cache = self::cache;
		$tweets = array();

		if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

			// Use the cache if it exists and is less than three hours old
			$tweets = unserialize(file_get_contents($cache));
		}
		else{

			// Otherwise rebuild it
			$tweets = json_decode($this->fetch_feed());
			file_put_contents($cache,serialize($tweets));
		}

		if(!$tweets){
			$tweets = array();
		}

		return $tweets;
	}

	/* The generate method takes an array of tweets and build the markup */

	public function generate($limit=10, $className = 'tweetFavList'){

		echo "";

		// Limiting the number of shown tweets
		$tweets = array_slice($this->get(),0,$limit);

		foreach($tweets as $t){

			$id			= $t->id_str;
			$text		= self::formatTweet($t->text);
			$time		= self::relativeTime($t->created_at);
			$username	= $t->user->screen_name;
			$retweets	= $t->retweet_count;

			?>

			
				
				
					
                    	                    	

					 0):?>
						
                    	                    	
					

					
                    	
				

                

            

            ";
	}

	/* Helper methods and static functions */

	private function fetch_feed(){
		return file_get_contents("http://api.twitter.com/1/favorites/{$this->username}.json");
	}

	private static function relativeTime($time){

		$divisions	= array(1,60,60,24,7,4.34,12);
		$names		= array('second','minute','hour','day','week','month','year');
		$time		= time() - strtotime($time);

		$name = "";

		if($time < 10){
			return "just now";
		}

		for($i=0; $i$1',
			$str
		);

		$str = preg_replace(
			'/(\s|^)@([\w\-]+)/',
			'$1@$2',
			$str
		);

		$str = preg_replace(
			'/(\s|^)#([\w\-]+)/',
			'$1#$2',
			$str
		);

		return $str;
	}
}

Of the methods above, generate() is the one that you will most likely be working with directly. It takes the number of tweets to be displayed, and an optional class parameter, that overrides the default class attribute of the unordered list.

Now that we have the FavoriteTweetsList class in place, we simply need to instantiate an object, passing it a twitter username, like this:

index.php

require "includes/FavoriteTweetsList.class.php";

$tweets = new FavoriteTweetsList('Tutorialzine');

Calling the $tweets->generate() will show that user’s latest faved tweets.

jQuery

As we are using the splitLines jQuery plugin, we already have most of the work done for us. We simply have to loop through the paragraph elements holding the text of the tweets, and call the plugin.

script.js

$(function(){
	var width = $('ul.tweetFavList p').outerWidth();

	// Looping through the p elements
	// and calling the splitLines plugin

	$('ul.tweetFavList p').each(function(){
		$(this).addClass('sliced').splitLines({width:width});
	});
});

This will split the contents of the paragraph into lines, each held in an individual div, which we can style.

CSS

First lets style the unordered list and the paragraph elements.

styles.css – 1

ul.tweetFavList{
	margin:0 auto;
	width:600px;
	list-style:none;
}

ul.tweetFavList p{
	background-color: #363636;
	color: #FFFFFF;
	display: inline;
	font-size: 28px;
	line-height: 2.25;
	padding: 10px;
}

/* Coloring the links differently */

ul.tweetFavList a.link		{ color:#aed080;}
ul.tweetFavList a.mention	{ color:#6fc6d9;}
ul.tweetFavList a.hash		{ color:#dd90e9;}

If you take a closer look at the formatTweet() static method in the PHP class, you will see that we are adding a class name for each type of hyperlink – a regular link, a mention or a hash, so we can style them differently.

When the page loads, jQuery adds sliced as a class to each paragraph. This class undoes some of the styling applied to the paragraphs by default as a fallback, so we can display the individual lines properly.

styles.css – 2

/* The sliced class is assigned by jQuery */

ul.tweetFavList p.sliced{
	background:none;
	display:block;
	padding:0;
	line-height:2;
}

/* Each div is a line generated by the splitLines plugin */

ul.tweetFavList li p div{
	background-color: #363636;
	box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
	display: inline-block;
	margin-bottom: 6px;
	padding: 0 10px;
	white-space: nowrap;
}

Next we will style the colorful information boxes that hold the author username, publish date and retweet count.

styles.css – 3

ul.tweetFavList .info{
	overflow: hidden;
	padding: 15px 0 5px;
}

/* The colorful info boxes */

ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
	float:left;
	padding:4px 8px;
	color:#fff !important;
	text-decoration:none;
	font-size:11px;
	box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}

ul.tweetFavList .user{
	background-color:#6fc6d9;
}

ul.tweetFavList .retweet{
	background-color:#dd90e9;
	cursor:default;
}

ul.tweetFavList .date{
	background-color:#aed080;
}

And finally we will style the divider. This is a single div, but thanks to :before/:after pseudo elements, we add two more circles to the left and to the right of it.

styles.css – 4

/* Styling the dotted divider */

ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
	background-color: #777777;
	border-radius: 50% 50% 50% 50%;
	height: 12px;
	margin: 60px auto 80px;
	width: 12px;
	position:relative;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
	margin:0;
	position:absolute;
	content:'';
	top:0;
	left:-40px;
}

ul.tweetFavList .divider:after{
	left:auto;
	right:-40px;
}

ul.tweetFavList li:last-child .divider{
	display:none;
}

With this our favorited tweet list is complete!

Done

This example can be used to build a simple testimonials section, or to highlight tweets that you think your readers would find worthy. You can even see it implemented on the sidebar of this very site.

Bubble Slideshow Effect with jQuery

Martin Angelov — Thu, 28 Jul 2011 19:41:06 +0000

Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.

The HTML

The slideshow effect we will be creating today, will take the form of an easy to use jQuery plugin. As most of the work is done by the plugin, there isn’t much to do in this section. However, to use the plugin you need to add an unordered list on your page. The individual slides of the slideshow will be added as LI elements.

index.html



    
        
        Bubble Slideshow Effect with jQuery | Tutorialzine Demo

To be able to use the plugin, you will need to include jquery.bubbleSlideshow.css in the head of the page, bgpos.js and jquery.bubbleSlideshow.js before the closing body tag. bgpos.js is a jQuery CSS hooks plugin that will allow us to animate the background-position property (needed in the bubble animation), and jquery.bubbleSlideshow.js holds the code we will be writing today. Also remember to include the jQuery library as well.

You can see a simple explanation of the bubble effect below.

The Bubble Effect Explained

JavaScript and jQuery

First we will write a JavaScript class named Bubble. Every bubble in the slideshow is going to be an object of this class. It will have properties such as top and left (position offsets), size (diameter of the circle) and an elem property, which is a jQuery object containing the actual div. We will use this property later when we animate the bubble in the flyFrom() method.

jquery.bubbleSlideshow.js

	// This is the Bubble class. It takes left and top
	// coordinates, size (diameter) and a image URL

	function Bubble( left, top, size, imgURL ){

		this.top	= top;
		this.left	= left;
		this.size	= size;

		// This places the center of the
		// circles on the specified position:

		top -= size/2;
		left-= size/2;

		this.elem = $('',{
			'class':'bubble',
			'css'	: {
				'width'		: size,
				'height'	: size,
				'top'		: top,
				'left'		: left,
				'background-position': (-left)+'px '+(-top)+'px',
				'background-image': 'url('+imgURL+')'
			}
		});

	}

	// The fly from method takes a starting position, time,
	// and a callback function, executed when the animation finishes.

	Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){

		time = time || 250;
		callBack = callBack || function(){};

		startX -= this.size/2;
		startY -= this.size/2;

		// Offsetting the element

		this.elem.css({
			'display'				: 'block',
			'backgroundPositionX'	: -startX,
			'backgroundPositionY'	: -startY,
			'left'					: startX,
			'top'					: startY
		});

		// Animating it to where it should be

		this.elem.animate({
			'backgroundPositionX'	: -this.left,
			'backgroundPositionY'	: -this.top,
			'left'					: this.left,
			'top'					: this.top
		}, time, 'easeOutCirc', callBack );

	};

	// Helper function for generating random
	// values in the [min,max] range

	function rand( min, max ){
		return Math.floor( Math.random()*((max+1)-min) + min);
	}

The flyFrom() method takes a set of coordinates, that determine the position the bubble flies in from. It still ends up in the position that you specify when creating it. This method is defined on the Bubble function’s prototype, which automatically makes it available to all its instances. This is a more effective approach, as only one copy of this method exists at a time, instead of a copy of this method for each object. Also, notice the rand() function defined at the bottom of the fragment. It mimics the PHP function of the same name and is used throughout the plugin code.

Now that we have the class in place, lets write a function that creates an array with bubble objects, appends them to a new LI element, and animates them. The function takes three parameters:

stage, which is a jQuery object that holds a UL element. This will hold the slideshow, with each slide being an individual LI;
imgURL is the URL of the image that will be shown in the bubbles;
func is a callback function that will be called once all bubble animations are complete. This is used to switch the slides and destroy the bubbles, as they will not be needed after the transition to the new slide is complete;

As you guessed, for every slide transition, a new random set of bubbles is created, and destroyed after the next slide is made visible.

Bubble Slideshow Effect

jquery.bubbleSlideshow.js

	function showBubbles( stage, imgURL, func ){

		// This function appends a new LI element to the UL
		// and uses it to hold and animate the bubbles.

		var i = 0,
			bubbles = [],
			totalBubbles = 75,
			stageWidth = stage.outerWidth(),
			stageHeight = stage.outerHeight(),
			emptyFunc = function(){};

		// This li holds the bubbles
		var li = $('').appendTo(stage);

		// This function is passed to the flyFrom method call:

		var callBack = function(){

			// Waiting for the func function to
			// finish and removing the li.

			$.when(func()).then(function(){
				li.remove();
			});
		};

		for( i=0; i b2.top+b2.size/2;
		});

		// Looping through all the bubbles,
		// and triggering their flyFrom methods

		for( i=0; i
Great! So now we have a function that creates a set of bubbles in a new LI element and animates them. But these are only functions, they are not a plugin yet, so we will have to work on that. Also we are still missing the slides themselves. Lets write the missing pieces:
jquery.bubbleSlideshow.js
$.fn.bubbleSlideshow = function(photos){

		if(!$.isArray(photos)){
			throw new Error("You need to pass an array of photo URLs as a parameter!");
		}

		photos = photos.reverse();

		var ul = this.addClass('bubbleSlideshow');

		$.each(photos,function(){
			ul.append('');
		});

		// These methods are available externally and
		// can be used to control the bubble slideshow

		ul.showNext = function(){
			showNext(ul);
		};

		ul.showPrev = function(){
			showPrev(ul);
		};

		ul.autoAdvance = function(timeout){
			timeout = timeout || 6000;
			autoAdvance(ul,timeout);
		};

		ul.stopAutoAdvance = function(){
			stopAutoAdvance(ul);
		};

		return ul;
	};
The code above defines a new plugin called bubbleSlideshow(). It should be called on a UL element and takes an array of photo URLs as its parameter. These are added to the UL.
Inside its body, the plugin creates a new LI element for each of the photos in the array, and adds showNext, showPrev, autoAdvance and stopAutoAdvance methods to the UL. These wrap around local functions with the same names, which you can see below:
jquery.bubbleSlideshow.js
	function autoAdvance(stage,timeout){
		stage.data('timeout',setTimeout(function(){
			showNext(stage);
			autoAdvance(stage,timeout);
		},timeout));
	}

	function stopAutoAdvance(stage){
		clearTimeout(stage.data('timeout'));
	}

	function showNext(stage){
		showFrame(stage, stage.find('li.bubbleImageFrame').first());
	}

	function showPrev(stage){
		showFrame(stage, stage.find('li.bubbleImageFrame').last().prev());
	}

	function showFrame(stage, frame ){

		// This function shows a frame,
		// passed as a jQuery object

		if(stage.data('working')){
			// Prevents starting more than
			// one animation at a time:
			return false;
		}
		stage.data('working',true);

		var frame = frame.hide().detach();

		// Using the showBubbles function, defined below.
		// The frame is showed after the bubble animation is over.

		showBubbles( stage, frame.find('img').attr('src'), function(){
			stage.append(frame);
			stage.data('working',false);

			// This returns a jQuery Promise object.
			return frame.fadeIn('slow');
		});		

	}
I used “local” to describe these functions, because they are not available from outside the plugin. The showNext and showPrev functions above both call showFrame, passing it the UL and the LI slide that is to be shown. showFrame makes sure that there is only one animation running at a time, and calls the showBubbles function we already wrote.
The callback function that is passed along with the method call, displays the slide you want to show above all the others by appending it last in the UL (the slides are absolutely positioned, which means that the last element in the UL is shown on top). This function is called once the bubble animation completes.
Here is how you initialize the bubble slideshow:
script.js
$(function(){
	var photos = [
		'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
		'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
		'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
		'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
		'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
		'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
	];

	var slideshow = $('#slideShow').bubbleSlideshow(photos);

	$(window).load(function(){
		slideshow.autoAdvance(5000);
	});

	// Other valid method calls:

	// slideshow.showNext();
	// slideshow.showPrev();
	// slideshow.stopAutoAdvance();
});
All that is left is to define a few CSS rules that add properties such positioning, overflows and background-positions:
jquery.bubbleSlideshow.css
ul.bubbleSlideshow{
	position:relative;
	list-style:none;
	overflow:hidden;
}

.bubbleSlideshow li{
	position:absolute;
	top:0;
	left:0;
}

.bubbleSlideshow li img{
	display:block;
}

.bubbleSlideshow li div.bubble{
	-moz-border-radius:50%;
	-webkit-border-raidus:50%;
	border-radius:50%;

	background-repeat:no-repeat;
	display:none;
	position:absolute;
}
With this the bubble effect slideshow is complete!
Final words
The effect we made today may not be limited only to slideshows. It can be used to build unique website backgrounds, headers and presentations. The plugin is built to automatically resize to fit the UL, so you can easily change its size by tweaking a few CSS properties.

Having Fun With CSS3: Spinning Newspapers

Martin Angelov — Thu, 21 Jul 2011 18:11:40 +0000

Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.

What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist.

So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.

The Idea

Using JavaScript, we will load a sliced up version of the newspaper (slices are independently encoded as PNG or JPG for smaller filesize), and combine them in a single canvas element. We will also load a custom font from Google WebFonts, which we use to write the article title to the canvas.

We also define a simple CSS3 keyframe animation, which uses transformations such as scale() and rotate() to animate the canvas elements. Appending the canvas to the page triggers the animation, which means we don’t need to write a single line of JavaScript for the effect itself.

Currently, CSS3 keyframe animations are supported by Firefox, Safari and Chrome, so if you are using a recent version of one of these browsers, you will be able to enjoy the demo.

Here are some minor considerations that drove the decisions above:

The image of the newspaper, encoded as PNG, weighs at over 250kb. Slicing it into independently encoded slices saves 200kb, as the center part does need transparency and is encoded as JPEG;
Rotating a bunch of DOM elements is slower than a single canvas element. Also, rotated text in the browser generally does not look very good, as letters may lose their anti-aliasing (see a simple experiment here; it is most pronounced in Firefox). Painting the text and the newspaper background to a canvas element solves both of these problems;

The Sliced Newspaper Background

The HTML

The markup of the page is minimal – everything is done using jQuery, so we only need to include our JS source files and stylesheets.

index.html



    
        
        Spinning Newspaper Effect | Tutorialzine Demo

        
        

		
        

        
    

    

		That is all

		
		.

In the head section, we include our styles.css file (discussed below) and a stylsheet, which embeds the Anton font from Google WebFonts. Near the end of the file, we include version 1.6.2 of the jQuery library and our script.js (discussed in detail later on).

The most important piece of markup in the code is also the most unassuming. The #fontPreload div is crucial for this example. What it does is use the embedded Anton web font. This is required so that browsers properly initializes the font before it is used in the canvas. Without it we would be staring at a blank newspaper cover.

Spinning Newspaper Effect with CSS3 Animations

The jQuery

As we are using a custom web font, we need to be sure that the font is loaded before we use it to generate the newspaper titles. This is why we are binding a callback to the $(window).load() event, which is called once everything is loaded:

assets/js/script.js

$(window).load(function(){

	var imgPath = "assets/img/";

	// Define 6 paper covers:

	var papers = [
		{
			line1:"The financial",
			line2:"chrisis is a hoax!",
			subtitle:"Economist admits practical joke"
		}, {
			line1:"Deeply fried now",
			line2:"considered healthy",
			subtitle:"Scientists change the definition of \"Healthy\""
		}, {
			line1:"Apple announces",
			line2:"the new iphone 9",
			subtitle:"5, 6, 7 and 8 deemed \"not hip enough\""
		}, {
			line1:"The world did end",
			line2:"on may 21st!",
			subtitle:"Priest argues we are actually dead"
		}, {
			line1:"France imposes an",
			line2:"internet kitten tax",
			subtitle:"Every cat picture on the internet will cost 3 €"
		}, {
			line1:"Thank you &",
			line2:"goodbye",
			subtitle:"The Zine Weekly takes its farewell"
		}
	];

	// Check whether canvas and CSS3 animations are supported:

	if(!$.support.canvas){
		$('#fin').html('Sorry, your browser does not
support <canvas>').show();
		return;
	}

	if(!$.support.css3Animation){
		$('#fin').html('Sorry, your browser does not
support CSS3 Animations').show();
		return;
	}

	// Use jQuery.Deferred to bind a callback when all
	// the images that comprise the paper are loaded:

	$.when(

		loadImage(imgPath+"paper_top.png"),
		loadImage(imgPath+"paper_left.png"),
		loadImage(imgPath+"paper_center.jpg"),
		loadImage(imgPath+"paper_right.png"),
		loadImage(imgPath+"paper_bottom.png")

	).then(function( imgTop, imgLeft, imgCenter, imgRight, imgBottom ){

		// Loop through the paper covers and
		// create a new canvas for each one:

		$.each(papers,function(i){

			var canvas	= document.createElement("canvas"),
				c		= canvas.getContext("2d");

			canvas.width = 717;
			canvas.height = 526;

			// Drawing the paper background slices:

			c.drawImage( imgTop, 0, 0 );
			c.drawImage( imgLeft, 0, 12 );
			c.drawImage( imgCenter, 14, 12 );
			c.drawImage( imgRight, 711, 12 );
			c.drawImage( imgBottom, 0, 516 );

			// Drawing the text using our helper
			// function (see at the bottom):

			drawText( this.line1, this.line2, this.subtitle, c, 358, 250 );

			// Appending the element to the page.
			// This triggers the CSS3 animation.

			setTimeout(function(){
				$("body").append(canvas);
			},i*5800);

		});

		// "This is all"
		$('#fin').delay(papers.length*5800).fadeIn();
	});

	/*------------------------
		Helper functions
	------------------------*/

	// Load an image by URL and resolve a jQuery.Deferred:

	function loadImage(src){

		var def = new $.Deferred(),
			img = new Image();

		img.onload = function(){

			//	Resolve the deferred. The img parameter
			//	will be available in the then function:

			def.resolve(img);
		}

		// Always set the src attribute
		// after the onload callback:

		img.src = src;

		return def.promise();
	}

	// Draw two lines of text and a subtitle
	// on the canvas (passed as the c param):

	function drawText( line1, line2, subtitle, c, x, y ){

		c.font = "65px Anton,Calibri";
		c.textAlign = "center";
		c.fillStyle = "#3e3e3e";

		c.fillText(line1.toUpperCase(),x,y);
		c.fillText(line2.toUpperCase(),x,y+80);

		c.font = "italic 20px Georgia,serif";
		c.fillStyle = "#737373";

		c.fillText(subtitle,x,y+120);
	}
});

(function(){

	// Adding custom checks for canvas and css3
	// animations support, to the jQuery.support object:

	$.support.canvas = 'getContext' in document.createElement('canvas');

	$.support.css3Animation = (function(){
		var sp = $('');

		return (
			sp.css("-webkit-animation") !== undefined	||
			sp.css("-moz-animation") !== undefined		||
			sp.css("animation") !== undefined
		);

	})();
})();

To generate the newspapers, we need to first load the five slices that comprise the image. This sounds like the perfect place to use jQuery’s Deferred object, introduced in version 1.5. What it does is to notify us when a number of asynchronous events are completed. As you can see in the code above, we are using it in the loadImage() function. The then() method on line 58 is called only when all five images are loaded.

Using jQuery.Deferred is a convenient way to organize our code better. It is also used by jQuery’s internal AJAX and animation methods. To get a better idea of what you can do with it, read through the deferred object documentation.

Inside the $.each loop, we create a canvas element for each of the paper covers, and add them to the page after a delay introduced by the setTimeout() call.

Once we have the canvas on the page, we can continue with animating it.

The CSS

Canvas elements are treated as any other element. This means that you can safely style and transform them the same way as you would a regular image.

Once the canvas is added to the page, it will assume the styling you see below:

canvas{
	position:fixed;
	width:717px;
	height:526px;

	top:50%;
	left:50%;

	margin:-263px 0 0 -358px;
	opacity:0;

	/* Configure the animation for Firefox */
	-moz-animation-duration:6s;
	-moz-animation-name:spin;
	-moz-animation-timing-function:linear;

	/* Configure it for Chrome and Safari */
	-webkit-animation-duration:6s;
	-webkit-animation-name:spin;
	-webkit-animation-timing-function:linear;
}

Nothing out of the ordinary here. We are centering the canvas in the page, and defining the different aspects of the animation like duration, name, and a timing function. “Linear” would make our animation run at a constant speed, instead of getting accelerated as is the case with “ease”, which is used by default.

After this, we have to use the @keyframes declaration to specify how our element would look at different key points during the animation:

@-moz-keyframes spin{
	0%{
		opacity:0.2;
		-moz-transform:scale(0.2) rotate(0deg);
	}

	15%{
		opacity:1;
		margin:-263px 0 0 -358px;
		-moz-transform:scale(1) rotate(1090deg);
	}

	90%{
		opacity:1;
		top:50%;
		-moz-transform:scale(1) rotate(1090deg);
	}

	100%{
		top:500%;
		opacity:1;
		-moz-transform:scale(1) rotate(1090deg);
	}
}

When the canvas element is added to the page, we start off from the 0% position above. The element’s opacity is set to 0.2, and it is made 5 times smaller using a scale() transformation. It is quickly animated to its full size ( scale(1) ) in and from 15% to 90% of the animation (or about four and a half seconds) it stays fixed on the screen, after which it quickly falls outside the bottom border of the window (top is increased to 500%).

It is important to specify the properties that you want to persist in every percentage point of the animation. One example is the -moz-transform:scale(1) rotate(1090deg) declaration, which is duplicated three times. Without it, Chrome and Safari (but not Firefox) will revert to the default rotation of 0 degrees mid animation.

And, as this is still considered an experimental feature by browser vendors, we need to write the same code for webkit:

@-webkit-keyframes spin{
	0%{
		opacity:0.2;
		-webkit-transform:scale(0.2) rotate(0deg);
	}
	15%{
		opacity:1;
		margin:-263px 0 0 -358px;
		-webkit-transform:scale(1) rotate(1090deg);
	}
	90%{
		opacity:1;
		top:50%;
		-webkit-transform:scale(1) rotate(1090deg);
	}

	100%{
		top:500%;
		opacity:1;
		-webkit-transform:scale(1) rotate(1090deg);
	}
}

With this our spinning newspaper effect is complete!

Conclusion

As with any cop drama from the 1930s, and the 1930s themselves for that matter, this tutorial has to come to an end. Hope you folks had as much fun following the tutorial as I had writing it. If you have any thoughts or suggestion be sure to share in the comment section. You can also download a PSD with the newspaper template, so you can make your own, below.

Creating a PHP and CSS3 Powered About Page

Martin Angelov — Tue, 12 Jul 2011 19:46:46 +0000

In this tutorial, we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications).

You can use today’s example as a placeholder for your upcoming personal website, or as an actual about page.

HTML

As always, the first step is to write the HTML markup that will be powering our example. This is a simple page the main purpose of which is to present our contact details semantically. This will require adding appropriate meta tags and using the hCard microformat to embed data in the page.

index.php



    
        
        

        Creating a PHP and CSS Powered About Page  | Tutorialzine Demo

        
        

        
    

    

		

    		photoURL()?>" alt="fullName()?>" width="164" height="164" />

            
                fullName()?>
                tags()?>
            

            description())?>

            Find me on Facebook
            Follow me on Twitter

            
                fullName()?>
                company()?>
                cellphone()?>
                website()?>
            

		

        
        	Download as V-Card
            Get as a JSON feed
            In this tutorial: Self Portrait by Levy Carneiro Jr

The $profile variable you see above, holds an object of the AboutPage PHP class that we will be writing in a moment. It holds our contact details and provides a number of useful methods for generating JSON and vCard files.

As mentioned above, we are using the hCard microformat to embed contact details in the page. This is a simple standard with which we use the class names of regular HTML elements to specify data, easily recognizable by search engines. The hCard holds information about our full name, organization, phone and home page:


    fullName()?>
    company()?>
    cellphone()?>
    website()?>

You can also optionally specify a home / work address and other kinds of useful information.

PHP & CSS3 Powered About Page

PHP

One of the points of using a server side language is that we can leave some aspects of the page to be generated on the fly. This frees us from having to manually keep various parts of the page up to date.

In the case with our about page, we have a simple configuration file, which holds the data, used by the page. This same resource is used for the generation of the vCard file and the JSON feed.

config.php

$info = array(
	'firstName'		=> 'John',
	'middleName'	=> 'S.',
	'lastName'		=> 'Smith',
	'photoURL'		=> 'assets/img/photo.jpg',
	'birthDay'		=> strtotime('22-03-1983'),
	'city'			=> 'MyCity',
	'country'		=> 'United States',
	'street'		=> 'My Street 21',
	'zip'			=> '12345',
	'company'		=> 'Google Inc',
	'website'		=> 'http://tutorialzine.com/',
	'email'			=> 'email@example.com',
	'cellphone'		=> '12345678910',
	'description'	=> "I am a webdeveloper living in ...",
	'tags'			=> 'Developer, Designer, Photographer',
	'facebook'		=> 'http://www.facebook.com/',
	'twitter'		=> 'http://twitter.com/Tutorialzine'
);

Not all of these properties are presented on the about page. Some of them (like the address fields, company, email and birthday) are only made available when the user downloads the profile as a vCard or as a JSON file. You can also add quite a few more properties to this array (a complete list is given as a comment in the config.php file).

So now that we have provided all the information we wanted, we need to build a class that will handle the task of presenting a complete about page.

aboutPage.class.php

class AboutPage{
	private $info = array();

	// The constructor:

	public function __construct(array $info){
		$this->info = $info;
	}

	// A helper method that assembles the person's full name:

	public function fullName(){
		return $this->firstName().' '.$this->middleName().' '.$this->lastName();
	}

	// Using PHP's Magick __call method to make the
	// properties of $this->info available as method calls:

	public function __call($method,$args = array()){

		if(!array_key_exists($method,$this->info)){
			throw new Exception('Such a method does not exist!');
		}

		if(!empty($args)){
			$this->info[$method] = $args[0];
		}
		else{
			return $this->info[$method];
		}
	}

	// This method generates a vcard from the $info
	// array, using the third party vCard class:

	public function downloadVcard(){

		$vcard = new vCard;

		$methodCalls = array();

		// Translating the properties of $info to method calls
		// understandable by the third party vCard class:

		$propertyMap = array(
			'firstName'		=> 'setFirstName',
			'middleName'	=> 'setMiddleName',
			'lastName'		=> 'setLastName',
			'birthDay'		=> 'setBirthday',
			'city'			=> 'setHomeCity',
			'zip'			=> 'setHomeZIP',
			'country'		=> 'setHomeCountry',
			'website'		=> 'setURLWork',
			'email'			=> 'setEMail',
			'description'	=> 'setNote',
			'cellphone'		=> 'setCellphone');

		// Looping though the properties in $info:

		foreach($this->info as $k=>$v){

			// Mapping a property of the array to a recognized method:

			if($propertyMap[$k]){
				$methodCalls[$propertyMap[$k]] = $v;
			}
			else {

				// If it does not exist, transform it to setPropertyName,
				// which might be recognized by the vCard class:

				$methodCalls['set'.ucfirst($k)] = $v;
			}
		}

		// Attempt to call these methods:

		foreach($methodCalls as $k=>$v){
			if(method_exists($vcard,$k)){
				$vcard->$k($v);
			}
			else error_log('Invalid property in your $info array: '.$k);
		}

		// Serving the vcard with a x-vcard Mime type:

		header('Content-Type: text/x-vcard; charset=utf-8');
		header('Content-Disposition: attachment; filename="'.$this->fullName().'.vcf"');
		echo $vcard->generateCardOutput();
	}

	// This method generates and serves a JSON object from the data:

	public function generateJSON(){
		header('Content-Type: application/json');
		header('Content-Disposition: attachment; filename="'.$this->fullName().'.json"');

		// If you wish to allow cross-domain AJAX requests, uncomment the following line:
		// header('Access-Control-Allow-Origin: *');

		echo json_encode($this->info);
	}
}

As you can see from the code below, we are using a third party open source class for the actual generation of the vCard file (vcf). As this class uses its own set of method calls, we will need to transform our configuration file to something that it will understand. We are doing this with the $propertyMap array which maps properties found in our $info array to the names of method calls that will need to be executed on the vCard object. After we configure the $vcard object, we set the content headers and call the object’s generateCardOutput() method. This causes the browser to display a file download dialog.

We are doing basically the same thing in the generateJSON method, with the worthy exception that we are not using a third party PHP class, but the json_encode() built-in. We are serving the JSON file with an application/json content type. You can also uncomment the access control header if you wish to be able to access your data via AJAX from other domains.

Now lets see how we are using this class in index.php:

index.php

require 'includes/config.php';
require 'includes/aboutPage.class.php';
require 'includes/vcard.class.php';

$profile = new AboutPage($info);

if(array_key_exists('json',$_GET)){
	$profile->generateJSON();
	exit;
}
else if(array_key_exists('vcard',$_GET)){
	$profile->downloadVcard();
	exit;
}

The fragment you see above is found at the top of index.php, before any of the HTML, as we have to be able to set headers. After including the appropriate PHP source files, we create a new AboutPage object with the configuration array as its parameter. After this we check whether the requested URL is ?json or ?vcard, and serve the appropriate data. Otherwise, the regular about page is displayed.

CSS

Most of the design of the about page is pretty straightforward. However, a fair share of CSS3 is used to keep the number of images to a minimum. The two buttons – Find me on facebook, and Follow me on twitter, that are positioned below the text, are ordinary hyperlinks with a .grayButton class name. You can see the definition of this class below:

assets/css/styles.css

a.grayButton{
	padding:6px 12px 6px 30px;
	position:relative;

	background-color:#fcfcfc;
	background:-moz-linear-gradient(left top -90deg, #fff, #ccc);
	background:-webkit-linear-gradient(left top -90deg, #fff, #ccc);
	background:linear-gradient(left top -90deg, #fff, #ccc);

	-moz-box-shadow: 1px 1px 1px #333;
	-webkit-box-shadow: 1px 1px 1px #333;
	box-shadow: 1px 1px 1px #333;

	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;

	font-size:11px;
	color:#444;
	text-shadow:1px 1px 0 #fff;
	display:inline-block;
	margin-right:10px;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	transition:0.25s;
}

a.grayButton:hover{
	text-decoration:none !important;
	box-shadow:0 0 5px #2b99ff;
}

a.grayButton:before{
	background:url('../img/icons.png') no-repeat;
	height: 18px;
	left: 4px;
	position: absolute;
	top: 6px;
	width: 20px;
	content: '';
}

a.grayButton.twitter:before{
	background-position:0 -20px;
}

The code above applies a CSS3 linear gradient to the button, text shadows and rounded corners. It also defines a 0.25 sec transition, that animates the glow that is applied on hover. We are also using the :before pseudo element to create the icon that goes with the button. As we are using a sprite, the only thing that differs between the two buttons is the offset of the background image.

After this we have the “Download as vCard” and “Get as a JSON file” links:

assets/css/styles.css

#links{
	text-align:center;
	padding-top: 20px;
	border-top:1px solid #4a4a4a;
	text-shadow: 1px 1px 0 #333333;
	width:655px;
	margin:0 auto;
}

#links a{
	color: #ccc;
	position:relative;
}

#links > a{
	display: inline-block;
	font-size: 11px;
	margin: 0 10px;
	padding-left:15px;
}

#links > a:before{
	background: url("../img/icons.png") no-repeat -10px -60px;
	position:absolute;
	content:'';
	width:16px;
	height:16px;
	top:2px;
	left:-4px;
}

#links > a.vcard:before{
	background-position: -10px -40px;
	top: 0;
	left: -8px;
}

#links p{
	color: #888888;
	font-size: 10px;
	font-style: normal;
	padding: 30px;
}

As the #links section element contains more than these links (it contains a paragraph with a link to a great portrait image by Levy Carneiro Jr.) , we have to limit the styling to the anchor elements that are direct children of the section.

With this our PHP & CSS3 powered about page is complete!

To Wrap it up

You can use this about page as a simple placeholder for your personal website. You can also use an existing users database and create beautiful profiles for your users. Combined with some of our previous tutorials, you can display your latest posts on facebook, flickr images or tweets as a personalized home page.

Making a Beautiful HTML5 Portfolio

Martin Angelov — Fri, 17 Jun 2011 13:06:43 +0000

In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

The HTML

The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag:

index.html



    
        

        Making a Beautiful HTML5 Portfolio | Tutorialzine Demo

        
        

		
        
    

    

        
            My Portfolio

In the body, there are a number of the new HTML5 elements. The header holds our h1 heading (which is styled as the logo), the section element holds the unordered list with the portfolio items (more lists are added by jQuery, as you will see later), and the nav element, styled as a green bar, acts as a content filter.

The #stage unordered list holds our portfolio items. You can see what these items should look like below. Each of them has a HTML5 data attribute, which defines a series of comma-separated tags. Later, when we use jQuery to loop through this list, we will record the tags and create categories that can be selected from the green bar.

You can put whatever you want in these li items and customize the portfolio further. The Quicksand plugin will handle the animated transitions of this list, so you are free to experiment.

Beautiful HTML5 Portfolio with jQuery

The jQuery

What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. The jQuery script we will be writing in this section, will loop through the portfolio items in the #stage list, and create a new (hidden) unordered list for each of the tags it finds. It will also create a new menu option, which will trigger the quicksand transition between the two lists.

First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags.

script.js – Part 1

$(document).ready(function(){

	var items = $('#stage li'),
		itemsByTags = {};

	// Looping though all the li items:

	items.each(function(i){
		var elem = $(this),
			tags = elem.data('tags').split(',');

		// Adding a data-id attribute. Required by the Quicksand plugin:
		elem.attr('data-id',i);

		$.each(tags,function(key,value){

			// Removing extra whitespace:
			value = $.trim(value);

			if(!(value in itemsByTags)){
				// Create an empty array to hold this item:
				itemsByTags[value] = [];
			}

			// Each item is added to one array per tag:
			itemsByTags[value].push(elem);
		});

	});

Each tag is added to the itemsByTags object as an array. This would mean that itemsByTags['Web Design'] would hold an array with all the items that have Web Design as one of their tags. We will use this object to create hidden unordered lists on the page for quicksand.

It would be best to create a helper function that will handle it for us:

script.js – Part 2

function createList(text,items){

	// This is a helper function that takes the
	// text of a menu button and array of li items

	// Creating an empty unordered list:
	var ul = $('',{'class':'hidden'});

	$.each(items,function(){
		// Creating a copy of each li item
		// and adding it to the list:

		$(this).clone().appendTo(ul);
	});

	ul.appendTo('#container');

	// Creating a menu item. The unordered list is added
	// as a data parameter (available via .data('list')):

	var a = $('',{
		html: text,
		href:'#',
		data: {list:ul}
	}).appendTo('#filter');
}

This function takes the name of the group and an array with LI items as parameters. It then clones these items into a new UL and adds a link in the green bar.

Now we have to loop through all the groups and call the above function, and also listen for clicks on the menu items.

script.js – Part 3

// Creating the "Everything" option in the menu:
createList('Everything',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
	createList(k,v);
});

$('#filter a').live('click',function(e){
	var link = $(this);

	link.addClass('active').siblings().removeClass('active');

	// Using the Quicksand plugin to animate the li items.
	// It uses data('list') defined by our createList function:

	$('#stage').quicksand(link.data('list').find('li'));
	e.preventDefault();
});

// Selecting the first menu item by default:
$('#filter a:first').click();

Great! Now that we have everything in place we can move on to styling the page.

The CSS

Styling the page itself is not that interesting (you can see the CSS for this in assets/css/styles.css). However what is more interesting is the green bar (or the #filter bar), which uses the :before / :after pseudo elements to add attractive corners on the sides of the bar. As these are positioned absolutely, they also grow together with the bar.

styles.css

#filter {
	background: url("../img/bar.png") repeat-x 0 -94px;
	display: block;
	height: 39px;
	margin: 55px auto;
	position: relative;
	width: 600px;
	text-align:center;

	-moz-box-shadow:0 4px 4px #000;
	-webkit-box-shadow:0 4px 4px #000;
	box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
	background: url("../img/bar.png") no-repeat;
	height: 43px;
	position: absolute;
	top: 0;
	width: 78px;
	content: '';

	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
	box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
	background-position: 0 -47px;
	left: -78px;
}

#filter:after {
	background-position: 0 0;
	right: -78px;
}

#filter a{
	color: #FFFFFF;
	display: inline-block;
	height: 39px;
	line-height: 37px;
	padding: 0 15px;
	text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
	text-decoration:none;
}

#filter a.active{
	background: url("../img/bar.png") repeat-x 0 -138px;
	box-shadow:	1px 0 0 rgba(255, 255, 255, 0.2),
				-1px 0 0 rgba(255, 255, 255, 0.2),
				1px 0 1px rgba(0,0,0,0.2) inset,
				-1px 0 1px rgba(0,0,0,0.2) inset;
}

Before / After Elements

With this our beautiful HTML5 portfolio is complete!

Conclusion

You can use this template to present your work. The best thing about it is that it’s really easy to customize. You only need to change the contents of the initial LI items of the #stage list, and specify some new tags – the script will do the rest. If the visitor doesn’t have JavaScript enabled, they will still see all your portfolio items, which is also good for SEO purposes.