New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Combo-Box Viewer

Author: Dynamic Drive

Description: Looking for a "contractible" way to display content on your page that's easy to implement as well? The Combo-box Viewer script allows users to selectively view HTML content on your page via the SELECT menu. It comes with the following "convenience" features:

  • Uses CSS to control the appearance of the viewing area (for easy customization).

  • Each participating HTML content is added directly onto the page inside special <DIV> tags instead of JavaScript variables, making it a breeze to add and remove content.

  • Script works in IE4+, NS6+, and Opera 7+.

  • Script degrades well in non supporting browsers such as NS4, where the user will simply see all the content to begin with. 

Demo:


JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.


Directions: Developer's View

Step 1: Add the following code into the <HEAD> section of your page:

Select All

Step 2: Where you wish the viewer to appear on your page in the <BODY>, add the below code:

Select All

Configuring the script

Configuration of this script takes part mainly in the code of Step 2. Firstly, change the menu OPTIONs inside the form to match the titles of the participating content. Then, all that's left is to embed each piece of content inside the designated <DIV> tag. Such a <DIV> tag looks like:

<div id="dropmsg0" class="dropcontent">
First HTML content goes here
</div>

For each additional content you add, be sure to increment "dropmsg0", for example, "dropmsg1", "dropmsg2" etc.