The jQuery library has a collection of methods built for animating and manipulating the DOM.  These effects implement styling changes to produce transitions like fading or element movement.  The full list of methods are available on the jQuery website.

jQuery also contains a nifty method, animate.  Animate allows you to make a timed transition from one style to another.  This comes is handy when other effects methods don’t quite behave or lack needed functionality.

Consider the two snippets:

1: $(‘h1′).fadeOut(1000);
2: $(‘h1′).animate({opacity:’-=1′},1000);

Both perform the same transition, and in one second, the selected element transitions to being transparent.  However, the fadeOut method has a feature that sets the element’s display attribute to none when opacity reaches zero.  This especially becomes an issue if you need the element that fades out to maintain its structure in a template.

The animate method is also capable of manipulating multiple styles in one method.  If we needed to make an element slide on the page while coming into view from being transparent, this can also be done with a single line, separating multiple style changes by a comma.

$(‘h1′).animate({opacity:’+=1′,marginLeft:’+=15px’  },1000);

Relatively and absolutely positioned elements can make use of the left/top CSS styles, but should be used to what works within your template and layout.

Animate and jQuery effect method’s all support callback functions which makes movement order easy.  The snippet below will result in the same animation, but the left margins are not animated until the transparency becomes fully visible.  These can be nested within one another to avoid using setTimeout and setInterval coding.

$(‘h1′).animate({opacity:’+=1′},1000,function(){
$(this).animate({marginLeft:’+=15px’},1000);
});

According to new research from HTTP Archive, which regularly scans the internet’s most popular destinations, the average size of a single web page is now 965 kilobytes (KB), up more than 30% from last year’s average of 702KB.

This rapid growth is fairly normal for the internet — the average web page was 14KB in 1995, 93KB by 2003, and 300KB in 2008 — but by burrowing a little deeper into HTTP Archive’s recent data, we can discern some interesting trends. Between 2010 and 2011, the average amount of Flash content downloaded stayed exactly the same — 90KB — but JavaScript experienced massive growth from 113KB to 172KB. The amount of HTML, CSS, and images on websites also showed a significant increase year over year.

There is absolutely no doubt that these trends are attributable to the death throes of Flash and the white knight, if-only-the-internet-was-a-damsel-in-distress emergence of HTML5 and its open web cohorts. It’s curious that the amount of Flash content hasn’t shrunk, though, which suggests that this year’s 33% increase in web page size is mostly down to a significant increase in website complexity and functionality, and not some kind of wholesale shift from Flash to HTML5.

The only real problem with the data is that HTTP Archive only began operating in October 2010 — and so there’s no way to find out the long time growth (or decline) of Flash. HTTP Archive, incidentally, constantly scans 16,000 websites — a list that was cobbled together from sources like Alexa and Fortune 500 — and records the total data downloaded, the number of individual HTTP requests required to fetch all of the content, the size of the JavaScript, Flash, and image content, and a bunch of other metrics. If you’re wondering about the odd spike towards the end, that’s where HTTP Archive increased its sample size from 16,000 to 50,000 — so presumably, the web’s top sites are smaller (or better written?) than the dregs.

So, what’s the actual significance of web pages that are almost 1MB in size? Not a whole lot, when you consider that caching will reduce that amount by 70 or 80% — and the more important statistic, at least as far as latency and rendering times are concerned, “total requests,” only increased from 74 to 85 over the last year (and again, caching will reduce that by 70% or more). One valid concern is mobile 3G and 4G surfers, where carrier data caps certainly haven’t increased by 33% over the last year — but even then, many popular sites have mobile versions that use significantly less than 1MB, and again, caching!

We would now expect the size of web pages to slow down a little, too. 2011 will have been the year in which many developers switched from Flash (or other technologies) to HTML5, and it’s unlikely that their first attempts will have been all that optimized. In 2012, JavaScript libraries will be refined, and cleaner ways of using CSS and HTML will be popularized. Even so, expect more mobile offerings that compress data, like Amazon Silk and Opera Mobile, to emerge as well.

With all the recent projects needing Javascript development and those upcoming, I’ve had to do quite a bit of searching around the web for scripts I can integrate into our projects.  Here is a list of libraries, scripts, and resources we’ve put to into practice here at Beacon.

Javascript Libraries

• jQuery
  JS Library that allows CSS-styled selectors for DOM elements.
• jQuery-UI
  Extensive collection of user-interfaces and controls.
• Script.aculo.us
  Contains a visual effects engine, a drag and drop library, and other visual effects.
• MooTools
  Has built in functionality for playing sounds and an extensive collection of transitions and effects.
• YUI
  Never really used this library, but it appears to be well documented and used around the web.

Scripts

• Name: Moment.js
  Website: http://momentjs.com/
  Note: This script is fantastic for formatting dates/time.
• Name: Respond.js
  Website: https://github.com/scottjehl/Respond#readme
  Note: Light-weight library script that allows CSS3 Media Querys for responsive web design in browsers that do not support CSS3.
  
• Name: Table Sorter
  Website: http://tablesorter.com/docs/
  Note: Fantastic script that makes table headers sortable.  Works with rows or columns and can sort multiple data types including: strings, integers, and dates.
• Name: Masked Inputs
  Website: http://digitalbush.com/projects/masked-input-plugin/
  Note: This script is a nice compliment to live form validation.  We use it on our Beacon site, but had issues with it removing the input if a user leaves the textbox incomplete.  We found a fix for this on the web, incorporated it into the current release (non-minified), and then re-minified it.  The modified version can be downloaded here.
• Name: JSLitmus
  Website: http://fmarcia.info/jsmin/test.html
  Note: This online tool can be used to compact your JS code.  I recommend keeping a backup of the original coding
  if you plan on ever revisiting the code.
• Name: JSBeautifier
  Website: http://jsbeautifier.org/
  Note: This tool will format code for you with indentations and line returns.  Badly formatted code or minified code files can be undone with this for significantly better readability.
• Name: GreyBox/LightBox/ThickBox
  GreyBox Website: http://orangoo.com/labs/GreyBox/
  LightBox Website: http://lokeshdhakar.com/projects/lightbox2/
  ThickBox Website: http://jquery.com/demo/thickbox/
  Note: Different flavor scripts that handle popup windows.
  

Web Developer and Coding Resources:

• GitHub – Developer projects with online collaboration
• DZone – Developer articles and tutoirals
• NetTuts -Web Developer tutorials
• CodeCanyon – Has tutorials on a variety of web languages with video
• DynamicDrive – Heaps of scripts to add functionality to your site.

Resource Articles:

I regularly visit these sites (and others like them containing lists of scripts) to gather resources for a project.

• http://www.topdesignmag.com/100-awesome-cssjavascript-plugins-and-coding-techniques/
• http://net.tutsplus.com/articles/web-roundups/40-super-neat-javascript-plugins/
• http://www.queness.com/post/237/30-javascript-menu-plugins-and-scripts
• http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html

Ever had an issue where you want to track unique events (or virtual pageviews) within Google Analytics from a template file?  For example, on an e-commerce site, you may have a series of product pages that use the same ‘add to cart’ button from either an include file or some kind of reusable wrapper.  You may want to track each ‘add to cart’ click as a unique event for that specific product, not just the product section as a whole.  Since the actual JavaScript snippet for event tracking can only be placed into these file once, this would seem to post a problem.

Here’s the Solution.  In this case, we are going to use the URL of each page to serve as a unique identifier for the event tracking.  If the URLs are not unique among the pages where you want the event tracked, there is a slightly more complicated solution that you can contact me on Twitter for.

In the <head> of the pages that you want tracked, place the following code snippet (or save this snippet as a JavaScript file and reference it):

<SCRIPT LANGUAGE="JavaScript">

<!--
	function passID()
	{
		var fullURL = parent.document.URL;
                var uniqueID = fullURL.substring(fullURL.indexOf('XX'),
		fullURL.indexOf('XX')+3);
		return uniqueID;
	}

//-->

</SCRIPT>

This snippet will grab a 3 character unique ID out of the page URL on which it appears.  Simply replace the XX in the code above with the 2 characters that precede the unique ID in the URL.  If the ID is only one character long, then you have it.  If it is 2 characters, replace the “+3″ above with “+4″.  If it is 3 characters, replace the “+3″ with “+5″, and so forth.

Note: If XX appears multiple times in URL, you will want to make it longer than two characters to ensure that you get the identifier that you want.  Just make sure to adjust the ending portion of the substring accordingly.

Now that we have our unique ID, the rest of the event tracking is easy.  For your onClick or onSubmit event, the tracking code for GA usually appears as:

_gaq.push(['_trackEvent', 'Category', 'Action', 'Label']);

With ‘Category’, ‘Action’, and ‘Label’ each being strings that the coder enters to display in Analytics.

In this case, we’re just going to make one adjustment:

_gaq.push(['_trackEvent', 'Category', 'Action', passID()]);

‘Label’ has been replaced by passID(), the function we created in the <head> of the page for the uniqueID.  You could also replace ‘Category’ or ‘Action’ with the passID() function as well, but I think ‘Label’ makes the most sense as these pages are going to be similar in nature coming from the same template file.

That’s it, the unique ID will now show in the label section of GA.  Feel free to contact me with any questions and I’d love to hear about any case studies where you use this.

- EJW, follow me on twitter: @ejwestksu

We recently launched the Beacon site with a new design which included a handful of jQuery animation, many of which had replaced the the previous design’s Flash-intensive content. We have recently come across an issue with the jQuery library with some builds of IE7 and IE8 that resulted in an extensive trail of debugging. We concluded that it was a browser issue (even in different OS environments) that was only fixed by re-installing IE. Here I will outline the issue and the debug trail–and hopefully maybe even think up some potential fixes that weren’t explored when testing was originally performed.

The Issue

In IE7 and IE8 we found that refreshing the homepage would crash IE and sometimes handle restoring the tab, other times not.  Microsoft has acknowledged this error in an KB article.

Error Screenshots

Initial view of most common error displayed.	Error message that would periodically show right before the tab recovers.
Details of error.	Advanced error detail screen.
When tab is not recovered, this screen is shown. Had to repeatedly refresh until this error occurs.	Just-In-Time Debugger error found from a different machine.

The Debug Trail

• Initial replication of issue in IE 8.0.6012 on one of the test machines using a Windows XP environment.
• Attempted browser-configuration changes that might’ve caused issues including:
• Privacy Settings
• Security Settings
• PrivateBrowsing
• Add-Ons disabled
• Just-In-Time Debugging (picked up from a slightly different error that was sent to me as a screenshot from Mark Dirks — last one on right shown above)
  Unfortunately not of these seemed to be the culprit.
• Disabled JavaScript in IE altogether–which of course fixes it but not what we we’re aiming for. This confirms it is a JavaScript/jQuery related issue
• Attempted using different versions from currently used (1.6.1) to most recently published version from jQuery site (1.6.4) – tried both compressed/uncompressed versions without any success.
• Checked a  changelog of jQuery since version 1.6.1 onward for IE7/8 errors.
  *Anything related to these browsers I had checked out scripts for any instances of (CSS background-image in jQuery and other function calls)
• One Google search led me to a site that reported changing the jQuery file name had corrected their similar mshtml.dll error—-not the case here)
• Double checked the in-line JavaScript as well as .JS file functions dependent on the jQuery library contained no redirects or any instance of the window.location method
  Since the IE8 error that comes up sometimes on the test machine says the browser attempted to load more than twice) – the only instance of this I found is a comparison checking if ‘#beacon-video’ is in the URL and if so, it runs a function to scroll the Beacon video into view and sets the tabs display(css) values. The window.location value is never assigned anywhere.
• Checked that there weren’t multiple instances of window.onload or jQuery(document).ready()
• Ran the jQuery library file through a beautifier to get a better look at the pin-pointed trouble spot you found and checked for any obvious issues. Justin Klingman found that in the compressed library he could comment out the last half of the code which removed the crash so before ‘beautifying’ the code I had marked this position with a comment and looked in the region after the code was cleaned up.
• Removed all other scripts from the page to see if those dependencies may have had an impact on the crash, but removing them all (including the JavaScript function calls in the body,) except for the jQuery Library. No difference, same crashing effect.
• The only change that did successfully fixed the crashing tab to load was removing jQuery from the page, however,
  when the content of another root level page (the SEM pages) into the root default document, that loads/refreshes fine without crashing.
  The only difference between interior/homepage in terms of JavaScript is the presence of the homeScripts.js file and the inline function calls on the homepage.
  After further testing this, removing only homeScripts.js still crashed the tab on the homepage (unless jQuery was also removed) —
  All internal pages use the same copy of the jQuery Library and they don’t crash, so the exact source of what’s crashing the page/tab is still not clear to me.

I recently provided a client with a list of non-flash animation options (a.k.a. JavaScript plug-ins) for their new home page banner image area. My good friend Wendy Honeycutt came up with a great list that I thought I’d share:

• http://tympanus.net/codrops/category/tutorials/
• http://tympanus.net/Tutorials/HoverSlideEffect/
• http://tympanus.net/Tutorials/CompactNewsPreviewer/
• http://www.serie3.info/s3slider/demonstration.html
• http://galleria.aino.se/
• http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html
• http://css-tricks.com/examples/StartStopSlider/
• http://www.sohtanaka.com/web-design/examples/image-rotator/
• http://jqueryglobe.com/labs/slide_thumbs/

*Note: most JavaScript plug-in apps are customizable. Thus, the speed of image rotation, background colors, font styles, and transparencies can be adjusted.  Some really cool stuff out here!!

What are your favorite sites for JavaScript plug-ins?

This checklist is not all-inclusive but it covers some major areas that need to be tested with any major development.

• Accessibility (SortSite http://www.powermapper.com/products/sortsite/)
• HTML Validation (W3C http://validator.w3.org/)
• JavaScript Validation (JSLint http://www.jslint.com/)
• CSS Validation (W3C http://jigsaw.w3.org/css-validator/)
• Performance  and speed (GTmetrix  http://gtmetrix.com)
• Design (PixelPerfect http://pixelperfectplugin.com/)
• Test in all browsers listed in the requirements
• Test without JavaScript, Flash and other plug-ins
• Print version

Lastly take a look at the logic and code itself to ensure that it follows Web Standards, Best Practice and the KISS principle (http://en.wikipedia.org/wiki/KISS_principle).

I ran into an issue with the JS mouseover event while scripting some extra functionality onto our homepage last week. I would expect the issue to be more commonly reported or documented, however I found few hints or online resources that discussed the matter after doing some thorough searching.  The problem I faced was anytime I’d hover one of the child elements (the links) to the containing div, the mouseout event would trigger and fade out the box—and the links with it… And un-clickable links are no good.   So,  mouseover on child elements triggers a mouseout of the parent. The page requirement was to have a link that once hovered, faded in a box with links contained inside—and when you hovered off, the box would fade away.  Naturally, I anticipated that the child elements of the div would still be considered “moused over” the div, however this isn’t the case and requires further DOM manipulation.

The instant the mouse cursor entered the box illustrated above in red, the entire box would fade out. The code looked similar to the following condensed markup:

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script>
		function showLinks(){ jQuery('#linklist').fadeIn(250); }
		function hideLinks(){ jQuery('#linklist').fadeOut(250); }
	</script>
</head>
<body>
	<a href="#" onmouseover="showLinks();">Hover Link</a>
	<div id="linklist" style="display:none;" onmouseout="hideLinks();">
		<a href="#">Link</a><br />
		<a href="#">Link</a><br />
		<a href="#">Link</a><br />
		<a href="#">Link</a>
	</div>
</body>
</html>

I did manage to find an article that discussed this, however, the provided solution was not cross-browser compliant—a concept we work pretty hard at Beacon to maintain. The article is available at QuirksMode.org. One consideration was to pick up the location of the box once the mouseover event was triggered (faded in) and then tracking the mouse coordinates in comparison to a region of pixels around the box, to fire the fade-out routine. Instead, I managed a way by conditionally allowing the mouseout event to fire. Here’s a solution:

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script>
		var isOverLink = false; var isOverDiv = false;
		function showLinks(){ jQuery('#linklist').fadeIn(250); }
		function hideLinks(){ if(!isOverLink && !isOverDiv) jQuery('#linklist').fadeOut(250); }
	</script>
</head>
<body>
	<a href="#" onmouseover="showLinks();">Hover Link</a>
	<div id="linklist" style="display:none;" onmouseover="isOverDiv = true;" onmouseout="isOverDiv = false; setTimeout('hideLinks()',250);">
		<a href="#" onmouseover="isOverLink = true;" onmouseout="isOverLink = false;">Link</a><br />
		<a href="#" onmouseover="isOverLink = true;" onmouseout="isOverLink = false;">Link</a><br />
		<a href="#" onmouseover="isOverLink = true;" onmouseout="isOverLink = false;">Link</a><br />
		<a href="#" onmouseover="isOverLink = true;" onmouseout="isOverLink = false;">Link</a>
	</div>
</body>
</html>

So, what changed? When the page loads, two boolean variables are defaulted to false–One for tracking when the Div is moused over, and one for all the links. The boolean values are switched to their respective state when mousing on and off the links or the Div box. Since the onmouseout is triggered each time we mouse over those links, we’ve put a 250-millisecond delay in calling the hideLinks function (only on the containing div’s onmouseout attribute) so that the variables have time to swap and under the condition that the user is neither hovered over the link or the div–and the box persists with clickable links!

With the rise of mobile devices, web development and debugging is more complex than ever. We have more browsers and platforms to support. We have more screen sizes and resolutions. And we’re building in-browser applications instead of the flat, brochure-ware sites of yore.

Luckily, we also have better tools. The JavaScript console is a standard feature of most major browsers. Both JavaScript and the HTML DOM offer native error handling. We also have services and applications that help us remotely debug our sites.

Read Full Article...

Recently I have had the opportunity to make really exciting and interactive web pages using jQuery. Before working on these projects I had very little understanding of jQuery and what all it could be used for. So I decided to do some research on what the benefits are of using jQuery over other applications such as conventional JavaScript and wanted to see what all I can build using it. Basically you can do almost anything with jQuery to make effects and animation on your site and still be SEO friendly and cross browser compliant.  But those aren’t the only benefits….

What is jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” http://jquery.com/

Benefits of using jQuery:

• Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.
• Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.
• Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.
• Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.
• That was easy! – jQuery has easy implementation for web developers in comparison to other applications.
• Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.
• FREE! – free, open source software.
• Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.
• Simplifies AJAX
• Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

jQuery in action! A few examples of jQuery Usage

• Rotating Image Slider
• Interactive Google Map
• Animated Content Menu
• Slide Effects
• Slider Gallery
• Photobar Gallery
• Slideshow Gallery
• Mobile Image Gallery Web App
• Content Slider
• Photo Zoom Out Effect