Web Design Ledger » javascript

15 Excellent jQuery Navigation Techniques and Solutions

Henry — Fri, 01 May 2009 06:39:23 +0000

Along with content, most would agree that navigation is one of the most important aspects of any website. That’s why it’s crucial to make site navigation intuitive and engaging. jQuery is an excellent choice for achieving this. There are many things you can do with jQuery to spice up menus, but here are 15 of the best techniques and solutions for enhancing website navigation.

jQuery Tabbed Interface

Sliding Jquery Menu

CSS Sprites2 – It’s JavaScript Time

Kwicks for jQuery

jQuery File Tree

Learning jQuery: Fading Menu – Replacing Content

jQuery Context Menu Plugin

Coda-Slider

Create Vimeo-like top navigation

jQuery (mb)Menu 2.0

jQuery idTabs

Create a Slick Tabbed Content Area using CSS & jQuery

Create a Cool Animated Navigation with CSS and jQuery

LavaLamp for jQuery lovers!

How to Make a Smooth Animated Menu with jQuery

18 Seriously Helpful Cheat Sheets for Easier Coding

Henry — Wed, 22 Apr 2009 05:52:08 +0000

A few weeks ago, I showed you the best cheat sheets for web designers. Following that post, many of you showed interest in having cheat sheets to help you write code. That is no surprise since the skill set of many web designers today go beyond visual design. So whether you are a seasoned programmer or just starting to learn how to code, these cheat sheets are going to be a big help to you.

Wordpress

The WordPress Help Sheet

The Advanced WordPress Help Sheet

ExpressionEngine

ExpressionEngine Quick Reference Chart

PHP

PHP Cheat Sheet

MYSQL

MySQL Cheat Sheet

Ruby on Rails

Ruby on Rails Cheat Sheet

JavaScript

JavaScript Cheat Sheet

Scriptaculous Cheat Sheet

jQuery 1.3 Cheat Sheet

mootools 1.2 cheat sheet

Prototype 1.6.0.2 Cheat Sheet

XHTML

(X)HTML Elements and Attributes

HTML/XHTML in one page

CSS

CSS Cheat Sheet (V2)

CSS CHEAT SHEET

ActionScript

Actionscript 2.0 Cheat Sheet Flashpaper

ActionScript 2.0 to 3.0 Migration Cheatsheets

Papervision 3D Cheatsheets

Other resources

The people at Dzone have some more great cheat sheets for developers that you may want to check out:
RefCardz

11 Excellent Solutions for Creating Tooltips

Henry — Tue, 10 Mar 2009 06:20:20 +0000

Tooltips in web design are becoming more and more commonplace. Even though I don’t think they are appropriate for every type of site, they can be a very useful addition when implemented correctly. If you are planning on using tooltips in your next project, the hardest part may be choosing the right solution.

Here are 11 excellent methos for creating tooltips using various solutions such as jQuery, MooTools, and CSS only.

Prototip 2

Easiest Tooltip and Image Preview Using jQuery

Simpletip

Coda Popup Bubbles

MooTools 1.2 Tooltips: Customize Your Tips

Duplicate the jQuery Homepage Tooltips Using MooTools

jQuery Ajax Tooltip

CSS Bubble Tooltips

Easy CSS Tooltip

CoolTips

ToolTip_MooTools

14 Most Useful Web Design Cheat Sheets

Henry — Tue, 03 Mar 2009 05:10:31 +0000

A well rounded web designer’s day is spent immersed in multiple graphic design programs and writing front end code. All of this moving from one environment to another can make it hard to memorize such things as hot keys and shortcuts for each. This is where cheat sheets come into play. A cheat sheet is simply a printable reference or guide to a particular software package, language, framework, etc.

Here are 14 of my favorite cheat sheets.

Photoshop

Adobe Photoshop CS4 Keyboard Shortcuts

Adobe Photoshop CS3 Keyboard Shortcuts

Photoshop Lasso Tool Cheatsheet

Adobe Pen Tool Cheatsheet

CSS

CSS Cheat Sheet (V2)

Mac OS X CSS Cheat Sheet

CSS CHEAT SHEET

XHTML

(X)HTML Elements and Attributes

HTML/XHTML in one page

JavaScript Frameworks

jQuery 1.3 Cheat Sheet

mootools 1.2 cheat sheet

Prototype 1.6.0.2 Cheat Sheet

Flash

Adobe Flash CS4 OS X Keyboard Shortcuts

Flash CS3 Cheat Sheet

11 Ways to Enhance a User Interface with MooTools

Henry — Fri, 06 Feb 2009 07:16:49 +0000

When creating a User Interface, it’s important to make it engaging for the user not only from a visual standpoint, but also with interactivity. With so many JavaScript frameworks readily available, web designers and developers have many tools at their disposal to add slick effects to their UI’s.

Last week, I showed you what could be done with jQuery. Now let’s take a look at these 11 tutorials and see what kinds of things MooTools can do for a User Interface. If you are not familiar with MooTools, it is a popular JavaScript framework designed for the intermediate to advanced JavaScript developer.

FancyUpload

Facebook Sliders With Mootools and CSS

Mootools Content Slider With Intervals

Jazz Up Your Forms With MooTools Pt. 1

Using CSS and Mootools to simulate Flash horizontal navigation effect

Two CSS vertical menu with show/hide effects

How to Auto Caption Images Using MooTools

Elegant animated weekly timeline for websites

MooTools Gone Wild: Element Flashing

Add a Show/Hide Login Panel

Mootools Link Animation

13 Excellent jQuery Animation Techniques

Henry — Thu, 29 Jan 2009 08:11:41 +0000

Only a few years ago, if something was animated on a website it was automatically assumed to be Flash. However, this is not the case today. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations.

With several JavaScript frameworks available, jQuery is quickly becoming a favorite. If you are interested in using jQuery for animated effects, here are 13 excellent tutorials to get you on your way.