Reader
You are here: Home / Archives for 2009

Archives for 2009

List of CSS Based Breadcrumbs

Last updated on by Gabriel Livan

Breadcrumbs are a form of website navigation that keep track on the path followed by a website visitor. They are sequential links telling the user the location of the page within the website (example: category / subcategory / sub-sub subcategory / product).

Here is a list of tutorials that will give you an idea of how you can setup a CSS based breadcrumb on your site:

Simple scalable CSS based breadcrumbs

CSS Breadcrumbs from Dynamic Drive

css-breadcrumbs-dynamic-drive

Create apple.com-like breadcrumb using simple CSS

breadcrumb-jankoatwarpspeed

CSS Design: Taming Lists – Breadcrumb trails

breadcrumb-taminglists

Creating an Exit Modal Box using the jQuery library

Last updated on by Gabriel Livan

Shows up when the user is going to click close [X] button

Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.

To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.

Read the rest of this entry…

Style your HTML Input Form Elements using CSS & JavaScript

Last updated on by Gabriel Livan

Do you want to change the default look of your form elements? Checkout the following scripts that will help you to do that! Some of the libraries used to stylish the inputs are JQuery and MooTools.

prettyCheckboxes is a script useful if you want to have a consistent look for the checkboxes and radio buttons of your forms. The usability of the inputs remain the same after you apply the new effect.

[Go to Project Page | View Demo]

fancyform

FancyForm is a powerful and flexible checkbox replacement script for your classical HTML Input Checkboxes and Radios.

A quick feature list:

  • Quick Setup (just 2 lines or markup are required)
  • Has extendibility (many customization options)
  • Degrades gracefully (forms are working on old browsers)

[Read more]

stylishcontrols

Tips and tricks for accessible stylish HTML controls is a tutorial that shows you how to create stylish form buttons, checkboxes and radio buttons. A simple PHP Helper Script is provided that automatically generates the code.

[Go to Project Page | View Demo]

Custom Form Elements is a UI library that enhances checkboxes, radio buttons, input file uploads, text inputs, textareas, selects, submits, resets & images.

Features include:

  • Modular and small in size
  • CSS Customizable
  • Unobstrusive
  • Maintains usability and accessibility of form elements
  • Supports custom events
  • Enable sliding doors CSS Technique for your text fields/textarea
  • Select all / Deselect all functionality to specified groups of checkboxes

[Go to Project Page | View Demo]

Carousel Examples: YUI Library, jQuery, MooTools & Prototype

Last updated on by Gabriel Livan

Are you looking to setup a carousel on your website? Checkout this list!

yui-carousel

The YUI Carousel Control is an excellent tool if you need to offer your website’s a way to browse images/content arrayed vertically or horizontally in an overloaded page region. Some of the featured provided by this awesome library include:

  • Circular Carousel
  • Partial revealing previous and next items
  • Usage of both images and text within an item
  • AJAX usage for deferred loading of items
  • Paginator
  • Usage with the ARIA plugin

Read more from this entry…