Dynamisch Positionierung Pop-up "Windows" (div Elemente)

Question

Ich habe eine feste Symbolleiste am unteren Rand meiner Seite, wo Benutzer in der Lage sein, ihren Online-Status ändern und laden Sie eine Liste ihrer Favoriten unter anderem.

In der Symbolleiste habe ich übergeordnete div-Elemente, die, wenn geklickt, untergeordnete div-Elemente anzeigen, die direkt über dem übergeordneten Element positioniert werden müssen.

Für den Online-Status Teil denke ich, ich mache es richtig, da die Höhe des Pop-up für den Online-Status immer die gleiche Höhe ist.

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> 

Ist das der richtige Weg, um das Pop-up-Element zu positionieren, oder soll ich es anders tun (dh position: relative statt absolute mit einigen Verbesserungen)?

Hier ein Screenshot, wie es aussieht:

Wenn das richtig ist, es bringt mich zu meinem nächsten Problem, das ein Pop-up ist div Element ändert deren Größe basierend auf dem Inhalt von einer AJAX zurück Anruf. Im Moment positioniere ich das Element basierend auf der Anzahl der Elemente, die über JavaScript und JQuery zurückgegeben werden, und es ist wirklich hässlich.

Gibt es einen besseren Weg, es zu tun?

Zuerst ist hier ein Screenshot des dynamisch gefüllt 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 (Anmerkung: es auch in der Symbolleiste div gewickelt wird):

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

Und hier ist das hässliche JavaScript, das ich benutze, um positio n über dem übergeordneten Element basierend auf der Anzahl der Elemente in der Liste (Array [0] ist die Anzahl der Elemente).

$("#favoritesOnlinePopUp").css('top', ((parseInt(array[0]) * 39) - 5 + 1) * -1); 

Answer 1

Wenn die Symbolleiste eine feste Höhe hat, könnte man wahrscheinlich das Popup absolut von der unteren Position, mit der Toolbar-Element als relativ Behälter.

und CSS:

#favoritesOnline { 
    position: relative; 
} 

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

Dieses an der Spitze der #favoritesOnline beginnen sollte und wachsen nach oben als der Inhalt des div füllt.