JavaScript - Adding A Tooltip For Each Option Item In Drop Down Menu

Hello all,

I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-

menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.

I need a solution to it urgently, your help is appreciated.

Thanks

Hello i have a sticky tooltip that when is in "sticky mode" the only way to close it is by clicking outside of it. I wanted to add a mouseover link for a close link so it can also be closed that way.
original code: http://www.dynamicdrive.com/dynamici...ckytooltip.htm

this is my external .js code and if you look about 11 lines down i have the mouseover link setup for the word "CloseMe". However that's where i need to know how to call it properly?

Quote:
/* Sticky Tooltip script (v1.0)
* Created: Nov 25th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

var stickytooltip={
tooltipoffsets: [5, -5], //additional x and y offset from mouse cursor for tooltips
fadeinspeed: 1, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["To Sticky:", "Press Key \"c\"", "or Right click"], //customize tooltip status message
stickynotice2: "Sticky Activated! <a onMouseOver=javascript:LOSTT.HELPP('mystickytooltip'); href=google.com>CloseMe</a>", //customize tooltip status message

//***** NO NEED TO EDIT BEYOND HERE

isdocked: false,

positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},

showbox:function($, $tooltip, e){
$tooltip.fadeIn(this.fadeinspeed)
this.positiontooltip($, $tooltip, e)
},

hidebox:function($, $tooltip){
if (!this.isdocked){
$tooltip.stop(false, true).hide()
$tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercol ors[0]}).html(this.stickynotice1)
}
},

docktooltip:function($, $tooltip, e){
this.isdocked=true
$tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickyborderc olors[1]}).html(this.stickynotice2)
},


init:function(targetselector, tipid){
jQuery(document).ready(function($){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(document.body)
if ($targets.length==0)
return
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1[1]=''
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
stickytooltip.showbox($, $tooltip, e)
})
$targets.bind('mouseleave', function(e){
stickytooltip.hidebox($, $tooltip)
})
$targets.bind('mousemove', function(e){
if (!stickytooltip.isdocked){
stickytooltip.positiontooltip($, $tooltip, e)
}
})
$tooltip.bind("mouseenter", function(){
stickytooltip.hidebox($, $tooltip)
})
$tooltip.bind("click", function(e){
e.stopPropagation()
})
$(this).bind("click", function(e){
if (e.button==0){
stickytooltip.isdocked=false
stickytooltip.hidebox($, $tooltip)
}
})
$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})
$(this).bind('keypress', function(e){
var keyunicode=e.charCode || e.keyCode
if (keyunicode==99){ //if "c" key was pressed
stickytooltip.docktooltip($, $tooltip, e)
}
})
}) //end dom ready
}
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")

below is my html code

Quote:
<a href="http://www.link2.com"><img src="http://www.dynamicdrive.com/ddincludes/logo.gif" data-tooltip="id1" /></img></a>

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div class="stickystatus"></div>

<div id="id1" class="atip" style="width:200px">
<iframe src="http://www.link.com"></iframe></div>
</div></div>

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

This is the code that I have:-

Code:

	
ListItem[1] = new Option("A List Item", "listitem1");
ListItem[1].style.display = "none";

The first line creates a new entry in the list, I am wanting the second line to remove the same item but it doesn't work.

I have tried this:-

Code:

ListItem[1] = new Option("");

But that leaves a blank line entry in the list

Cheers Daniel.

On my site, when you select something from the first drop down box, javascript creates the options to appear in a second drop down box.

I have this code:
Code:

function addOption(selectbox, value, text)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

and then this:
Code:

if(document.drop_list.Category.value == 'Assembly'){
addOption(document.drop_list.SubCat,"Electronic", "Electronic");
addOption(document.drop_list.SubCat,"Marketing", "Marketing");
addOption(document.drop_list.SubCat,"Retailing", "Retailing");
addOption(document.drop_list.SubCat,"Construction", "Construction");
}

Thats an example of how it works. What I want to now add, is an onclick to each subcategory. I want the onClick to execute the function changecolour1(). This function changes the class of a div, but ive got that sorted out so its probably irrelevent.

I want to know if anyone call tell me how to make it create the OPTION with a text, value AND onclick attributes. And then I want to be able to specifiy the value of the Onclick.

I'm pretty new at javascript, a lot of that code was written for me. Please shed some light for me.
Thanks in advance
Micomator.

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!


Thank you for any help and/or advice in advance,
Best Regards,
Tim

I want to use a <select> drop-down in a form to let my user select a date from a list. The problem is how to easily update the list.

Easiest would be to have a list of dates in a separate file, and have code that would read the dates and write them into the <option> statements of the <select> control. Then when the page with the <select> control opens, the code will open the other file, get the dates, and update the <option>s. And all I have to do is periodically FTP a new date file.

I'm stuck in Visual Basic and FileSystemObject, where I can open a file, read line by line into an array, concatenate a string, and write it into a doc. I can't seem to find similar methods in JavaScript - no duh, because this isn't VB!

So _is_ there a way to do this? Maybe a certain way to create the date file so the code can easily find the values? (Like putting the dates into a table with each <TD> having a unique ID?) And assuming I manage to get the dates, I need to write them into the source HTML, vice in the document body.

What objects, methods, properties do I look at? Are there any samples floating around out there? A drop-kick in a good direction is greatly appreciated!

Ed

Hi all,

I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state.

Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.

Take a look at a basic example I've mocked up, and see the code below:



CSS:

Code:

#navlist {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	font-weight:bold;
	list-style:none;
}
#navlist a {
	display:block;
	width:155px;
	color:#fff;
	text-decoration:none;
	background:url(../images/tab.gif) no-repeat;
	padding-top: 7px;
	padding-right: 4px;
	padding-bottom: 6px;
	padding-left: 10px;
}
#navlist a:hover { 
    background-position:0 -29px;
    color: #1e5ebd;
}
#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}

HTML:

Code:

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>

<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />




<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>

</head>



<body>



	<!-- Tour Box Begins Here -->
	
	<div id="box">
	
		<div id="titleBar"></div>
		
		<div id="content">
		
			<div id="menu">
			
				
				
				
				<ul id="navlist">
					<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
					<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
					<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
				</ul>

				
					
			</div>
			
			<div id="videoDisplay">
				  <object id=flashMov1
					classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
					width="233" height="156">
					<param name="movie" value="sb-main.swf" />
					<param name="quality" value="high" />
					<param name="SCALE" value="exactfit" />
					<embed src="sb-main.swf"
					width="233" height="156" name=flashMov2 quality=high
					type="application/x-shockwave-flash"
					pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
				  </object>
			</div>
		
		</div>
		
	</div>

	<!-- Tour Box Ends Here -->


</body>

</html>

If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done?

<select name="category">
<option value="">No Preference</option>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Pears">Pears</option>
<option value="Banana">Banana</option>
</select>

I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise?

Thanks in advance!

I have a button given like this:
<a href="test.php"><input class="test" type="test"></a>

I have a CSS that defined the button as an image, and on hover the button changes.

However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you!

I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign).

What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list.

Form:
Code:

<form>
<input type="radio" name="website_status" value="exists"/> Exists
<input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased

<select name="projects">
<option></option>
<option value="new_website">New Website</option>
<option value="website_redesign">Website Redesign</option>
</select>
</form>

JavaScript:
[CODE]
<script>
window.onload = initForms;

function initForms() {
for (var i=0; i<document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}

function validForm() {
var inputarray = document.getElementsByTagName("input");
var selectarray = document.getElementsByTagName("select");
var textarea = document.getElementsByTagName("textarea");

if (inputarray[0].checked == true) {
selectarray[0].remove(options[1]);
return false;
}
</script>

I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction?

I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours.

this is the html:

Code:

<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
  <ul>
    <li><a href="2-1.php">Cani</a>
        <ul>
          <li><a href="2-1-1.php">Domestic dogs</a></li>
          <li><a href="2-1-2.php">Wolves</a></li>
        </ul>
    </li>
    <li><a href="2-2.php">Felidae</a>
        <ul>
          <li><a href="2-2-1.php">Domestic cats</a></li>
          <li><a href="2-2-2.php">Wild cats</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>

the css is as follows:

Code:

div#s1 {
width: 200px;          /* menu width */
}

div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0;             /* no padding */
margin:0;              /* no margin for IE either */
}

div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}

div#s1 ul li a {
display: block;         /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
}

div#s1 ul ul li a {
margin-left: 20px;     /* indent level 1 */
}

div#s1 ul ul ul li a {
margin-left: 40px;     /* indent level 2 */
}

div#s1 ul ul ul ul li a {
margin-left: 60px;     /* indent level 3 */
}

div#s1 li ul, div#s1 li.open li.closed ul {
display: none;         /* collapse */
}

div#s1 li.open ul {
display: block;        /* expand */
}

div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}

div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}

div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}

div#s1 li.active a {
background-position: 0px -20px;
color: red;            /* highlight text */
}

div#s1 li.active li a {
background-position: 0px 0px;
color: white;          /* fix lower levels */
}

div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}

and finally the javascript:

Code:

var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";

//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;

//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
 var url = location.href;
 if (url.lastIndexOf("/") == (url.length-1)) {
   url = url+menu_default_page;
 }
 if (url.lastIndexOf("?") >= 0) {
   url = url.substring(0, url.lastIndexOf("?"));
 }
 if (url.lastIndexOf("#") >= 0) {
   url = url.substring(0, url.lastIndexOf("#"));
 }
 menu_url = url;

 var main = document.getElementById(menu_id);
 if (!main) alert("No element with id '"+ menu_id +"' found");
 menu_traverse(main);
 }

 /* Walks down the subtree and on the way back
 sets properties.
 returns bit set
         1: set = element is a node, unset = element is a leaf
         2: set = element contains the active node
         4: set = element is the active A node
*/
function menu_traverse(element) {
var props  = 0;

// walk down
for (var i=0; i<element.childNodes.length; i++) {
  var child = element.childNodes[i];
  props |= menu_traverse(child); // aggregate bits
}

// on the way back now
switch (element.tagName) {
  case "UL":
    props |= 1;
    break;

  case "LI":
    var c1 = (props & 1) ? 
               ((props & (2|4)) ? menu_open_class : menu_closed_class)
             : menu_leaf_class; 
    element.className = element.className ? element.className+" "+c1 : c1;
    if (props & 4) {
      if (!(props & 2)) element.className += " "+menu_active_class;
      props |= 2;
      props &= 1 | 2; // reset bit 4
    }
    break;

  case "A":
    if (props & 2) break; // once is enough
    var href = element.getAttribute("href");
    if (menu_isSameUrl(menu_url, href)) props |= 4;
    break;
  }

  return props;
}

//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
  if (b[j] == "..") { j-=2; continue; }
  if (a[i] == "..") { i-=2; continue; }
  if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
  if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
  if (! (a[i] == b[j])) return false;
  i--;
  j--;
 }
 return true;
}

New to this forum but hope this will explain my problem, any help is much appreciated!

thanks!!

Jesper

Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right.

Here is the menu I'm using embedded in HTML:

Code:

<td width="40%" align="center"><font color="#000099"><b>
<select id="Aircraft">
 <option value="0">N148LH</option>
 <option value="1">N149LH</option>
 <option value="2">N150LH</option>
 <option value="3">N151LH</option>
 <option value="4">N152LH</option>
 <option value="5">N153LH</option>
 <option value="6">N155LH</option>
 <option value="7">N156LH</option>
 <option value="8">N157LH</option>
 <option value="9">N159LH</option>
 <option value="10">N162LH</option>
 <option value="11">N163LH</option>
</select></b></font></td>

Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working:

Code:

  

  var selectmenu=document.getElementById("Aircraft")
  
  if (Aircraft=0) {
  df.ew.value = 1569.41;
  df.ew_mom.value = 135909.2;
  }
  
  if (Aircraft=1) {
  df.ew.value = 1570.11;
  df.ew_mom.value = 135929.76;
  }

Any help is appreciated. If anyone is interested the page this is on is here.

hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat".


thanks!!

Hi People,

I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick.

The working link can be found at
www.atomwhale.com/share/clients/branch/website/home.html

Hope someone can help me in getting this to work.

thanks,
Jeriel.