CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Om3ga
Om3ga

Reputation: 32853

finding bottom position of html element and putting inner element at the bottom of parent

Updated

I am trying to put html div tag at the bottom of the its parent div tag. Forexample, I have div tag and using jquery I am creating another div tag and trying it to put it at the bottom of the div tag which is already visible in the document. I am trying this with below code but doesnt work. It does not put the div tag at the bottom of available div tag.

var self = $(this);
        var sh = $('<div></div>');
        var bgshadow = $(sh).css({
            'position'              :    'absolute',
                'width'                 :    self.outerWidth(),
                'height'                :    30, //self.outerHeight() - 180,
                'left'                  :    self.offset().left,
                'top'                   :    self.height() - sh.height(), //self.offset().top,
                //'bottom'              :    self.height() - sh.height(),                    
                '-webkit-box-shadow'    :    '0px 15px 20px #000000',
                '-moz-box-shadow'       :    '0px 15px 20px #000000',
                'box-shadow'            :    '0px 15px 20px #000000',
                'border-radius'         :    '25px',
                'z-index'               :    1
        }).appendTo(self.parent());

Edited

Please check it on jsfiddle

Can someone tell me why is it not working?

Upvotes: 1

Views: 2264

Answers (4)

ch4nd4n
ch4nd4n

Reputation: 4197

Make sure that the parent div containing the target div has position relative and the target div has position absolute with left: 0 and bottom: 0. Instead of making use inline style, it would be a good practice to use CSS class. Your DOM structure should be something like this.

<html>
  <head>
    <style>
      .border {border:1px solid #000;}
      .parent{height:300px;position:relative;}
      .target{height:100px;width:300px;position:absolute;bottom:0;}
    </style>
  </head>
  <body>
    <div class="parent border">
      parent
      <div class="target border">
        target
      </div>
    </div>
  </body>
</html>

Upvotes: 0

labroo
labroo

Reputation: 2961

hmmm, I tried exactly what you have, and it works !!!!

http://jsfiddle.net/8UCKm/1/

Upvotes: 0

apeBoy
apeBoy

Reputation: 63

Does the parent div have a CSS position of relative or absolute? You'll need that. And then you can just use

'bottom': '0px'

Upvotes: 1

SpliFF
SpliFF

Reputation: 38976

replace

'top' : self.height() - sh.height(), //self.offset().top

with

bottom: 0

It will sit at the bottom of its parent.

Also left:0 is sufficient for the div to sit on the left which is what you seem to be trying to do.

Just make sure the parent is positioned with absolute or relative positioning.

Upvotes: 1

Related Questions