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.

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.

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?

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.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Shiny Switches with CSS3 &amp; jQuery | Tutorialzine Demo</title>

        <!-- CSS stylesheets -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/knobKnob/knobKnob.css" />

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

    <body>

		<section id="main">

			<div id="bars">
				<div id="control">
					<!-- The knob markup will go here -->
				</div>
                                <!-- The colorful dividers will go here -->
			</div>

		</section>

        <!-- JavaScript includes -->
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="assets/knobKnob/transform.js"></script>
		<script src="assets/knobKnob/knobKnob.jquery.js"></script>
		<script src="assets/js/script.js"></script>

    </body>
</html>

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 = '<div class="knob">\
				<div class="top"></div>\
				<div class="base"></div>\
			</div>';

		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<colors.length;i++){

		deg = i*12;

		// Create the colorbars

		$('<div class="colorBar">').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.

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

<ul id="questions">
	<!-- Generated by jQuery -->
	<li>
		<p>What would you like to purchase?</p>
		<select data-placeholder="Choose a product category">
			<option data-connection="phoneSelect" value="Phones">Phones</option>
			<option data-connection="notebookSelect" value="Notebooks">Notebooks</option>
			<option data-connection="tabletSelect" value="Tablets">Tablets</option>
		</select>
	</li>
	<!-- The next sections are inserted here depending on the choices above -->
</ul>

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+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
			});

			if(r.defaultText){

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

				options = '<option></option>'+options;
			}

			// Building the markup for the select section

			$('<li>\
				<p>'+r.title+'</p>\
				<select data-placeholder="'+r.defaultText+'">\
					'+ options +'\
				</select>\
				<span class="divider"></span>\
			</li>').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.

Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like.

What are HTML5 File Uploads?

Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and the good ol’ AJAX (with the addition of binary data transfer). Here is a description of a HTML5 file upload process:

1. The user drops one or more files from their file system to the browser window by dragging. Browsers that support the Drag & Drop API will fire an event, which alongside other useful information, contains a list of files that were dropped;
2. Using the File Reader API, we read the files in the list as binary data, and store them in memory;
3. We use the new sendAsBinary method of the XMLHttpRequest object, and send the file data to the server.

Sounds complicated? Yes, it could use some optimization. Fortunately, there are jQuery plugins that can do this for us. One of them is Filedrop, which is a wrapper around this functionality, and provides features for limiting maximum file size and specifying callback functions, which is really handy for integrating it into your web applications.

Currently file uploads work only in Firefox and Chrome, but upcoming major versions of the other browsers also include support for it. A simple fallback solution for older browsers would be to display a regular file input dialog, but we won’t be doing this today, as we will be focusing our attention on using HTML5.

So lets get started!

The HTML

The markup of our Upload Center couldn’t be simpler. We have a regular HTML5 document, which includes our stylesheet and script.js file, the Filedrop plugin and the jQuery library.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

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

    <body>

		<header>
			<h1>HTML5 File Upload with jQuery and PHP</h1>
		</header>

		<div id="dropbox">
			<span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
		</div>

        <!-- Including The jQuery Library -->
		<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

		<!-- Including the HTML5 Uploader plugin -->
		<script src="assets/js/jquery.filedrop.js"></script>

		<!-- The main script file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>

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:

<div class="preview done">

	<span class="imageHolder">
		<img src="" />
		<span class="uploaded"></span>
	</span>

	<div class="progressHolder">
		<div class="progress"></div>
	</div>

</div>

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 = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
						'</div>'+
					'</div>'; 

	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.

Web designers find themselves in a tough situation – they have to build beautiful user interfaces that are intuitive and usable in the same time. Sometimes, despite our earnest efforts, web applications may become difficult to use for novice users. One solution is to create some sort of a tour of your application’s features. The other is to incorporate visual cues in the design itself.

In this tutorial, we will be writing a jQuery plugin that will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.

How it works

Lets dive straight to the code – it comes at around 100 lines (with comments), so it is not difficult to follow.

jquery.pointpoint.js

(function($){

	// Defining our jQuery plugin

	$.fn.pointPoint = function(prop){

		// Default parameters

		var options = $.extend({
			"class"		: "pointPointArrow",
			"distance"	: 30
		},prop);

		var pointers = [];

		// If CSS transforms are not supported, exit;

		if(!$.support.transform){
			this.destroyPointPoint = function(){};
			return this;
		}

		this.each(function(){

			var findMe = $(this),
				point = $('<div class="'+options['class']+'">').appendTo('body'),
				offset, center = {}, mouse = {}, props = {}, a, b, h, deg, op,
				pointHidden = true, rad_to_deg = 180/Math.PI;

			pointers.push(point);

			// Calculating the position of the pointer on mouse move

			$('html').bind('mousemove.pointPoint',function(e){

				if(pointHidden){
					point.show();
					pointHidden = false;
				}

				offset = findMe.offset();

				// The center of the element we are pointing at
				center.x = offset.left + findMe.outerWidth()/2;
				center.y = offset.top + findMe.outerHeight()/2;

				mouse.x = e.pageX;
				mouse.y = e.pageY;

				// We are treating the mouse position and center
				// point as the corners of a right triangle.
				// h is the hypotenuse, or distance between the two.

				a = mouse.y - center.y;
				b = center.x - mouse.x;
				h = Math.sqrt(a*a + b*b);

				// Calculating the degree (in radians),
				// the pointer should be rotated by:
				deg = Math.atan2(a,b);

				// Lowering the opacity of the pointer, depending
				// on the distance from the mouse pointer

				op = 1;
				if(h < 50){
					op = 0;
				} else if(h < 160){
					op = (h - 50) / 110;
				}

				// Moving and rotating the pointer

				props.marginTop  = mouse.y-options.distance*Math.sin(deg);
				props.marginLeft = mouse.x+options.distance*Math.cos(deg);
				props.transform  = 'rotate('+(-deg*rad_to_deg)+'deg)';
				props.opacity    = op;

				point.css(props);

			}).bind('mouseleave.pointPoint',function(){
				point.hide();
				pointHidden = true;
			});

		});

		this.destroyPointPoint = function(){

		    // Unbind all the event handlers
		    // and remove() the pointers 

			$('html').unbind('.pointPoint');

			$.each(pointers,function(){
				this.remove();
			});

		};

		return this;
	};

})(jQuery);

When you call pointPoint(), it creates an event listener for the mousemove event. Inside it, the plugin calculates the position and rotation of the arrow using trigonometry functions. Check out this Wikipedia article if you’d like to learn more.

I am also using the transform.js CSS hooks for jQuery, which level the support for CSS3 rotations in browsers that support them (this means the plugin will not work in IE678).

jQuery PointPoint Plugin

How to use it

To include jQuery PointPoint in your website, you need to copy the jquery.pointpoint folder (located in /assets in the downloadable zip) in your directory structure. After this, all you need to do is include the two js files and the stylesheet, that you find inside, in your page. Refer to index.html as an example.

The plugin itself is simple to use. You just need to call it on the element which you need to point to. The plugin will automatically find the position of the element and update the arrow when you move the mouse. You can also pass an arguments object with two properties – “class” and “distance“.

$('#pushButton').pointPoint();

/*
    // You can also pass arguments:
    $('#pushButton').pointPoint({
        "class":"myNewPointer",
        "distance":100
    });
*/

The snippet above adds an arrow next to the mouse cursor, which points to the element with an id of “pushButton“. The arguments in the second example will set a custom class on the arrow (in case you want to customize the styling) and move it further away from the mouse cursor. The default styles of the arrow are defined in jquery.pointpoint.css.

When you call the plugin, it returns a jQuery object, so you can use it inside method call chains. There is one one minor difference, however – this object has an additional method – destroyPointPoint(), which you can use to cancel the plugin:

var pp = $('#pushButton').pointPoint();

$('body').click(function(){
    pp.destroyPointPoint();
});

This will remove all arrows and destroy the event listeners for the mouse move event.

We are done!

I hope you find the plugin useful and only use it for good, not evil. As usual, share your suggestions in the comments section.

In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

Updated on 10 Sep 2011: The plugin was slightly improved by including a callback function, called when the animation is complete. Just pass it as a property of the arguments object: $(‘#el’).shuffleLetters({callback:function(){}});

The Code

The first step is to write the backbone of our jQuery plugin. We will place the code inside a self-executing anonymous function, and extend $.fn.

assets/js/jquery.shuffleLetters.js

(function($){

	$.fn.shuffleLetters = function(prop){

		// Handling default arguments
		var options = $.extend({
			// Default arguments
		},prop)

		return this.each(function(){
			// The main plugin code goes here
		});
	};

	// A helper function

	function randomChar(type){
		// Generate and return a random character
	}

})(jQuery);

Next we will turn our attention to the randomChar() helper function. It will take a type argument (one of “lowerLetter“, “upperLetter” or “symbol“) and return a random character.

function randomChar(type){
	var pool = "";

	if (type == "lowerLetter"){
		pool = "abcdefghijklmnopqrstuvwxyz0123456789";
	}
	else if (type == "upperLetter"){
		pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	}
	else if (type == "symbol"){
		pool = ",.?/\\(^)![]{}*&^%$#'\"";
	}

	var arr = pool.split('');
	return arr[Math.floor(Math.random()*arr.length)];
}

We could have used a single pool string for all types of characters, but this will do for a better effect.

The Plugin In Action

Now lets write the body of the plugin!

$.fn.shuffleLetters = function(prop){

	var options = $.extend({
		"step"	: 8,	// How many times should the letters be changed
		"fps"	: 25,	// Frames Per Second
		"text"	: "" 	// Use this text instead of the contents
	},prop)

	return this.each(function(){

		var el = $(this),
			str = "";

		if(options.text) {
			str = options.text.split('');
		}
		else {
			str = el.text().split('');
		}

		// The types array holds the type for each character;
		// Letters holds the positions of non-space characters;

		var types = [],
			letters = [];

		// Looping through all the chars of the string

		for(var i=0;i<str.length;i++){

			var ch = str[i];

			if(ch == " "){
				types[i] = "space";
				continue;
			}
			else if(/[a-z]/.test(ch)){
				types[i] = "lowerLetter";
			}
			else if(/[A-Z]/.test(ch)){
				types[i] = "upperLetter";
			}
			else {
				types[i] = "symbol";
			}

			letters.push(i);
		}

		el.html("");			

		// Self executing named function expression:

		(function shuffle(start){

			// This code is run options.fps times per second
			// and updates the contents of the page element

			var i,
				len = letters.length,
				strCopy = str.slice(0);	// Fresh copy of the string

			if(start>len){
				return;
			}

			// All the work gets done here
			for(i=Math.max(start,0); i < len; i++){

				// The start argument and options.step limit
				// the characters we will be working on at once

				if( i < start+options.step){
					// Generate a random character at this position
					strCopy[letters[i]] = randomChar(types[letters[i]]);
				}
				else {
					strCopy[letters[i]] = "";
				}
			}

			el.text(strCopy.join(""));

			setTimeout(function(){

				shuffle(start+1);

			},1000/options.fps);

		})(-options.step);

	});
};

The plugin will take either the contents of the DOM element it was called on, or the text property of the object passed as an argument. It then splits the string into characters and determines the type of each one. The shuffle function then uses setTimeout() to call itself and randomize the string, updating the DOM element on each step.

When you head on to the demo you will see that you are able to type your own text and test it out. Here is how I did it:

assets/js/script.js

$(function(){

	// container is the DOM element;
	// userText is the textbox

	var container = $("#container")
		userText = $('#userText'); 

	// Shuffle the contents of container
	container.shuffleLetters();

	// Bind events
	userText.click(function () {

	  userText.val("");

	}).bind('keypress',function(e){

		if(e.keyCode == 13){

			// The return key was pressed

			container.shuffleLetters({
				"text": userText.val()
			});

			userText.val("");
		}

	}).hide();

	// Leave a 4 second pause

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "Test it for yourself!"
		});

		userText.val("type anything and hit return..").fadeIn();

	},4000);

});

The fragment above also shows how you can use the plugin and the custom text parameter.

Done

I hope you find this plugin useful and have fun with it. It is released under the MIT license.

This is the second part of a two-part tutorial, in which we use PHP, MySQL and jQuery mobile to build a simple computer web store. In the previous part we created the models and the controllers, and this time we will be writing our views.

jQuery mobile

First, lets say a few words about the library we will be using. jQuery mobile is a user interface library that sits on top of jQuery and provides support for a wide array of devices in the form of ready to use widgets and a touch-friendly development environment. It is still in beta, but upgrading to the official 1.0 release will be as simple as swapping a CDN URL.

The library is built around progressive enhancement. You, as the developer, only need to concern yourself with outputting the correct HTML, and the library will take care of the rest. jQuery mobile makes use of the HTML5 data- attributes and by adding them, you instruct the library how it should render your markup.

In this tutorial we will be using some of the interface components that this library gives us – lists, header and footer bars and buttons, all of which are defined using the data-role attributes, which you will see in use in the next section.

Rendering Views

The views are PHP files, or templates, that generate HTML code. They are printed by the controllers using the render() helper function. We have 7 views in use for this website – _category.php, _product.php, _header.php, _footer.php, category.php, home.php and error.php, which are discussed later on. First, here is render() function:

includes/helpers.php

/* These are helper functions */

function render($template,$vars = array()){

	// This function takes the name of a template and
	// a list of variables, and renders it.

	// This will create variables from the array:
	extract($vars);

	// It can also take an array of objects
	// instead of a template name.
	if(is_array($template)){

		// If an array was passed, it will loop
		// through it, and include a partial view
		foreach($template as $k){

			// This will create a local variable
			// with the name of the object's class

			$cl = strtolower(get_class($k));
			$$cl = $k;

			include "views/_$cl.php";
		}

	}
	else {
		include "views/$template.php";
	}
}

The first argument of this function is the name of the template file in the views/ folder (without the .php extension). The next is an array with arguments. These are extracted and form real variables which you can use in your template.

There is one more way this function can be called – instead of a template name, you can pass an array with objects. If you recall from last time, this is what is returned by using the find() method. So basically if you pass the result of Category::find() to render, the function will loop through the array, get the class names of the objects inside it, and automatically include the _category.php template for each one. Some frameworks (Rails for example) call these partials.

Computer Store with PHP, MySQL and jQuery Mobile

The Views

Lets start off with the first view – the header. You can see that this template is simply the top part of a regular HTML5 page with interleaved PHP code. This view is used in home.php and category.php to promote code reuse.

includes/views/_header.php

<!DOCTYPE html>
<html>
	<head>
	<title><?php echo formatTitle($title)?></title> 

	<meta name="viewport" content="width=device-width, initial-scale=1" /> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <link rel="stylesheet" href="assets/css/styles.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header" data-theme="b">
	    <a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
		<h1><?php echo $title?></h1>
	</div>

	<div data-role="content">

In the head section we include jQuery and jQuery mobile from jQuery’s CDN, and two stylesheets. The body section is where it gets interesting. We define a div with the data-role=”page” attribute. This, along with the data-role=”content” div, are the two elements required by the library to be present on every page.

The data-role=”header” div is transformed into a header bar. The data-theme attribute chooses one of the 5 standard themes. Inside it, we have a link that is assigned a home icon, and has its text hidden. jQuery Mobile comes with a set of icons you can choose from.

The closing tags (and the footer bar) reside in the _footer.php view:

includes/views/_footer.php

	</div>

	<div data-role="footer" id="pageFooter">
		<h4><?php echo $GLOBALS['defaultFooter']?></h4>
	</div>
</div>

</body>
</html>

Nothing too fancy here. We only have a div with the data-role=”footer” attribute, and inside it we print the globally accessible $defaultFooter variable, defined in includes/config.php.

Neither of the above views are printed directly by our controllers. They are instead used by category.php and home.php:

includes/views/home.php

<?php render('_header',array('title'=>$title))?>

<p>Welcome! This is a demo for a ...</p>
<p>Remember to try browsing this ...</p>

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <li data-role="list-divider">Choose a product category</li>
    <?php render($content) ?>
</ul>

<?php render('_footer')?>

If you may recall, the home view was rendered in the home controller. There we passed an array with all the categories, which is available here as $content. So what this view does, is to print the header, and footer, define a jQuery mobile listview (using the data-role attribute), and generate the markup of the categories passed by the controller, using this template (used implicitly by render()):

index.php/views/_category.php

<li <?php echo ($active == $category->id ? 'data-theme="a"' : '') ?>>
<a href="?category=<?php echo $category->id?>" data-transition="fade">
	<?php echo $category->name ?>
    <span class="ui-li-count"><?php echo $category->contains?></span></a>
</li>

Notice that we have a $category PHP variable that points to the actual object this view is being generated for. This is done in lines 24/25 of the render function. When the user clicks one of the links generated by the above fragment, he will be taken to the /?category=someid url, which will show the category.php view, given below.

<?php render('_header',array('title'=>$title))?>

<div class="rightColumn">
	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
        <?php render($products) ?>
    </ul>
</div>

<div class="leftColumn">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider">Categories</li>
        <?php render($categories,array('active'=>$_GET['category'])) ?>
    </ul>
</div>

<?php render('_footer')?>

This file also uses the header, footer and _category views, but it also presents a column with products (passed by the category controller). The products are rendered using the _product.php partial:

<li class="product">
	<img src="assets/img/<?php echo $product->id ?>.jpg" alt="<?php echo $product->name ?>" />
	<?php echo $product->name ?> <i><?php echo $product->manufacturer?></i>
	<b>$<?php echo $product->price?></b>
</li>

As we have an image as the first child of the li elements, it is automatically displayed as an 80px thumbnail by jQuery mobile.

One of the advantages to using the interface components defined in the library is that they are automatically scaled to the width of the device. But what about the columns we defined above? We will need to style them ourselves with some CSS3 magic:

assets/css/styles.css

media all and (min-width: 650px){

	.rightColumn{
		width:56%;
		float:right;
		margin-left:4%;
	}

	.leftColumn{
		width:40%;
		float:left;
	}

}

.product i{
	display:block;
	font-size:0.8em;
	font-weight:normal;
	font-style:normal;
}

.product img{
	margin:10px;
}

.product b{
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 0.9em;
}

.product{
	height: 80px;
}

Using a media query, we tell the browser that if the view area is wider than 650px, it should display the columns side by side. If it is not (or if the browser does not support media queries) they will be displayed one on top of the other, the regular “block” behavior.

We’re done!

In the second and last part of this tutorial, we wrote our views to leverage the wonderful features of jQuery mobile. With minimal effort on our part, we were able to describe the roles of our markup and easily create a fully fledged mobile website.