aufklappendes DIV in sichtbaren Bereich eines iFrames platzieren

roulandf

Grünschnabel
Hallo,

auf meiner Seite ist ein iFrame mit einer bestimmten Größe eingebettet. Im iFrame ist eine Auflistung von Benutzern, die zur Zeit online sind. Fährt man mit der Maus über den Benutzernamen, dann wird ein DIV von display:none auf display:block umgestellt, das die Userinformationen beinhaltet. Mein Problem ist, wenn man sich von einem Benutzernamen, der am Ende des sichtbaren Bereichs des iFrames ist, die Daten anzeigen lassen möchte, dann muss man zuerst scrollen, um es anschauen zu können.

...
<div class="msng_user0">
<div class="user female">
<a title="jule17" href="/member/jule17">jule17</a>
<div class="chat">
<a href="javascript:openChatWindow('jule17');">
<img width="25" border="0" heigth="7" src="/SysRes/PartyPeopleSkin/chat.gif"/>
</a>
</div>
<div class="userinformations" style="display:none">
....
</div>
</div>
</div>

Gibt es irgend eine Möglichkeit, dass das ganze Div (wie oben beschrieben) immer im sichtbaren Bereich des iFrames ist (es hat ja eine begrenzte Höhe..)


Vielen Dank im voraus,
Roland
 
Hi,

eine Möglichkeit wäre, das Element im oberen Anzeigebereich des iFrames fixiert zu positionieren.

Code:
.userinformations {
position:fixed;
top:0;
right:0;
}
 
Hallo,

danke für die schnelle Antwort. Habs ausprobiert, es macht aber nicht ganz das, was ich mir vorgestellt habe, da es mir dann das UserInforamtion-Div immer an den Anfang des iFrames platziert.

HTML:
<div class="msng_user1" onmouseout="javascript:toggleDiv('Info_belinda.v');" onmouseover="javascript:toggleDiv('Info_belinda.v');getUserInformation('belinda.v','guest','Info_belinda.v');">
  <div class="user female">
    <a target="_top" rel="nofollow" title="belinda.v" href="/member/belinda.v">belinda.v</a>
    <div id="Info_belinda.v" class="UserInformation" style="display: block;">
      <table width="160" height="72" border="0">
      </table>
    </div>
  </div>
</div>
<div class="msng_user0" onmouseout="javascript:toggleDiv('Info_xxxAnGeLoFhArDsTyLexxx');" onmouseover="javascript:toggleDiv('Info_xxxAnGeLoFhArDsTyLexxx');getUserInformation('xxxAnGeLoFhArDsTyLexxx','guest','Info_xxxAnGeLoFhArDsTyLexxx');">
</div>
<div class="msng_user1" onmouseout="javascript:toggleDiv('Info_juneau');" onmouseover="javascript:toggleDiv('Info_juneau');getUserInformation('juneau','guest','Info_juneau');">
</div>
<div class="msng_user0" onmouseout="javascript:toggleDiv('Info_desy21');" onmouseover="javascript:toggleDiv('Info_desy21');getUserInformation('desy21','guest','Info_desy21');">

Das UserInformation-Div ist immer unterhalb des Divs mit der Klasse msng_user0/msng_user1 platziert. Irgendwie müsste ich beim javascript Aufruf von toggleDiv dazusagen, dass er schauen soll, an welcher Stelle das Div, das aufgeklappt wird, im iFrame ist und dass er dann einfach nur um den gewissen Bereich nach oben scrollen soll...aber wie geht man sowas an?


lg,
Roland
 
Hallo,

ich hab mich heute vormittag nochmals dahinter geklemmt und bin auf folgende Funktion gestoßen, die genau das macht, was ich wollte:

HTML:
<div class="msng_user1" onmouseout="javascript:toggleDiv('Info_belinda.v');" onmouseover="javascript:toggleDiv('Info_belinda.v');getUserInformation('belinda.v','guest','Info_belinda.v');">
  <div class="user female">
    <a target="_top" rel="nofollow" title="belinda.v" href="/member/belinda.v">belinda.v</a>
    <div id="Info_belinda.v" class="UserInformation" style="display: block;">
      <table width="160" height="72" border="0">
      </table>
    </div>
  </div>
</div>

Beim OnMouseOver ruf ich die Funktion toggleDiv auf, die mir das Div mit der id Info_belinda.v sichtbar macht. In dieser JavaScript Funktion hab ich nun noch folgendes hinzugefügt:

Code:
MoveDiv = document.getElementById(Id); //ID = Info_belinda.v
MoveDiv.parentNode.scrollIntoView(false) //parentNode entspricht dann dem immer sichtbaren Teil was im obrigen Code dem <div class="user female"> entspricht

Nun ist auch am Ende des iFrames das aufklappende Div immer sichtbar.


Lg und nochmals danke für die Hilfe,
Roland
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück