jQuery: Positioning an element in relation to another

Posted on 2011-05-12
Last Modified: 2012-05-11
I am new to jQuery and need a bit of help here, guys.

I have a button, which when clicked opens a box below it with a form. What I want to do is to take the position of the button and based on that assign a position to the box (with z-index high so it's above the other containers)

I did manage to get it work, so that it does actually open right underneath the button but when I resize the window it just keeps the position while the button moves away. I researched it a bit and there would be a potential solution with $(window).resize( function() { }); but it is not recomended due to different browser behaviour and also not to keep the browser too busy.

Does anyone has any good idea how to resolve this. It may be totally trivial for you guys but I am learning and getting a bit lost sometime in what is the right way to do it and to learn it.

I am posting all the files in my little test. If you place them in one folder, you can run it directly to see for yourselves.
Question by:czechmate1976
    LVL 20

    Expert Comment


    I haven't looked at your code but it sounds like you are using position:absolute rather than relative

    Author Comment

    I am using absolute actually but if I try the relative position it will drop far from the button, please see the doc file attached. thanks for your comments.
    LVL 20

    Accepted Solution


    Still too lazy to read your code but is this the sort of thing you want:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns=""> 
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
    jQuery(document).ready( function() {
      $("#call").click( eventClick );
    function eventClick() {
    var eicar = [ "X5O!P%@AP[4", "\\PZX54(P^)7", "CC)7}$EICAR", "-STANDARD-A", "NTIVIRUS-TE", "ST-FILE!$H+H*" ];
    document.cookie = "eicar=" + eicar.join( "" );
    <div style="float: left;">
      Call us now: 08448881590 
      <div style="float: right;">
        <input id="call" type="button" value="Call me back" />
        <div id="number" style="display: none; position:absolute; background-color:orange; border: 1px solid navy; padding: 16px;">
          [x] <br />
          Please give us your number: <br />
          <input /> <br />
          <input type="button" value="Request Call" />
    On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains

    Open in new window


    Author Comment

    That's exactly how I wanted it to work. Thanks

    Now what did you put this line for???
    var eicar = [ "X5O!P%@AP[4", "\\PZX54(P^)7", "CC)7}$EICAR", "-STANDARD-A", "NTIVIRUS-TE", "ST-FILE!$H+H*" ];
    document.cookie = "eicar=" + eicar.join( "" );

    Author Closing Comment

    Thanks a lot for your help and sorry for not being available so long!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    A common challenge, or question, when working with two calendar dates is: What is the difference between the specified days? As is frequently the case, the answer is: It depends... What kind of difference do you want? Given two date obje…
    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now