Patrick Hansen.com

Web Designer Magazine 179 is on sale now!

A few co workers/friends of mine (Michael Salamon & Jason Bowers) along with myself are featured in the Hot 100 predictions for web trends we’ll see in 2011.

The magazine has a lot of great content in addition to the shameless plug I just mentioned:

- Main Features
Web Designer HOT 100 2011

- Rounding up the top talent, tech and trends for the year ahead
Pro File with Firstborn

- Exclusive agency tour with one of NYC’s finest creative teams
Design diary: We Love

- Chronicling the build of a brand new agency website
Whatever happened to Augmented Reality?

- Discussing the state and potential of one of web designs fallen trends

Also inside… (full list of features/reviews/previews)
- The future of web fonts – news and views
- Cool products rounded up in Webkit
- Awesome site designs showcased in the latest Lightbox
- 3D transforms with CSS and HTML
- Create content for the HTML5 canvas tag
- Create an animated navigation menu
- Multilingual WordPress blogs with qTranslate
- Build a Twitter app with jQuery Mobile
- Facebook page design with 520 Grid System
- Free CD resources

Bold WordPress Theme from Organic Themes worth £40
XML 3D Google Map worth £15 from FlashReseller.com
30 music loops and sound FX from Soundsnap worth £18
Ultrashock Breeze Effect widget for Flash/AS3
Soft Grunge Patterns Vol 2 from WeGraphics
9 eCommerce vector icons from Snap2Objects.com
AS3 Basics par 4 from Cartoon Smart worth £35
Dreamweaver CS4 Basics video from Killersites

For more info, visit:
http://www.webdesignermag.co.uk/blog/web-designer-179-on-sale/

JQTouch is a JQuery plugin for mobile web development targeting the iPhone, iPod Touch, and other mobile touch devices and utilizes WebKit. What does this mean?

This means you can add interactions, layout and styles to a website which are targeted towards multi-touch devices and follow most of the guidelines and currently defined best practices for UI/UX design in this arena. Many have already accomplished some of those angles with standard HTML and CSS which caters more towards the iPhone and mobile devices, but this adds a lot more functionality and interactivity based on JQuery right out of the box, making your website a much more robust and richer experience for mobile users.

You can view the demo on your device and check it out:

http://jqtouch.com/preview/demos/main/

Visit the site:

http://jqtouch.com/

This is part of Sencha labs, which is another framework which parallels JQTouch.

I’ve been playing around with javascript and JQuery lately and was working with some image-based buttons. This is nothing new and there are hundreds of solutions out there for this approach including the popular CSS direction. I did find some javascript solutions, but I couldn’t find any examples that were scalable and/or didn’t require several dependencies or explicit references like requiring ID’s or exact image file names and paths, which can be a hassle if you are dealing with multiple image-based buttons on a page or site.

So for whatever reason you may need a JQuery controlled image-based button, here you go.

note:
My example here is just providing a JQuery approach for image-based buttons. This can also be done quite easily using only CSS and altering the background image for the state. You would have to create a selector for each button and provide explicit height/width attributes for each button in the CSS. I would recommend using the CSS approach over the JQuery one, as it is more scalable if you decide to change the appearance of your buttons, you only have to alter the CSS and don’t need to mess with the markup.

Back to the JQuery Image-based button example:
There were several reason why I wanted to make this as generic as possible:

• Versatile Usage: Need to re-use this script across a site, different pages, even in PHP include files, and these files/pages may reside in various directories which would alter any explicitly declared image paths in the script.
• Image Type: Uncertain what type of image the buttons may be comprised of across the site: gif, jpg, png, etc.
• Number of buttons: May have several button instances and types throughout the site.
• No CSS Buttons: For some reason, the site is not using CSS based buttons

This script addresses all of those concerns with only 3 minimal requirements:

1. The obvious, must have current JQuery lib file linked to your page, and this script either in the page or in external linked js file.
   Download JQuery Here
2. Must assign the class the script references to the anchor tag for your button.
   (example: <a class=”js_uniButton” …></a> ).
3. The up and over images MUST have the same file name and be the same file type, but the over image must be appended with “_hover“. (example: MyImage.gif and MyImage_hover.gif)

I’m a novice using JQuery with only a couple months experience, so if there is a better way, then feel free to let me know. A friend of mine helped me write the image URL caching function, which ensures the image URL only gets called once.

Below is an example of the script with detailed comments and extra line breaks for easier readability.

Click here to VIEW the demo

Click here to DOWNLOAD the demo

note:
This needs to be within a doc ready function either in the page or in external js file:
$(document).ready(function()
// insert script here
});

//*************** JQeury Universal Image Button ***************
function getHoverPath (imgPath) {
//split imgPath after each '/' and create array to path directories and file name
var srcPathArray = imgPath.split('/');
//find image file name get length of srcPathArray and retrieve last item which is the image file ex: "images/buttons/IMG.gif"
var imgFile = srcPathArray[srcPathArray.length-1];
//image file name array split at "." to get:[fileName, ext]
var imgArray = imgFile.split('.');
//img name (first item in imgArray)
var imgName = imgArray[0];
//image ext (second item in imgArray)
var imgExt = imgArray[1];
//image src path
var srcPath = imgPath.split(imgFile , 1);
// concatenate path and add "_hover" to image file name
return srcPath + imgName+'_hover.'+ imgExt;
};
// get hover button array
var hoveredButtons = new Array();
 
$('.js_uniButton').mouseover (function() {
$this = $(this);
//get image path of this instance
var imgPath = $this.children('img').attr('src');
//cache img path url on initial mouseover
if (typeof(hoveredButtons[ imgPath ]) == 'undefined') {
hoveredButtons[ imgPath ] = getHoverPath( imgPath );
//console.log('cache image path ' + imgPath + ' and hover path ' + hoveredButtons[ imgPath ]);
 }
$this.children('img').attr('src' , hoveredButtons[ imgPath ]);
 
//mouseout actions
$this.mouseout(function() {
//define this handler
var $this = $(this), handler = arguments.callee;
 
//unbind mouseout handler
$this.unbind('mouseout', handler);
 
// on mouseout, swap current image with original image path
$this.children('img').attr('src' , imgPath);
});
});

Several coworkers and industry friends have been tweeting about the new JQuerey Sparkline plugin.

This looks like a great resource to add some very dynamic and robust sparkline charting elements to your website with very minimal implementation efforts and code.

For more info, visit:
http://www.omnipotent.net/jquery.sparkline/

What is a sparkline?
I first heard of this term while attending one of Tufte’s conferences in Colorado a couple years ago. If you are familiar with Tufte’s work, you know his skills with data visualization and charting. He referred to the graph types that have vertical and horizontal units of measurement which create a line that resembles a “spark” as it represents the specified data types across the graph.