25 Code Snippets for Web Designers (Part7)

Tweet

Every web designer finds it handy to have a collection of code snippets such as JavaScript effects, pieces of html and widgets that they incorporate into their designs. Lets take a look at recent examples of these …

---

Live Validation – LiveValidation is a small open source JavaScript library built for giving users real-time validation information as they fill out forms

---

Javascript Progress Bar – Dynamic Unobtrusive JavaScript Progress/Percentage Bar

---

Ask the CSS Guy – Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

---

Styling File Inputs with CSS and the DOM – File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation

---

Fancy Form – FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements

---

Lavalamp for jQuery lovers – Hover menu built with A semantically correct HTML markup, A CSS to skin the markup and unobstrusive javascript

---

Fade Out Bottom – This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value

---

Clean CSS – CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise

---

CSS Specificity – Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements

---

Phat Fusion – Image menu using JavaScript, clicks to keep each menu item open and to close it again

---

XML and SWF Charts – XML/SWF Charts is a simple, yet powerful tool to create attractive web charts and graphs from dynamic XML data

---

Date Input Calendar – Date Input Calendar is designed specifically to make entering date values into forms as easy as can be

---

Jibberbook – Free downloadable Ajax guest book

---

Prototype Fisheye – The idea behind a fisheye control is a strip of icons, being vertical or horizontally laid out that reacts to the user’s mouse as it approaches the icon

---

jQuery Password Strength Meter – The jQuery Password Strength Plugin allows you to show a visual aid for the strength of a users password. It is attached to a password field, and as the user types in their password, the plugin calculates a score based on the variety of different characters

---

jQuery UI – jQuery UI is a set of theme able widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications

---

Nice Titles Revised – Mouseover Tool Tips

---

AutoSuggest – An AJAX auto-complete text field

---

Date Input Selection – The Datetime Toolbocks is a pure JavaScript library using DHTML and advanced date parsing to generate the date based on the grammar passed

---

Transparent Message – Transparent message is a new way to display information on a web page.
Instead of using the ugly alert() javascript function, it shows the message in a overlay layer of your HTML page

---

PJ Hyett – The Lightbox effect without Lightbox

---

jsGalScroll – The jQuery jsGalScroll Plugin allows you to take a grouping of images and turn them into a scrolling photo gallery with pagination

---

Ask the CSS Guy – Create a table like Orbitz’s airline flights scheduling and pricing matrix

---

CSS Dashboard Effect – Ever want to alert your users to a really important message? Ever care to have some effect that looked like dashboard?

---

Eswat – The ESWAT web project framework is a kit that contains a folder structure and some pre-written components that I use whenever I start off a new web project

---