Javascript ist Toll!

24. August 2005 - 22:14

fixlayer

Mit CSS lassen sich Bereiche einfach fixieren. Die Angabe position:fixed sorgt dafür, dass der Layer an der Position fixiert bleibt, an der er gerade steht.

Das Problem mit fixed ist, dass es u.a. der IE noch nicht umsetzt, d.h. er ignoriert position:fixed. Deshalb entstand diese Javascript Funktion um einen Bereich zu fixieren. Ich habe das Skript Beispielhaft hier in die Seite eingebaut.

Syntax

fixLayer(id)

Parameter

id Ein Zeichenkette das die ID des gesuchten Elementes enthält.

Beispiel

<div id="fix" style="bottom:0;z-index:100;background-color:#ff0;border:1px solid red;">Ein Beispiel</div>
<script type="text/javascript">
window.onload = function() { fixLayer("fix") ; };
</script>

Download

fixlayer.js 2 KB

js/fixlayer.js
 

Browser

Im Prinzip läuft das Skript auf allen Browsern ab der 4. Generation. Doch um den Layer positionieren (und damit zu fixieren) zu können, muss dieser in den 4'er Versionen (IE und NC) mit der Eigenschaft style="position:absolute" oder style="position:relative" versehen werden.

Weitere Informationen zu position:fixed

Der IE CSS-Hack
andere Lösung mit Javascript

Ein Beispiel

ähnliche Artikel

  • Kein ähnlicher Artikel
  • Comments (4)
    2978 mal gelesen.

    4 Kommentare

    Leave a comment »

    Seiten:

    1. Kommentar von: Leon
    4. Januar 2006: 4:39

    Hi,

    kann mir eventuell jemand sagen, wie ich das js genau einbinde. Klappt irgendwie nicht richtig. Danke

    2. Kommentar von: Struppi
    4. Januar 2006: 8:37

    Genau wie oben beschrieben und du brauchst natürlich einen Layer mit der id „test“

    3. Kommentar von: Leon
    4. Januar 2006: 17:12

    Danke schon mal für die schnelle Antwort. Bei mir meldet der Browser immer „ID:test existiert nicht“ Der Fehler liegt sicherlich an mir.

    4. Kommentar von: Struppi
    4. Januar 2006: 17:37

    Ja, hast du den einen Bereich mit der ID=“test“ auf deiner Seite?

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht.

    Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
    marketing-bankruptcy
    marketing-bankruptcy
    marketing-bankruptcy
    marketing-bankruptcy