CODEWITHSUNDEEP
jquerydrop-down-menuoffset
Eric Bergman
Eric Bergman

Reputation: 1443

jQuery: How to make hidden div appear from top right

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/

Upvotes: 2

Views: 618

Answers (3)

sdespont
sdespont

Reputation: 14025

Update

Use $(window).width() to know the screen size

http://jsfiddle.net/xfVaT/4/

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

Upvotes: 0

Jani Hyyti&#228;inen
Jani Hyyti&#228;inen

Reputation: 5407

You specifically fix the #tag-menu left.

$('#tag-menu').css({left:myPos.X, top:myPos.Y, width:300, height:200}).toggle();

How about fixing it right?

$('#tag-menu').css({right:myPos.X+300, top:myPos.Y, width:300, height:200}).toggle();

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

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!

Upvotes: 1

Related Questions