Combox Link Jumper

15 Years Ago essential 0 183 Views

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.

javascript

<!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>

DealthRune 2 Light Poster

15 Years Ago

Neat =)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.