- 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
March 6th, 2006
DHTML Ticker script
Credits: Dynamic Drive
Tickers remain the classic way to show content to your visitors one piece at a time and dynamically. This is a DHTML ticker script that takes in an array of messages and displays them one message at a time. For you people that like a little more flare, the script also supports an optional fading effect between messages!
up-down message scroller Credits: Dynamic Drive
Out with the old, in with the new we say! This is one of the very first scripts added to DD many years ago, and it's just gotten a much needed overhaul. It's an up-down message scroller that pauses between each message. Display multiple instances of the scroller on one page, change from multi-lined to single lined scroller easily, and more!
March 1st, 2006
Recall Form values script
II Credits: Dynamic Drive
You've probably seen this feature inside the comment forms of blogs, where a checkbox lets you specify whether to remember the values of certain text fields and recall them later. Well, this script adds such a feature to any form!
Picker Credits: Yahoo
Need a color picker for your online forms or application? This advanced color picker is based on Yahoo's excellent UI library, and features a fully interactive, drag and drop interface to visually select the desired color then populating the form field with the correct hex value.
February 9th, 2006
(Ajax invocation) Credits: Dynamic Drive
This powerful RSS ticker script lets you easily display any RSS content on your site in a ticker fashion! This script uses a simple PHP based RSS parser called LastRSS to retrieve an RSS feed, then Ajax and DHTML to display the feed dynamically and with flare.
January 31st, 2006
control Credits: Ilya S. Lyubinskiy
Use this script to create a drop down control for arbitrary content on the page, such as a a search form. When the user clicks on a link, the content drops down and is shown on demand.
January 25th, 2006
Credits: Lokesh Dhakar
Lightbox JS is an elegant, unobtrusive script that overlays a larger version of an image on the current page for display when clicked on- an image thumbnail viewer if you will. It's a snap to setup and works on all modern browsers.
Pie Graph script Credits:
DHTML is trespassing into the terrority of Java! This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page. Very nice.
Line Graph script Credits:
Based on the same library as the Pie Graph script, this is a purely DHTML/ CSS based Line Graph script.
January 15th, 2006
Basic Ajax Routine
Credits: Dynamic Drive
Ajax Ajax Ajax, can't get away from hearing about it, so might as well embrace it. This is a very small Ajax routine (less than 3 Kb) that enables you to easily use Ajax on your site to send "GET" or "POST" requests asynchronously. Get the contents of an external file, send GET or POST requests to a server side script with different parameters etc, all seamlessly, without reloading the page.
January 2nd, 2005
Chrome CSS Drop Down
Menu Credits: Dynamic Drive
December 16th, 2005
Album script Credits: Dynamic Drive
This is a PHP enhanced Photo Album script that automates the retrieval of all images within a specific directory to show, with links to cycle through each batch of images. Based on the original Photo Album script, as you upload or modify images within a directory, the script automatically adapts!
DOM Drag & Drop script Credits:
This is a no fuss DOM drag script that be used on any relatively or absolutely positioned element on the page to make it instantly dragable. The script also fires 3 custom event handlers that let your page sense and react to the dragging in some fashion.
November 30th, 2005
slide show Credits:
Well, you've been asking for it, and persistence does pay off. This is a complete rewrite of the original fade-in slideshow script to accommodate three of your most requested features: the ability to display multiple slideshows on the same page, optional linking and link targeting for certain images, and finally, the ability to randomize the display order of the images. With all these abilities in place, we thought we'd also upgrade its name, now called Ultimate Fade-in slide show!
November 21st, 2005
Local Time script
Want to display the current local time of a specific place in the world? This DHTML script uses your server's time to calculate and display the local time of anywhere on Earth. Note that the page using this script must either be PHP or SSI (server side includes) enabled.
Style Sheet Switcher (v1.0) Credits:
This is a versatile "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Cookies are used to enable persistence across site and for any number of days. It's time to make the switch!
November 3rd, 2005
Dynamic Ajax content
Load and display external pages inside a DIV without reloading the page using this Ajax script. If your external pages reference any external .css or .js files for styling, this script can also load and apply them to the page on demand.
October 27th, 2005
Ajax Rotating Includes script
This is a shakeup of the Ajax Includes script below to let you input a list of external pages for the script to choose and selectively include one onto the current page. You can choose to display a different file for each day of the week, month, or randomly.
This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document.
October 13th, 2005
Show Hint script Credits:
"Show Hint" script displays an attractive hint box containing additional explanation on any item on your page. A hint box pops up next to the item when the mouse moves over it with relevant hints or useful information, such as alongside certain form fields instructing the user how to fill each one out.
October 4th, 2005
Photo Album script
Photo Album script is ideal for displaying multiple images at once, with the ability to cycle through entire batches of images. Each image can be hyperlinked and a text description shown below it. Also, customize the dimensions of the photo album, such as 3 by 2 images, 4 by 5 images etc.
Tab Menu script Credits:
This is an attractive, list based tab menu script. As the mouse rolls over a tab, additional links are shown beneath it horizontally.
September 12th, 2005
Floating Top bar script Credits:
This script displays a floating bar that sits at the top of the window, gliding gently back into view when the page is scrolled. Regular HTML content can be shown inside of it.
Ajax load XML file
This script demonstrates the concept of using Ajax to load a simple XML file and display it on the page.
August 31st, 2005
Script II Credits:
Switch Content Script II adds contact/expand functionality to any content using an image icon 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.
August 18th, 2005
August 4th, 2005
Vertical Menu Credits:
This is an alternate version of the AnyLink Drop Down Menu that works with vertical links instead. The menu is positioned to the right of the link or link container such as a list item <li> or table cell (<td>).
July 14th, 2005
Content link Credits:
This script lets you display content in tight areas on your page, by displaying the content on top of any link used to activate it. The content floats above and 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.
maxlength script Credits:
Why this isn't supported by default in HTML is a whole other issue. Anyhow, this is a simple but effective script for extending your textarea with a maxlength attribute, so the user's input cannot exceed a certain number of characters. Works with any number of textareas on the page.
June 22nd, 2005
This script encrypts any email link on your webpage to hide them from harvesters and spammers. The script shines in its ease of implementation and extensive browser compatibility.
June 6th, 2005
Looking for a tooltip script where the tooltip is anchored to the link's position rather than following the mouse around? Fixed Tooltip script behaves in just this manner, unlike Cool DHTML Tooltip I or II. Whichever way you like it, we got you covered now!
May 23rd, 2005
This carousel image slideshow, with its object oriented design, redefines robustness. The script supports vertical and horizontal scrolling, optional linking, title attributes, configurable visible sides, and more. Furthermore, multiple, different versions of this script can be invoked on the same page. Wow!
May 16th, 2005
AnyLink CSS Menu Credits:
AnyLink CSS Menu is a cool script that adds a drop down menu to any link on your page. Each menu is implemented as plain HTML (a DIV containing links) on the page, making the menu contents search engine friendly and potentially very easy to deploy.
Horizontal hover menu Credits:
A CSS horizontal menu with links that hovers up when the mouse moves over them. In select browsers, the links depress as well on mousedown.
May 3rd, 2005
Switch Menu II Credits:
Switch Menu II creates menu headers that expand and contact when clicked on to reveal additional links within. A smooth "Win XP" style animation is applied during the unfolding of the links.
April 4th, 2005
Content colors Credits:
Content that randomly changes background or text color is an easy way to ensure consistent viewer focus on them. This script lets you specify a list of colors (background or text) to be randomly applied to certain content on your page, whether it's a DIV or table cell. Use it on content that you want visitors to always focus on.
March 24th, 2005
Form values script Credits:
This script remembers the value entered into any form textbox (<input type='text") by the visitor, and upon his/her return, preloads the textbox with that value. Now this is one script your visitors may just appreciate more than you!
March 9th, 2005
Open select links in new
Specify arbitrary or entire groups of links on the page open in a new window with this flexible script. An optional checkbox lets the visitor easily toggle between "open in new window" or "current window" instead. This script takes a familiar concept and pushes it into overdrive!
Feburary 28th, 2005
Cap content Credits:
Image script Credits: Lloyd Hassell
Oh how time flies. Five years ago, we featured the original version of Bouncing Image Script. Now this script is back after a reincarnation, supporting multiple images and a smoother animation in certain browsers. Check it out!
Feburary 14th, 2005
Rich text editor (for textareas)
Replace a form's textarea field(s) with a custom one that supports WYSIWYG formatting with this Rich Text Editor script. It allows the user to easily format the entered content, such as make it bold, change its size, colors etc.
January 25th, 2005
Credits: Dynamic Drive
Add a sound effect to your webpage for certain actions, such as when the user moves his mouse over a link, with this script!. This IE-only script is simple yet versatile, allowing you to instantly apply the sound to multiple items on the page. Relies on the <BGSOUND> tag.
Image Gallery script Credits: Dynamic Drive
Well, this script has the honor of being the very first of Year 2005! CMotion Image Gallery is a versatile gallery script that uses the user's mouse to control it. The user can direct both the image scrolling direction and speed just by placing the mouse on either spectrums of the image gallery. Clicking on an image can then load a larger version of it etc. Cool!
December 27th, 2004
Date Input Calendar Credits: Jason Moon
This script displays a popup calendar next to date fields to make it easy for users to fill out the date. The script also generates the actual date field as well using select menus and a text box, and creates a hidden field to contain the user selected Date value.
December 14th, 2004
Floatie script Credits: Dynamic Drive
Link Floatie script lets you display a description of a link or additional content onMouseover. The floatie gradually fades into view in the lower right corner of the browser. It's a tooltip, but not.
Highlight image script Credits: Dynamic Drive
A complete rewrite of the original script first introduced over 2 years ago, the Gradual Highlight image script is now better than ever! Works cross browser (IE and Mozilla/ Firefox) and easier to implement, your image links will never look the same thanks to it.
November 19th, 2004
script Credits: Dynamic Drive
Well, you asked for it. This is a Bookmark site script, whereby the viewer can easily bookmark your site by clicking on a link. And now to the part you asked for- this script is cross browser functional, and works in both IE4+ and NS6+/ Firefox.
DOM image rollover II
This script makes it easy to add rollover/ mousedown effects to any image on the page, including image submit buttons. Automatically preloads images as well.
October 27th, 2004
Cool DHTML Tooltip II
Credits: Dynamic Drive
Fancy looking tooltips with an "arrow" pointer are commonly found in desktop applications. Well, now you can add a similarly looking tooltip to your webpage! Similar in function to the original Cool DHTML Tooltip.
October 13th, 2004
Form field Progress Bar
Similar in function to Form Field Limiter, this script allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it.
Progress Bar Credits:
A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page. This great visual script works in both IE5+ and NS6+.
September 17th, 2004
Text script Credits: Dynamic Drive
This script disables the user's ability to select text on the page when added. You may recall that this is an old script, though we've just rewritten it to omit form elements in NS6+, which up until now prevented forms from working once the script was added.
iframe content II Credits: Dynamic Drive
This script loads a different page into an iframe daily, depending on the day of the month (1-31). Use it to serve up daily, changing content easily.
Content script Credits: Dynamic Drive
We got our inspiration for this script from Yahoo's frontpage, which uses something similar to organize its search tools. Tab Content Script is a standards compliant, 2 level content script. Click on a tab, and additional content appears beneath it while contracting any previously open content.
August 24th, 2004
Jim's DHTML Menu
(v 5.7) Credits:
Ok, we're declaring August to be DHTML Menus month! Jim's DHTML Menu has now entered into version 5.7 (from 5.3), and with that comes one of the biggest update yet. Everything from Opera 7/ Safari support, doctype=strict compatibility, to drop down over forms support, much more efficient code etc, you'll actually be enthusiastic about upgrading!
August 19th, 2004
jsDOMenuBar is a cross browser horizontal menu bar based on its cousin jsDomenu. It supports unlimited menu bar items, can be set to be draggable, and positioned either absolutely or relatively. Gotta love what DHTML can bring to site navigation!
Drop Down Menu Credits: Dynamic Drive
This is a versatile drop down menu that can be applied to ordinary links on your page, including image links. It can be activated either onMouseover or onClick.
June 29th, 2004
DD Tab Menu
II Credits: Dynamic Drive
Similar to DD Tab Menu below, this one uses images instead for the tabs themselves. The script itself is a standards compliant, 2 level tab menu. Move your mouse over a tab, and additional content appears beneath it.
July 14th, 2004
Chained Select Menu Credits:
Xin Yang/ Dynamic Drive
We decided to create a separate page to showcase using "Chained Selects" below to create a functional navigational menu. Called "Chained Select Menu", this modified script contains a helper function that loops through the interdependant select lists, and if an "end selection" has been made, takes the user to that selection's value (aka URL). Update- Added user selection persistence feature.
Chained Selects Credits:
Chained Selects allows you to "chain" any number of form selection lists together in an interdependent manner, creating a multi-level form menu! Very unique, very powerful. Update- Added user selection persistence feature.
July 2nd, 2004
script Credits: Dynamic Drive
This unique script dynamically positions a "bullet" image of your choice alongside arbitrary links when the mouse moves over them, "highlighting" them. Simply give the links in question a CSS class name of "ddbullet", and the script handles the rest. Great way to draw attention to specific links on your page.
Billboard script Credits: Dynamic Drive
Real life billboards use interesting transitional effects in between messages to catch viewers' attention. Well, so does this DHTML billboard script (IE5.5+ only)! The script uses regular DIV tags to contain all the messages you wish to be shown, for ease of customizing them.