SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist mrwooster's Avatar
    Join Date
    Jan 2006
    Posts
    518
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript positioning question

    I have a tabled list of members which looks like this

    Name | Email | Membership | Edit | Delete

    When the delete link is clicked I use ajax to delete the member from the database.

    A hidden div element appears which asks the user to confirm that he wants to delete the member.

    I have about 2000 members and so the page is very long...

    At the moment, when the delete button is clicked, the div element appears at the top of the page which means the user has to scroll right up to the top to see the box... when the delete button is clicked I want the hidden div element to appear next to where the user clicked... how can I do this?

    Thanks

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this and see what you can work out:

    Code xhtml:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function show(el) {
                    var test = document.getElementById('test');
                        test.style.position = 'absolute';
                        test.style.left = (el.offsetLeft + el.offsetWidth + 20) + 'px';
                        test.style.top = el.offsetTop + 'px';
                        test.style.display = 'block';
                }
            </script>
        </head>
        <body>
     
            <a href="javascript:void(0);" onclick="show(this)">Show</a>
            <br />
            <br />
            <br />
            <br />
            <a href="javascript:void(0);" onclick="show(this)">Show</a>
            <br />
            <br />
            <br />
            <a href="javascript:void(0);" onclick="show(this)">Show</a>
            <div id="test" style="display: none;">Test<br /><a href="javascript:void(0);" onclick="hide()">Hide</a></div>
     
        </body>
    </html>


  3. #3
    SitePoint Evangelist mrwooster's Avatar
    Join Date
    Jan 2006
    Posts
    518
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, unfortunately your code doesn't seem to work for tables though.

    It works fine when the links are separated by line breaks but when the links are in a table, the offsetTop value doesn't change as I go down the page....

    Is there any way I can detect the mouse location at the time of the 'click'? Alternatively is there any way to place the box in the center of the 'visible' page (i.e. the center of the page viewed on the screen depending where the user has scrolled to)?

    Thanks

  4. #4
    d^_^b Iain G's Avatar
    Join Date
    Nov 2005
    Location
    Gloucester, UK
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give this a whirl:
    Code javascript:
    function show(el)
    {
    	var test = document.getElementById('test');
    	test.style.position = 'absolute';
    	test.style.left = (el.offsetLeft + el.offsetWidth + 20) + 'px';
     
    	if (document.body.scrollTop)
    		test.style.top = document.body.scrollTop + 'px';
    	else
    		test.style.top = window.pageYOffset + 'px';
     
    	test.style.display = 'block';
    }
    *Should* make it appear at the top of the window, you can modify it to move it further down by adding in an arbitrary number of pixels if necessary.
    Coding and design philosophy:
    Keep It Simple, Stoopid


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •