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.

This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass)  and the best part is, it’s not that difficult to achieve. I always think it’s useful to see a demo of what we’re making before we look at it, so click here to check out the live demo.   

You’ll also learn today how you can successfully use layering in your designs to give your gallery that extra bit of detail that can make it stand out from the others. Whilst I’m going to leave it to David Walsh to provide you with galleries full of Christina Ricci photos, today’s component includes a set of pictures from the movie ‘Kick-Ass’ for no other reason than because ; )

The Animated ‘Shine’ Effect

The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

Before we get into any code, lets go through the basic concepts behind the effect. We want to pass a light-beam (in this case an image simulating a shine) past our image when the user hovers over it. Now because I wanted to style up today’s gallery so that each thumbnail appeared to float out of it’s container, the steps to achieving the below animation are as follows:

1. Change the margins of the thumbnail element so that it floats away from it’s container
2. Set the background-position of your “shine” graphic to be –1 * (it’s total width)
3. Animate your background-position to value of the total width. Effectively we’re hiding the gloss off-stage and then animating it across the image.

You can see this being achieved in the diagram below.

Now, because ShineTime is going to also apply this effect to the caption holder component (see the demo), I needed to come up with a much larger shine graphic for this that cleanly executes the desired effect without being slow or making the text unreadable. Using an image about 20% longer than the container in each direction at a layer below the text made this possible.

Designing ShineTime

Graphics-wise, there are a few important things to note about ShineTime. I wanted to give this demo an extra-depth of design detail so the following techniques were applied to create the final main-photo area:

1. CSS3 is used to create the rounded-corner borders around the main container div. It is also used on the indented shadow layer (which you can see below). In order for the caption container to also fit this design spec, it’s bottom rounded corners use CSS3 to keep everything looking like it’s inside the same box.
2. Layering is heavily used in this demo to achieve a photographic-depth effect. The choice to do this using an image rather than CSS3 was in order to preserve the effect displaying in browsers like IE6.
3. Normally, image galleries are based on UL/LI elements which are wrapped together using jQuery & CSS to turn them into something pretty. Here, because the actual image needs to be behind a few other layers so that it can have (a) Rounded corners and (b) the photo-effect, it’s necessary for all images to be loaded using the background-image property of the ‘largephoto’ div (take a look at the HTML code to see what I’m talking about)
4. CSS3 is finally also used on the ShineTime Header. Whilst I’ve included Cufon for a little added cleanliness to my typographic elements, in the header it’s simply used for adding an indented feel to the text to give the background that extra ‘metallic’ feel to it.

The Code

Finally, for the part you’ve been waiting for: the code.

HTML (Sample)

 
    
 
 




              


Welcome to ShineTime


 

 
 

 

CSS

body { background-color:#333; margin:0 auto;
background-image:url('images/interface/bgnoise.png');}
#container { width:793px; height:498px; margin:0 auto;
background-image:url('images/interface/back_noise.png');
background-color:#111; margin-top:40px;}
#container .mainframe { width: 500px; height:498px; float:left}
#container .thumbnails { float:left; width:293px; height:498px;
background-repeat:no-repeat; background-image:url('images/interface/total_grid.png');
background-position:9px 70px; }
.thumbnailimage { float:left; padding:7px;}
.large_thumb	{float:left; position: relative; width:64px;
height:64px; padding:0px 10px 0px 0;}
img.large_thumb_image	{position:absolute; left:5px; top:4px;}
.large_thumb_border	{width:64px; height:64px;
background:url('images/interface/thumb_border.png'); position:absolute; }
.large_thumb_shine	{width:54px; height:54px;
background:url('images/interface/shine.png'); position:absolute;
background-position:-150px 0; left:5px; top:4px; background-repeat:no-repeat;}
.thumb_container { width:64px; height:64px;
background-image:url('images/interface/thumb_holder.png'); }
#largephoto { width: 444px; height:370px; background-color:#333333;
margin-top:68px; margin-left:40px; -moz-border-radius: 10px;
-webkit-border-radius: 10px; border-left: 1px solid #fff;
border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
#largetrans { width: 444px; height:370px;
background-image:url('images/interface/main_bg_trans.png');
-moz-border-radius: 10px; -webkit-border-radius: 10px;}
.large_image { display:none}
#containertitle { position:absolute; margin-top:35px;
margin-left:40px; font-family:Arial, Helvetica, sans-serif;
font-weight:bold; text-shadow: 0px 1px 2px #fff;}
#largecaption {  text-align:center; height:100px;
width:100%; background-color:#111; position:absolute; width: 444px;
margin-top:270px; -moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
display:none; color:#fff; font-size:30px;
font-family:Arial; letter-spacing:-1px; font-weight:bold}
#largecaption .captionContent { padding:5px;}
#largecaption .captionShine { background:url('images/interface/bigshine.png');
 position:absolute;  width: 444px; height: 100px;
 background-position:-150px 0;background-repeat:no-repeat;}
#loader { width:150px; height:150px;
background-image:url('images/interface/loader.gif');
background-repeat:no-repeat; position:absolute;}

JavaScript 

 $(document).ready(function()
  {

	 /*Your ShineTime Welcome Image*/
	 var default_image = 'images/large/default.jpg';
	 var default_caption = 'Welcome to ShineTime';

	 /*Load The Default Image*/
	 loadPhoto(default_image, default_caption);

	 function loadPhoto($url, $caption)
	 {

	    /*Image pre-loader*/
	    showPreloader();
	    var img = new Image();
	    jQuery(img).load( function()
		{
			jQuery(img).hide();
			hidePreloader();

        }).attr({ "src": $url });

	    $('#largephoto').css('background-image','url("' + $url + '")');
		$('#largephoto').data('caption', $caption);
	 }

	 /* When a thumbnail is clicked*/
	 $('.thumb_container').click(function()
	 {

		  var handler = $(this).find('.large_image');
		  var newsrc  = handler.attr('src');
		  var newcaption  = handler.attr('rel');
		  loadPhoto(newsrc, newcaption);

	 });

	 /*When the main photo is hovered over*/
	 $('#largephoto').hover(function()
	 {

		var currentCaption  = ($(this).data('caption'));
		var largeCaption = $(this).find('#largecaption');

		largeCaption.stop();
		largeCaption.css('opacity','0.9');
		largeCaption.find('.captionContent').html(currentCaption);
		largeCaption.fadeIn()

		 largeCaption.find('.captionShine').stop();
         largeCaption.find('.captionShine').css("background-position","-550px 0");
         largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);

		 Cufon.replace('.captionContent');

	 },

	 function()
	 {
	    var largeCaption = $(this).find('#largecaption');
		largeCaption.find('.captionContent').html('');
		largeCaption.fadeOut();

	 });

     /* When a thumbnail is hovered over*/
	 $('.thumb_container').hover(function()
	 {
         $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
		 $(this).find(".large_thumb_shine").stop();
         $(this).find(".large_thumb_shine").css("background-position","-99px 0");
         $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);

	 }, function()
	 {
	    $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
	 });

	 function showPreloader()
	 {
	   $('#loader').css('background-image','url("images/interface/loader.gif")');
	 }

	 function hidePreloader()
	 {
	   $('#loader').css('background-image','url("")');
	 }

  });

Download, Demo & Screencast

Screencast: http://screenr.com/Z0W
Demo: http://www.addyosmani.com/resources/shinetime
Download: http://www.addyosmani.com/resources/shinetime/shinetime.1.01.zip

I hope that you found today’s post a little helpful. If you’d like to share it with your friends and colleagues or give me a thumbs up, feel free to click the ShineTime – A jQuery & CSS3 Gallery With Animated Shine Effects button!. Thanks, guys.

 Hey guys. Hopefully if you’re reading this you’ve discovered some of the true power jQuery has to offer and you’re now looking for ways to improve your JavaScript skills even further.

There was such a huge response to my last post on jQuery Snippets that I thought it only right to follow up with a fresh list that focuses on some of the more recent features introduced in jQuery 1.4.x. Because it’s always useful to have a second pair of eyes look over your code, I asked Paul Irish from the jQuery Team to take a look at all of today’s snippets and he’s included some useful optimizations to a few of the snippets which I’ve intregated.

Now, if I only we could fit Paul into a useful Browser plugin, all my articles would be just as sensible The snippets from today can be applied to a wide range of projects so remember to bookmark the post if you find it useful so you can easily come back to it anytime you want. So without further adieu, I give you today’s 31 Snippets that will help make you a JavaScript Pro.

• Did you know that using jQuery’s .live() function is more optimal for adding click functions than using .click()? It even handles dynamic content well.

  $('.clickme').live('click', function() {
    // Live handler called.
  });
  

• Attributes in jQuery – jQuery supports passing attributes for an object as the second argument to the jQuery function itself. This creates a new link on the page:

     $('', {
     text: 'jQuery is awesome!',
     href: 'http://www.jquery.com',
     id: 'someAwesomeID',
     rel: 'external',
     title: 'This is a title'
     }).appendTo('body');
  

• Function Grouping – jQuery supports binding functions so that they can all be defined within the same group. This can be useful for keeping your cody tidy among other things!

  jQuery('#foo').bind({
      click: function() {
          // do something
      },
      mouseover: function() {
          // do something
      },
      mouseout: function() {
          // do something
      }
  })
  

• Have you ever wanted to convert your JSON string into a JavaScript Object? Rather than having to custom code your own function to do it, just use jQuery’s built in .parseJSON function to achieve this easily (jQuery 1.4.1 and above):

  var obj = jQuery.parseJSON('
      {"name":"Larry King",
       "age": "5000"
      }');
  alert( obj.name === "Larry King" ); //true
  alert (obj.age  === "50");//false
  alert (obj.age  === "5000"); //true
  

• Ever since jQuery 1.4 you’ve been able to use a jQuery feature equivalent to PHP’s sleep() called delay. If you would like to delay and animated effect all you need to do is use delay as follows:

  $('#myJaw').slideUp(300).delay(800).fadeIn(400);
   

• When styling a large number of elements, instead of using css() it is more efficient to append a style tag to the DOM as follows:

  $('
  
  
  ')
  .appendTo('head');
  

• Here’s how you can remove the parent elements of any object using jQuery’s .unwrap() function

  /* here we locate any paragraph elements and then
  'unwrap' the parent elements around them. These
  could be other divs, spans or anything really */
  
  jQuery('p').unwrap();  
  

• Would you like to perform an action when an element or its contents gain focus? Here’s how to do it:

  jQuery('form')
      .focusin(function(){
          jQuery(this).addClass('focused');
      });
      .focusout(function(){
          jQuery(this).removeClass('focused');
      });
  
  //However, the preferred way to do this is using
  // .focus() and .blur()
  
  //For when an element loses it's focus use .blur()
  $('#target').blur(function() {
    alert('Handler for .blur() called.');
  });
  
  //For when an element gains focus use .focus()
  $('#target').focus(function() {
    alert('Handler for .focus() called.');
  });
  

• Each traversal method in jQuery creates a new set which builds a stack. You can use .end() to reach the previous set.

  $("
  
   
  
  
  ") // li
    .find("a") // a
      .attr("href", "http://www.google.com/") // a
      .html("Google!") // a
    .end() // li
    .appendTo("ul");
    

• I’ve mentioned this a few times before, but it’s a feature that many developers forget exists within jQuery – data() – jQuery actually has an API for invisibly storing data on DOM nodes so you can easily store any information through JS and it’ll be available through the same central resource

  $("div").data("myName", 'addy');
  $("div").data("myName") === 'addy';
  

• Garbage collection of data stored can either be done through removeData() or via the remove() function after the element has been deleted.

  /* Here are two ways to remove all of the information
  bound to an element*/
  $("div").removeData();
  $("div").remove();
  

• Have you ever tried writing a plugin and run into a problem with overriding specific behaviours?. In jQuery you can override the values set or retrieved on the data method by binding to getData and setData.Returning a value will set/return a totally different result.

  $("div").bind("getData.value", function()
  {
    return myPlugin.realValue;
  });
  

• jQuery supports namespacing and this includes namespacing data. You can scope your namespaces to a specific name or plugin and this can help you avoid conflicts with other code that might use the same data name.

  /*
  Why namespace? Namespacing ensures that your
  variables don't conflict with any others which
  happen to have the same name. This is important
  if you want to avoid your code breaking when
  other files or plugins are included in your
  page's architecture. See below for an example of
  namespacing data.
  */
  
  $("div").data("events.plugin",
  {
     //your data here
   });
  

• Looking for a way to namespace your event handlers?. This sample will show you his. It makes it easier to locate your namespace binding later on and easily remove the handler if needed.

  $("div").bind("click.plugin", someFn);
  $("div").bind("focus.plugin", otherFn);
  $("div").unbind(".plugin");
  

• You can bind to almost any event and there aren’t really any limits on what you can or can’t bind to.

  $("div").bind("myplugin", someFn);
  $("div").trigger("myplugin");
  

• A good tip for complicated applications: Custom events are a useful way for multiple pieces of code to bind to the same functionality, so you trigger one event but lots of handlers can be executed.

  $("div").bind("remove.pluginA", someFn);
  $("div").bind("remove.pluginB", otherFn);
  $("div").trigger("remove");
  

• Have you been trying to find a way to listen to events from a particular context? The delegate and undelegate methods make this possible (supported in jQuery 1.4.2 onwards). There’s also a very large performance gain got from switching over to .delegate()!

  $("table").delegate("td", "hover", function(){
    $(this).toggleClass("active");
  });
  

• You can dynamically change the context of a function (if needed) using something similar to this. Since jQuery 1.4.* you’ve also been able to easily remove the proxied function.

  var obj = { method: function(){} };
  $("#foo").click( jQuery.proxy( obj, "method" ) );
  $("#foo").unbind( "click", obj.method );
  

• Interested in creating a simple custom selector?. Creating your own selectors is easy and you can do this for your plugins if you would like some easy querying features.

  jQuery.expr[":"].myplugin = function(elem) {
    return !!jQuery.data("myplugin");
  };
  

• Did you know that you can treat jQuery objects like arrays?. Take a look at this example.

  /*Here's some sample HTML followed by some jQuery
  that allows us to access the values of any "box"
  by index.*/
  
  Content #1!
  Content #2!
  Content #3!
  Content #4!
  
  
  Content2 #1!
  
  

// returns 4
$('#wrapper .box').length;

// num is equal to 4
var num = $('#wrapper .box');
num = num.length;

// text is equal to 'Content #2!'
var text = $("#wrapper .box")[1];

// text is equal to 'Content #1'
var text = $("#wrapper .box")[0];

// text is equal to 'Content2 #1'
var text = $("#wrapper2 .box")[0];

• Selection storage: Did you know that you can store the results from a jQuery selection in a variable and *still* have access to the same methods?. Here’s a useful example.

  var $myBox = $('#test');
  /*the variable myHTML is equal to the content's of
  '#test'*/
  var myHTML = $myBox.html();
  

• Did you know that jQuery has great support for Callbacks? Here are two ways you can tell if a function has completed running.

  function runAlertNow ()
  {
  	$(this).html('I just ran this function!');
  }
  
  // both of these lines do the same thing
  $('#test').slideUp(400, runAlertNow);
  $('#test').slideUp(400, function ()
  {
  $(this).html('I just ran the anonymous function!');
  });
  

• Very useful tip: Did you know that you can select elements within another element just by passing a second parameter to the jQuery initializer?

Here are three ways to access an element within an element:

$('#yourparent').find('#mychild')
//or even shorter:
$('#mychild', $('#yourparent'))
//or even shorter:
$('#mychild', '#yourparent')

• How do you handle access to elements with IDs that contain special characters in jQuery?

  $("$some[id]").show(); // won't work for this type of ID
  $("$some\\[id\\]").show() // works fine for the ID: some[id]
  

• How do you enable or disable form elements within jQuery?

  //To disable a form element such as a text input field
  $("#myelement").attr("disabled", "disabled");
  
  //To re-enable a disabled form element
  $("#myelement").removeAttr("disabled");
  

• How do you check if something exists in the DOM using jQuery:

  /*The .length property in jQuery returns the length
  or number of elements inside an array or the string
  length. If you want to check the existence of the
  element, just check if the returned value of length
  is zero:*/
  
  if ($(selector).length)
  {
     //your code here
  }
  

• How do you search all the nodes on a page for a particular piece of text using jQuery?

  /*This useful extended function will allow you to
  pattern match a keyword across all the nodes in a
  page. See the example below for how GMail use something
  similar in concept for their search-keyword highlighting*/
  
  $.fn.egrep = function(pat) {
   var out = [];
   var textNodes = function(n) {
    if (n.nodeType == Node.TEXT_NODE) {
     var t = typeof pat == 'string' ?
      n.nodeValue.indexOf(pat) != -1 :
      pat.test(n.nodeValue);
     if (t) {
      out.push(n.parentNode);
     }
    }
    else {
     $.each(n.childNodes, function(a, b) {
      textNodes(b);
     });
    }
   };
   this.each(function() {
    textNodes(this);
   });
   return out;
  };
  
  // Here's an example of using this to highlight
  //all the nodes on the page that contain the keyword
  //'jQuery'
  $("#testbutton").click(function()
  {
  var n = $('body').egrep(/jquery/i);
  for (var i = 0; i < n.length; ++i)
  {
     void($(n[i]).css('background', 'yellow'));
   }
  });
  

• Have you ever wanted to retain any of the information .remove() strips from the DOM? The .detach() method is a lot like remove() except that .detach() keeps all jQuery data associated with the removed elements. This is useful when you want to reinsert removed elements into the DOM later.

  //In the below example
  $("p").click(function(){
        $(this).toggleClass("off");
      });
      var p;
      $("button").click(function(){
        if ( p ) {
          p.appendTo("body");
          p = null;
        } else {
          p = $("p").detach();
        }
      });
  

• You can easily find the closest element to another (beginning at the current element and moving up the DOM) using .closest(). See the below example:

  $(document).ready(function()
  {
  //Let's set the background color of the nearest
  //UL in this pseudo-menu
  $('li.subchild').closest('ul').css('background-color', 'red');
  });
  

  
  Parent Menu
  
  Child Item 1
  Child Item 2
  
  
  
  

• How to easily and quickly add one-click clearing of default input text values from your fields

  (function($){
  	$.fn.clearDefault = function(){
  		return this.each(function(){
  			var default_value = $(this).val();
  			$(this).focus(function(){
  				if ($(this).val() == default_value)
                                $(this).val("");
  			});
  			$(this).blur(function(){
  				if ($(this).val() == "")
                                $(this).val(default_value);
  			});
  		});
  	};
  })(jQuery);
  
  // How to use it: $('input').clearDefault();
  

• Would you like to style only a particular range of elements within a list? jQuery’s .slice() function makes this possible through indices

  
  Apples
  Pears
  Cherries
  Grapes
  Mangos
  
  

    /*If we just want to set the background-color of
      everything after element number two (pears) we
     can do this using:*/
  
  	$('li').slice(2).css('background-color', 'yellow');
  
   /*and if we want to set the bg-color of the elements
     after two(pears), but only up to and including 4
     (grapes), we can use:*/
     $('li').slice(2, 4).css('background-color', 'green')
  

I hope you found those useful!. If so, feel free to hit the 31 jQuery Snippets That Will Make You A JavaScript Pro (via @addyosmani)button so you can share it with all your friends and colleagues.

Good luck with your JavaScript!

- Addy

 

 

In today’s post, we’re going to take a look at how you can effectively use JavaScript in Web Design. JavaScript has allowed web designers to easily enrich their visual designs with new features and elements that can make using a website a much more interactive, intuitive and enjoyable experience. In recent years, the introduction of JavaScript frameworks such as jQuery, MooTools, Scriptalicious and ExtJS has simplified this process considerably, allowing designers to be innovative with their user interfaces. To begin today’s post, let’s take a look at a generic wireframe to your typical website.

Below you can see a wireframe that consists of a header, a login area, central page elements, a search box, a sidebar, banner adverts, a footer, floating elements and a website toolbar. This could easily be a blog-site, a business’s official website or any number of different projects.

As designers, most of our pages share a few key elements and I believe that the elements in this diagram represent the majority of those we might encounter on a daily basis.

So, let’s imagine for a moment that we’ve just created a basic layout for a site using the above as a guideline. We know that we can style any of the elements in this layout using either CSS or some PSD graphics, but what if we want to add more interactivity to our elements so that they allow our users to *do* more with the site?.  This is where JavaScript can come in useful.

JavaScript offers a whole wealth of benefits to web designers and web developers. Let’s go through some of them. If I have a standard search box on my site, that allows my users to search through the content that’s available and if they’re lucky enough, they’ll find what they’re looking for. If however, I have a JavaScript powered Search-Box that offers them auto-complete features, they’ll be able to quickly and easily refine their search queries to get the content they want, without needing to reload the search page lots of times.

We’ve just introduced a time-saving feature and that’s going to make life easier for our users. These are the kinds of functional benefits introducing JavaScript powered elements into your design can offer to the people who are going to be using your pages the most.

JavaScript can also offer a lot of benefits to you as a web designer. Let’s say that your site depends on ad-revenue a lot and that to maximize this, you might need to be conservative with your use of space. This can have major impacts on your design if you’re just using a CSS/XHTML layout, but not if you’re using JavaScript to help solve the problem. As an example, if I wanted to include a login-form at the top of my page, but couldn’t because we need that space for adverts, I could easily introduce a JavaScript powered button in it’s place that could slide-down the login area whenever someone needed it. The result? I, the designer, get to include my login area at the top of the page afterall but the site’s advertising needs don’t have to be scarified.

It can be safely said that JavaScript has had a huge impact on the web design landscape. Looking at just one JavaScript framework alone, jQuery itself now powers almost 20% of websites online. With this in mind I would certainly recommend continuous learning about your framework of choice so that you get ideas for what’s possible with your interfaces. Just remember to cover the basic JavaScript fundamentals before hopping onto the framework bandwagon!.

Okay, so let’s get to the really useful content in this post. I wanted to show you guys how you can use JavaScript (in this case jQuery) to enhance all aspects of conventional Web Design, from things you can use JavaScript for to make your Header more interactive, to tutorials you can use to create innovative new menus or search features that your users and clients will be impressed with. We’re going to start from the top of the page (with Login Forms) and end it with website toolbars.

I hope you find the post useful!

Login Button/Form

Twitter-like Sign-in Box for Your Header

Horizontal User Login Block Using jQuery & CSS

An easy-to-create Login Panel with jQuery and CSS

An Ajax & jQuery Simple Login Example

A Sliding jQuery Login Panel for WordPress & Buddypress

How to create a slick jQuery Login Form for WordPress

WordPress Front-page login with jQuery Sliding Panel

jQuery OpenID Login Form

Search Box 

How To Create A Twitter-like Search With jQuery and Ajax

How To Create An Apple-Style Search Suggestion Form

How to Improve your search boxes with jQuery

How to Easily add AutoComplete features to your searchbox

How To Create a Facebook-Like Search UI using jQuery 

jQuery AutoComplete Tutorial (jQuery + JSON + PHP) 

jQuery AutoComplete Tutorial (jQuery + XML) 

jQuery AutoComplete Tutorial (jQuery + JSON + GRAILS)

jQuery AutoComplete Tutorial (jQuery + JAVA + JSP )

Mike More’s Realtime Search Stream

Page Header

jQuery Caption Slider for your Header

A Persistant jQuery Header

A Sprite-Based jQuery Animated Header

An Impressive Animated Landscape with jQuery

How to build an animated Header in jQuery

Parallax based Header in jQuery

Slide-in Panel with jQuery

Page Adverts & Banners

jQuery Rotating Banner 1

jQuery Rotating Banner 2

jQuery Pop-out Ad

jQuery Page Peel

jQuery Corner-Ads

jQuery Vibrate

jQuery Text-Link Ad Rotation

Creating a Rotating Billboard System with jQuery & CSS

Navigation

How To Build A LavaLamp Style jQuery Menu

36 Eye Catching jQuery Navigation Menu

10 Incredible jQuery Navigation Menus

24 CSS/jQuery Navigation Menus

45 jQuery Navigation Plugins And Tutorials

jQuery Navigation For Web Design

30 jQuery Drop-Down Menus For Navigation

How to Build and Enhance a 3-Level Navigation Menu

A Different Top Navigation

Page Elements

jQuery Masonry

 
jQuery Colomnizer Plugin

jQuery UI Layout Plugin 

jQuery Columns Plugin

YouTube-Like jQuery Adaptable Views

jQuery Layout Background Plugins

jPolite jQuery Layout Plugin

Layout Background Plugin

Style Author Comments Differently with jQuery 

jQuery Sequential List

jQuery Feed Menu

Read More Button Options (1)

Read More Button Options (2)

Sidebars 

jQuery Sidebar Sliding Tab Menu Tutorial

jQuery Dynamic Collapsible Sidebar 

Creating A Sliding Sidebar That Follows The User

8 Amazing jQuery Accordians 

Sliding SideBar Menu in JQuery 

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Apple Flashy jQuery Sidebar

Floating Elements 

jQuery Floating Slide-In Menu with Anchor Link

jQuery Floating Comment-Form

Create a Floating Menu with jQuery

Create Floating Navigation using jQuery

jQuery Floating Message Plugin

jQuery Top-Floating Message Box

jQuery Sticky Floating Notes

Call-To-Action Buttons

Create an Animated Call To Action Button with jQuery

jQuery Animated Buttons with CSS 

jQuery Fancy Radio Buttons

jQuery GlowButtons

jQuery UI Buttons tutorial

Sharing Elements 

Create a Mashable-Style Drag To Share With jQuery

Social Sharing Icons With A Cool jQuery ToolTip

Create a Fancy Share Box with CSS And jQuery

How to Create a Social Menu with jQuery

A jQuery Version of ShareIt

Page Footer 

How to create a Pinned Footer for your site

How to create a dynamic animated footer ad for your site

Cross-browser Sticky Footer with Fluid Height

How to create a Sticky-Footer

How to automatically use jQuery to size your footer Height

Fixed-Position Website Toolbars

How To Create a Website Toolbar And Add Widgets to it

Facebook Style Footer-Toolbar from Soh Tanaka

JixedBar – A Fixed-Position Toolbar plugin for jQuery

Floating Footer Toolbar

CSS3 Fixed-Position Toolbar for your site with Social Networking Icons

And that’s it!. If you’re interested in learning more about jQuery and JavaScript and would like to stay up to date with the latest articles, please feel free to subscribe to the RSS feed. Alternatively, you can access to my weekly and daily JavaScript recommendations by joining either my Fan page or my Facebook Group, jQuery Awesome. Thanks!

In today’s post I’m going to show you guys 50 jQuery Snippets that can help you with your JavaScript projects. Some of these snippets are going to be things that have just been supported with jQuery 1.4.2 whilst others are really useful functions or methods that can help you do things better or quicker. I’ve tried to bare in mind optimal performance with these snippets so if there’s anything you see that you think could be done better, please feel free to post your version in the comments!. I hope you find the post useful.

• How to Create A Nested Filter:

   //a filter allows you to reduce the set of matched elements
   //to those that match a given selector. In this case the query
   //removes anything which doesn't (:not) have (:has) a child with
   //class "selected" (.selected)
  
   .filter(":not(:has(.selected))")
  

• How to Reuse Your Element Searches

  var allItems = $("div.item");
  var keepList = $("div#container1 div.item");
  
  //Now you can keep working with those jQuery objects. For example,
  //trim down the "keep list" based on checkboxes whose names
  //correspond to
  class names:
  
  $(formToLookAt + " input:checked").each(function() {     keepList = keepList.filter("." + $(this).attr("name")); });
  

• How To Check If An Element contains a certain class or element with has():

  
   //jQuery 1.4.* includes support for the has method. This method will find
   //if a an element contains a certain other element class or whatever it is
   //you are looking for and do anything you want to them.
  
   $("input").has(".email").addClass("email_icon");  
  

• How to Switch StyleSheets With jQuery:

  	//Look for the media-type you wish to switch then set the href to your new style sheet
  	$('link[media='screen']').attr('href', 'Alternative.css');

• How to Limit the Scope of Selection (For Optimization):

  
  		//Where possible, pre-fix your class names with a tag name
  		//so that jQuery doesn't have to spend more time searching
  		//for the element you're after. Also remember that anything
  		//you can do to be more specific about where the element is
  		//on your page will cut down on execution/search times
  
  		var in_stock = $('#shopping_cart_items input.is_in_stock');
  

  
  
   Item X
  
   Item Y
  
   Item Z
  
  

• How to Correctly Use ToggleClass:

  
  	 //Toggle class allows you to add or remove a class
  	 //from an element depending on the presence of that
  	 //class. Where some developers would use:
  
  	 a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
  
  	 //toggleClass allows you to easily do this using
  
  	 a.toggleClass('blueButton');
  

• How to set an IE Specific Function:

  
  	if ($.browser.msie) { // Internet Explorer is a sadist. }
  

• How to Replace an element with jQuery:

  $('#thatdiv').replaceWith('fnuh');

• How to Verify if an element is empty:

  if ($('#keks').html()) { //Nothing found ;} 

• How to find out the index of an element in an unordered set

  $("ul > li").click(function () {
      var index = $(this).prevAll().length;
  });

• How to Bind a function to an event:

  $('#foo').bind('click', function() {
    alert('User clicked on "foo."');
  });

• How to Append or add HTML to an element:

  $('#lal').append('sometext');

• How to use an object literal to define properties when creating an element

  	var e = $("", { href: "#", class: "a-class another-class", title: "..." });
  	

• How to Filter using multiple-attributes

  
  	//This precision-based approached can be useful when you use
  	//lots of similar input elements which have different types
  	var elements = $('#someid input[type=sometype][value=somevalue]').get();
  	

• How to Preload images with jQuery:

  
  	jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };
  
  	// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
  	

• How to set an event handler for any element that matches a selector:

  $('button.someClass').live('click', someFunction);
  
  	//Note that in jQuery 1.4.2, the delegate and undelegate options have been
  	//introduced to replace live as they offer better support for context
  
      //For example, in terms of a table where before you would use..
  
  	// .live()
  	$("table").each(function(){
  	  $("td", this).live("hover", function(){
  		$(this).toggleClass("hover");
  	  });
  	});
  
  	//Now use..
  
  	$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
  });
  

• How to find an option element that’s been selected:

  	$('#someElement').find('option:selected');
  	

• How to hide an element that contains text of a certain value:

  $("p.value:contains('thetextvalue')").hide();

• How To AutoScroll to a section of your page:

  jQuery.fn.autoscroll = function(selector) {
    $('html,body').animate(
      {scrollTop: $(selector).offset().top},
      500
    );
  }
  
  //Then to scroll to the class/area you wish to get to like this:
  $('.area_name').autoscroll();
  

• How To Detect Any Browser:

  	Detect Safari (if( $.browser.safari)),
  	Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),
  	Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),
  	Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' ))

• How To Replace a word in a string:

  var el = $('#id');
  	el.html(el.html().replace(/word/ig, ''));

• How To Disable right-click contextual menu :

  $(document).bind('contextmenu',function(e){ return false; });

• How to define a Custom Selector

  	$.expr[':'].mycustomselector = function(element, index, meta, stack){
      // element- is a DOM element
      // index - the current loop index in stack
      // meta - meta data about your selector
      // stack - stack of all elements to loop
  
      // Return true to include current element
      // Return false to explude current element
  };
  
  // Custom Selector usage:
  $('.someClasses:test').doSomething();
  

• How to check if an element exists

  if ($('#someDiv').length) {//hooray!!! it exists...}

• How to Detect Both Right & Left Mouse-clicks with jQuery:

  $("#someelement").live('click', function(e) {
      if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
          alert("Left Mouse Button Clicked");
      }
      else if(e.button == 2)
          alert("Right Mouse Button Clicked");
  });
  

• How To Show or Erase a Default Value In An Input Field:

  //This snippet will show you how to keep a default value
  //in a text input field for when a user hasn't entered in
  //a value to replace it
  
  swap_val = [];
  $(".swap").each(function(i){
      swap_val[i] = $(this).val();
      $(this).focusin(function(){
          if ($(this).val() == swap_val[i]) {
              $(this).val("");
          }
      }).focusout(function(){
          if ($.trim($(this).val()) == "") {
              $(this).val(swap_val[i]);
          }
      });
  });
  

• How To Automatically Hide or Close Elements After An Amount Of Time (supports 1.4):

  
   //Here's how we used to do it in 1.3.2 using setTimeout
      setTimeout(function() {
    $('.mydiv').hide('blind', {}, 500)
  }, 5000);
  
  //And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
  $(".mydiv").delay(5000).hide('blind', {}, 500);
   

• How To Add Dynamically Created Elements to the DOM:

   var newDiv = $('');
  	newDiv.attr('id','myNewDiv').appendTo('body'); 

• How To Limit The Number Of Characters in a "Text-Area" field:

  	jQuery.fn.maxLength = function(max){
  	this.each(function(){
  		var type = this.tagName.toLowerCase();
  		var inputType = this.type? this.type.toLowerCase() : null;
  		if(type == "input" && inputType == "text" || inputType == "password"){
  			//Apply the standard maxLength
  			this.maxLength = max;
  		}
  		else if(type == "textarea"){
  			this.onkeypress = function(e){
  				var ob = e || event;
  				var keyCode = ob.keyCode;
  				var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
  				return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
  			};
  			this.onkeyup = function(){
  				if(this.value.length > max){
  					this.value = this.value.substring(0,max);
  				}
  			};
  		}
  	});
  };
  
  //Usage:
  
  $('#mytextarea').maxLength(500);
  

• How to create a basic test for a function

  
  	//Separate tests into modules.
  module("Module B");
  
  test("some other test", function() {
    //Specify how many assertions are expected to run within a test.
    expect(2);
    //A comparison assertion, equivalent to JUnit's assertEquals.
    equals( true, false, "failing test" );
    equals( true, true, "passing test" );
  });
  

• How to clone an element in jQuery:

  var cloned = $('#somediv').clone(); 

• How to test if an element is visible in jQuery:

  if($(element).is(':visible') == 'true') { //The element is Visible } 

• How to center an element on screen:

  jQuery.fn.center = function () {
  	this.css('position','absolute');
  	this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
  	this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}
  	//Use the above function as: $(element).center(); 

• How to put the values of all the elements of a particular name into an array:

  
  	var arrInputValues = new Array();
     $("input[name='table\\[\\]']").each(function(){
       arrInputValues.push($(this).val());
  });
  

• How to Strip HTML From Your Element

  
  	(function($) {
      $.fn.stripHtml = function() {
          var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
          this.each(function() {
              $(this).html(
                  $(this).html().replace(regexp,”")
              );
          });
          return $(this);
      }
  })(jQuery); 
  
  	//usage:
  	$('p').stripHtml();  
  

• How to get a parent element using closest:

  $('#searchBox').closest('div'); 

• How to log jQuery events using Firebug and Firefox:

  
  // Allows chainable logging
  // Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');
  jQuery.log = jQuery.fn.log = function (msg) {
        if (console){
           console.log("%s: %o", msg, this);
        }
        return this;
  };
  

• How to force links to open in a pop-up window:

  
  	jQuery('a.popup').live('click', function(){
  	newwindow=window.open($(this).attr('href'),'','height=200,width=150');
  	if (window.focus) {newwindow.focus()}
  	return false;
  });
  

• How to force links to open in a new tab:

  
  jQuery('a.newTab').live('click', function(){
  	newwindow=window.open($(this).href);
  	jQuery(this).target = "_blank";
  	return false;
  });
  

• How to select siblings in jQuery using .siblings()

  
  // Rather than doing this
  $('#nav li').click(function(){
      $('#nav li').removeClass('active');
      $(this).addClass('active');
  });
  
  // Do this instead
  $('#nav li').click(function(){
      $(this).addClass('active')
          .siblings().removeClass('active');
  });
  	

• How to Toggle All the checkboxes on a page:

  var tog = false; // or true if they are checked on load
  $('a').click(function() {
      $("input[type=checkbox]").attr("checked",!tog);
      tog = !tog;
  });
  

• How to filter down a list of elements based on some input text:

  
  	//If the value of the element matches that of the entered text
  	//it will be returned
  	$('.someClass').filter(function() {
      return $(this).attr('value') == $('input#someId').val() ;
   })
   

• How to get mouse cursor X and Y

  $(document).mousemove(function(e){
  $(document).ready(function() {
  $().mousemove(function(e){
  $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
  });
  });

• How to make an entire List Element (LI) clickable

  $("ul li").click(function(){
    window.location=$(this).find("a").attr("href"); return false;
  });
  

   
  Link 1
  
   
  Link 2
  
   
  Link 3
  
  	
  Link 4
  
  
  

• How to Parse XML with jQuery (Basic example):

  function parseXml(xml) {
  	//find every Tutorial and print the author
  	$(xml).find("Tutorial").each(function()
  	{
  	$("#output").append($(this).attr("author") + "");
  	});
  }
  

• How to Check if an image has been fully loaded:

  
   $('#theImage').attr('src', 'image.jpg').load(function() {
  alert('This Image Has Been Loaded');
  });
  

• How to namespace events using jQuery:

  
  //Events can be namespaced like this
  $('input').bind('blur.validation', function(e){
      // ...
  });
  
  //The data method also accept namespaces
  $('input').data('validation.isValid', true);
  

• How to Check if Cookies Are Enabled Or Not:

      var dt = new Date();
      dt.setSeconds(dt.getSeconds() + 60);
      document.cookie = "cookietest=1; expires=" + dt.toGMTString();
      var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
      if(!cookiesEnabled)
  	{
          //cookies have not been enabled
      }
  

• How to Expire A Cookie:

  var date = new Date();
  date.setTime(date.getTime() + (x * 60 * 1000));
  $.cookie('example', 'foo', { expires: date });
  

• Replace any URL on your page with a clickable link

  $.fn.replaceUrl = function() {
          var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
          this.each(function() {
              $(this).html(
                  $(this).html().replace(regexp,'$1‘)
              );
          });
          return $(this);
      }  
  
  	//usage
  
  	$('p').replaceUrl();
  

Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features. Facebook were one of the first companies to introduce this toolbar concept and have been the source of inspiration for many others. 

Taking a leaf from their book, companies like Wibiya and Meebo have been at the forefront of a toolbar-for-the masses revolution, offering easily customizable widgets for almost anyone to install on their pages. Larger companies have also been hopping onto the toolbar-band too, with sites like CNET.com embracing this concept as a way to offer their visitors more ways to interact with their site.

In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.

What Site-bars Are Out There At The Moment?

As I mentioned, we’ve all seen the widget-packed Wibiya Toolbar in action and they’ve recently moved from their invite-only model to being fully open to the public. Meebo (the popular web destination for online IM services) also started offering their own version of this toolbar and both of them offer something a little different (Meebo for example includes a pretty funky drag-and-share feature). Today, we’ve going to create our very own awesome website toolbar, but from a design perspective here’s how the Meebo and Wibiya bars look close-up.

Wibiya

Meebo

Now that we know what we’re aiming for, let’s see how easy it can be to put together something like this ourselves.

The First Step – Fixed Positioning with CSS

The first step in creating a website-toolbar is creating an empty div which can be correctly fixed-positioned at the bottom of any webpage. The HTML for this is:

<div id="content">&nbsp;</div>
 
<div id="floatingbar"><ul> <li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /></ul></div>

and the CSS for this can be found below.

  div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;	
    }
 
@media screen
  {
  body>div#floatingbar
    {
    position: fixed;
    }
  }

Whilst fixed-positioning isn’t very difficult to achieve using browsers like FireFox and Chrome, it’s been notoriously buggy to code for Internet Explorer 6. Thankfully TagSoup came up with this wonderful set of CSS/JS hackswhich claim to support fixed-positioning all the way back to IE5. If you’re creating a toolbar from scratch, I would definitely recommend reading their post as it’ll save you a lot of time later on. The IE Fix for this is:

JavaScript/HTML:

1
2
3
4

<link rel="stylesheet" type="text/css" href="css/fixed4ie.css" />
<script type="text/javascript">onload = function() { 
content.focus() }
</script>

CSS:

body
  {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
  }
div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }

Once you’ve got your basic-toolbar in place…

The next thing you’re going to want to do is begin adding in some basic styling around it. Most website-toolbars are around the same dimension in height (although there is no official “standard”) so I’m going to set the height of my component as well as some very basic skinning and CSS to style my list items. The background design is made possible with a blue gradient PNG that has some light shadows added to it – similar to the kind of design Wibiya have gone for. Although CSS3 could be just as equally used to create this effect, remember that some people still use IE!

div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 38px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    font-family:Arial;
    font-weight:bold;
    background-image:url('../images/tui.png');	
    }
 
#floatingbar ul { 
list-style-type:none;
}
#floatingbar ul li 
{ 
float:left; padding:14px; 
color:#666; margin-top:-3px;  
}
#floatingbar ul li a 
{ 
text-decoration:none; 
color:#fff; padding: 10px;  
font-size:12px;  font-weight:normal; 
font-family:Arial;
}
#floatingbar ul li a:hover { color:#000033;}

Now that this is done, I also want to add some basic animation to my toolbar so that when users first load up their page, the bar will slide up from the bottom. This is made possible using jQuery’s great animate() feature by keeping the initial height of the component at 0 and then tweening it up to it’s maximum height over a period of time. The code for this can be found below

CSS:

div#floatingbar
    {  
    height: 0px;	
    }

JavaScript:

<script type='text/javascript'> 
  $(function() { 
  $('#floatingbar').css({height: 0}).animate({ height: '38' }, 'slow');
  });
</script>

This will end up creating something a little like this

Next, populate the toolbar with some links and some more jQuery Magic

In the next step of development, we’re going to add some nice visual effects to the toolbar, with the assistance of two of my favorite jQuery plugins – the first will provide us with some lightweight tooltips for our toolbar items whilst the second is going to be used for displaying our content.

1. jQuery Tipsy Tooltips for Toolbar Elements – This is a plugin used for adding Facebook-Like Tooltip effects to your site or links (http://onehackoranother.com/projects/jquery/tipsy/)

Sample Usage:

<script type='text/javascript'> 
  $(function() {
 
  $('.toolbarLink').tipsy({gravity: 's'});
 
  });
</script>

2. jQuery PrettyPhoto - This is a lightbox alternative that allows you to display any type of content, in particular, iFrame content from local or external websites (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Sample Usage:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
</script>

Let’s start adding some social features to the toolbar

When I first looked at the Wibiya toolbar, the big features that appealed to me were how easy it made it for any user to interact with all of the social networks associated with a website. I could easily take a look at the site’s Twitter account or become a fan of their Facebook Fan page, I could even easily browse through all their pictures without having to leave the page I was on. That "ease" of access impressed me, so I developed my website toolbar with widgets in mind.

When there are so many different ways currently available to pull in your recent tweets or display your Flickr albums in an easily scrollable box, why not find an implementation you like and just customize it?. So, that’s what we’re going to do.

1. Google Buzz Plugin – Mike More’s excellent Google Buzz Widget grabs the feed of your latest Google Buzz posts and refreshes this list depending on a set of parameters you’ve configured (http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html)

2. Sea of Clouds jQuery Twitter Plugin – This wonderfully compact plugin makes pulling your Twitter feeds a piece of cake and also allows you to customize the output quite extensively (http://tweet.seaofclouds.com/)

3. Facebook Fan Page Widget - The Facebook Fan Page Widget is a widget provided free by Facebook to site owners wishing to share their fan streams or followers in a box on their website. To allow you to show to Fan Box widgets side by side as in the original Wibiya bar, one can either choose to proxy one of the content boxes or load each of the widgets in separate iFrames which are then loaded into the same window.

4. Coolris Express Viewer - CoolIris offer the public a free version of their commercial 3D-Wall Component for use on your own personal sites. They’ve got a fantastic widget generator online that lets you pull in feeds from all sorts of sources including Flickr, YouTube or your own RSS Feed. It then takes this information and renders it as a scrollable wall of thumbnails that’s easy to view.

5. AddToAny Subscription and Share Widgets – These excellent widgets allow you to configure everything down to the event handlers that execute them so you can choose whether they appear on click or on mouse over. All the usual share sites and social networks are included and these guys even offer an API to anyone wishing to do more with their code.

6. ConveyThis.com Translation Features – Google Translate has been a favorite service among many of my fellow coders for a while now, but I came across this great service that allows you to give your visitors the choice to pick what translation service they want to use to translate your page once they’ve selected a language. Because some services have stronger features in one area of language than others, your visitors will have all the options they could want available to them. ConveyThis? also has a great widget you can add easily to your site, so definitely check it out.

Widget Delivery

Widgets (or plugins such as a Twitter-Reader or Translation service) can be delivered to our visitors through the site-bar in two main methods. The first is on page-load and the second is dynamically on-demand. The second of these options is the most beneficial as it means that we only have to load up the plugin when a user requests it. This can be either done through Ajax-Calls or iFrames.

In my implementation I have opted for iFrames through the PrettyPhoto Light-Box plugin – I thought this was a good idea because it provides a nice sandboxed area where the widget can execute as required without the chance of it interfering with the other widgets on the page. Whilst this isn’t a problem for most modern browsers, sandboxing widgets into iFrames can help lower the bug rate for older browsers like IE6.

To host a widget inside a lightbox iFrame, all you need to do is write or paste the code for it, once configured, into a new html file, save it into a local file in your toolbar directory and call it via PrettyPhoto as follows:

1

<a rel="prettyPhoto[iframe]" href="widget.html" title="Here's the tooltip text " class="toolbarLink"> My Page</a>

You can then freely call any widget file, with it’s very own themes if desired the same way you would any other link used from a lightbox. prettyPhoto also includes some pagination by default so if you want to easily flick through all of the widgets available on your toolbar you can do so through the controls at the bottom of the lightbox.

Further Customization & Demos

It’s possible to further customize your toolbar by adding in icons next to each of your widget links and floating them accordingly. For the example in today’s post, I’ve used some fantastic 24×24 icons from iconfinder.net, and you can see the final version of this page here (or click below to expand the screenshot).

You can also take your imagination one step further and replace all of the text in your toolbar with some nice images – I personally spent a few minutes putting together some gradient text in PhotoShop and here’s what the final product looked like.

With a little more work you could easily add some nice toggle buttons to the side of the toolbar to allow visitors to open or close it and there are a lot more widgets out there that you could experiment adding to your version.

and that’s it!. If you found today’s tutorial helpful, let me know in the comments section below.

Download All Of Todays Examples

You can download all of today’s examples including both the CSS/Icons version of Fubar as well as the Graphics version from the link below. All widgets can be obtained or generated from the site’s referenced in the list earlier in the article, but I’m also including my own ones in the example pack so you can see how easy it is to get setup.

Bonus: Fixed-Position Website Toolbar Plugins

As a bonus to today’s post, I’m also sharing some of the best out-of-the-box alternative solutions and tutorials available for creating your own customized fixed-position Site Bar. We all know that Wibiya is great for a one-click solution, but if you need something a little different one of these will definitely be able to help if the tutorial above doesn’t give you what you’re after.

CSS3 Fixed-Position Toolbar for your site with Social Networking Icons

Learn how to create a fantastic fixed footer toolbar for your site – this version includes some usefully placed social networking and subscription icons, great eye-candy tooltip effects and a complete tutorial on how to create it from start to finish. CSS3 Effects compliment it further with some nice visual design touches. Recommended for those who aren’t looking for extensive changes in customization to the above design and currently have more of a functionality requirement.

Facebook Style Footer-Toolbar from Soh Tanaka

Soh Tanaka presents this excellent tutorial on how to create a Facebook Style Fixed Site Footer toolbar. This implementation is very close to how the real Facebook site-bar looks and feels and even includes a follow-up tutorial on how to create a pop-out Friends List Chat bar. Recommended for those looking for a fully-featured example of how to create a floating site toolbar for further customization.

Floating Footer Toolbar

This entry from Ben Nadel, the most barebones of my recommended tutorials for today, will show you how to build a very very simple implementation of a floating site toolbar. This doesn’t include any of the sample icons or buttons that Soh Tanaka’s version above does so if you want an example that you can literally just start adding your own content to, this would be the one to get.  Ben’s version has been tested with many browsers including IE6, so cross browser compatibility won’t be an issue!.

JixedBar – A Fixed-Position Toolbar plugin for jQuery

Here’s a recently updated plugin that takes a lot out of the effort out of creating a fixed-position toolbar for your site. All you need to do is create a <ul> /<li> structure for each split section and then have the plugin transform it into the toolbar for you. It’s a hassle-free way of adding this feature to your projects and at under 7KB, it’s definitely a recommended download.