CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jeremy Pisanic
Jeremy Pisanic

Reputation: 3

positioning an element in the bottom right of a non related element in jquery

I am trying to position an element relative to another element that is not its parent using jquery. The problem is that the non-parent element is dynamic and changes in height depending on the item. My goal is to position the element in the bottom right corner of the nonparent element and have it stay in the position relative to that nonparent element regardless of height. I also am a total noob when it comes to jquery.

    // Reposition DIV
        var nonparent = $('.DIVtoBeRelativeTo');
        var position = nonparent.offset();
        var child1 = $('.ChildDIV').offset
            var width = nonparent.width();
            var height = nonparent.height();
            var position = nonparent.position();
            
            var bottomLeftX = position.left;
            var bottomLeftY = position.top + height;
            
            var bottomRightX = position.left + width;
            var bottomRightY = position.top + height;

Upvotes: 0

Views: 81

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Use this way:

nonparent.offset().left;
nonparent.offset().top;

Let's say we have this image:

So you need to use:

Element.css("left", NonParent.offset().left + NonParent.width() - Element.width());

Code:

// Reposition DIV
var NonParent = $('.DIVtoBeRelativeTo');
var Element = $('.ChildDIV');
Element.css("left", NonParent.offset().left + NonParent.width() - Element.width());

Upvotes: 1

Related Questions