Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too. Today’s project,WanderWall, achieves that and what we’ll be creating today could easily be used for a portfolio or business site but the concepts you’ll learn could certainly be used to expand the idea further.

If you’d like to check out a demo before we get started, feel free to check out one of three available below.

you can also watch a screencast about WanderWall here.

What is a Hover-Based Interface?

A hover-based interface is one where the majority (or all) of the user interaction on the page can be controlled by a user hovering over an element with their cursor. Hover-based interfaces require less work to see more content than a typical click based page, but do need some thought to be put into their design and structure so that the user knows how to navigate around. WanderWall uses a hover-based interface. Some might ask, well, mobile device’s don’t necessarily support the hover-over state, so should we really consider using them?.

I think the answer to this is definitely a firm yes. If you look at a number of the most popular site’s out there, they actually have two versions of their site available – one used for desktop browsers (full layout) and another which is optimized for mobile (touch focused). I think that hover UIs are certainly something we could consider for the former, but we of course would evaluate suitability on a site by site basis. I’m not saying that every site out there should adopt the concept, but there are cases where it would make navigation a quicker experience for users.

Why Is WanderWall useful?

That’s a very good question. I’m going to use a portfolio site as an example here as they tend to contain fewer pages. Even on a standard portfolio site, users typically have to click through a few different links to browse through the site (or ‘page’ if it’s a one-page portfolio with anchor text). This only gets compounded as the sites you’re looking at grow larger. There’s nothing wrong with clicking par-se (it’s successfully worked as an action for years), but consider that users in general are lazy (I include myself in this group) – anything you can do to decrease the amount of work they have to do to look around your site will mean that they’re able to view your content more quickly.

What does this mean for you? Well if it’s a portfolio site, it may just mean more requests for work if you’ve been able to get the visitor’s interest before they got bored of clicking. Obviously this all depends on the quality of content etc as well, but if your average visitor spends less than 2 minutes on your page, who is going to have to work ‘less’ to see your material – the person that clicks or the person that hovers?.

How Does WanderWall work?

WanderWall is composed of two key components that interact with each other. Before we get started I should mention that for my demos I have included a background-image containing multiple parts to it (a pseudo-sprite) used in the header. We shall refer to this as the header-wallpaper.  The components (without mentioning styling) are as follows:

1. Header-Slider: When a user hovers over one of the ‘frames’ (links) in the header, this animates down to a position in the header-wallpaper with a unique background specific to that particular link. Once the header-wallpaper has been rendered, text specific to that section then fades in – essentially a subtitle or tagline for that page.

2. Page-Slider: At the same time that the user has hovered over a link in the header-slider, a corresponding ‘page’ element slides into view (this is basically a div container which may contain text, images, video – any HTML content at all).

When a user hovers away from a particular link, the last page that they were looking at remains in view. The reason for this is that if there is further content on the page you may wish them to be able to hover-over on, scroll-down or click, they are able to do so.

How does WanderWall make use of CSS3, @font-face and HTML5?

CSS3 is used for the styling and design in WanderWall and assists with text-indentation, background-gradients and rotation. With the exception of my optional background-image, this allows the project to be relatively compact without sacrificing on design and asthetics. @font-face is used for the majority of typography and has been implemented in a cross-browser fashion with the assistance of Font-Squirrel’s excellent generator.

I personally found font-face to be significantly faster than Cufon or sIFR in terms of the time taken to visibly-render, which makes sense as there is no JavaScript required to power it after page-load.  HTML5 is used to power the data-tooltips that you find on the right-hand side of the screen. These leverage the "data-" attribute in HTML5.

For CSS purists, yes, you can of course achieve a similar effect without the need for the data-attribute here, but as I wished to include a sample of it’s potential usage, it’s been included in WanderWall as an optional feature. You can easily switch over to using jQuery based tooltips quite easily if you prefer.

Let’s Create a WanderWall

The first thing to do when creating a Hover-based interface is plan out how your interaction is going to work. I probably went through 12 different iterations planning this project before I was happy and it’s important to try thinking from a user’s perspective before you dive into the coding. Once that’s done, you’ll first want to write some HTML to define your page’s structure.

HTML for the header frames (links)

	 	jQuery 	
	 	CSS3 	
 HTML5 
	 	@font-face 	

HTML for the sliding pages

jQuery
Wanderwall 1




jQuery
Wanderwall 2




jQuery
Wanderwall 3




jQuery
Wanderwall 4

In real life, you’ll probably define some very simple CSS to structure your design next, but to keep things simple, I’m first going to show you the important parts of the JavaScript in this project and then the final CSS3. (I recommend waiting until you’ve finishing the JavaScript side of things before ‘touching up’ the design, but you do whatever feels most comfortable.)

jQuery For Background Animation (on frame hover)

$("div.frame a").hover(function()
	{

				var currentLink = $(this);
				hideTheRest(id); id = this.id.replace("link", "");
				position = -295*id;
				marginnew =  pagewidth * id * -1;

                                /*Display the Home link if not currently on Default Page*/
				if(id > 0)
				{
				  $('#homelink').show();
				}else{
				  $('#homelink').hide();
				}

				/*Move the page-slider in the correct direction depending on the ID*/
				$('.pageslider').stop().animate({marginLeft: marginnew}, 800);

				/*Animate the background*/
				$('#wanderwall').stop().animate({backgroundPosition:
                               '(50% ' + position +'px )'}, 500, function()
				{
				    distance = 0;
				    topdis   = -190;
				    text     = currentLink.attr('alt');
				    infoframe  = $('#infoframe');

				  /* Define offset for text*/
				  switch(id)
				  {
				    case "1":
					     distance = 500;
						 break;
				    case "2":
					     distance = 730;
						 break;
				    case "3":
					     distance = 200;
						 break;
					case "4":
					     distance = 400;
						 topdis = -198;
						 break;
				  }

				  infoframe.html(text);
				  infoframe.css('margin-left', distance + 'px');
				  infoframe.css('margin-top', topdis + 'px');
				  infoframe.fadeIn();
				});

	}, function()
	{

	   $('#infoframe').hide();
	   var id = this.id.replace("link", "");
	   $('#wanderwall').stop().animate({backgroundPosition: '(50% 0px)'}, 500 );
	    showTheRest();

	});

jQuery For Showing And Hiding Other Elements On Hover Of One

function hideTheRest(id){
		 for (var i=1; i<5; i++){
			if (i!=id)
			{

				$('#frame' + i + ' a').css('display', 'block');
                                /*Set the alpha transparency*/
				$('#frame' + i).css('filter', 'alpha(opacity=80)');
                                /*Fast-fade animation*/
				$('#frame' + i).stop().fadeTo("fast",0);
                                /*Don-t display the link*/
				$('#frame' + i + ' a').css('display', 'none');

				}
			}
			$('#infoframe').css('visibility','visible');
		}

	function showTheRest(){

		for (var i=1; i<5; i++){
				$('#frame' + i).stop().fadeTo("fast",0.8);
				$('#frame' + i).css('filter', 'alpha(opacity=80)');
			        $('#frame' + i + ' a').css('display', 'inline');
			        $('#frame' + i + ' a').css('display', 'block');
			}

			$('#infoframe').css('visibility','hidden');

		}

These are some extracts of the most important jQuery code used to power WanderWall. If you would like to take a deeper look into the code, I recommend checking out the source which can be downloaded at the beginning or end of this post. Let’s now take a look at some of the important CSS3.

CSS3 for the background gradient and 3D ‘mantle’ bar

body{

background:
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(153,153,153)),
    color-stop(0.55, rgb(242,242,242)),
    color-stop(0.78, rgb(240,237,240))
);
background:
-moz-linear-gradient(
    center bottom,
    rgb(153,153,153) 9%,
    rgb(242,242,242) 55%,
    rgb(240,237,240) 78%
);

}

#mantle { width:100%;  height:30px; background:
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(153,153,153)),
    color-stop(0.55, rgb(242,242,242)),
    color-stop(0.78, rgb(252,252,252))
);

background:
-moz-linear-gradient(
    center bottom,
    rgb(153,153,153) 9%,
    rgb(242,242,242) 55%,
    rgb(252,252,252) 78%
);

-webkit-background-origin: padding;
-webkit-background-clip: content;
border-bottom:1px solid #fff;

		   }

CSS3 for Frame Rotation

.frame:hover{
 -webkit-transform: rotate(-9deg);
 -moz-transform: rotate(-9deg);
}

Cross-Browser @font-face

@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('league_gothic-webfont.eot');
	src: local(''),
        url('league_gothic-webfont.woff') format('woff'),
        url('league_gothic-webfont.ttf') format('truetype'),
        url('league_gothic-webfont.svg#webfontwJ2IAlek') format('svg');
	font-weight: normal;
	font-style: normal;
}

CSS3 @font-face consumption and text-shadow (indentation effect) Sample

color:#444444;
letter-spacing:-1px;
text-shadow:0 1px 0 #FFFFFF;
font-family: 'LeagueGothicRegular', sans-serif;
font-size-adjust: 0.55;
font-size:40px;
margin-top:30px;

and that’s it!. You can very easily customize WanderWall for your own projects and remember that you’re not just limited to using 4 links/frames on the top. You can modify the code to have as many as you’d like and to look however you’d like too (in case for example you’d rather use buttons for the links instead of frames).

Got a question? Check the FAQ real below real quick and if it’s not answered there, feel free to leave a comment below and I’ll do my best to help. Scroll down to the end of the post to get your download pack now.

Frequently Asked Questions

-Does WanderWall work in all browsers?

I’ve attempted to make this project as cross-browser compatible as possible. It’s been tested on Safari, Chrome and FireFox for the Mac and Windows as well as IE6. If however you notice a quirk, let me know and I’ll try my best to get it fixed for the next release. Please note that due to the resolution of the one image I do use in this project, it may take a few moments to appear depending on your connection speed. That said, it loads in under a second on mine so you might not notice and delay.

-How do you create the background-image used in the header-wallpaper?

With the increase in both screen sizes and screen resolution we’ve noticed over the past few years, the background to the header needs to be able to cater for screens of any size (within reason). To start, you first need to create an image that’s approximately 3000×1445 or over. I recommend taking a look at the theme examples in my images folder (test_3, test_5 etc) as this will give you an idea of where each ‘wallpaper’ needs to end. If you prefer to keep your file-sizes down, you can always either opt to disable the animated background or use a simple-palette GIF file instead.

Demos and Sources

I’ve created three demos that you can checkout below. Each has the same base content, but offers an alternative header-theme so you can see  a few different ways that you can use the background-animation. The download pack contains all of these.

Did you enjoy this article?. If so please feel free to share it with your friends or colleages by clicking the retweet button. Thanks and I hope the post came in useful!.

Hey guys. This week I thought it would be interesting to go through some of the core features being introduced in CSS3 that would be of interest to web designers in under 5 minutes.

What better way to learn these than through a live example?.In today’s screencast I teach you how to take a plain CSS2 button and turn it into a crisp CSS3 button that’s just as good as it’s professionally designed Photoshop counterpart. There are no images used at all – just regular CSS3. To watch, just click here or the image above to go to the dedicated micro-site for this screencast.

For those interested in exploring the topic further, I’ve also recorded a second bonus screencast that teaches you about CSS3 transforms. In this one, I cover features like rotation, skewing, scaling and more. Both screencasts are on the same page and you’re able to stream or download them to your iPad or iPhone too. I hope they come in useful!.

Hey guys. In today’s post I’d like to present a new jQuery & CSS3 demo I wrote called RocketBar. Let’s explore why I created it. Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. If we’re reading a blog post, looking through a product description or even just scouring through eBay listings..in every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.

How Does It Work?

The way it works is that when a user lands on your page they get to see the default navigation as usual. If they decide to start scrolling however, the top navigation detaches itself from the page and follows you as you scroll down. If you decide to go back to the top of the page (for whatever reason) the navigation goes back to the way it appeared before. This technique isn’t just limited to showing you the default menu in a way that detaches itself from the page, but the code could very easily be modified to show a completely different menu for those that scroll down (eg. just the more popular items in your site navigation and perhaps some share buttons). See Demo 1 for this version and Demo 2 for the standard version.

Why It is Useful?

Why is navigation that follows your user useful? Well for starters, it saves time!. If I’m in the middle of reading about the latest gadget on a blog and decide to move to another section, it would take me less time to get there using RocketBar than it would scrolling to the top of the page and then looking for the relevant link on a conventional menu. Persistent navigation also gives your readers, customers or users an easier path to exploring your site – take for example a RocketBar with a simple search box on it. I hypothesize that the less time it takes for your user to get to the search bar, the more inclined they are to use it to see what else is available on your site (if they’re interested in the content).

If you’ve been designing for a few years, you’ll know that in concept this idea isn’t all that new – it could be just as easily executed using frames or just some fixed position CSS. The difference between those approaches and RocketBar however is that  your site design and navigation doesn’t have to suffer from being completed fixed in nature to implement this idea. With RocketBar, You can still use that multi-level drop down menu, or finely crafted jQuery navigation you’ve come up with this effect with without having to worry about it being cut-off or dealing with issues like z-indexing if frames were used to implement the idea.

How Do I Create A RocketBar?

The bar consists of two main components – the first is the jQuery code that powers it, adding the floating class and attributes to the bar that make it appear ‘detached’ when the user scrolls up and down the page. The second element (which is completely optional) are the CSS3 buttons you find along the bar. We’re first going to take a look at the jQuery for the bar and then talk about the CSS3.

To begin, let’s define the HTML for our persistent navigation. This is simply a div container with a standard list which hosts a number of button elements used for our menu items. There are two styles available in the style.css file included with this project – the ‘default’ class (blue theme) is used for elements which have pages of their own (eg. Links, Blog, Store) and the standard CSS applied to buttons (brown theme) is used for the menu item of the page you are currently on.

HTML

Home
About
Services
Pricing
Blog
Contact
  		       		   

JavaScript – Making use of $(window).scroll()

Using the useful $(window).scroll() function it’s possible to perform actions on the page when a user scrolls up or down it. To utilize this, RocketBar defines two points of interest in the current window – the first is the top of the page relative to the position of the bar (see $top1) and the second is the middle of the current window ($mid1). When a user scrolls past $top1, we add the class floater to it which causes it to appear detached. This makes use of classic CSS fixed positioning to maintain the bar in position.

If however the bar is not past the top of the page (ie. when a user is either at the top of the page or scrolls back up) the class is removed and the menu goes back to its default state. Similarly, if you pass the middle of the page ($mid1) the scroll-down button turns into a scroll-up button and the graphics change. This is all fairly simple.

var $top1= $('#floatingbar').offset().top + 20; //add additional necessary offset for Webkit
var $mid1 =  Math.floor($(window).height() / 2);

$(window).scroll(function()
{   

		if ($(window).scrollTop()>$top1)
		{
		 $('#floatingbar').addClass('floater');
		}
		else
		{
		 $('#floatingbar').removeClass('floater');

		 }

		 if($(window).scrollTop() > $mid1)
		  {
		     $('#dirbutton').
                                   find('img').
                                   attr('src','images/toparrow.png');
			 $('#dirbutton').data('mode','scrolldown');
		     $('#dirbutton').show();
		  }else
		  {
			 $('#dirbutton').
                                        find('img').
                                        attr('src','images/bottomarrow.png');
			 $('#dirbutton').data('mode','scrollup');

		  }
});

JavaScript Animated Scroll Up/Down code

As you can see above, one of the features of the RocketBar is a button that allows you to scroll to the top or bottom of the page with a single click, regardless of where you are. As this requires the use of an image that changes midway we make use of a simple jQuery image pre-load function to load up the images before a user starts using the main code routines. Here’s the code for both of these functions:

$.preloadImages = function()
{
       for(var i = 0; i").attr("src", arguments[i]);
       }
}

$.preloadImages("images/toparrow.png","images/bottomarrow.png");

$('#dirbutton').click(function()
{
   $mode = $(this).data('mode');

   switch($mode)
   {
     case 'scrolldown':
	     $('html, body').animate({scrollTop:0}, 'slow');
		 return false;
		 break;
	 case 'scrollup':
	    $scrollpos = $('body').outerHeight();
	    $('html, body').animate({scrollTop:$scrollpos}, 'slow');
		return false;
		break;
   }

});

CSS3 Buttons (For full code see style.css in the release)

The CSS3 buttons used in RocketBar are based on a variation of the Aristo theme, inspired by previous work from Ryan Miglavs. I wanted to use these buttons as an example of just how far aesthetically clean and crisp  form elements can be these days using CSS3 without needing to use any graphics at all. For anyone wanting to design their own Aristo/MetaLabs style buttons from scratch, here’s a break-down of the various CSS features required for them. You start off with a solid-color button with rounded edges and a simple border (remember to use border-radius cases for both Webkit and FireFox).

Next work on the typography to your button – I often personally opt for use of letter-spacing and bold common fonts such as Arial and Georgia as these are pretty much present on any platform these days (Helvetica is preferred if you’re just using flat graphics). After this we focus on the letter-press effect – this is made possible using an intelligently positioned text-shadow element placed behind the primary button text.

Once this is done work on the background gradients for your button (-webkit-gradient and -moz-linear-gradient will allow you to blend from one specified color to another). Finally, there’s the inner-shadow feature at the top of the button. This white line is what adds that extra ‘crisp’ feel to these buttons and can be achieved using the inset option of the CSS box-shadow property.

There’s a lot more that goes into the hover and pressed-state cases but if you check out the style.css file in the release pack they should all be in there.

button {
	position: relative;
	margin: 0 .5em .5em .5em;
	padding: 0.5em 1.5em;
	font-size: 14px;
	font-weight: bold;
	font-family:Arial;
	color: #4f4f4f;
	text-shadow: 0 1px 1px #fff;
	background: #ddd;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
	background: -moz-linear-gradient(top, #ededed, #c4c4c4);
	border: 1px solid #acacac;
	border-top-color: #bdbdbd;
	letter-spacing:-1px;
	border-bottom-color: #949494;
	border-radius: .214em;
	-webkit-border-radius: .214em;
	-moz-border-radius: .214em;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;

	box-shadow: inset 0 1px 0 #fff;
    	-webkit-box-shadow: inset 0 1px 0 #fff;
    	-moz-box-shadow: inset 0 1px 0 #fff;
    	-o-box-shadow: inset 0 1px 0 #fff;

	cursor: pointer;
	}
	button:hover,
	button:focus {

		box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
    		-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
    		-moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
    		-o-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
		}
	button:active {
		background: #ccc;
		background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
		background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
		border-color: #a6a6a6;
		border-top-color: #939393;
		border-bottom-color: #bcbcbc;

		box-shadow: inset 0 -1px 0 #fff;
    		-webkit-box-shadow: inset 0 -1px 0 #fff;
    		-moz-box-shadow: inset 0 -1px 0 #fff;
    		-o-box-shadow: inset 0 -1px 0 #fff;
		}

and that’s it!. If you would like to check out a demo of RocketBar or download the sources, you can pick these up below.

If you liked RocketBar please feel free to share it with your friends and colleagues by clicking RocketBar – A jQuery And CSS3 Persistant Navigation Menu

Remember, RocketBar is a proof of concept which does use CSS3. At the moment support for FireFox 3.6, Safari 4.0, Chrome and WebKit nightlies are guaranteed.  While I’ve done my best to ensure that the navigation gracefully degrades in Internet Explorer, a live production version of the code would probably need integration of something like this to make it work fully in IE.

Hey guys. As a follow up to HTML5 in Under 5 Minutes, in this week’s screencast I’m going to show you how to create a useful piece of jQuery code for making your own graphical tooltips and the I’m going to show you how to turn it into a fully customizable jQuery plugin. Click on the preview above to go to the dedicated micro-site for this screencast or here to start watching it now. You can also download the sources from that page. I hope it helps!

Hey guys. I recorded you a screencast on HTML5 over the weekend – I hope you like it!. It covers a lot of the core features HTML5 will bring including code samples for any material covered. Just click on the HTML5 thumbnail above to be taken to the HTML5 in under 5 minutes micro-site where you can play or download the screencast. I hope it comes in useful! Thanks – Addy.

Hey guys. I’ve got a brand new jQuery plugin for you today. Let’s talk about the problem we’re going to be solving with it first: Broken links and 404 Errors are a problem that have plagued almost all websites since the dawn of the internet – they’re just a really bad user experience and we’ve all encountered them.

There’s nothing attractive about clicking a link hoping that it’ll take you to your destination only to find out that the page doesn’t exist. In most cases you’re left having to figure out what to do next – do you hit the back button? do you go googling the file to see if you can find it?. In some cases they can be a total show-stopper, so what can we do to change that?.

Today I’d like to present a new jQuery Plugin I wrote called Catch404. Through the magic of jQuery we’re going to catch 404 errors without your users even having to leave the page and then suggest some other options they’ve got using an inline jQuery Modal window. So, why it this useful and how does it work?.

View Demo  Download Source

Why Is Catch404 Useful?

Let’s pretend that this is a broken link. Can you imagine that when your users click this link, instead of them being redirected to a 404 error on your site, a friendly modal message pops up on your current page saying that it’s not available?. In that same message box you can then give them a sense of direction so that they’re not lost – you could ask them to click on a contact link to report the link’s broken, offer an alternative mirror, recommend they do a site search for the file or just say that you’re experiencing hosting issues and the file will be back up soon. The choice is completely up to you. The benefit of Catch404 is that you can offer your users a better experience when errors are encountered on your site.

How Does Catch404 Work?

The basic idea behind Catch404 is that you perform an Ajax query for a URL and handle the response provided accordingly, so if its a 404 error, we handle this error specifically. Now because cross-domain 404 handling with jQuery is something that has often been problematic to correctly implement, achieving this isn’t as straight-forward as it should be. Instead, the plugin uses a neat trick using the Yahoo YQL Engine to access the URL for us which returns a HTML string (local URLs don’t require this hack) – thanks to James Padolsey and Christian Heillman for their work in this area. Depending on the contents of this string response, we’re then able to handle the error from the same page the user tried clicking out from. In my plugin, a modal window is used to render the error message and it’s here that you’re able to define whatever message, links or tips that you would like to offer your users regarding the 404. This offers a much better user experience than traditional 404 handling because rather than taking them somewhere with no content, you’ve now got the option to either present them with an alternative mirror or advice through the modal window.

Let’s take a look at the jQuery under the bonnet!

As you can see in the code snippet below, the most advanced piece of code in this plugin is the part that performs the above 404 handling. Because we’re connecting up to a third party site (Yahoo) in order to access this URL, there is going to be a wait of about a second or two during our query and this is the case for URLs that are valid as well as those that aren’t. To ensure your users are aware of whats going on it can be useful to display a progress overlay on your page with the label ‘Checking URL status..’ or something similar.

//Perform the Ajax JSON call to get the Yahoo YQL response for the URL
   function performAjaxCall(url,msg,container)
  {
    if(url.match('^http')){
      msg.html(' (checking...)');

      //connect to yahoo YQL to get a response for the URL
      $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(url)+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            var data = filterData(data.results[0]);

             //if the url passes the test, navigate to it
			donav(url);
          } else {
            msg.html(' (404!)');
            //otherwise display the modal error window
	    fourPop();
          }
        }
      );
    }

function fourPop(){

		var popWidth = 500; //dim[0].split('=')[1];
		var popID = '404message';

		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;

		//Apply Margin to Popup
		$('#' + popID).css({
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});

		//Fade in Background
		$('body').append('
 

'); .
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();  

		return false;
	};

	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() {
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();
	}); 

		return false;
	});

    });
  }

How Do I Use Catch404 On My Site Or Page?

Using Catch404 will help you keep those broken links and fail whales at bay, but the best news is it’s relatively easy to start using straight away. All you need to do is first include jQuery and catch404.js in your page and then call the catch404() function on a selector as follows – it should apply it to the links with that particular class or id and you’re all set. In the following case I’m using the class ‘ajaxcheck’ to indicate links on the page that I would like checked using Catch404.

 

This is a link to check

$(document).ready(function()
{

$(".ajaxcheck").catch404();

});

Demo and Download

To see a fully featured demo of Catch404 in action, just click the demo button below. You can also download the plugin and source files via the Download button if you’d like to start using it in your projects.

View Demo  Download Source

Thanks for reading and I hope Catch404 helps you to keep those broken links, 404′s and fail whales at bay. To share this article with your friends click Catch404 – A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly now. Good luck with your projects!

- Addy.

Hey guys. Today I’d like us to look at a topic that can sometimes be overlooked in web design projects – the power of designing based on culture. Lets start off with a simple question – do you know how many of your visitors come from countries where English isn’t their first language?.

I didn’t until quite recently and the statistics really surprised me. Over half..that’s right..over half of the visitors to my site come from countries with a different first language (and a different culture). Knowing this opens up a number of new opportunities for site owners that find themselves a similar boat.

For starters, you can improve the experience these visitors get on your site by simply introducing translated versions of your articles or even a design that compliments their culture. Not only this but you can also open your site up to a much much broader audience, simply by making your posts easily available in multiple languages and making your content location friendly.

In this article, we’re first going to discuss the concept of localization in more detail with the help of Christian Arno (an expert in this field from translation company Lingo24) and I’m then going to show you how you can start offering ajax translation of your posts or pages using jQuery and the Google Translation API.

Web design for every culture

There are 1.8bn people now online around the world (according to Internet World Stats), of which only 495.8m are English speakers. That means that as soon as your site is online, it’s accessible by all of those people, but less than a third of your potential audience will be able to read your site if you stick to English as your only language.

This is especially important if you’re an online business, since a study by the Common Sense Advisory found that 85% of online shoppers, even those who speak multiple languages, will only buy from a site where they can read about the product in their own native language.

If you want to effectively sell to all those online shoppers who aren’t native English speakers, then the key is to localise. You need to identify exactly which countries will have a gap in the market for your product or service, and then create individual domains for each country, with local URLs, and preferably hosted on servers in the target country (to assist with your local search engine page rankings).

When it comes to building localised sites, there are a few things to keep in mind. You can’t just create the one template for every URL and simply switch the language, as different cultures have different requirements and preferences when it comes to website design. Your aim should be to create a template which will stay consistent in its branding, but also be flexible enough to change slightly between local versions. Here are a few of the points you should keep in mind.

Multicultural design

There are fundamental differences in design between sites designed for ‘High Context’ and ‘Low Context’ cultures. For instance, take a look at the differences between Youtube, which was designed with a Western, ‘Low Context’ culture in mind, and the Chinese version Tudou. Playing a video on Youtube involves the clip simply playing on your main screen, with the option for full screen – but playing  a video on Tudou takes you into a virtual cinema, with a background designed to look like a theatre and a host of pop-up animations.

This is a good illustration of the fundamental difference between ‘low context’ cultures, which like minimalism and straight-up information, and ‘high context’ cultures, which get a lot more of their information from the background or context of a site.

Essentially, you need to look at your competitors in each market to see what they’re doing successfully with their site designs, and then one-up them, while keeping an element of consistent branding across every site – for instance, look at the differences and similarities between Coke’s Swedish site and its Chinese site.

Navigation and colour

Your main issue with navigation is going to be the switch between left-to-right and right-to-left languages. Handily, cascading style sheets (CSS) make it quite easy to switch the direction of your text, or to flip your template, by adding the right-to-left dir="rtl" attribute to the necessary areas – but more on CSS later.  If you use a horizontal navigation bar, that will prevent problems caused by having to move your navigation bar from one side to the other. Alternatively, keeping your site as symmetrical as possible will save you from having to redesign your page when switching the direction of your language.

You should also think carefully about the colour scheme you go for with each site. Obviously you don’t want to be changing colours drastically between each site, but you should also be aware that colours have different meanings in different cultures, as shown by this graph. Going for a light coloured background with dark text is your best bet – and blue is generally considered to be the most universally acceptable colour.

CSS and Unicode UTF-8

Keeping your content separate from your design is rather handy when you have to change your text and images between multiple sites, so that’s why CSS is your best choice for cross-cultural web designing. You’ll also need a character encoder that can handle multiple scripts, from Latin, to Cyrillic, to Arabic and Simplified Chinese. Unicode UTF-8 does all that and more (90 scripts in total), and is supported by all the major browsers, making it your best bet as a character encoder.

Geolocation

Imagine being able to channel your visitors from any region in the world directly to a web page that’s localised for their language and culture. Geolocation can identify a web surfer’s location by checking the country in which their IP address is registered, and there are a number of companies – such as Hexa Software’s IP2Location and Digital Envoy -  which collate IP addresses and can lease you access to integrated databases that allow you to funnel site visitors directly to their localised domain.

The only problem is that IP addresses aren’t always hosted in the country where the end user resides – for instance, lots of servers are hosted in China, so while a visitor may live in Germany, their IP address will show up as being from China, and if you use geolocation you’ll end up automatically routing them to your Chinese site.

In any case, if you have each localised domain hosted on a server in its target country, it will appear as the preferred option in the local Google search – for instance, if you have www.yourcompany.fr hosted on a server in France, when people search for ‘your service’ on Google.fr, they’ll get your French site, rather than www.yourcompany.com.

Translation and copy-writing for localised sites

Most importantly, you need to make sure that your content is correct and appropriate for each local site. While it may be tempting to just run your English copy through Google Translate and post up the results, that’s not your best option for a trustworthy, reliable looking site.

Machine translation is often fine to get the gist of a piece of foreign language text, but when it comes to marketing material, which requires a fine balance to be trustworthy and also sell to the customer, you’re best off getting a professional who lives in the target country to either write your copy from scratch, or translate it and check for any potential points of offense or ‘wrong notes’. The last thing you want is to commit a translation faux pas, such as when General Motors introduced their new Chevy Nova into the Mexican market, obviously not realising that ‘no va’ in Spanish means ‘no go’.

Translation widgets and inline translation

If you’re running off a tight budget, though, and can’t afford the expense of professional translation and copy writing, there’s always the option of adding a translation widget to your home page, or using inline translation. There are plenty of translation engines out there, and by simply copying a bit of code into your site you’ll get a box that lets visitors know they can automatically translate the text into any language.

Google Translate is probably the best known – and was the most popular in a recent review of translation engines – but it’s not your only option. Microsoft also has a widget for Windows Live Translator, and then there’s widgets for Bing, which was voted superior for Italian and German translation, and pioneer Babelfish, which rates well for Chinese to English translation. There are plenty of others available with different specialisations, most of which are stocked at Widget Box.

Alternatively, for a smoother interaction experience, if you’re up to date with inline functions you can build inline translation code into your site to offer your visitors an instantly localised browsing experience. Javascript libraries like jQuery offer a host of useful advice on how to use asynchronous JavaScript and XML (Ajax) to incorporate code into your site and create rich and engaging websites that adapt intuitively to your visitors’ language needs and offer your visitors a high definition, ‘no refresh’ browsing experience.

Harnessing the Google Translation API with jQuery

To add instant jQuery translations to your site, I recommend the use of the jQuery Translate plugin. This nicely interfaces with the Google Translation API giving you instant access to translation of your content across a number of different languages. Here’s a demo of it in action on JS-Bin. To get started, first download the translate plugin here.

Next, include the plugin after jQuery as follows:

< script type="text/javascript" src="js/jquery-1.4.2.min.js">
< script type="text/javascript" src="js/jquery.translate-1.3.9.js">

If you want to use the plugin on page load in most cases you can call it inside $(document).ready() but in some cases you have to define a callback function to be executed when the Language API is loaded. It’s not $(document).ready() but $.translate.ready():

$(document).ready(function(){
  //this will work,
  //returns a jQuery object and translates the text when the Language API is loaded
  $('body').translate('english');

  //this will work too,
  //returns an internal object and translates the text when the Language API is loaded
  $.translate( 'some text', 'de', {
    complete: function(){
                console.log( this.translation )
    }
  });

  //this won't (always) work!
  //the Language API may not be loaded, the return value cannot be determined
  $.translate.getLanguages();

  //this will work, as it will be executed when the Language API is loaded
  $.translate.ready(function(){
    $.translate.getLanguages()
  })

  //you can also use a shorter alias as in jQuery:
  $.translate(function(){
    $.translate.getLanguages()
  })

})

As you can see above you can translate an html element (first example) or only some text (second example). This plugin is great because you could easily add in a few flag icons to the top of your articles and trigger the Google Translate API to translate your post’s content via Ajax. Remember that if you’re applying the translate function to ‘body’, your layout may need to be flexible enough to accomodate longer text labels. The safest way to apply it in my opinion would be to just the post-container or in the case of a standard site, the container of your main text. Use your best judgement here!

In conclusion

By researching your markets and getting some assistance from in-country experts before you build and launch your localised sites, you can save yourself a lot of hassle later, and have a much better chance of finding success with your localised sites first time, no matter what culture you’re marketing to.

About the guest author

Christian Arno is the founder and Managing Director of global translation agency and localisation specialists Lingo24. Launched in 2001, Lingo24 now has over 120 employees spanning four continents and clients in over sixty countries. In the past twelve months, they have translated over thirty million words for businesses in every industry sector and their projected turnover for 2010 is £6.3m.

Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below!

Demos and text are available for anyone that wants to read/see them in the rest of the post.

View Demo  Download Source

Today’s animations are created using a really useful jQuery plugin called Spritely. You can download the Spritely plugin here. Spritely allows you to create your own animations using two simple functions.The pan() function which lets you pan (move) an image across the screen in a particular direction; and the sprite() function which lets you work with multiple frames and add more complex behaviours to your animations. In the screencast I show you how to first use pan() to create a moving silhouette of a city and then we use the sprite() function to add an animated plane to it. To help you with your own creations, I’m including code for both of these below.

Basic Example using Pan()

How complex your animations can get really depend on what you’re trying to achieve. If you’re trying to create a moving landscape scene, you’ll probably be able to knock that out fairly quickly because all you need to do is pan your images across the screen at a particular speed.

Here’s the sample code I used to create the city skyline panning effect:

The jQuery

			$(document).ready(function() {
				$('#city').pan({fps: 30, speed: 2, dir: 'left'});
				});

The HTML

The CSS

		body {
			background: #fff;
			margin:0 auto;
		}

		/*City Silhouette*/
		#city {
			position: absolute;
			width: 99%;
			height: 416px;
			background: transparent url(city.png) 0 130px repeat-x;
			border: 1px solid black;
		}

Advanced Example Using Pan() & Sprite()

If however you’d like to create something a little more detailed like a 2D or 3D character with movement, you’ll need to use a package like Maya, 3DMax or even Flash to output the animation as frames with a transparent background. Next, follow my steps below to create the jQuery animation for it.

1. Output your frames as transparent PNG files to a directory on your drive. Because animation can sometimes be a memory intensive task, you’ll want to minimize this as much as possible. This can be achieved by outputting 1 frame for every 5-15 in your original animation. Don’t worry! The Spritely plugin supports setting custom frame-rates so you can still make your final animation look relatively smooth.
2. Use a Sprite Generation tool such as CSSSprit.es or CSSSprites.com to stitch your frames together as a single image file. Try to keep the final filesize down to within a few megabytes (I would say 2MB should really be the higher end of that filesize).
3. Next animate your content using Spritely as I did in my demo. You can find some sample code for this below.

The jQuery

  (function($) {
			$(document).ready(function() {

			    /* City 1 */
				$('#city1').pan({fps: 30, speed: 1, dir: 'right'}); 

				/* City 2 - This gives the animation a depth of perspective
				as one city silhoette is slightly away from the other*/
				$('#city2').pan({fps: 30, speed: 2, dir: 'right'}); 

				/*The clouds and sky*/
				$('#sky').pan({fps: 30, speed: 0.5, dir: 'right'}); 

				/*The Plane animation*/
				var stage_left = (($('body').width() - 866) / 2);
				var stage_top = 30;

				/* Spritely's sprite function allows you to define
				more complex animations which contain more than 1
				frame. You can also use the spRandom feature to define
				random behaviour.
				*/
				$('#plane1').sprite({fps: 8, no_of_frames: 14})
					.spRandom({
						top: 40,
						left: stage_left + 20,
						right: 400,
						bottom: 140,
						speed: 3500,
						pause: 1000
					});

			});
		})(jQuery);
  

The HTML

The CSS

			body
			{
			background: #fff;
			margin:0 auto;
		     }

		#sky {
		  position:absolute;
		  width:100%;
		  height: 416px;
		  background: transparent url(sky.jpg) 0 0px repeat-x; 

		}

		#city {
			position: absolute;
			width: 100%;
			height: 416px;
			background: transparent url(city.png) 0 130px repeat-x;

		}

		#city2 {
			position: absolute;
			width: 100%;
			height: 416px;
			background: transparent url(city2.png) 0 130px repeat-x;
		}

		#plane1 {
			position: absolute;
			width: 730px;
			height: 167px;
			background: transparent url(planesprite.png) 0 50px no-repeat;
		}

		#content {

		   width: 100%;
		   position:relative;
		   clear:both;
		}

		#leftcontent {
		  width:70%;
		}

		#rightcontent {
		  width:30%;
		  background-color:blue;
		}

And thats it!. As with all my ‘Under 5 Minutes’ series, you obviously won’t have learned absolutely everything there is to know about sprite animation, but hopefully you will have picked up many of the basics. Please feel free to download the source files and play around with them – I hope they come in useful!

Demo & Download

View Demo  Download Source

Conclusion

This tutorial was created to demonstrate how to create animations in jQuery using sprites. This powerful technique is a simple, effective way of creating cross-browser friendly animations that don’t need to rely on Flash or any third-party plugins to function. To see more demos of how Spritely is being used to add rich animated experiences to web pages, feel free to have a look at the Spritely gallery here. If you enjoyed today’s post, please share it with your friends and colleagues by clicking jQuery & CSS Sprite Animation Explained In Under 5 Minutes

We’ve got a really great post for you today guys. We’re going to explore whether it’s fundamentally important for designers and developers to understand how to use vanilla JavaScript and not just it’s derivative frameworks and libraries such as jQuery and MooTools. You might be asking ‘why?’, but read on and you’ll find out!. Because this is a topic that can invoke passion on both sides of the debate, I’ve asked a few familiar names to join the discussion including David Walsh, Chris Coyier, Marco Kupier, Janko Javanovic and James Padolsey. All of these authors use jQuery regularly and are in a good position to advise on the pros and cons of knowing vanilla JS.
Before we begin, I’d like to take this opportunity to introduce James Jackson as a new member of the site team who’s contribution to this post was invaluable. So let’s get started!.

We all know that JavaScript frameworks have made it significantly easier to create rich animated effects and interfaces in our web pages – the type of thing which previously would have taken a lot longer if we were writing everything from scratch. I’ve seen coders creating sliding effects and javascript animation for over 10 years but until now, the effort required to achieve the effects through plain JS were sometimes considered too much hassle. Throw in cross-browser compatibility issues and you had a nightmare. jQuery, MooTools and other frameworks have changed this.

They haven’t altered the underlying javascript (it’s important to point this out), but they have introduced an easier layer of access to JS and it’s core functionality which was previously missing.

The question we’re asking today is whether it’s important for people who use libraries like jQuery to understand how  the underlying javascript works. My personal opinion is that it is – whilst you can "get by" knowing how to use many of the basic functins jQuery offers, I think that there’s a certain power in knowing why a particular selector should be used over another or how to create something from scratch if jQuery doesn’t particularly support executing it well.

Let’s now delve into this topic further with James.

jQuery Vs. JavaScript

jQuery is the key to the Web 2.0 lock.

I’m not afraid to say it, and furthermore, I’m not afraid to utilize a well known buzz term like, "Web 2.0".  Now, throughout this article, I’m going to be referencing jQuery quite a bit but that’s only because it’s my favorite Javascript library and the one I know the best.  You could easily support any number of other libraries in a similar fashion.

That said, jQuery has helped a whole new generation of coders approach that ever alluring, and always intimidating field of web scripting.  Browsers themselves are greatly measured by how well (and quickly!) they can support Javascript, and jQuery alike.

Most people reading this article are likely already quite familiar with jQuery, so I’d like to take a generous step backward and talk about what lies beneath it.  Javascript itself.

We all understand Javascript in different ways, possible by the vast variability of its usefulness, but at its core Javascript really showcases itself as a powerful, easy to use scripting language that is more accessible than many of its influences.  The notorious C, and its derivitaves, is often understood as a pipe dream to many modern developers and yet every single Javascript programmer utilizes a syntax almost indisinguishable from C’s without ever realizing it.

jQuery further blurs the lines with its own, innovative syntax which causes its biggest strength to also be its biggest weakness: approachability.  Within any system, its a common rule of thumb that the simpler it is to use, the more removed from the source material it gets.  jQuery is no exception.

A great deal of jQuery programmers I have known since its inception have been drawn to jQuery for its simplicity, betwitched by its seeming ability to allow the average web designer to magically produce Javascript effects that were otherwise impossible.  When a client wants something to zoom across the screen, or to showcase a slideshow of photographs, jQuery answers the call.  With a few script includes and some copying and pasting, its not only possible but extremely effective.  With the overwhelming amount of customization that jQuery Plugin developers put into their modules, coders can even have intricate control over these effects without ever touching a single line of raw Javascript.  jQuery takes care of all of it for you.

The problem herein lies in the moment that every late-night script surgeon will inevitably encounter: when something doesn’t do *exactly* what we need it to.  We try tweaking the settings, finding an alternative plugin or scaring ourselves witless looking at the wall of code within the plugins themselves.

Don’t worry — we’ve all been there.  This frustration, however, doesn’t have to halt our programming process and can instead offer an exciting challenge.  If we understand the underlying code well enough, then virtually nothing is outside of our grasp within the world of Javascript.

Virtually any element within a web page, through the most popular operating system on the planet — the web browser, is accessible and can have its attributes changed.  New elements can be created, manipulated and even removed from existence.  Your keyboard becomes your brush and the browser becomes your canvas.  Literally, even now with HTML5.

jQuery provides a proverbial ‘Paint by Numbers’ tool for us, but when we need to break away from the lines and numerical digits, the paper beneath needs to be understood as well.

I’m sure it goes without saying, but I’d bet that the average jQuery enthusiast without extensive knowledge of Javascript doesn’t fully realize what jQuery is: a collection of Javascript.  It’s not a new environment, it’s not an expansion pack; it’s a big pile of Javascript that draws a curtain between you and Javascript.  All the web’s a stage, and the DOM is its players.

Most readers, who are familiar with jQuery know of the $() identifier.  It allows you to select, or create/remove, any element on a webpage and manipulate it.  If we want to grab an element like this:

Then all we require to select it is:

$("#example")

From there, we can affect it in the multitude of ways that jQuery provides.  What does this $() mean, though, exactly?  How does it work?  Is it magic?

In all actuality, $()’s usefulness, speed and versatility is bound only by your understanding of it. Before we delve further into this, lets remember that $() is a jQuery selector which can take more than one parameter, element IDs separated by commas and returns elements as objects in an array. For the sake of simplicity, let’s imagine that we’re just trying to get the very first element matched in the DOM with a particular ID (in jQuery this translates to $(‘#example’)[0]) In this case, we could achieve this in standard vanilla JavaScript as follows:

document.getElementById("example")

Now, because Javascript has this functionality included right into its core, calling elements in this way greatly speeds up jQuery (tests show that getElementById is faster than standard selection in jQuery, however, this is only when you want to grab elements of a particular ID rather than a collection of elements).  Because we’re making it so that jQuery doesn’t have to churn through functions and translators, and instead can just use Javascript’s built-in functionality to jump right to the item. Again, let’s remember that jQuery actually provides us with ways of accessing elements by much more advanced selection techniques, however, if you know exactly what you’re after, vanilla can help.

What does this mean to you?  SPEED. 

By understanding this aspect of Javascript, you can literally cut whole chunks of processing time out of your plugins and scripts. We should note however that jQuery’s use of the Sizzle selector engine has done it’s best to eliminate redundancy when looking up elements in the DOM, but there are still gains to be made for those that understand the underlying javascript.

The Animate feature of jQuery, as mentioned above, allows us to move any element on a page around the browser’s view port with only a few lines of code: 

$("#element").animate({ left: 100px; });

This makes moving #element 100 pixels to the right extremely simple.  However, let’s assume that we want to add a wavy-animation to our element, so it doesn’t mearly glide to the left but instead waves around (as though our precious #element has had a few to many Box Model Martini’s).  This is possible with jQuery, of course, and there are even plugins available to accomplish it.  Let’s further assume that either we have a very specific vision for how it will animate or (more likely) our client does.

Either way, time will be spent.  Whether its time spent looking for the appropriate plugin, or writing the code ourself.

If we briefly break down jQuery.Animate, we get a very simple process: an event occurring within an interval or timer, selecting the element (by ID) and changing its ‘style.left’ property incrementally through CSS. . Animate() of course supports a wide range of features including intervals, easing and other plugins, but if we wanted to take animate at it’s most basic and wanted to re-create this in basic javascript (moving an element across the screen), lets see how we cold create that code.

var example = null; // object

function doMove() {
  example.style.left = parseInt(example.style.left)+1+'px';
  setTimeout(doMove,20); // call doMove in 20msec
}

function init() {
  example = document.getElementById('example'); // get the "example" object
  example.style.left = '0px'; // set its initial position to 0px
  doMove(); // start animating
}

window.onload = init;

And we’re done. Now obviously, there is a LOT more going on behind the animate function – it supports chaining, easing plugins and a greater level of modification than simply moving an item across the screen, but in its most basic form, that’s what we’re trying to achieve.

This is a more advanced example, so what if you want to mimic a much simpler function of jQuery?  Say, the hide() command?

$("example").hide();

This comes in really handy, as you can hide elements that are not currently needed in your application.  What does this function *do* exactly, though?  As with so many things, the better we understand something, the better we can innovate.

Much of what makes Web Apps so functional (and, let’s admit it, pretty) is affecting their CSS attributes: their color, their opacity, their location on the screen, etc.  The hide() function affects one of the most used CSS attributes: display.

To translate the above hide command, we could also imagine it like this: 

 $("#example").css("display","none");

Of course, the hide() command gives you more control over the effect, but by using the css() command instead, we can now do some pretty interesting things, such as:

Blend an object in with the text, rather than putting it on its own line:

 $("#example").css("display","inline");

The opposite, take an inline element (e.g. <strong>) and make it take up a whole line:

 $("#example").css("display","block");

That’ll get someone’s attention!

Far too often, a jQuery developer will find themselves poking and prodding a bit of jQuery code, trying to get it to behave properly; when their answer is just a css() command away.

This is not to say that you have to choose between Javascript or jQuery, though.  By combining the two, we can still use jQuery for what it’s best at: selecting elements and manipulating their attributes.  For example, instead of using the whole line of document.getElementById("element") we can save ourselves some code by using $("#element").  jQuery has a built-in checker for elements selected by that and will essentially translate it to our full "getElementById" line, anyhow, so we are literally just using it to abbreviate our code.

This is just the tip of the iceberg.  Technically speaking, jQuery is a collection of snippets that allow someone to abide by the D.R.Y. (Don’t Repeat Yourself) method of programming.  I urge you, however, to take advantage of jQuery, but not completely depend on it to code.

jQuery is a tool.  Javascript is the garden.  Together, they can allow us to cultivate endless abundance if utilized in harmony.

Knowing jQuery (among many other scripting libraries) in this modern world of web development is crucial.  It provides quicker turn around times, opens your code up to a vast world of other developers and makes your code efficient, and easy to read.  However, even the best tools are only as useful as the person who wields them.

If we have not only a better understanding of our tools, but also our environment, then we can help usher in — if not pioneer — the next era of web developers.

Thoughts from:

David Walsh
                                             

"Learning JavaScript is absolutely paramount to becoming an effective Web Designer or Developer.  While the JavaScript libraries do as much as possible to ease the pain of some of JavaScript’s more time-consuming tasks, libraries cannot anticipate their every use.  Without proper knowledge of JavaScript, a developer can spend hours debugging an issue that should really only take a few moments.  Spending the time to become a ‘Vanilla JS’ expert will allow a developer to more easily learn *any* of the popular frameworks, thus making that developer far more valuable."

Chris Coyier

"I’d love to tell you all about how life will be better if you learn and understand JavaScript before you learn libraries. Or at least, that you should go back and get those fundamentals after starting out with libraries. Here is reality for me though: I’m terrible at vanilla JavaScript. It would be pretty hard for me to try and get day-to-day design work done if I couldn’t use jQuery. In fact, I probably just wouldn’t do it, and stick to design and markup. I’d love to go back and get those fundamentals, and I probably will over time, and it will make me better, but I’m also living proof that you can still get the job done being a library junkie."

 Janko Javanovic

"I will be glad to give an opinion about js/jQuery. I agree that developers should have at least some understanding of JavaScript. jQuery and similar libraries might be a good way to get people interested in JavaScript in general. But in the other hand it might actually be a stumbling block – it’s so easy to use jQuery that many don’t need a deeper understanding of JS.

Lack of knowledge become obvious when developers need to modify/extend some jQuery code. They don’t understand it fully. And then they cry for help. So I’d say it would be better for them to learn a few things about JS and try figure things out themselves. Otherwise, chances are they will never learn."

Marco Kuiper

"Very interesting topic, especially since I learned jQuery before learning actual JavaScript myself (the only JavaScript I knew before that were the "mouse following clock" and "disable right click" stuff – you know, back in the days…). But at the time I started to get a hang of jQuery, I did wanted to learn more about JavaScript. Why? Basically because I wanted to get the maximum out of jQuery.

For example, take a look at speed. I learned that using an ID selector ( $("#myelement") ) is around 100 times faster than a class selector ( $(".myelement") ) . This is because the ID selector maps to the native "getElementByID()" JavaScript function. The same is for using tag selectors ( $("body") ), since that maps to the native "getElementsByTagName()" JavaScript function. The class selector loops through all the objects in the DOM to find the specified elements. There are more speed tricks for jQuery that you would know if you knew how JavaScript works.

I truly love the way how you can create elements in jQuery 1.4; Simply apply an element name to the jQuery core method and you’re ready to go ( $("<div />") ). Before that way was implemented in jQuery, you could simply use the native JavaScript method "document.createElement()". Although it isn’t as great as the way jQuery creates elements, it did allow you to create elements using JavaScript. Using those kind of methods even before it was added to the jQuery core, and you were sure to be one step ahead of the rest.

The last example I want to show you, is the use of parameters. The jQuery ".bind()" method attaches behavior to a specified element. The first parameter is the eventType, like "click", "mouseenter" and "mouseleave". How would you know which eventTypes you could specify, if you don’t know the implementation of JavaScript ("object.onmouseenter" etc.)? And why do you use all those curly brackets (when creating objects) and using functions as parameters ( $("#myelement").click(function() { var doStuff; } ); )? All that kind of stuff is JavaScript that you’re using. If you’re using it, use it and learn it correct.

So, if you want to get better at jQuery, take a look "under the hood" to see the JavaScript engine that is working hard for you. Learn and master it!"

James Padolsey

"I agree that there is a problem with the terminology used throughout the jQuery community. jQuery uniquely appeals to people with minimal programming experience and that makes it all the more complicated to explain it in the right way. I’ve always been a proponent of learning JavaScript and the DOM API before any library. I’m not saying that this is the only way; obviously there are people who have learnt it the other way round, and they’re just as proficient as you or I. But, still, there is a difficulty to overcome, and I think there’s a lot of progress that needs to be made in the way that jQuery’s paradigms and implementation are explained to beginners. I think you’re right about “wrapping” being misleading, but, it is a helpful metaphor which gives beginners confidence when using jQuery.

Let’s face it! Most people that use jQuery are not looking to become an expert. They don’t care about its internals or what really happens when they call the magical dollar. They just want it to work. The people who really want to dig into it will do so by their own means.

I’ve used some of these metaphors myself, such as “caching” — it can be misleading but most “web” people understand the term. If I said “reference” instead then I’d have to explain what a reference is and how objects in JavaScript are different to primitive types, and how an identifier is simply a pointer to an object in “memory”… it gets complicated very quickly.

jQuery is one of those cool technologies that gives you tremendous power right off the bat! That’s what appeals to beginners, I think. They feel powerful; they feel that they pretty-much understand jQuery and how it works. We wouldn’t want to shatter that confidence by the realisation that they, in fact, still have a lot to learn about jQuery, JavaScript, and the DOM.

Don’t get me wrong. I really do support the idea that beginners should be taught correctly right from square one, but I think it needs to be done delicately. You can’t drown them with complicated words and ideas; that’ll surely scare them away."

I would say that learning APIs and abstractions such as the DOM, jQuery, Mootools, Prototype, Dojo, ExtJS and others is quite pointless for the beginner because there are literally thousands of libraries, toolkits and frameworks that the beginner _could_ pick up…. Obviously the DOM is central but at the end of the day it’s just a bunch of method-names and argument signatures that you have to remember.

What needs to be taught is **JavaScript** … or rather, ECMAScript.. the real thing — i.e. hand out a copy of the ES3 specification. (actually, that’d definitely scare people)

The problem with learning JS is that most of the really good resources are simply not geared towards beginners. Websites like w3schools and "javascript.about.com" ARE geared towards beginners but their content is crap — it’ll get an individual past the noob phase but not any further. They need to be learning about primitives, objects, variable declaration, function declaration, function expressions, scope, closure, operator precedence, booleans… blah blah blah… The rhino book is what they all really need.

Most of the people using jQuery don’t even want to "program", per se; they just want to add cool’ness to their websites. Telling them they defined a global instead of a local var, and they should probably use function declarations because it makes debugging easier is pointless because they really couldn’t care less. The devs that really care about code quality and all the stuff we love are already on the path to enlightenment."

Conclusions

And that’s it guys. What are your thoughts on the topic?. Do you think that it’s important to have an understanding of basic JavaScript?. We’d all love to have an open discussion on this and we’d really like to hear your opinions in the comments section below. If you liked the post, remember that you can easily share it with your friends and colleagues just be clicking the jQuery Vs. JavaScript – The Masters Share Their Views On Vanilla JS button. I hope you found this post useful guys!

.

Great topic today!. Performance optimization. Performance optimization is an important aspect of any type of coding project, including those that use jQuery. Today I’m going to go through some quick useful jQuery coding and performance tips that I think are important for every JavaScript developer to bare in mind when writing their projects using the jQuery framework. Some of these are going to be a little obvious whilst others are things that you might not have considered doing before.

Ask yourself this question. Do you think that your scripts are currently running as quickly as they could be?. Do they occupy the smallest filesize footprint and still deliver the same results as their un-optimized counterparts?. The answer to these questions in most cases is ‘no’.

Often in web development we’re working against tight deadlines and can sometimes fall into a pattern of thinking that if our scripts work in all web browsers and aren’t howling alert! help me! that our job is done. The truth is that if we were to all put in just a little bit more effort, we could actually deliver web applications and scripts that are both fully functional and as optimal as they can be.

Today I’m going to give you 8 tips that will help you ensure that your jQuery projects stay optimized.

When I say obsolete, I mean that there may be better ways to achieving code that you regularly write. The easiest way to find out if this is the case is to ask yourself this question:  Do you know what the differences between jQuery 1.3.2 and jQuery 1.4.2 are?. If not, keep reading!

The jQuery team spend hundreds of combined hours every year churning out new functions and optimizing the existing ones in the jQuery library. Heck, I sometimes question if John Resig even sleeps, such is his dedication to making the library be as efficient as possible.

What this means is that if you’re able to use the latest features and techniques jQuery has to offer that are more optimal that what you’ve been using so far, you can get very cheap, very quick boosts in performance for your application.

We all know that it can be a lot easier just using the jQuery techniques you’re already used to, but if it just takes a few minutes to read through the specs and pick up a few quick performance wins, then why not just do it?

Do you know what all of these do?

Delegate/Undelegate
nextUntil
Chaining event handlers
Controlling a functions context
Does a element have something? (.has)
Element Unwrapping
Determining an object’s type

If not, here are the tutorials and references for the jQuery:

• 1.4 features: http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/
• 1.4.1 features: http://api.jquery.com/category/version/1.4.1/
• 1.4.2 core features: http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2 and  http://api.jquery.com/category/version/1.4.2/

you can also find tons of 1.4.2 snippets in my recent jQuery snippet posts.

There are some developers that will load all of the jQuery code for a site on every page, regardless of whether or not it’s going to be used there or not. (Don’t worry, if you’ve done this before, the good news is you can always change that habit!).

What you need to remember is that jQuery still has to take time to execute that code and if its not needed you can get a quick performance gain by checking whether you’re on a page which requires that script to run.

This can be achieved in many ways such as defining a class or ID unique to each page’s content and checking for it’s existence before you run it’s specific code or even through server-side processing if you want to run check on the filename being accessed.

As long as you can do your best to only load code that’s needed, you’ll get some quick performance boosts that may not have been there if you hadn’t thought about this in advance.

How many of you have actually written unit tests for your JavaScript or jQuery code this week?. I’m hearing crickets and one man in the corner saying ‘me’. Uh oh. I think that there’s a tendency for us web developers to  forget that just like Java, C++ or .NET, JavaScript is a programming language equally as capable of having bugs as the others and to minimize this, spend just that extra little bit of time on your project writing some unit tests for your code. It’s really really easy to.

Not only is it good as a software engineering best practice, but it’s also something you need if your code is going into a live production system which could be accessed by a large audience. You want your code to be fully functional and to be structured in such a way that you know exactly how it’s going to behave and can anticipate quirks in advance.

One right off the top of my head is if you’re using Ajax to load up some of your page content. If things are taking a longer to load up than they should, wouldn’t it be nicer if your app output a ‘Connection Issue Detected, please try refreshing’ message rather than just hanging for ages?. Believe me, your users will appreciate your attention to detail.

If you’re looking for some powerful JavaScript unit testing tools, QUnit and FireUnit are both quite useful and I’d recommend checking them out. Nettuts also put out a really straightforward article last year on how to use QUnit to test your jQuery code and I’d recommend giving it a read some time.

How fast is your code? If you’re looking for a simple way to improve the performance of your code, simply log the amount of time it takes for your functions to execute and use that as a starting point for your optimization strategy.

The Firebug console makes it very easy for any JavaScript developer to log debug information in the same way you would with any other language’s IDE so consider using it. Logging might sound very simple, but it can actually turn up quirks in your code you may not have realized existed or which may need optimization.

Now if you’re looking for even more accurate results (remember, Firebug is an add-on and will introduce marginal delays to your stats because it’s GUI needs to be updated dynamically), close Firebug and create your own own simple logging tool as follows (note: this is a very basic example and you’ll need to edit the code as per your needs).

JavaScript

function t() {
    var time = new Date();
    return time.getTime();
} 

$(window).load(function() {
    var s = t(); 

    for (var i=0; i<10000; i=i+1) {
        $('#content').html("hello");
    }
    $('#out').append( (t()-s) +'ms');
});

HTML

Time:
Content:

Benchmarking ensures that you know how fast your code runs, not just in one browser but potentially in all of them. This can be of significant importance when you’re talking about large jQuery applications or apps that rely heavily on JavaScript based animations or Ajax.

Page-load speeds are an ever increasingly important factor in performance optimization and one only needs to look at Google’s inclusion of this in page rankings to realize just how important decreasing the number of files you need to load is.

How many WordPress, Corporate or Portfolio sites to you visit where if you look at the source code, you’ll see maybe 10 or 12 different JavaScript files that need to be loaded before the page is ready to be used?. If you want your pages to load quicker, just ensure that you use a compression and concatenation tool that will put all your scripts into the same file so you can still update them separately but they’ll be delivered at the same time on your live site. This way you’ll achieve both a smaller JavaScript footprint
and your site only requiring one JS file to download for your code.

(A sidenote with that is, please try to cut down on the number of document.ready and window.load instances in your page. If your code will all be running out of the same file, it probably makes sense to just have one instance of these running).

These resources will help you achieve all of the above and are free whether
you are using a PC or Mac:

http://jscompress.com/ (for any sites)
http://www.halmatferello.com/lab/wp-js/ (for WordPress users)
http://ant.apache.org/manual/CoreTasks/concat.html (for Ant users)  

It’s true, where possible you should always try to run your selections based on a context however it’s useful just to bare in mind that when you’re passing a context to the jQuery constructor, it creates an extra unnecessary extra function call.

jQuery’s insides run content.find(selector) anyway, so you can technically skip that step if you’re working in a page structure that may not benefit greatly from using context. Below you can see an example of what I’m talking about.

//This is context is typically used.
$('div', context ).doSomethingOrOther();

//But here, you can do the same thing minus the extra
//instance and the additional function call
context.find('div').doSomethingOrOther();

Document.ready isn’t a terrible thing, but it’s a habit that many developers still have including myself occasionally. It doesn’t matter where you’re using $(function(){}); or the full version of this, but truth be told it is significantly more optimal to be using Window.load in your applications.

The reason behind this idea is that document.ready happens during page render while  objects are still downloading and that cause some stalls in your page. You don’t want that. You can however reduce the CPU utilization during the page load by binding your jQuery functions to  the $(window).load event – it occurs after all objects called by the HTML have fully completed downloading.

That’s one line change that can give you scripts that little extra performance boost!.

8. Strike A Balance Between Your Use Of JavaScript & jQuery

jQuery is a fantastic way to speed up work for almost anyone on the front-end. Remember however, that there are scenarios where jQuery may take longer to execute certain functions than if you were to use regular JavaScript. CSS styling is just one example that comes to mind.

Some of the other methods we’re all used to using like show() and hide() also have their own performance overheads so always remember to strike a balance between your code’s complexity and it’s overall efficiency. You can always mix plain JavaScript code with some jQuery and in most cases it should still run fine.

Another situation is this: If all you need to do is run two lines of JavaScript code, there isn’t a need for you to use jQuery (even in it’s minified form it’s still roughly 20-30kb’s worth of extra data that needs to be downloaded).  Similarly, if you’re writing a large complex application try to use jQuery rather than writing overly long plain-JavaScript script.

Use best judgement here and you’ll find that you’ll get the both of both worlds and their combined performance advantages.

And that’s it!. If you’ve found this post useful please feel free to share it with your friends and colleagues by clicking the 8 jQuery Performance & Optimization Tips You Need button. Until next time, may the $ be with you.