Combox Link Jumper

0

By Keith Bryan Santiago on Jun 4th, 2009 10:07 pm

A simple tool that provides easy navigation in your site using a Combo box. It lets you jump to different location on the Web and also included with text display, which provides short details about the site.

If you have comments, suggestions or request — don't hesitate to post back below.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Combo Link w/ Description</title>
<style type="text/css">
<!--
label {
   display : block;
   color : #09f;
   border-bottom : 1px dashed #ccc;
   margin-bottom : .500em;
   padding-bottom : .300em;
   font-weight : bold;
   text-transform : uppercase; }

select {
   color : #506070;
   margin : 0 auto;
   text-align : center;
   border : 1px solid #ccc;
   letter-spacing : 2px;
   height : 28px;
   width : 300px;
   max-width : 300px; }

form div { position : relative; }
form {
   background-color : transparent;
   position : absolute;
   left : 3%;
   top : 3%; }
div#main {
   margin : 0 auto;
   min-height : 600px;
   padding : 0;
   width : auto; }

div#title {
   background-color : #fff;
   border : 1px solid #ccc;
   margin-top : 1em;
   padding : 1em;
   line-height : 1.4;
   min-height : 70px;
   letter-spacing : 1px;
   color : #506070; }

div#label {
   background-color : #f0fff0;
   margin : 0;
   max-width : 300px;
   min-height : 120px;
   padding : 1em;
   border : 1px solid #ccc;
 }

input#btn {
   border : 1px solid #ccc;
   color : #506070;
   margin-top : 1em;
   background-color : #fff;
   height : 28px;
   width : 50px;
     }
-->
</style>
<script type="text/javascript">
<!-- 
/* 
  COMBO Link Jumper - 
  Author : essential -

~ Profile : http://www.daniweb.com/forums/member383844.html -

~ Get instant solutions in your programming needs, visit : http://www.daniweb.com/

  ~ This notice must reamain intact for use.
*/

var formID = "formId"; // Specify your form id/name.

var divDesc = "title"; // Specify your div id, in where you want to show the text description.


var changeLoc = function( where ) {
   location.href = where;
   };
 
var navigate = function() {
var desc = [

/* Description / blurbs #1 */
"DANIWEB IT Discussion Community",

/* Description / blurbs #2 */
"Leading the Web to its full potential...",

/* Description / blurbs #3 */
"Full Web building tutorials - ALL Free!" ];

var div;
var form;

      try {
      div = document.getElementsByTagName("div")
      } catch( er ) {
      document.all.tags("div")
      } try {
      form = document.forms[ formID ];
      } catch( e ) {
      form = (( document.getElementById ) ? document.getElementById( formID ) : (( document.all ) ? document.all[ formID ] : document.layers[ formID ] ));
      }
   var index = form.sel.selectedIndex;
      div[ divDesc ].innerHTML = desc[ index ];
};
// -->
</script>
</head>
<body>
<div id="main">
<form id="formId" name="formId" action="." onsubmit="return false;">
<div id="label">
<label for="sel">Jump Box!</label> <select id="sel" name="sel" onchange="navigate();">
<option value="http://www.daniweb.com/">DANIWEB IT Community</option>
<option value="http://www.w3.org/">World Wide Web Consortium</option>
<option value="http://www.w3schools.com">W3Schools Online Tutorials</option>
</select>
<div>
<div id="title">DANIWEB IT Discussion Community</div><div><input type="button" id="btn" name="btn" onclick="changeLoc( formId.sel.options[ formId.sel.selectedIndex ].value );" value="GO!"></div></div>
</div>
</form>
</div>
</body>
</html>

2 Years Ago

0

Neat =)

DealthRune

Light Poster

45 posts since Apr 2009

Reputation Points: 12

Solved Threads: 0

Combox Link Jumper

This article has been dead for over three months