Question

I have followed this post in order to make a button similar to dropbox‘s log in button.

More specifically, here is the code I am using:

echo '<a href="#" id ="loginbutton"></a>';

    echo '<div id = "popup">';
    echo '<div id = "popupimage"> </div>';

//HTML INSIDE POPUP

    echo '</div>';

    echo '<script type="text/javascript" src="jquery.js"></script>';
    echo '<script>';

    echo '$("#loginbutton").click(function(e){';
    echo '$("#popup").css("visibility","visible");';
    echo 'e.stopPropagation();';
    echo '});';

    echo '$("#popup").click(function(e){';
    echo 'e.stopPropagation();';
    echo '});';

    echo '$("body").click(function(e){';
    echo '$("#popup") . css("visibility", "hidden");';
    echo '});';

CSS:

#logbutton{
    top:50px;
    left:850px;
    position: absolute;
    background-image: url(../images/buttons/loginbutton.png);
    width:59px; 
    height:28px;   
}

#popupimage{
    top:63px;
    left:887px;
    position: absolute;
    background-image: url(../images/popupimage.png);
    visibility: hidden;
    width:400px; 
    height:600px;   
}

The button works and the popup appears too.

The css of popup image specifies an absolute position of where the image is going to appear, and it is this that is causing the problem. I now wish to add some dynamic content before the button, and therefore I cannot really tell at which location the button is going be. This results in the popupimage not being placed near the button.

Is it is possible to know the absolute position of the button so that I can set my popupimage (using jquery) to appear next to it. Remember that since I have dynamic text before, it does not have a constant fixed position.

Answer 1

Why not do what dropbox did and wrap the button and the popup in a position: relative; positioned element? The relative positioned element will flow with the dynamic content but the position: absolute; elements within it will automatically be relative to the wrapper position. This is much simpler than trying to figure it out via jQuery.

UPDATE

# CSS
.position_me_relative {
  position: relative;
}
.within_the_relative_wrapper {
  /* 
   This will flow inside the wrapper like a normal element.
   For example, it will obey any padding you apply to the parent element.
  */
  position: relative; 
}
.absolute_popup_relative_to_wrapper {
  /* As an example:
    This will position the popup so its lower right corner
    is touching the lower right corner of the wrapper regardless
    of where the wrapper shows up on the page.
  */ 
  position: absolute;
  bottom: 0px;
  right: 0px;
  /*
    top and left can also be used for positioning
    negative values can also be used and the absolute element
    can be positioned so it appears "outside" the wrapper element
    i think if you play around with some different values for 
    top, bottom, left and right you'll get the idea pretty quick
  */
}

# Markup
<div class="position_me_relative">
  <a class="within_the_relative_wrapper"></a>
  <div class="absolute_popup_relative_to_wrapper"></div>
</div>