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)
    398 mal gelesen.

    4 Kommentare

    Leave a comment »

    Seiten:

    1. Comment von: Leon
    4. January 2006: 4:39

    Hi,

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

    2. Comment von: Struppi
    4. January 2006: 8:37

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

    3. Comment von: Leon
    4. January 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. Comment von: Struppi
    4. January 2006: 17:37

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

    Leave a comment

    Name (required)
    Mail (wird nicht angezeigt) (required)
    Website

    Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful