Very Useful JavaScript Samples

Featured Content Slider

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. Each content is defined simply inline on the page as regular HTML, or altogether inside a single external file and fetched via Ajax instead. Where this script shines is the versatile pagination links interface, which can be customized in a variety of ways. You may have such a script on the frontpage of sites such as Rottentomatoes and Gamespot, though the difference is that Featured Content Slider is Flash free!

Featured Content Glider

This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. For the ultimate in the ability to customize its look, the pagination links are also ordinary links that you define on the page, but with special CSS class names inserted when it should perform a certain task (ie: “toc” class if it’s a pagination link). This means the pagination links can be styled and arranged any way you like. The script enlists the help of the jQuery library for its engine. Lets see a rundown of the script’s features now:

Animated Collapsible DIV

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth “Web 2.0 style” animation. It’s a popular effect on many social networking/ comment sites. Three distinguishing features of this script are:

Have fun sliding content up and down!

Scrollable content

We derived our idea for this script from MrShowBiz (now retired), which used a similar setup on its front page to display news headlines. Display content in a confined area. Users can then view the entire content via the automatic scroll up/down functionality. Compatible with all DHTML browsers (IE4+, NS4, NS6), this is a great script to compact and add a touch of interactivity to portions of your page.

Advanced Gallery script

This robust gallery script allows you to display and rotate entire blocks of HTML on demand. Display images, text, or rich HTML in a dynamic manner. Set the script to automatically cycle through the contents like in a scroller, or via manual selecting. Furthermore, we made inputting the contents a breeze- simply wrap desired blocks of HTML in a special <DIV> tag, and they are automatically added to the gallery. It doesn’t get easier than this.

Drop down/ Overlapping Content script

This 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. Think of it as adding another dimension to your webpage to create more space. It’s extremely handy for displaying search boxes, additional links etc in a tight area, such as the sidebar column of a page. The content to reveal/ overlap in each case is simply contained inside an arbitrary DIV on the page for easy customizing.

Amazon style Drop-in content box

We modeled this script after an effect seen on the frontpage of Amazon.com. A content box drops in from “midair”, and can display anything of your choice. The frequency of the box appearing can be precisely controlled, such as “always”, “once per browser session”, or “randomly.” This useful script works in IE4+, NS6+, and Opera7+. Be sure to also check out the original Drop In Content script.

DHTML Ad Box

Matt’s DHTML ad script displays an “inexcusable” box in the middle of the page, broadcasting ads of your choice inside. The box automatically disappears after x seconds, with its display frequency configurable (ie: show ad box only 1 of out 5 times the page is loaded). This is one method of serving ads that may just be effective, since it contains qualities of a TV/radio commercial.

Popup Box II

Brian’s awesome DHTML Popup box allows you to prominently present content in an elegant, non obtrusive manner. The feature rich box can be dragged and dismissed, with unlimited boxes per page supported! Note that the full interface of the box is visible in IE5+ and NS6+ only. Older browsers will display a popup window instead (can be turned on/off).