I'm having a web page (jsp) that included another jsp using

     <%@jsp:include ... %>

When I click on the second part (included page), getting the co-ordinates using:

    window.event.clientX 
    window.event.clientY

and storing into x and y respectively. Now I'm setting a div to visible at that mouse co-ordinates like,

    document.getElementById('division').style.top=x;
    document.getElementById('division').style.left=y;

as expected to display that div at the same spot where the mouse clicked. But the division is ing somewhere else.

What is the reason for that?

I'm having a web page (jsp) that included another jsp using

     <%@jsp:include ... %>

When I click on the second part (included page), getting the co-ordinates using:

    window.event.clientX 
    window.event.clientY

and storing into x and y respectively. Now I'm setting a div to visible at that mouse co-ordinates like,

    document.getElementById('division').style.top=x;
    document.getElementById('division').style.left=y;

as expected to display that div at the same spot where the mouse clicked. But the division is ing somewhere else.

What is the reason for that?

• javascript
• jsp
• dom-events

Share Improve this question Follow edited Feb 14, 2023 at 19:11 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 26, 2012 at 9:13 RAVITEJA SATYAVADARAVITEJA SATYAVADA 2,5712323 gold badges5757 silver badges9292 bronze badges 3

• Are you positioning your div as absolute or relative? – Priyank Patel Commented Oct 26, 2012 at 9:15
• Does the div have any container div if not try to position it relative. – Priyank Patel Commented Oct 26, 2012 at 9:17
• If relative, its position is not changing instead rendering in a constant position(actually where it is coded). – RAVITEJA SATYAVADA Commented Oct 26, 2012 at 9:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The top property is a string. Try document.getElementById('division').style.top=x + 'px';

I tried the following code and it worked fine for IE and Firefox. The onclick is for IE, the addEventListener is for pliant browsers.

<div id="clickMe" style="position: absolute; top: 10px;" onclick="myClick();">
    clickMe
</div>
<div id="division" style="position: absolute; top: 40px;">
    division
</div>
<script type="text/javascript">
    var clickMe = document.getElementById('clickMe');
    clickMe.addEventListener('click', myClick, 'false');

    function myClick(e) {
        var evt = e || window.event; //windows.event is for IE
        var x = evt.clientX;
        var y = evt.clientY;            
        document.getElementById('division').style.top = y + 'px';
        document.getElementById('division').style.left = x + 'px';
    }
</script>