|Dynamic Drive- The definitive DHTML site, visit Dynamic Drive for hundreds of free, original DHTML scripts, such as DHTML menus, and more!|
Off canvas side bar menu
Off canvas side bar menu creates a content displacing menu heralded in mobile apps and sites alike. When the user clicks on a menu icon, the page contents shift to the right to reveal a side bar menu. This mobile centric menu works in all modern browsers and platform; in IE8 and IE9, a more limited interface is presented.
3D Cube Slideshow
This image slideshow rotates its images in eye popping 3D fashion, no special glasses required! It uses CSS3 for the effect, and works in IE10+ and all modern versions of Firefox and Chrome, including on mobile, while degrading well with lower versions of IE. Images within the slideshow can be hyperlinked, and the slideshow can be navigated via swipe or back/forward buttons.
Simple Carousel lets you display a long series of images and captions as a horizontal strip that can be dragged left or right to reveal the obscured ones. It's inspired by the carousel that Google uses on its search results when you search for say "action movies" to showcase movie covers and titles. The contents of the carousel are loaded from an external file on the server via Ajax, and can be reloaded with a different file at any time.
This Blur Image script lets you easily blur an image by varying intensities, either instantly or gradually. It uses the excellent StackBoxBlur library to power the effect, and works in all major browsers that support HTML5`s canvas element.
Side Bar Menu
This menu models itself after the side bar menu found on Amazon.com to provide a flexible, content-rich fold out menu. It supports infinite number of sub menus. In addition, the menu is responsive in smaller screen and mobile devices, by stacking the sub levels when revealed on top of its parent to conserve space.
Falling Text Rotator
This jQuery script adds a twist to the regular text rotator, by randomly dropping the letters of each piece of content out of view before showing the next. It works great on short headlines.
Animated UL lists
This jQuery script adds flare to your UL lists, by animating the items into view, one item at a time. You can get each item to slide in from the left, drop in, or even spin before making their way to their destination. It harnesses the power of CSS3 transitions to do its bidding, by animating any defined CSS properties before and after values.
Thumbnail Slider lets you specify a list of images to showcase then automatically creates a two column interface with thumbnails of the images on the right and the enlarged image on the left to view on demand. Move the mouse over a thumbnail to view the larger version.
HTML5 mouseover/ Click sound
This script uses HTML5's new audio element to allow you to easily add sound effects to any action on the page, such as when the user clicks or rolls over a link. The script works in all browsers that support HTML5, which currently are IE9+, FF3.5+, Chrome/Safari 3+, and Opera 10.5+
DIV Content Overlay script
This script overlaps any DIV on your page perfectly with an overlay box when the mouse rolls over the former, then hides the box onmouseout. This sliding box can be used to show anything from text to images/ and rich content, and set to slide in from any four sides of the primary DIV beneath it.
and TEXTAREA field values script
One of the worst things that can happen when a user is entering data into an
INPUT type="text" or
element is an accidental browser reload or even crash- all the data is
instantly lost. This script uses HTML5's sessionStorage to store the
text entered into these fields as the user types, and recalls them in an
event of a page refresh or even browser crash (FF3.5+ only).
Full Screen Image Slideshow
(w/ auto read images from directory)
Full Screen Image Slideshow is a cool slideshow that uses jQuery and PHP to display large images from a directory automatically and using the entire browser window as its canvas! Thumbnails of every image is shown at the bottom of the slideshow for easy viewing on demand.
Plus Size Image Viewer automatically adds a caption beneath certain images that when clicked on launches a "plus size" version of the image. The enlarged image can be a different image from the original, so the former is loaded only on demand when requested.
jQuery MaxLength for INPUT
and TEXTAREA fields
This useful form validation script lets you add a custom "maxlength" attribute to
TEXTAREA elements, so users are prevented from entering more
characters into these fields than the designated number. It can
optionally show the number of characters remaining for a field as the user types
while displaying this info in different colors depending on how close the user
is to the limit.
jQuery Mega Menu
Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation.
Image rollover script
jScale Image Scaler
jScale is a practical jQuery plugin that lets you easily scale an image on the page proportional to its original dimensions in numerous ways. Simply set the new desired length of any of the image's two sides, and have the script scale the other side accordingly. Supports animation and callback function.
This is an image plus text description slideshow that brings each image into view using 1 of 17 randomly chosen Transitional effects in IE browsers. For other browsers that don't support these built in effects, a custom fade transition is used instead. Each image can be optionally hyperlinked with a text description beneath it, and the slideshow pauses when the user moves the mouse over it.
H2 header tags are used to render the
tabs themselves, and
DIVs for the tab contents. A novel
feature is the ability to scroll the tabs horizontally to display lots
of tabs in a confined space.
Rich HTML TIcker is a practical script for displaying ordinary, rich HTML content in a rotated fashion on your page. The ticker contents can either be defined inline on the page, or within an external file and fetched using Ajax.
Animated Outline Menu
This is a sleek drop down menu that can be associated with any "anchor" link on the page. As it drops down or contracts an animated "outline" effect is applied for good measure. The menu can be set to appear either via a "
mouseover" of the anchor link.
Inline HTML Tooltip
Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window's edges.
Document Text Resizer
This script adds the ability for your users to toggle your webpage's font size, with persistent cookies then used to remember the setting. The script works unobtrusively and with any webpage, by adding to the page one of several CSS classes that change the page's font size depending on the setting clicked on.
Drop Down Panel script
Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. Clicking anywhere on the panel again closes it.
Overlap Image Viewer
Overlap Image Viewer lets you quickly associate an image with any element on your page, so that when the mouse rolls over it, the desired image is shown on top of it. A nice "dimming" effect is applied to the element while the loaded image is shown.
This Ajax script enhances the default "
attribute of HTML so certain tooltips can instead get their contents
from an external file, with rich HTML content and all. Integration is
easy and non obtrusive.
In Content Viewer
This script turns ordinary HTML content wrapped around DIV tags into a series of interactive contents, with one faded into view on demand! You can use it to spotlight new or important contents on your site. And since each content is simply normal HTML on the page, setting it all up is painless.
This Ajax script lets you fetch another page's content (both needs to be from the same site) and display it on demand within the current page. You can further specify any external .js or .css files that should be loaded at the same time as the external page.
BackBox Image Viewer
BackBox is a new image gallery script which displays your pictures in a smooth and easy way. It works on the same principle as "Lightbox.js", though it supports the ability to dismiss the enlarged image when the user clicks the browser "back" button, instead of the default action of going to the previous page. The interface also adds explicit "pervious" and "next" links, plus a auto rotation mode.
number of checked checkboxes script
This short but practical script lets you limit the number of checkboxes within a group that can be checked. For example, you may have a list of 5 checkboxes, but wish to allow the user only the ability to check a maximum of 2 at any time. Use this script to accomplish that.
Flip Menu creates a collapsible menu tree out of an ordinary HTML list! It consists of just one external .js file, in which you specify settings such as whether to persistence the menu state (using cookies), the images used to replace the default list bullets, and if any previously open branches should be closed when the current one is open.
Provide helpful hints alongside certain form fields to guide your users on how to fill them out with this elegant script. A hint pops up only when the field is question has the user focus.
Divviewer Image viewer lets you display images inline- when the user clicks on a link- scaled to fit the dimensions of the page if necessary. This is very handy for very large images which may produce those unsightly browser scrollbars if not scaled.
Inspired by a similar mechanism found on certain articles on PCWorld.com, use this combo box script as the pagination interface on a series of related pages, such as a long article. contents.
Easily display a random piece of content chosen from many on the page to your visitors using this script! Just wrap the participating contents each inside a DIV with a special CSS classname, and that's it! Supports multiple "groups" of random
This script lets you shuffle the display order of regular content on your page. Just wrap the participating contents each inside a DIV with a special CSS classname, and the script will scramble the order in which these contents are shown on the page from top to bottom! Supports multiple "groups" of random order contents.
random option combo
This is a unique combo menu script that supports the ability to randomly select from an option the list of available ones to visit. It's a combo menu with a sense of adventure!
This is a CSS based, search engine friendly Tabs Menu that supports a second horizontal level when the mouse rolls over one of the tabs.
This script mimics the interface of the IE ActiveX information bar that slides into view from the top of the browser in displaying information to your visitors in a eye catching way! The bar slides in view and remains static on the screen even when the user scrolls the page.
You may freely use any scripts found in our library on BOTH personal & commercial webpages.
You may NOT, however, redistribute our scripts, by putting them on another script archive or CD ROM, for example.
Want to submit an original script to be included in our archive? Click here.