Page 1 of 1
drop down at mouse location
Posted: Fri Nov 04, 2011 9:22 pm
by hallsofvallhalla
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.
Re: drop down at mouse location
Posted: Fri Nov 04, 2011 10:35 pm
by Jackolantern
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.
Re: drop down at mouse location
Posted: Sat Nov 05, 2011 3:21 am
by Chris
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.
Re: drop down at mouse location
Posted: Sat Nov 05, 2011 5:34 am
by Jackolantern
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.
Re: drop down at mouse location
Posted: Mon Nov 07, 2011 3:08 pm
by hallsofvallhalla
Awesome Thanks!!!
Re: drop down at mouse location
Posted: Mon Nov 07, 2011 4:41 pm
by Chris
hallsofvallhalla wrote:Awesome Thanks!!!
Stepping over to the dark side halls?
Re: drop down at mouse location
Posted: Mon Nov 07, 2011 6:49 pm
by hallsofvallhalla
yep
Re: drop down at mouse location
Posted: Mon Nov 07, 2011 7:36 pm
by hallsofvallhalla
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.
Re: drop down at mouse location
Posted: Mon Nov 07, 2011 7:59 pm
by hallsofvallhalla
k nevermind, it works but I need it to be an event of a div.
Re: drop down at mouse location
Posted: Mon Nov 07, 2011 8:16 pm
by hallsofvallhalla
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.