Cut & Paste Drop down messages

Home / Free JavaScripts / Messages / Here

Cut & Paste Drop down messages

Credit: JavaScript Kit

Description: If you've got lot of contents to show and not a lot of space, this is the perfect script for you. It compacts and adds interactivity to any deserving information. Use the drop down box to first select a topic, and corresponding content is automatically displayed below it. We got our inspiration for this script from MSNBC.com, where they used something similar on one of their news article pages...

Example:

Directions: Simply copy the below where you wish the script to appear:

<table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)"> <option selected value="What is JavaScript?">What is JavaScript?</option> <option value="Why learn JavaScript?">Why learn JavaScript?</option> <option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option> <option value="What is DHTML?">What is DHTML?</option> </select><br> </td> </tr> <tr> <td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br> <font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font> </td> </tr> </table> </form> </td> </tr> </table> <p> <script language="JavaScript"> /* Drop down messages script By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ //change contents of message box, where the first one corresponds with the first drop down box, second with second box etc var thecontents=new Array() thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects, scrollers, form validations, and so on. JavaScript differs from most other programming languages in that it is relatively easy to master, even for people who have absolutely no programming experiences whatsoever.' thecontents[1]='The first few words that come to mind are: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, is unacceptable. With JavaScript, you can change that. Imagine being able to break free and allow your creativity to dictate what you put on your webpage, instead of the other way round.' thecontents[2]='Java is completely different from JavaScript-It\'s a lot 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. Also, you need to compile a Java program before you can run it, whereas with JavaScript, no compilation is needed-simply open up a text editor, type it, save it, and your browser is ready to run it!' thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable once the page has loaded, such as text, page styles (font color, size etc), element position, etc, can now all be changed dynamically, thanks to DHTML. It brings your web pages one step closer to how things look inside your television, where images appear and disappear, text flies in and out, and content move around freely inside the screen.' //don't edit pass this line function changecontent(which){ document.ddmessage.contentbox.value=thecontents[which.selectedIndex] } document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex] </script>

Edit the HTML for the drop down menu box (<select>) to change the listed items, and then, variable "thecontents[]" inside the script for the matching contents to display, and you're done!

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info