25 Code Snippets for Web Designers (Part8)

Our first post of 2008 kicks off with part 8 of our code snippets series. Lets take a look at some handy pieces of Javascript, CSS and and html that you can use in your site designs …

---

swfIR – swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website

---

Drigg – Drigg is a powerful Drupal module written by Tony Mobily, that allows you to promote stories automatically based on your users’ votes. Unlike other Drupal and non-drupal solutions, you can do this with amazing simplicity

---

Creating a Google Suggest Style Filter with the AutoComplete Control – Allow the user to select a filter column from a drop down list. Then as they key in characters into the adjacent textbox I would use the AjaxControlToolkit’s AutoComplete extender to suggest some values to filter by

---

Moo Flow – MooFlow is a Javascript based Gallery looks like Apple´s iTunes or Finders CoverFlowâ„¢

---

Spellify – An automatic text field spell checker

---

How to make sexy buttons with CSS – This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS

---

Advanced CSS Menu – Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property

---

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

---

JFree Chart – JFreeChart is a free 100% Java chart library that makes it easy for developers to display professional quality charts in their applications

---

Open Flash Chart – Open Flash Chart, is open source. It is free to use and you get the source code to fiddle with!

---

Free CSS Navigation menus – These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit

---

CSS Drop Shadow – Technique to build flexible CSS drop shadows applied to arbitrary block elements. Most of the existing techniques for creating element shadows use images, this one doesn’t. IT uses plain simple CSS

---

jquery Hover Sub Tag Cloud – Tag clouds When, used properly, they can provide visitors with an instant illustration of the main topics of the site’s content. And although we don’t have that much choice in designing them, we can still find our way to come up with new design approaches and solutions

---

Website Contact Form Generator – The free Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed

---

WYM Style CSS Framework – The aim of this project is to provide a set of well-tested modular CSS files, that can be used for fast design of web sites

---

CSS Text Wrapper – The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

---

Auto Complete – Most auto-complete textboxes may have a reverse effect on end-users. Instead of helping them get things done faster, they get irritated by design flaws made by the programmer

---

Calendar Component – A Component to ease user experience in selecting a date range

---

Styling the button element with sliding doors – The following technique demonstrates a cross-browser technique for button elements with sliding doors

---

Autosuggest form with Ajax – The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key

---

Matt Berseth – YUI Styled ‘Tip of the Day’ Dialog using the PopupControl, DynamicPopulate and DragPanel Extender Controls

---

Frequency Decoder – Accessible Unobtrusive Slider

---

Calendar – Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements

---

Starbox Rating Stars – Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework

---