One of the benefits to having new browser versions out every six weeks, is the rapid pace with which new functionality is introduced. The transition from nightly builds to official releases is merely weeks away. This means that even those of you who keep a close eye on the feature lists might miss an api or two.

This is the case with the Full Screen API. As if overnight, it went from a neat experiment to a feature supported by more than half of the browsers in the wild. Right now you might be wondering how is this different from the regular full screen we’ve had for ages.

What you need to know

With this api, you can display not only entire pages full screen, but individual elements within them as well (something you can’t do with the regular full screen). The intent here is to allow for full screen HTML5 videos and games, so that we can finally declare HTML5 as a viable alternative to Flash.

In short, here is what you need to know about the FullScreen API:

• Works in Firefox 10, Safari and Chrome;
• You trigger it using the new requestFullScreen() method;
• It can display any element full screen, not only the entire page;
• For security reasons, full screen can only be triggered from an event handler (as to be user initiated);
• Also for security, Safari blocks all keyboard input except for the arrows and control keys, other browsers show warning messages when typing;
• The API is still a work in progress, so you have to use the vendor specific methods (prefixed with moz and webkit);

The idea of allowing developers to programatically take up the user screen doesn’t come without serious security implications, which is why keyboard usage is limited. Of course, there are many legitimate uses for keyboard input in full screen, which is going to be addressed in future revisions of the API via some kind of permission prompt.

However, even in its current, limited form, the API still gives us an opportunity to enhance the experience of the end user.

Click to go Full Screen

The basics

According to the W3 draft, we have access to a number of methods and properties that will aid us with the task of switching an element to full screen.

var elem = document.getElementById('#content');

// Make this element full screen asynchronously
elem.requestFullscreen();

// When a full screen change is detected,
// an event will be dispatched on the document

document.addEventListener("fullscreenchange",function(){
    // Check if we are in full screen
    if(document.fullscreen)){
        // We are now in full screen!
    }
    else{
        // We have exited full screen mode
    }

}, false);

// We can also exit the full screen mode with code

document.exitFullscreen();

At this time, however, dealing with the API is quite more cumbersome, as no browser has support for these methods yet – we will need to use vendor specific ones like elem.mozRequestFullScreen() and elem.webkitRequestFullScreen().

The API also introduces a new CSS pseudo-selector that you can use to style the full screen element.

#content:fullscreen {
    font-size: 18;
}

Of course, it goes without saying that you will also need to supply moz and webkit prefixed versions of this as well. But there is an easier solution.

The jQuery plugin

There is a more elegant solution than ending up with a bunch of ugly code checking for every browser. You can use the jQuery FullScreen plugin, which works around various browser differences and gives you a simple method for triggering full screen mode.

$('#fsButton').click(function(e){
    // Use the plugin
    $('#content').fullScreen();
    e.preventDefault();
});

This will bring the #content element full screen. The plugin also adds a flag to the jQuery support object, so you can conditionally show your full screen button or trigger:

if($.support.fullscreen){
    // Show the full screen button
    $('#fsButton').show();
}

To exit the mode, call the fullScreen() method again.

The plugin adds the .fullScreen class to your element, so you can style it without needing to worry about browser-specific versions. Now let’s use it to do some good for the world!

The fun part

If you are a website owner you’ve probably made decisions that deteriorate the experience of your users. This should not come as a surprise to you – you need to show advertising, you need a search box, a navigation bar, a twitter widget, a comment section and all the things that make your site what it is. These are all necessary, but make your content, the very thing that people came to your site for, more difficult to read.

There is also a practical limit to how large your font can be before it gets out of place, not to mention the choice of a type face. If you have a sidebar, this also limits the horizontal space your content can take.

But we can fix this with the new API. We will use the functionality to bring the content section of your site full screen, thus improving the reading experience of your readers even on devices with small displays like laptops and netbooks.

Reader Mode Using the Full Screen API

Making the reading mode

It is pretty straightforward, we only need to some kind of button that will trigger the FullScreen plugin. We can use the $.support.fullscreen flag to test if the current browser supports the API. If it does, we will add the full screen button to the page.

if($.support.fullscreen){

	var fullScreenButton = $('<a class="goFullScreen">').appendTo('#buttonStrip');

	fullScreenButton.click(function(e){
		e.preventDefault();
		$('#main').fullScreen();
	});
}

When the #main div is brought full screen, it is assigned a width and height of 100%. We will have to work around this if we want it centered in the middle of the screen. This will call for some additional styling, applied only in full screen mode.

a.goFullScreen{
	/* The styling of the full screen button goes here */
}

/* The following styles are applied only in Full Screen mode */

#main.fullScreen{
	/* Adding a width and margin:0 auto to center the container */
	width: 860px;
	margin: 0 auto;

	/* Increasing the font size for legibility*/
	font: 17px serif;
	padding: 45px 45px 10px;
}

#main.fullScreen h1{
	/* Styling the heading */
	font: 56px/1.1 Cambria,"Palatino Linotype",serif;
	text-align: center;
}

#main.fullScreen h3{
	/* Subheadings */
	font: 28px Cambria,"Palatino Linotype",serif;
}

#main.fullScreen #postAuthor{
	/* Centering the post author info */
	/* ... */
}

/* Hiding unneeded elements and ads */

#main.fullScreen #featuredImage,
#main.fullScreen #topMiniShare,
#main.fullScreen #wideZineBanner,
#main.fullScreen #downloadDemo{
	display:none;
}

That is all there is to it! Only browsers that support full screen mode will display the button and users will enjoy a better, distraction-free reading experience.

Done!

There are plenty of places in a website where you can use a full screen view – from videos and canvas-based games, to reports and print preview dialogs. I would personally love to see this used for infographics and presentations. We can go a long way with a useful feature like this.

In this tutorial we will build a small application with CodeIgniter that will be backed by a MySQL database. It will present questions and give visitors the ability to post answers. There isn’t an admin interface for adding or changing questions, but if you follow and understand this tutorial, you will be able to create one yourself.

As this might be the first exposure to CodeIgniter for some of you, we will start with a brief intro. If you know what CI is, you can skip directly to the code.

First, what is CodeIgniter?

CodeIgniter is a framework for developing web applications in PHP. It will help you properly organize your code using the model-view-controller (MVC) pattern, and give you useful functionality for getting your site up and running quickly. It hides away the tedious work like building and validating forms, communicating with a database, managing error pages and much more.

There are certainly a lot of frameworks to choose from, but CI has the winning combination of a big community, nice documentation and good performance. Unless you enjoy spending time building sites from scratch (which is not a bad thing), using a framework is the smarter way to go.

You should probably start by reading the CodeIgniter introductory guide, which will give you a better understanding of how CI works. Of course, if you are experienced with PHP you can grab the zip and jump directly to the code.

Let’s begin!

The database

Naturally, we will need a table for the questions, and a table for the answers.

The Database Schema

The questions table has only two fields – the ID of the question (automatically assigned with auto_increment) and the question body field. The answers also have an ID column, but they also have a qid field for the id of the question they relate to. The rest of the fields are the email and name of the author, along with the answer body and a timestamp (the dt field).

It is possible to create these tables with PHP code (CI gives us the ability to manipulate tables), but we will keep things simple and design them using a database management system like phpMyAdmin. It is even simpler for you, as I’ve included an export of the tables as an SQL file (tables.sql in the download archive). Import it into your database or copy/paste the code into the SQL tab of phpMyAdmin and you should be ready to go.

Setting up CodeIgniter

At this point you should download CodeIgniter. In this tutorial I am using version 2.1.0, the latest at the time of writing. Extract it in the directory where you are developing your website (move the files outside the CodeIgniter_2.1.0 folder and remove it). We will need to edit a few settings so the framework works the way we want it.

Important: This section assumes that you are downloading a fresh copy of CodeIgniter. If you only want to make the downloaded demo work, you will only need to change your $config['base_url'] setting in config.php, and add your MySQL login details to database.php. The other changes are already made (you still need to create the MySQL tables).

Edit routes.php

The application/config/routes.php file determines which controller is called by default. We need to set this to questions, which we will be creating in a moment.

// Find this line:
$route['default_controller'] = "welcome";
// Replace it with this:
$route['default_controller'] = "questions";

This will show the questions controller as the start page of the application.

Edit config.php

The application/config/config.php file holds much of the configuration settings of the framework.

// Find this line:
$config['base_url'] = '';
// Replace it with the following:
$config['base_url']	= 'http://example.com/';

The above setting, base_url, tells CI where your site is located. This information is used when forming links and including resources like stylesheets and images.

The following setting is optional. CodeIgniter adds index.php to every URL by default (like so: http://example.com/index.php/products/). If you want to hide it (so that the url becomes http://example.com/products/), you will need to edit the index_page setting:

// Find this line:
$config['index_page'] = 'index.php';
// Replace it with the following:
$config['index_page'] = '';

You will also need to create an .htaccess file, which rewrites the URLs so that they still get to index.php, although it is not included explicitly. The .htaccess I use in the demo follows:

.htaccess

Options +FollowSymLinks
Options +Indexes
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ index.php/$1 [L]

Now you only need to add your MySQL connection settings so that your application can connect to your database.

Edit database.php

Find these four lines in application/config/database.php and change them to reflect your connection settings:

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'user';
$db['default']['password'] = 'pass';
$db['default']['database'] = 'your_database_name';

Great! We are done setting up CodeIgniter, so we can now move on with the code.

Question of the Day with CodeIgniter

Showing the questions

To show the questions we will need to create two files – a controller, which will be called when we visit the /question/ URL, and a view, which outputs the HTML code of the page. The controller will handle selecting records from the database and passing them to view. Note that we are not using any models in this app (the M in MVC). For simple applications like this one, they are purely optional and you can write CI apps without them.

/application/controllers/questions.php

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Questions extends CI_Controller {

	public function index(){

		// Loading only the libraries and helpers that we need.
		// This is one of the things that make CI fast.

		$this->load->database();
		$this->load->helper(array('date','url'));

		// Get the id of the last question

		$res = $this->db->
				select_max('id')->
				get('qod_questions')->
				result_array();

		$id = $res[0]['id'];

		$this->show($id);
	}

	public function show($id = -1){

		$this->load->database();
		$this->load->helper(array('date','url'));

		// Select the question

		$q = $this->db->
				where(array('id'=>$id))->
				get('qod_questions')->
				result_array();

		if(empty($q)){
			// Show an error page
			show_404();
		}

		$a = $this->db->
				where(array('qid'=>$id))->
				order_by('id','desc')->
				get('qod_answers')->
				result_array();

		// Get the ids of the previous
		// and next questions

		$prev = 0;
		$next = 0;

		$res = $this->db->
				select_min('id')->
				where("id > $id")->
				get('qod_questions')->
				result_array();

		if(!empty($res)){
			$next = $res[0]['id'];
		}

		$res = $this->db->
				select_max('id')->
				where("id < $id")->
				get('qod_questions')->
				result_array();

		if(!empty($res)){
			$prev = $res[0]['id'];
		}

		$this->load->view('question_of_the_day',array(
			'question'	=> $q[0]['question'],
			'answers'	=> $a,
			'previous'	=> $prev,
			'next'		=> $next,
			'id'		=> $id
		));
	}
}

The controller is basically a class that extends CI_Controller and resides in the controllers folder. The class methods are called by the framework depending on the URL. For example http://example.com/questions/ will execute the index method, and http://example.com/questions/show/213 – the show method. In the latter case, 213 will be passed as the id parameter.

In the show method we select the question with the passed ID and display it in the view. What the index method does, is to select the id of the newest question, and also call the show method. Because it is set as the default controller, this would mean that when you visit the start page of the application (the base url you set in the previous section), the latest question will be shown.

Read more about the URLs, controllers, views, helpers and the database class of CodeIgniter in the docs.

Now let’s see how the view works. When we load it, we pass an array. Each of the array keys (question, answers, previous, next and id) will be extracted and transformed into a variable. Instead of a class, the view is a simple PHP file.

/application/views/question_of_the_day.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><?php echo $question?> - Question of the day | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rancho" />
        <link rel="stylesheet" href="<?php echo base_url()?>assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

		<header id="blackboard">
			<h1><?php echo $question?></h1>
			<?php if($previous) echo anchor("questions/show/$previous",'&laquo;','class="arrow left"')?>
			<?php if($next) echo anchor("questions/show/$next",'&raquo;','class="arrow right"')?>
		</header>

		<?php 

		// This method will create a link to the answer form. It is given relative
		// to your index page, but will be transformed depending on your base in config.php

		echo anchor("answers/add/$id",'Add your answer','class="addAnswer"');

		?>

		<ul id="answers">

		<?php foreach ($answers as $ans): ?>

			<li>
				<?php
					// Forming the URL of the gravatar image.
					$gravatar = 'http://www.gravatar.com/avatar/'.md5( strtolower( trim($ans['email']) ) ).'?d=mm';
				?>

				<span class="avatar" style="background-image:url(<?php echo $gravatar?>)"></span>
				<span class="meta">
					<a href="#" class="author"><?php echo $ans['name']?></a>
					<?php
						// We are using the built-in timestamp method. We are using
						// array slice to limit the shown time divisions.
						$ts = explode(',', timespan(strtotime($ans['dt'])));
						$t = implode(',',array_slice($ts,0,2));
					?>
					<i><?php echo $t?> ago</i>
				</span>
				<p class="answer"><?php echo $ans['answer']?></p>
			</li>

		<?php endforeach; ?>

		</ul>

    </body>
</html>

The script loops through the $answers array and outputs a li element for each answer. It assembles a gravatar URL by generating an md5 hash of the email and includes it as the background-image of a rounded span element.

This gives us a functional answer browsing page. But how do we let people answer these questions?

The Blackboard

Posting answers

We will again need to write a controller and a view for adding answers. Here we will use a few more of the neat CodeIgniter features – generating forms and validating them. The generation is handled by the form helper, and the validation – by the form validation class.

You can see the answers controller below.

/application/controllers/answers.php

if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Answers extends CI_Controller {

	public function add($id = -1){

		$this->load->database();
		$this->load->helper(array('url','form'));
		$this->load->library('form_validation');

		// Check if there is such a question

		$q = $this->db->
				where(array('id'=>$id))->
				get('qod_questions')->
				result_array();

		if(empty($q)){
			// Show an error page
			show_404();
		}

		// Adding validation rules.

		$this->form_validation->set_rules('name', 'Name', 'required|min_length[2]|max_length[32]');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
		$this->form_validation->set_rules('answer', 'Answer', 'required|min_length[5]|max_length[255]');

		// If there are errors, show the form
		if ($this->form_validation->run() == FALSE){

			$this->load->view('add_answer',array(
				'question'	=> $q[0]['question'],
				'qid'		=> $q[0]['id']
			));

		}
		else{

			// Otherwise insert the answer to the database

			$this->db->insert('qod_answers', array(
				'qid'	=> $q[0]['id'],
				'email'	=> htmlspecialchars($this->input->post('email')),
				'name'	=> htmlspecialchars($this->input->post('name')),

				// preserving new lines:
				'answer'=> nl2br(htmlspecialchars($this->input->post('answer')))
			));

			redirect('questions/show/'.$q[0]['id']);
		}

	}
}

With the help of the form validation class, we are able to add rules by which the data should be validated. We will insert the answer in the database only when presented with correct data. I am using the htmlspecialchars() PHP function to escape any HTML code that might have been typed in the form fields. When the answer is inserted, we redirect to the question page. If everything went as it should, the newly added answer should be at the top.

Equally interesting is how the answer form is generated. For this we will take a look at the view file.

/application/views/add_answer.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><?php echo $question?> - Add Answer | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rancho" />
        <link rel="stylesheet" href="<?php echo base_url()?>assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

		<header id="blackboard">
			<h1><?php echo $question?></h1>
		</header>

		<?php 

		// This will print a link to the question page
		echo anchor("questions/show/$qid",'Back to the question','class="addAnswer"');

		// Creating the form using the form helper

		echo form_open('');

		echo form_label('Name','name');
		echo form_input(array(
          'name'        => 'name',
          'id'          => 'name',
          'value'       => set_value('name'),
          'maxlength'   => '64'
        ));

		echo form_label('Email (gravatar enabled)','email');
		echo form_input(array(
          'name'        => 'email',
          'id'          => 'email',
          'value'       => set_value('email'),
          'maxlength'   => '128'
        ));

		echo form_label('Answer','answer');
		echo form_textarea(array(
          'name'        => 'answer',
          'id'          => 'answer',
          'value'       => set_value('answer'),
        ));

		echo form_submit('subm', 'Add Answer!'); 

		// Showing the validation errors
		$validation = validation_errors(); 

		if($validation):
		?>
			<div class="errorMessages">
				<?php echo $validation?>
			</div>

		<?php endif;?>

		<?php echo form_close()?>

    </body>
</html>

As we included the form helper in the controller, we have access to all of its functions here, in the view. These functions make it easier to create forms and form fields. Of course, you can directly write the HTML of the forms, but you will have to update the code if you change the URL of your site.

At the bottom of the file we are accessing the validate_errors() function which will return a string with error messages, generated by the validation class. If there are any errors, we show them in a .errorMessages div.

That is it! All that is left is to add a pretty stylesheet and some images.

The styling

To finish this application, we need to add a stylesheet and images. Where we put them is more a matter of personal preference. I have chosen to go with an assets folder in the base directory of the application (you can see it in the zip file).

In the views I have specified the URL of the stylesheet like this: <?php echo base_url()?>assets/css/styles.css which gives us the correct location. base_url() is a function defined in the URL helper of the framework, which we’ve included in the controller.

As the tutorial is already quite lengthy, I won’t be discussing the styling here. You can see it for yourself by opening /assets/css/styles.css in your code editor.

We’re done!

I am hoping that you learned a lot in this tutorial. If you decide to go with CodeIgniter for your next website, it will be a useful experience for you. Although there is a learning curve, once you understand the basics, you will appreciate just how much time you can save. And with Sparks, you will become even more productive by adding easy to use open source modules to your projects.

Just before the holidays, you took part in the iPhorm WordPress Plugin Giveaway, where two of you had a chance of winning a copy of the plugin. Now it is time to draw the winners!

And the two of you who got a late Christmas present are WPH and Mike Dedmon. They have been contacted and will receive their prizes shortly.

iPhorm winners

For those of you who did not win, I wish the best of luck next time!

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

<div id="countdown" class="countdownHolder">
	<span class="countDays">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv0"></span>

	<span class="countHours">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv1"></span>

	<span class="countMinutes">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv2"></span>

	<span class="countSeconds">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv3"></span>
</div>

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){
			$('<span class="count'+this+'">').html(
				'<span class="position">\
					<span class="digit static">0</span>\
				</span>\
				<span class="position">\
					<span class="digit static">0</span>\
				</span>'
			).appendTo(elem);

			if(this!="Seconds"){
				elem.append('<span class="countDiv countDiv'+i+'"></span>');
			}
		});

	}

	// 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 = $('<div>',{
			'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' ) + " <br />";

			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.

WordPress is undoubtedly the most popular CMS in the world. It is used for so much more than the authors initially envisioned. With all of its wonderful features and incredible plugins, you can build anything – from a personal blog to a fully-fledged online shop.

With the holidays right around the corner, we decided to give away two copies of the iPhorm plugin which will help you create forms for your website with an easy to use drag-and-drop builder directly from WordPress.

The iPhorm Plugin

iPhorm is a WordPress plugin that makes building forms easy with elements that include email address, date and time, file uploads and many more. The form submissions are received as emails or directly in your dashboard. Designers have full control on how the forms looks, and for everybody else, two themes are provided. For a live demo, see here.

How to Win

For a chance to win a copy of the plugin, do the following:

• Leave a comment below this article;
• Tweet it.

The winners will be announced on January 5th 2012.

With the help of our friends over at Grafpedia, I am happy to share with you a beautiful charity web site template to kick-start your development efforts. It is fully coded in HTML5 and uses the tiny Craftyslider jQuery plugin.

HTML5 Charity Template

Grafpedia have also published a tutorial on how the design was created. Refer to the included readme for the license.

Happy coding!

If you are a website owner, there is a pretty good chance that you rely on some form of advertising to pay for your hosting bills. And if you are lucky enough to have more than a few people visiting your site, you might even be able to pay yourself a supplement to your salary as a compensation for your hard work.

On the other side there are the people that browse the web. They are tired of being bombarded with intrusive advertising, flashy banners and announcements that ruin their browsing experience. They don’t need to be congratulated on being the millionth visitor of your website, they don’t want to shoot five iphones, their only wish is to read what you have to say.

As it is much easier for users to hide ads than for the entire industry to develop advertising ethics, a simple solution quickly emerged.

Then Came Adblockers

The idea of an adblocker is simple – it is a browser extension that blocks or removes advertising on the page. A “solution” is hardly the proper term, however, as it only serves one side – the users. There frankly couldn’t be a better deal for them. These extensions strip everything except the main content of the page, bringing a whole new dimension to the word free – it not only means that they don’t pay; it now means that you don’t get paid too!

Adblocker detected!

This didn’t use to be a big of a problem for website owners – people using ad blockers weren’t that many, and it did make users enjoy browsing your site more. But as the idea for browser extensions exploded in recent years, so did the proliferation of ad blockers. A quick look at the addon directories reveals that ad blockers are the most popular category.

Small sites are most at risk, as they can’t attract the same interest from advertisers and experiment with different formats. With more than 20% of pageviews eaten away by adblockers (these are the number for Tutorialzine), it becomes evident that something has to change.

Miraculously, in the past few weeks there were news that the most popular ad blocker – AdBlock Plus will start allowing acceptable advertising by default. Judging by the uproar this decision brought, a large percentage of people will still opt in for complete blocking of ads or move to a different extension. This means that we as publishers will still have to maneuver around this problem for some time to come. One solution would be to detect the presence of an ad blocker.

How To Detect AdBlock

It is simple – we will use ad blockers’ overzealous interference against it. To block ads such an extension must look for files it believes contain code that shows adverts and prevent them from loading. So the idea is to have a JS file named advertisement.js, which will trigger adblock’s filters, and after this, check whether the file has been loaded.

Here is the file itself:

assets/blockBlock/advertisement.js

jQuery.adblock = false;

That’s all, one line. It creates a new property on the global jQuery object, which we will later look for. If it is undefined, it would mean that this file has been blocked from loading.

assets/blockBlock/blockBlock.jquery.js

(function($){

	if ($.adblock === undefined){
		$.adblock = true;
	}

	$.fn.showOnAdBlock = function(){

		if($.adblock){
			this.show();
		}

		return this;
	};

})(jQuery);

To find out if an ad blocker is present, simply do a conditional check for the $.adblock variable. In the same file, we also define a helper method that will conditionally show an element depending if such an extension is active.

Update: This plugin is also available on Github.

When including the plugin in your site, remember to include the files above after the jQuery library. For the demo page I am also using the confirm dialog replacement from last year to show a pretty dialog box informing the users they should disable adblock to view the page. Here is the code for that:

assets/js/script.js

$(function(){

	if($.adblock){
		$.confirm({
			'title'		: 'Adblocker active!',
			'message'	: 'You are running an ..',
			'buttons'	: {
				'I will!'	: {
					'class'	: 'blue',
					'action': function(){
						// Do nothing
						return;
					}
				},
				'Never!'	: {
					'class'	: 'gray',
					'action': function(){
						// Redirect to some page
						window.location = 'http://tutorialzine.com/';
					}
				}
			}
		});
	}
});

Bang! Now you can tell who is using an ad blocker. This simple method works with most of the popular ad cleaning plugins used at the moment.

What to use it for?

Okay, so you have a snippet of code that would tell you if a person is using an ad blocker or not. What to do now? Some ideas follow. I would not personally use any of the bad or evil ones, but I am obliged to share.

Good ideas

• Track how many people are blocking ads on your website. If the percentage is high, you can try different (non-banner) types of advertisement;
• Replace the areas of your website where ads usually go with some useful content;
• Inform visitors how adblock harms small websites with a heartbreaking personal appeal ala Jimmy Wales.

Bad ideas

• Show a big message that adblocked users are not welcome (like in the demo);
• Beg for donations;
• Replace with ads for affiliate programs that are not blocked by the extension.

Outright evil ideas

• Set up a paywall for adblocked users;
• Require a sign-in with facebook or a registration;
• Redirect to a daily deal website with your affiliate link.

A bright future?

Hopefully the initiative behind AdBlock Plus’ decision to show non-intrusive ads resonates in the community and we will enjoy advertising that is accepted and useful for both publishers and visitors.

What are your thoughts about AdBlock?

Ten days ago you took part in the IM Creator giveaway, where three of you had a chance to win a lifetime subscription for their new web site building service. Now it is time to draw the winners!

And they are kit, Richard Bland and Chen YH. They have been contacted and will receive their prizes soon.

The Winners

I am wishing the best of luck in the coming competitions for those of you who did not win!

HTML5 brought a lot of new tags and new rules on how the old ones should be used. One of them is the range input element, or the slider. This control has been available in operating systems for decades, but is only now that it has found its way into the browser.

The reason for this delay is probably that it is easy to emulate the functionality with JavaScript alone. The jQuery UI library includes a pretty capable version that is also easy to style. But having it built into the browser and ready to go is much more convenient, at least for the browsers that support it.

20 years in the making, but we finally have it!

Browser support

All modern browsers support this element with the notable exception of Firefox, but it can be easily recreated with html5slider.js. Of course IE also does not support the range input (no surprise here), for which there are no easy fixes. This means that to use it cross-browser you will still need to include a separate enabling library like jQuery UI (more on that later on). The good thing is that even if the browser does not support the range element, it will fall back to a textbox.

Browser support for the range input

How it works

I referred to the slider as “range input” for a reason. It is a type of input element, rather than a separate tag – <input type="range" /> is all you need to display it in your page. It supports the regular value attribute shared by all input elements, along with min and max, which limit the range, and step which sets how much the value changes on every movement (default is 1).

You can change these attributes with JavaScript/jQuery as you would with any regular input element. You can also use the onchange event to listen for changes. This is what the code looks like:

Extracted from index.html

<input id="defaultSlider" type="range" min="0" max="500" />
<p class="note">Current value: <span id="currentValue">0</span></p>

And this is the jQuery code that listens for the change event:

assets/js/slider-default.js

$(function(){

	var currentValue = $('#currentValue');

	$('#defaultSlider').change(function(){
	    currentValue.html(this.value);
	});

	// Trigger the event on load, so
	// the value field is populated:

	$('#defaultSlider').change();

});

Of course this code will only work if your browser supports the slider element. Otherwise you will be presented with a textbox.

Lets level the field

As more than two thirds of the internet population won’t be able to see our pretty slider, we need to take a different path. Lets build a quick and dirty version of the slider using jQuery UI, a library of interface components that sits on top of jQuery.

Extracted from slider-jqueryui.html

<div id="slider"></div>
<p class="note">Current value: <span id="currentValue">0</span></p>

You can see the code for the jQuery UI Slider control below (you need to include jQuery UI alongside jQuery in your page).

assets/js/slider-jqueryui.js

$(function(){

	var currentValue = $('#currentValue');

	$("#slider").slider({
		max: 500,
		min: 0,
		slide: function(event, ui) {
			currentValue.html(ui.value);
		}
	});

});

The code is pretty straightforward. It simply uses the slider method and the library does the rest.

The fun part

Here comes a realization – as we are already presenting our own custom version of the slider, we can as well present an entirely different control. Lets use the KnobKnob plugin from last week.

We will have the range input control on the page, but it will be hidden. KnobKnob will then create a rotating control that will have the same limits as the original slider. On every change we will update the value of the hidden slider:

slider-knob.html

<div id="container">
	<div id="control"></div>
</div>

<!-- The range input is hidden and updated on each rotation of the knob -->
<input type="range" id="slider" min="0" max="500" value="25" />

<p class="note">Current value: <span id="currentValue">0</span></p>

And for the jQuery part:

assets/js/slider-knob.js

$(function(){

	var slider = $('#slider'),
		min = slider.attr('min'),
		max = slider.attr('max'),
		currentValue = $('#currentValue');

	// Hiding the slider:
	slider.hide();

	$('#control').knobKnob({
		snap : 10,
		value: 250,
		turn : function(ratio){
			// Changing the value of the hidden slider
			slider.val(Math.round(ratio*(max-min) + min));

			// Updating the current value text
			currentValue.html(slider.val());
		}
	});

});

The code above takes the min and max attributes of the range input and uses it to calculate the corresponding value of the slider.

Conclusion

The slider control is useful for giving users the ability to conveniently modify a value without having to explicitly type it in a text box. Although there is much to be desired in terms of browser support, you can use progressive enhancement to display an alternative control using jQuery.

Every website is different. From complex online stores that test your development skills, to presentation oriented pages that depend heavily on design, and everything in between. But there is a right tool for any job. You can use an open source CMS to lift the development burden off complex sites, but it would be an overkill for simpler ones.

This is where a tool like IM Creator comes into play.

IM Creator Lifetime License

IM Creator is a new simple and free HTML-based drag and drop website builder that allows you to create your website in a trouble-free, accessible and pleasant experience. With IM Creator, you can build a beautiful site, fast. Start from an existing design or make a new one - it’s up to you.

The Prize

The folks behind IM Creator have generously offered three lifetime licenses for their premium plan to Tutorialzine readers (valued at $95/year each). The offer applies to new clients of their service.

How to Win

For a chance to win a lifetime subscription, do the following:

• Leave a comment below this article;
• Tweet it.

The winners will be announced on December 15th 2011.