drop down at mouse location

Post by **hallsofvallhalla** » Fri Nov 04, 2011 9:22 pm

Need menu in js or jquery that when you click the mouse it drops down at mouse location. Basically it can be a click event on a div.

Post by **Jackolantern** » Fri Nov 04, 2011 10:35 pm

That is kinda' sort of what I needed for my PBBG map making program I made some time back. What you can do is create an invisible div that follows the mouse around provided that a variable, maybe called something like isSelectingOption, is false. Then when the player clicks, you set the isSelectingOption variable to true and add a drop-down element inside that div. Once an option is selected, turn isSelectingOption back to false and hide the drop-down so that the div will start following the mouse again. In this way, it will appear that the drop-down appears when the player clicks the disappears after an item is selected.

EDIT: I am not sure if this might be kind of hacky, and there may be a better way of doing it.

Chris · Post by **Chris** » Sat Nov 05, 2011 3:21 am

A real dropdown for in a form, or more like a menu?

Code: Select all

<!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=utf-8" />
		<title>Written while high :D</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
		<script type="text/javascript">
		
		$(document).ready( function()
		{
			$(document).mousedown( function(e)
			{
				$('#dropdown').css({ top : e.pageY, left : e.pageX });
				$('#dropdown').slideDown();
			});
		});
		
		</script>
		<style type="text/css">
		#dropdown {
			display: none;
			position: absolute;
			background: #F5F5F5;
			border: #000 1px solid;
		}
		</style>
	</head>
	
	<body>
		<ul id="dropdown">
			<li>Option 1</li>
			<li>Option 2</li>
			<li>Option 3</li>
		</ul>	
	</body>
</html>

Read the title.

Post by **Jackolantern** » Sat Nov 05, 2011 5:34 am

Ahh, yes, that would probably be more efficient than having the JS engine handle a div tracing around with the mouse. That method worked better for me in my project, but in my project the div always had to be there since it was an aiming reticle for dropping props on a map. Since in Halls' case the menu probably will not be shown most of the time it would be a waste to keep it always tracking the mouse and it would be better to just move the menu to the mouse when needed.

Post by **hallsofvallhalla** » Mon Nov 07, 2011 3:08 pm

Awesome Thanks!!!

Chris · Post by **Chris** » Mon Nov 07, 2011 4:41 pm

hallsofvallhalla wrote:Awesome Thanks!!!

Stepping over to the dark side halls?

Post by **hallsofvallhalla** » Mon Nov 07, 2011 6:49 pm

Post by **hallsofvallhalla** » Mon Nov 07, 2011 7:36 pm

your rock! it works great!

of course now when I click on a drop down item it just moves the box

will have to find a way to freeze mousedown if menu open or something.

Post by **hallsofvallhalla** » Mon Nov 07, 2011 7:59 pm

k nevermind, it works but I need it to be an event of a div.

Post by **hallsofvallhalla** » Mon Nov 07, 2011 8:16 pm

k got it working, figured I would share

Code: Select all

for (i=7;i<=62;i++)
{
var divTag = document.createElement("div");
         divTag.id = "div" + i;
        divTag.className ="dynamicDiv";
       document.getElementById("maparea").appendChild(divTag);
	   $('#div' + i).mousedown( function(e)
         {
            $('#dropdown').css({ top : e.pageY, left : e.pageX });
            $('#dropdown').slideDown();
         });
}

Basically I dynamically build the div tags then create the mouse function off of each one of them.

drop down at mouse location

drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location

Re: drop down at mouse location