CODEWITHSUNDEEP
jqueryhtmlalignment
Rocket
Rocket

Reputation: 1093

Jquery Align DIV to Link

I'm trying to show a hidden DIV, but I want it to appear next to the link that calls it, not further down the page.

There may be several hyperlinks or image links on the page and I want to allign the 'popup' div to appear next to the link or image that has been clicked.

How do I do this. ?

This is the jquery I'm using :

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
        $("[id$='contact']").click(function(){

    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $("#messagepop").css( {position:"absolute", top:event.pageY, left: event.pageX});
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

I've created a FIDDLE showing what I have so far.

Thanks

Upvotes: 0

Views: 94

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

The main thing is you are referring to the messagepop by id (#messagepop) not class (.messagepop).

Secondly, you can make it appear next to the link, by using offset() to get the link's position:

$(".messagepop").css( {position:"absolute",
                       top:$(this).offset().top,
                       left: $(this).offset().left});

Updated Fiddle

Upvotes: 1

Related Questions