Dynamically positioning pop-up "windows" (div elements)

I have a fixed toolbar at the bottom of my page where users are going to be able to change their online status and load a listing of their favorites among other things. In the toolbar, I have parent div elements that when clicked, pop up child div elements that need to be positioned directly above the parent element. For the online status part, I think I'm doing it right since the height of the pop-up for the online status is always the same height. CSS: #toolbar { background:url('/_assets/img/toolbar.gif') repeat-x; height:25px; position:fixed; bottom:0px; left:1%; right:1%; border-left:1px solid #000000; border-right:1px solid #000000; z-index:100; font-size:0.8em; } #toolbar #onlineStatus { float:left; width:30px; padding-top:5px; height:21px; text-align:center; border-right:1px solid #606060; } #toolbar #onlineStatusPopUp { display:none; border:1px solid #000000; height:50px; width:211px; background:#2b2b2b; float:left; position:absolute; left:-1px; top:-51px; } HTML:
" />
Online Status
go hide"; } else { echo "You're hidden, go online"; } ?>
Is that the correct way of positioning the pop-up element or should I be doing it differently (i.e., position: relative instead of absolute with some tweaks)? Here's a screen shot of how it looks: ![Online status screenshot.][1] If that's correct, it brings me to my next problem which is a pop up div element whose size changes based on content returned from an AJAX call. Right now I'm positioning the element based on the number of items returned via JavaScript and JQuery and it's really ugly. Is there a better way to do it? First, here's a screen shot of the dynamically filled div element: ![Dynamically filled div element.][2] CSS: #toolbar #favoritesOnline { float:left; height:21px; width:180px; padding-top:4px; border-right:1px solid #606060; text-align:center; } #toolbar #favoritesOnline .favoritesOnlineIcon { padding-right:5px; } #toolbar #favoritesOnlinePopUp { display:none; border:1px solid #000000; width:211px; background:#2b2b2b; float:left; position:absolute; left:-1px; } #toolbar #favoritesOnlineListing { overflow:auto; } HTML (note: it's wrapped in the toolbar div as well):
"> Favorites Online ()
Favorites Online
And here's the ugly JavaScript I'm using to position it above the parent element based on the number of items in the list (array[0] is the number of elements). $("#favoritesOnlinePopUp").css('top', ((parseInt(array[0]) * 39) - 5 + 1) * -1); [1]: http://i.stack.imgur.com/Z6MIH.jpg [2]: http://i.stack.imgur.com/mPyIW.jpg

以上就是Dynamically positioning pop-up "windows" (div elements)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏