CODEWITHSUNDEEP
jqueryposition
sharkyenergy
sharkyenergy

Reputation: 4173

jQuery - position of clicked item

in a script i am using following code is used to position a popup window in the middle of the screen.

i'd need to change this in a way that the Y position is the same as the item i clicked on. so if i click on an item the popup should be displayed at the same height as the item i clicked. i have no clue about jquery and 2 hours of trying didnt help. any help appreciated

i marked the line that needs to be edited.

                switch(a)
            {
                case 'postdetails':
                case 'userdetails':
                    $('#reputation-popup').addClass('normal-popup');
                    targetleft = ($(window).width() - $('#reputation-popup').outerWidth()) / 2;
                    targettop = ($(window).height() - $('#reputation-popup').outerHeight()) / 2;
                    /////// THE LINE ABOVE THIS IS THE ONE I NEED TO EDIT!!!! //////////

                break;
                case 'newpopup':
                    $('#reputation-popup').addClass('new-popup');
                    targetleft = ($(window).width() - $('#reputation-popup').outerWidth()) / 2;
                    targettop = ($(window).height() - $('#reputation-popup').outerHeight()) / 2;
                break;
                default:
                    $('#reputation-popup').addClass('small-popup');
                    // Center popup relative to clicked coordinate
                    targetleft = c.pageX - $('#reputation-popup').outerWidth() / 2;
                    // Popup can not be too close or behind the right border of the screen
                    targetleft = Math.min (targetleft, $(document).width() - 20 - $('#reputation-popup').outerWidth());
                    targetleft = Math.max (targetleft, 20);
                    targettop = c.pageY + 10;
                break;
            }

Upvotes: 1

Views: 115

Answers (3)

Ahsan Mahboob Shah
Ahsan Mahboob Shah

Reputation: 4029

You can use the following jQuery functions to position your popup menu:

1) event.pageX, event.pageY gives you the mouse position relative to document

Ref : http://api.jquery.com/event.pageY/

2) offset() : It gives the offset position of an element

Ref : http://api.jquery.com/offset/

3) position() : It gives you the relative Position of an element

Ref : http://api.jquery.com/position/

Upvotes: 1

Roseann Solano
Roseann Solano

Reputation: 768

$('#item1').click(function(){
     // GETS POSITION OF CLICKED ITEM
     var offset = this.offset();
     var x = offset.left;
     var y = offset.top;
     // GETS THE DIMENSION OF THE CLICKED ITEM
     var w = this.width();
     var h = this.height();
     // APPLY THE SETTINGS TO ITEM2 USING CSS FUNCTION
     $('#item2').css({
         .....
     });
    // http://api.jquery.com/css/

});

Upvotes: 1

Momo1987
Momo1987

Reputation: 544

try with :

 $("item").offset().top;
 $("item").offset().left;

more info here:http://api.jquery.com/offset/

Upvotes: 1

Related Questions