Dynamically positioning pop-up “windows” (div elements)

By : Tom
Source: Stackoverflow.com
Question!

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:

<div id="toolbar">
   <div id="onlineStatus">
       <a href="javascript:onlineStatusClick();"><img id="onlineStatusIcon" src="/_assets/img/icons/<?php if ($onlinestatus == 0) { echo "online.gif"; } else { echo "hidden.gif"; } ?>" /></a>
       <div id="onlineStatusPopUp">
           <div id="popUpTitleBar">
               <div id="popUpTitle">Online Status</div>
               <div id="popUpAction"><a href="javascript:closeOnlineStatus();">x</a></div>
           </div>
           <div id="onlineStatusMessage">
               <?php if ($onlinestatus == 0) { echo "You're online, <a href=\"javascript:changeOnlineStatus();\">go hide</a>"; } else { echo "You're hidden, <a href=\"javascript:changeOnlineStatus();\">go online</a>"; } ?>
           </div>
       </div>
   </div>
</div>

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.

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.

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):

   <div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
   <img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" /><a href="javascript:favoritesOnlineClick();">Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)</a>
   <div id="favoritesOnlinePopUp">
       <div id="popUpTitleBar">
           <div id="popUpTitle">Favorites Online</div>
           <div id="popUpAction"><a href="javascript:closeFavoritesOnline();">x</a></div>
       </div>     
       <div id="favoritesOnlineListing"></div>
   </div>

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);
By : Tom


Answers

If your toolbar has a fixed height, you could probably position the popup absolutely from the bottom, with the toolbar-element as the relative container.

and css:

#favoritesOnline {
    position: relative;
}

#favoritesOnlinePopup {
    position: absolute;
    width: 211px;
    bottom: 21px;
}

This should start at the top of #favoritesOnline and grow upwards as the content fills the div.

By : Magnar


It should work the way you describe. Only thing I see your DataTemplate is not ItemTemplate. You should also look at the output window to see where bindings fail.



Maybe try

Window Name="TheWindow"
...
ListBox.ItemsSource = {Binding DataContext.Supports, ElementName=TheWindow}
By : user76035


This video can help you solving your question :)
By: admin