how to make drop down dynamically after getting position of click

Question

0.00/5 (No votes)

See more:

Hi

I need to show drop down dynamically after getting the position of click .

It mean i need to first find X and y coordinates of click event than show drop down(below that).

Like that
var select = document.createElement("select");

//Create a option element dynamically
var option = document.createElement("option");

..

Explain again :
On button click :i have 2 or three button i need to show menu option after click dynamically .so i thing first i have to calculate the x and y coordinate of click event.

i am doing like this .

i do like that ...
create region
<div id= 'menuOption'></div>

<li class="dropdown-toggle menu click_h" data-toggle="dropdown" href="javascript:void(0)" id="config" onClick='test()'>Configuration

</li>

function test(e){
var evt = e ? e:window.event;
var clickX=0, clickY=0;

if ((evt.clientX || evt.clientY) &&
document.body &&
document.body.scrollLeft!=null) {
clickX = evt.clientX + document.body.scrollLeft;
clickY = evt.clientY + document.body.scrollTop;
}
if ((evt.clientX || evt.clientY) &&
document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.scrollLeft!=null) {
clickX = evt.clientX + document.documentElement.scrollLeft;
clickY = evt.clientY + document.documentElement.scrollTop;
}
if (evt.pageX || evt.pageY) {
clickX = evt.pageX;
clickY = evt.pageY;
}

alert (evt.type.toUpperCase() + ' mouse event:'
+'\n pageX = ' + clickX
+'\n pageY = ' + clickY
+'\n clientX = ' + evt.clientX
+'\n clientY = ' + evt.clientY
+'\n screenX = ' + evt.screenX
+'\n screenY = ' + evt.screenY
)
return false;

}

i want to show drop down when i click configuration below this . i am getting the coordinates

Thanks

Posted 17-May-13 0:05am

ravi1989h

Updated 17-May-13 0:56am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

vinay_sinha · Answer 1 · 2013-05-17T00:15:00

Solution 1

You can easily calculate the X-Coordinate & Y-Coordinate using below code using jquery:

JavaScript

var xCoordinate;
var yCoordinate;

$(document).on('mousemove', function (e) {
    xCoordinate = e.pageX;
    yCoordinate = e.pageY;
});

Posted 17-May-13 0:15am

vinay_sinha

Comments

ravi1989h 17-May-13 6:28am

thanks ..? But how to make dropdown below buttons ? ?

vinay_sinha 17-May-13 6:54am

hey, you can check the latest answer i have submitted

ravi1989h 17-May-13 6:30am

how to make drop down using this var select = document.createElement("select"); and how to set this dropdown on this position .

vinay_sinha · Answer 2 · 2013-05-17T00:48:00

this code can help you to set the position(where xCoordinate & yCoordinate you can find from the above answer ) like this:

JavaScript

document.getElementById("yourDropDownID").style.top = yCoordinate + "px";
document.getElementById("yourDropDownID").style.left = xCoordinate + "px";

Also you want to create those dropdowns, this [^] can help you, Best of Luck :)