javascript - Centering div using jQuery -
javascript - Centering div using jQuery -
i have div $("#organizer_listings_container")
centered using css margin: 0 auto;
uses jquery increment width when user clicks on button. after resizing, i'm using next code center resized div $("#organizer_listings_container")
.
resizing code
// center content when width changes if($("#organizer_listings_container").css("position") != 'absolute') { $("#organizer_listings_container").css("position","absolute"); var left = ( $(window).width() - $("#organizer_listings_container").width() ) / 2 + "px"; $("#organizer_listings_container").css('left', left); // set initial 'left' } left = ( $(window).width() - ( 852 ) ) / 2 + "px"; $("#organizer_listings_container").animate({'left': left}); // animate final 'left'
problem: when add together new div (make visible using jquery show()
), appear above #organizer_listings_container
, #organizer_listings_container
shifts downwards correct. when remove newly added div, #organizer_listings_container
not shift up!
i suspect due absolute positioning required jquery centering code used. how can create resized div shift when newly added div removed?
using jquery calculate height of newly added div shifting resized div offsetting top
calculated height appears messier want
you can avoid having utilize jquery , add together class newly added div , centre top displacement so:
<div class="container" style="background:blue; width:100%;"> <div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div> </div>
note class contain inline style, example.
the thing might need jquery ensure container 100% height. if you're going see box , you're using container positioning centered, don't need requirement.
javascript jquery css
Comments
Post a Comment