Cut & Paste Always-visible combo box

Home / Free JavaScripts / Combo Boxes / Here

Cut & Paste Always-visible combo box

Credit: JavaScript Kit

Script updated: Jan 24th, 07' to use CSS's "fixed" positioning method instead.

Description: This combo box menu never leaves the user's screen as it appears always in view (in IE7+, Opera 8+ and Firefox that is). Legacy browsers such as IE5 and IE6 will simply not see the menu at all. You can specify the location of the menu relative to the four edges of the window: "top left", "top right", "bottom left" or "bottom right".

Example:

Directions:

Step 1: Insert the below into the <HEAD> section of your page.

<style type="text/css"> #visiblecombo{ position: fixed; visibility: hidden; } * html #visiblecombo{ /* Hide combo box from legacy browsers such as IE5-6? */ display: none; } #visiblecombo select{ background-color: lightyellow; } #visiblecombo .gobutton{ font-weight: bold; padding: 0 3px; text-decoration: none; } #visiblecombo .gobutton:hover{ background-color: #FFE242; } } </style> <script type="text/javascript"> /*********************************************** * Always Visible Combo Box- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ var alwayscombo={ location: ["top", "right"], //Position of com box from window edge ["top|bottom", "left|right"] addoffset: [10, 15], //Additional offset from specified location above [vertical_offset, horizontal offset] comboid: "visiblecombo", //ID of div containing floating combo ////////Stop editing past here/////////////////// navigate:function(){ var selectobj=this.comboref.getElementsByTagName("select")[0] if (selectobj.options[selectobj.selectedIndex].value!="default") window.location=selectobj.options[selectobj.selectedIndex].value }, floatcombo:function(){ var docElement=(document.compatMode=='CSS1Compat')? document.documentElement: document.body if (this.location[0]=="top") this.comboref.style.top=0+this.addoffset[0]+"px" else if (this.location[0]=="bottom") this.comboref.style.bottom=0+this.addoffset[0]+"px" if (this.location[1]=="left") this.comboref.style.left=0+this.addoffset[1]+"px" else if (this.location[1]=="right") this.comboref.style.right=0+this.addoffset[1]+"px" }, init:function(){ this.comboref=document.getElementById(this.comboid) this.comboref.style.visibility="visible" this.floatcombo() } } if (window.addEventListener) window.addEventListener("load", function(){alwayscombo.init()}, false) else if (window.attachEvent) window.attachEvent("onload", function(){alwayscombo.init()}) </script>

You can configure the location of the combo box relative to the viewable window inside the code of Step 1. The 4 possible locations are "top left", "top right", "bottom left" and "bottom right".

Step 2: Add the below combo box HTML to the <BODY> of your page:

Change the URLs inside the combo box to your own.

Finally, note that your page must contain a valid doctype declaration at the very top in order for this script to work in IE7! For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info