Home / Free JavaScripts / Other / Here

Cut & Paste Content Tabs script Credit: JavaScript Kit

Description: Use this versatile script to divide long content on your page into "virtual" sections, with each section viewable by clicking on a corresponding tab. It's a great way to display your content in an interactive, less overwhelming way to your visitors. This is the same script used on our Free JavaScripts entrance page.

This script works in both IE5+ and NS6/Firefox, and degrades well with the rest (all content is shown at once in the last case).

Example:

Live Server Time script
This unique JavaScript allows you to display the server time of your website, live! Using either SSI or PHP (depending on which one your page supports) to first retrieve the current static server time, the script then updates it every second for display. Cool!

Block IP address script
Use this script to block certain IPs from your webpage, by redirecting them to another site. Note that your web server must have SSI enabled for this script to work.

CSS Top Menu
This two level CSS Top Menu uses regular lists (<ul>) for the underlining structure, making it search engine friendly and very lightweight. The script is also a breeze to customize. Works in both IE and Firefox.

JSwitch Color Picker
This is an easy to user color picker that can find the triple-hex or RGB value for any color. The script contains a color pallet that stores your most recently used colors.

Multiple Dynamic Combo Boxes
This lightweight yet powerful script lets you create multiple (unlimited) combo boxes, with each one linked and dependant on the one proceeding it. Very nice!

World Population counter
This script estimates the current population of the world using only math and displays the results live.

Directions:

Step 1: Insert the below code to the HEAD section of your page:

Since the above code references two external files, you need to download them and upload to your webpage directory. They are: contentdivider.js and tabstyle.css. Just right click each link and select "Save As." to save the two files.

Step 2: Add the below HTML code to your page. It demonstrates how to divide 3 pieces of content into 3 tabs:

More Information

This script is very easy to implement. Firstly, open up "contentdivider.js" using any text editor, and edit the 3 variables per the comments, most importantly, the number of content to show per each tab.

Moving on, the HTML code of Step 2 looks like this:

<div id="cyclelinks"></div>

<p class="dropcontent">

Content 1 here.

</p>

<p class="dropcontent">

Content 2 here.

</p>

<p class="dropcontent">

Content 3 here.

</p>

<div id="cyclelinks2" align="right"></div>

Do not remove the top and bottom DIV tags (in red), as they are used by the script to show the Navigational Tabs and bottom navigational links, respectively. For each piece of content, simply wrap them each in a container tag with class="dropcontent", such as <p class="dropcontent"></p>. The script will then create tabs to divide the contents per the number specified in "contentdivider.js."

Copyright © 1997-2007 JavaScript Kit. NO PART may be reproduced without author's permission.