Question

Please checkout this jsfiddle, when I click on a tag anchor I want the tag menu (div) to appear next to the anchor element but from the TOP RIGHT instead of the TOP LEFT, I have tried playing with the offset but I have not been successful thus far.

Here’s the code:

HTML:

     <div id="tag-menu"></div>
 <span class="edit-tags-wrapper" style="float:right;">
   <a rel="tag" title="show questions tagged 'jquery'" class="post-tag" href="#">jquery</a>
<a rel="tag" title="show questions tagged 'animation'" class="post-tag" href="#">animation</a>
<a rel="tag" title="show questions tagged 'tags'" class="post-tag" href="#">tags</a>
<a rel="tag" title="" class="post-tag" href="#">stackoverflow</a>

JS:

  $('a.post-tag').click(function(){
  var $this = $(this);
  var offset = $this.offset(); 
  var myPos = {X:offset.left, Y:offset.top+26}; 
  $('#tag-menu').css({left:myPos.X, top:myPos.Y, width:300, height:200}).toggle();
});

CSS:

    .post-tag{
     background:#e0eaf1;
     border-right:1px solid #3E6D8E;
     border-bottom:1px solid #3E6D8E;
     padding:2px 5px;
     color:#4a6b82;
    }
    .post-tag{
     text-decoration:none;
    }

    .post-tag:hover{
     background:#3E6D8E;
     color:#fff;
    }

    #tag-menu{
     background:#666;
     position:absolute;
     display:none;
     box-shadow:0 2px 3px #000;
     border-radius:5px;
    }

or you can checkout the JSFIDDLE to run it:

http://jsfiddle.net/EBergman/xfVaT/

Answer 1

LIVE DEMO

$('a.post-tag').click(function(){

  var $this = $(this);
  var offset = $this.offset();
  var thisW = $(this).outerWidth(); 
  var myPos = {X:offset.left+thisW-300, Y:offset.top+26}; 
  $('#tag-menu').css({left:myPos.X, top:myPos.Y, width:300, height:200}).toggle();
});

you need to take in account the menu width and the button outerWidth() to make that one work by simply doing: X:offset.left + thisW - 300

happy coding!