Dynamic Drive- The definitive DHTML site, visit Dynamic Drive for hundreds of free, original DHTML scripts, such as DHTML menus, and more! |
. | |
![]() |
|
![]() |
Thumbnail Slider
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
effect
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.
Rescue Text
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
TEXTAREA
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
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 INPUT type="text"
and 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
This is a small, compact
JavaScript that lets you easily assign a rollover effect to any image on the
page. The script preloads both images involved for a smooth transition.
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.
Random
Transitions slideshow
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.
apTabs script
apTabs is an unobtrusive HTML/JavaScript Tabs solution using the Prototype
framework. Regular H2
header tags are used to render the
tabs themselves, and DIV
s 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
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 "click
"
or "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.
Ajax Tooltip
script
This Ajax
script enhances the default "title
"
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.
Fade
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.
Ajax Page
Fetcher
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.
Limit
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
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.
Form
Field hints
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
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.
Pagination
Combo Box
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.
Random content
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 contents.
Random-order
content
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.
Animated
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!
Dolphin
Tabs Menu
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.
Animated
Information Bar
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.
Folding Treeview
Menu
This is an versatile folding Treeview menu
using YUI's
treeview control. It lets you define a collapsible tree with support
for arbitrary number of levels, plus the ability to make any node a link with
it!
JavaScript image clock
This
is a compact JavaScript image clock that's updated live
every second. It comes with a default image pack for the interface, though you
can easily specify you own
"digits" images instead inside the script.
DHTML Select Menu
This script transforms ordinary SELECT
elements on your page into custom DHTML drop down menus instead! The
end result is a custom looking navigation menu based entirely on the
SELECT menu's HTML.
CSS
Horizontal List Menu
This is a lean CSS vertical menu. The markup
is entirely based on an ordinary HTML list, with support for 1 level of
nested lists. The nested lists are transformed into 2nd level drop down
menus that appears dynamically onmouseover.
CSS
Vertical List Menu
This is a lean CSS vertical menu. The
markup is entirely based on an ordinary HTML list, with support for 1
level of nested lists. The nested lists are transformed into 2nd level
drop down menus that appears dynamically onmouseover.
Dbmenu
dbMenu creates 3 different types of drop
down menus using 1 script. In each case the menu's interface is styled
using CSS, with the menu contents themselves being HTML list based for
easy set up and search engine friendliness.
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.