- CSS Codes
- Horizontal CSS Menus
- Vertical CSS Menus
- Image CSS
- Form CSS
- DIVs and containers
- Links & Buttons
- CSS3 demos
- CSS Layouts
- Two Columns
- Three Columns
- Fixed layouts
- Liquid Layouts
- CSS Frames
December 16th, 2008
Expando Image Script
Credits: John Scheuer
Expando is a simple script for folks who want to have an image expand onMouseover (to its actual size). This lets you display large images at a reduced size initially (aka thumbnail size), and have them dynamically expand when the mouse rolls over them.
Want to display images as an automatic slideshow that can also be explicitly played or paused by the user? Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.
November 12th, 2008
Smooth Navigational Menu
Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. A configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus.
October 21st, 2008
DD Drop Down
DD Drop Down Panel lets you tuck away ordinary HTML content on the page and revealed on demand when the user clicks on the protruding tab. The rest of the page's content is pushed down when the hidden content is exposed. It comes with a handful of helpful features, such as the use of an arrow image to reflect the current panel state and panel state persistence.
September 19th, 2008
Menu (v1.4) Credits:
jQuery TreeView Menu brings together all the most practical features requested in a Tree Menu into one awesome menu script. The markup for the menu is simply a HTML list before the script transforms it into a fully functional TreeView Menu resembling the style of Window's File Explorer, among the many themes. Supports persistence, and optional asynchronous populating of the tree's contents via Ajax and JSON data returned from the server.
August 4th, 2008
Mouseover Tabs Menu Credits:
This is a mouseover tabs menu. Move the mouse over designated links, and additional "sub links" appear beneath it. Think of it as an inline two level menu. The sub menu contents are defined inside an external file and fetched via Ajax when the page loads. Note that this script replaces the legacy menu Tabs Menu (mouseover).
July 7th, 2008
All Levels Navigational Menu
The era of multi level, nested drop down menus is upon us! All Levels Navigational Menu is a CSS/ HTML list based menu with support for infinite levels of sub menus. It's lightweight and easy to implement (the menu contents are simply regular HTML lists), with all of the menu links search engine friendly. This script simultaneously kills off two old and obsolete menu scripts on DD- Top Menu I and Top Menu II. Who's next to fall victim? Stay tuned to see.
May 25th, 2008
Collapsible DIV v2.0 Credits:
Animated Collapsible DIV isn't its former self, and that's a good thing. Based on various feedback we've received on the forums, v2.0 of this script is born, which is infinitely more versatile than its predecessor. Most notably, the ability to "group" multiple collapsible content instances to act as a single unit has been added, so opening one automatically closes the others within the group.
May 9th, 2008
Widget (YUI Based) Credits:
Color Picker Widget iis an advanced Color Picker script that can be easily integrated into any form field(s). Based on YUI's Color Picker control, it supports the ability to display the Color Picker either inline on the page, or as a floating widget, activated by clicking on a "control".
Featured Content Slider v2.0 Credits:
Sometimes the only way to incorporate all the suggestions on an existing script is to rewrite it. With that said here's version 2.0 of Featured Content Slider, a rewrite of v1.0 that's much more versatile in every way.
March 19th, 2008
Step Carousel Viewer
Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents can be defined either inline on the page, or on an external file and fetched via Ajax.
Facebox Image and
Content viewer v1.1
Credits: Chris Wanstrath
Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine.
January 24th, 2008
Anticipating that one of the more popular uses of Accordion Content script will be to create a expanding menu using it, we want to be one step ahead! This script uses Accordion Content script as is to basically create an Accordion Menu script. Two different styles are shown.
Well you asked for it, so here it is. Accordion Content script, like its "Switch Content I" and Switch Content II siblings, lets you group arbitrary contents on the page together and reveal them on demand when the user clicks on their associated headers. However, it does this using a smooth, "accordion style" animation. There are lots of configurable options to play with.
Dec 22nd, 2007
The last script before Christmas, handed out a little early! Featured Content Glider turns ordinary pieces of HTML content on your page into an interactive, "glide in" slideshow. Users select the content they want to view, or have the script automatically rotate through them. The pagination links are also defined using plain HTML, allowing you to style, arrange, and remove them anyway you like. This script uses the jQuery library.
Nov 22nd, 2007
Drop Down/ Overlapping Content
This newly renovated script lets you display content in tight areas on your page, by dropping it down into view when the mouse rolls over the anchor element. The content temporarily overlaps anything beneath it. It's extremely handy for displaying search boxes, additional links etc in a tight area, such as the sidebar column of a page.
This is a generic fader script that can be applied to element(s) on the page to make them gradually fade into view when the mouse rolls over them, and fade out when out. Just give the desired elements on the page a "
to kick start the effect.
October 21st, 2007
Ajax Tabs Content
Say hello to Ajax Tabs Content v2.0, the most comprehensive script of its kind for displaying external content on your page inline and organized using tabs! A fully unobtrusive, CSS and HTML based script, it supports persistence of the active tab (ie: when page is reloaded), a "IFRAME" mode, a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more.
Tab Content script (v
Version 2.0 of the popular Tab Content script has arrived, and it hasn't come empty handed. A complete rewrite of the original script, Tab Content script v2.0 lets you organize regular DIV contents on the page into a tab interface, with the desired content appearing when a tab is clicked on. it supports practical features such as default tab selected, persistence of the active tab (ie: when page is reloaded), a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, easy customization of the CSS tabs to your own, and more.
September 15th, 2007
This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested.
August 17th, 2007
Splash Page Script
gAjax RSS Feeds Displayer Credits:
This script takes advantage of Google's Ajax Feed API to let you easily display RSS feeds on your site without hosting anything on your own servers. Display results from multiple feeds intermixed, sort them in a variety of ways, specify which components of each RSS entry to display, and more. Two additional RSS scripts based on the gAjax RSS Feeds engine:
June 19th, 2007
Collapsible DIV Credits:
This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. Works with both DIVs that have an explicit CSS height attribute defined, and without.
May 16th, 2007
Drop Down Tabs (5
Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. Like its cousin DD Tab Menu below, it comes with 5 attractive menu designs built in to make your life a little bit easier.
DD Tab Menu (5 styles)
A complete rewrite, the new DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. It comes with 5 sleek tab menu designs to choose from by default, is search engine friendly, and supports the ability to auto select the tab that corresponds to the current page. Cool!
April 18th, 2007
FrogJS Image Gallery Credits:
FrogJS is sequential image gallery script that supports an optional description and link for each image. You view the images in sequence, by clicking on the previous and next images' thumbnail. Each image is simply defined as regular HTML contained within a special DIV tag on the page, making it extremely easy to set up, including its corresponding description and link.
Script II Credits:
Switch Content Script II adds contact/expand functionality to any content using icons such as an image as the toggling interface. Apply it to content on your page you wish to give the viewer the option to hide. Cookies are used to remember and recall each content's last state. Rewritten to be based on the powerful Switch Content I script.
March 19th, 2007
Display how much time has passed since an expired date with this rare script. It's sensitive to the second (ie "April 9, 2005 13:30:00"), and thanks to a custom "
handler, you can control exactly the action to take each second as the script is
counting up, most commonly, display the results inside a DIV.
March 4th, 2007
color picker Credits:
ColorJack DHTML color picker is a cross browser, sleek color picker that's compact to boot. Licensed under Creative Commons, use it on your sites or web apps.
February 27th, 2007
DHTML Modal window Credits:
This addon script to DHTML Window widget below extends the widget with modal windows support. A modal window differs from a regular DHTML window in that a "veil" appears over the rest of the page whenever the modal window is open, requiring the user to explicitly close it before the veil is lifted and the user can interact with the page again.
This is a robust DHTML Window widget that replicates the look and functionality of a traditional pop-up window, minus the intrusiveness. Drag or resize the window widget on the page, minimize or close it, load a new page into it, or spawn whole new windows just as you would with popups. It's a modern, Web 2.0 alternative to pop-up windows!
January 22nd, 2007
Thumbnail viewer Credits:
Image Thumbnail Viewer is a compact, unobtrusive image viewer that can be applied to any link on the page to load the desired image inside a sleek interface based on the link's "href" value. This script will center the enlarged image on the page and optionally display a text description of the image.
Swiss Army Image
Swiss Army Image slideshow is an incredibly versatile image slideshow script. It supports a myriad of features, from manual image cycling, fade effect between images, to accompanying text description beneath each slide, linking, and more. It's a swiss army alright!
January 5th, 2007
Credits: Dynamic Drive
The first script of 2007 turns out to be a rewrite of an old favorite! Switch Content script allows you to make arbitrary content on your webpage contract/expand on demand. The user clicks on designated headers to reveal additional content. Supports multiple "groups" of switch contents on the same page, each with their own independent settings.
Disable Text Selection script
Credits: Dynamic Drive
This is a simple script that lets you disable text selection (the ability to drag and select text) within any element on your page, such as a certain paragraph.
December 11th, 2006
Pagination script Credits:
Does your page contain lengthy chunks of text, a series of images, or long forms that dissuade people from reading them top to bottom? This script lets you transform long content on your page into a series of virtual pages, browseable via pagination links. The broken up content pieces are separated simply via arbitrary DIVs (or another block level element of your choice) with a shared class name. Script replaces Multi-part content script.
RSS Display Boxes
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called Simplepie. Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.
November 21st, 2006
Interstitial Content Box
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses Ajax to fetch and display the contents of external pages on your server as an interstitial.
Omni Slide Menu Credits:
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.
October 30th, 2006
Script II (Crosshair mouse cursor) Credits:
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!
Drop Down Tab Menu Credits:
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.
September 27th, 2006
Content Slider Credits:
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.
September 20th, 2006
Effect menu Credits:
September 10th, 2006
Rich HTML Balloon
This is a balloon style tooltip (tooltip with an arrow image) that can be applied to any link(s) on the page. The tooltips themselves are merely hidden DIVs on the page, making it very easy to add arbitrary/ rich HTML inside of them.
Order script Credits:
Randomize the display order of arbitrary content on your page with this script! As a result, the order in which the participating contents is displayed on the page changes randomly each time the page loads.
August 17th, 2006
Cross browser snake Credits:
This is a simple cross browser snake game you can add to your site. Select a speed then use your arrow keys to attempt to eat the apple (red block), but watch out for the walls. At any time you can pause the game by pressing the space bar.
This is a form dependency script for shuttling the display of fields within a complex form, where the visibility of a form field should depend on the value and/or state of another.
July 20th, 2006
Simple Tree Menu Credits:
This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree! Once transformed, the original list and its sublists can be collapsed/expanded at will, with cookies used to optionally persist its state.
July 17th, 2006
Slashdot Menu Credits: DimX
This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. Session-only cookies are used to remember the menu state (whether it's expanded or not).
June 29th, 2006
Tab Content script
Credits: Dynamic Drive
Inspired by the tab contents on News.com's frontpage, this is a CSS/HTML based Tab Content script that lets you organize regular DIV contents on the page into a tab interface, in which clicking on a tab reveals the associated DIV content. It supports much requested features such as default tab selected, persistence of the active tab (ie: when page is reloaded), and multiple Tab Contents on the same page.
AnyLink CSS Vertical Menu Credits: Dynamic Drive
By popular request, this is a vertical (drop to the right) version of Anylink CSS Menu that can be used on arbitrary links or vertical menus to instantly add a drop down menu to them. Each drop down menu is implemented as plain HTML on the page, making the menu contents search engine friendly and easy to define.
June 1st, 2006
CMotion Image Gallery script
This is a vertical, up down scrolling version of the original CMotion Image Gallery script. A versatile image gallery script that uses the user's mouse to control it, thanks to jscheuer1 for bringing us this alternate version.
content Credits: Dynamic Drive
This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo's spanking new homepage (beta).
April 24th, 2006
Credits: Dynamic Drive
This is a live count down script that can be set to count down to any future date/time, such as Christmas, your dad's birthday etc. Customize all aspects of the count down, such as what text to display, even the action to perform at the end of the count down. Note that the date/time is derived from the visitor's computer, so it's relative to each visitor's time.
Credits: Dynamic Drive
Yes we heard your requests :) This is a "universal" count down script that lets you count down to absolute events whereby the target date/time needs to be specific to a certain time zone, such as the launch date of a web site, the date/time of the next Solar Eclipse etc. It accomplishes this by using your server's time to calculate the local time of the desired location on earth before performing the count down.
April 6th, 2006
Credits: Lokesh Dhakar
Lightbox JS 2.0 expands upon the original Lightbox Image Viewer with a few new features, most notably, the ability to group similar images together, so cycling between these images become a breeze.
March 29th, 2006
openWYSIWYG 1.01b Credits:
openWYSIWYG is highly robust and attractive WYSIWYG editor that replaces the plain <textarea>s in your forms. Cross browser friendly and open source, so you can freely include it in your commercial apps.
Terms highlighter Credits: Cal Henderson
This script highlights any terms on your page used by a visitor coming from Google to locate it, similar to a popular feature found in Google Toolbar. It's a great way to retain search engine visitors, by helping these folks quickly focus in on the relevant areas on your page pertaining to his/her search query.
March 20th, 2006
Credits: Dynamic Drive
Ajax XML ticker
Credits: Dynamic Drive
This is an Ajax enhanced ticker script that lets you use a text file as the contents of the ticker to show! Easily define your messages, which support rich HTML, all inside this external text file. Now there's no more excuse to not update the contents of your ticker more often!