Creating a popup menu on mouse over

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 330,321 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,806 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

•

FAQ | Community Rules | Welcome Guide

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 13195 | Replies: 7

•

Join Date: Apr 2007

Posts: 3

Reputation: asull100 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

asull100

Offline

Newbie Poster

Creating a popup menu on mouse over

Apr 30th, 2007

I'm creating a website and I want to have a popup menu with additional links come up when a text image is moused over.

I'm alright with HTML, but I know that this can't be done in HTML and I assume it's Javascript that I would need to use. Can anyone help me or point me in the direction of some resources that could help?

I'm pretty rusty with web developement and I know almost nothing about javascript.

•

Join Date: Jan 2007

Posts: 2,210

Reputation: MidiMagic is an unknown quantity at this point

Rep Power: 6

Solved Threads: 75

MidiMagic

Offline

Nearly a Posting Maven

Re: Creating a popup menu on mouse over

May 1st, 2007

I'd get a book on JavaScript and read it. I used "JavaScript Demystified" by Jim Keogh.

Daylight-saving time uses more gasoline

•

Join Date: Apr 2007

Posts: 17

Reputation: obscured47 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

obscured47 obscured47 is offline

Offline

Newbie Poster

Re: Creating a popup menu on mouse over

May 1st, 2007

You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp

•

Join Date: Mar 2005

Posts: 25

Reputation: JTroopSoldier is an unknown quantity at this point

Rep Power: 4

Solved Threads: 1

JTroopSoldier JTroopSoldier is offline

Offline

Light Poster

Re: Creating a popup menu on mouse over

May 1st, 2007

Just go to the library and pick up a Javascript book.

•

Join Date: May 2007

Posts: 3

Reputation: seabob is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

seabob

Offline

Newbie Poster

Re: Creating a popup menu on mouse over

May 10th, 2007

You can use the dreamweaver from macromedia. In there you can find premade java-scripts that will do your job as well.

•

Join Date: Jul 2006

Location: Deptford, London

Posts: 899

Reputation: MattEvans will become famous soon enough

Rep Power: 4

Solved Threads: 43

MattEvans

Offline

Practically a Posting Shark

Re: Creating a popup menu on mouse over

May 10th, 2007

•

Originally Posted by obscured47

You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp

Using spawned windows as popup menus is a naff approach. Alot of 'modern' browsers block out popups, or put them behind the active window. Also, you'd have to be careful to avoid multiple window.opens every time the user moves the mouse...

You can make popup menus without any Javascript (using CSS)... but they only work well in those 'modern' browsers already mentioned.

If using Javascript, look at moving and hiding/showing some 'menu HTML', or if appropriate, creating such a menu dynamically..

The code I'm posting is gratuitously commented, and has been tested on Opera 9, Firefox 2, and IE6. It will let you assign different menus to multiple objects; but the menus don't disapear very cleanly... You can hack the Javascript around to do things like, alter the position of the popup relatively, so it appears 'from' the parent element rather than over it; or even at the position of the mouse exactly. You also might want to make the popups disapear automatically when the user mouses out of the vicinity of the popup... I'll leave that to you to research:

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Simple PopupMenu</title>

<style type="text/css">
/*Important style definition is 'position:absolute'. Means the element can
be placed at an arbitrary position without affecting the flow of surrounding
elements*/
.popup
{
	position:absolute;
	border:solid 1px black;
	background-color:white;
	padding:4px;
}
</style>

<script type="text/javascript">
//findPos function is from http://www.quirksmode.org/js/findpos.html;
//where its workings are explained in more detail.
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

//Display a named menu, at the position of another object
function display_menu(parent,named)
{
	//get the named menu
	var menu_element = document.getElementById(named);
	//override the 'display:none;' style attribute
	menu_element.style.display = "";
	//get the placement of the element that invoked the menu...
	var placement = findPos(parent);
	//...and put the menu there
	menu_element.style.left = placement[0] + "px";
	menu_element.style.top = placement[1] + "px";
}

//Hide a named menu
function hide_menu(named)
{
	//get the named menu
	var menu_element = document.getElementById(named);
	//hide it with a style attribute
	menu_element.style.display = "none";
}
</script>
</head>
<body>

<!--Define the menu's contents. It's important to put the display:none style attribute
here rather than in a <style> block, because it can be overriden easily if it's assigned here-->
<div class="popup" id="menu1" style="display:none;">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
	</ul>
	<!--Hide the menu when the text (Close popup) is clicked-->
	<span onclick="hide_menu('menu1');">(Close popup)</span>
</div>

<!--Mouseovering on this element will show the menu with id 'menu1', at the position of {this}, that is
this element-->
<a href="#" onmouseover="display_menu(this,'menu1');">Popup on hover</a>
<p>
Other text here, should not be obscured on pops.
</p>
<p>
Other text here, should not be obscured on pops.
</p>
<p>
Other text here, should not be obscured on pops.
</p>
<a href="#" onmouseover="display_menu(this,'menu1')">Popup on hover</a>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Simple PopupMenu</title>

<style type="text/css">
/*Important style definition is 'position:absolute'. Means the element can
be placed at an arbitrary position without affecting the flow of surrounding
elements*/
.popup
{
	position:absolute;
	border:solid 1px black;
	background-color:white;
	padding:4px;
}
</style>

<script type="text/javascript">
//findPos function is from http://www.quirksmode.org/js/findpos.html;
//where its workings are explained in more detail.
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

//Display a named menu, at the position of another object
function display_menu(parent,named)
{
	//get the named menu
	var menu_element = document.getElementById(named);
	//override the 'display:none;' style attribute
	menu_element.style.display = "";
	//get the placement of the element that invoked the menu...
	var placement = findPos(parent);
	//...and put the menu there
	menu_element.style.left = placement[0] + "px";
	menu_element.style.top = placement[1] + "px";
}

//Hide a named menu
function hide_menu(named)
{
	//get the named menu
	var menu_element = document.getElementById(named);
	//hide it with a style attribute
	menu_element.style.display = "none";
}
</script>
</head>
<body>

<!--Define the menu's contents. It's important to put the display:none style attribute
here rather than in a <style> block, because it can be overriden easily if it's assigned here-->
<div class="popup" id="menu1" style="display:none;">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
	</ul>
	<!--Hide the menu when the text (Close popup) is clicked-->
	<span onclick="hide_menu('menu1');">(Close popup)</span>
</div>

<!--Mouseovering on this element will show the menu with id 'menu1', at the position of {this}, that is
this element-->
<a href="#" onmouseover="display_menu(this,'menu1');">Popup on hover</a>
<p>
Other text here, should not be obscured on pops.
</p>
<p>
Other text here, should not be obscured on pops.
</p>
<p>
Other text here, should not be obscured on pops.
</p>
<a href="#" onmouseover="display_menu(this,'menu1')">Popup on hover</a>

</body>
</html>

As said, a similar effect is afforded much more gracefully using only HTML and CSS. The following example is tested to work in Opera 9 and Firefox 2, but DOES NOT WORK IN INTERNET EXPLORER 6. It uses the CSS 'next element' selector; which doesn't work in IE6 (nor does parent:hover child, strangely enough). This menu WILL go away automagically when the user mouses away from it; but, as said, won't work with old browsers...

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS PopupMenu</title>
<style>
div.popup
{
	display:none;
	position:absolute;
	border:solid 1px black;
	padding:8px;
	background-color:white;
}
a.popup:hover + div.popup
{
	display:block;
}
div.popup:hover
{
	display:block;
}
</style>
</head>
<body>

<a class="popup" href="#">Popup on hover</a>

<div class="popup">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>

<p>
Other text here, should not be obscured on pops.
</p>

</body>
</html>

Last edited by MattEvans : May 10th, 2007 at 6:28 pm. Reason: html codeblocks are well messy..

If it only works in Internet Explorer; it doesn't work.

•

Join Date: Apr 2007

Location: FL

Posts: 16

Reputation: connor4312 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

connor4312 connor4312 is offline

Offline

Newbie Poster

Re: Creating a popup menu on mouse over

May 14th, 2007

cant exactly remember the code, but it would be in http://dynamicdrive.com

•

Join Date: Oct 2007

Posts: 1

Reputation: sameer_wanwey is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

sameer_wanwey sameer_wanwey is offline

Offline

Newbie Poster

Re: Creating a popup menu on mouse over

Oct 12th, 2007

Can u give me same functionality for gridview elements

Please its urgent!

I tryed but it shows allways first elmets data as popup and one more thing grid view have bounded coulumns.

Please Help