Forum PHP.pl > [JavaScript] Ruchoma tabela

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Ruchoma tabela

kkuubbaa88

15.09.2008, 17:24:07

w jaki sposob można zrobic, aby jakas tabela byla zawsze w tym samym miejscu? chodzi o cos takie, że jak zjezdzamy scrollbarem w góre lub w dól to i ta tabela sie przemieszcza i zawsze jest w tej samej pozycji na ekranie (zawsze widoczna.) ?

drPayton

15.09.2008, 17:38:17

Kod

position:fixed;

dla tabeli + określ położenie względem krawędzi ekrany i już

edit: Przykład:

[HTML] pobierz, plaintext 
<p style="height:300px;background:green;">paragraf1</p>
 
<table style="width:200px;height:200px;background:red;position:fixed;top:50px;left:100px;">
    <tr>
        <td>Zawartość komórki tabeli</td>
    </tr>
</table>
 
<p style="height:500px;background:blue;">paragraf2</p>
[HTML] pobierz, plaintext

kkuubbaa88

15.09.2008, 18:49:39

powiedzmy, ze to jest takie wyjscie posrednie, poniewaz jezeli moja tebela sie troche wydluzy to nie bede w stanie po pewnym momenciejej przegladnac do konca...

Shili

15.09.2008, 19:02:32

To zrób ją w kontenerze z określoną wysokością i szerokością i dodaj overflow: auto
Przykład:

[HTML] pobierz, plaintext 
<body style="height: 2000px;">
<div style="height: 300px; position: fixed; top: 100px; left: 100px; width: 300px; overflow: auto; background: red;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eleifend condimentum dolor. Sed posuere erat ac diam. Morbi justo ligula, euismod rhoncus, interdum ut, ultrices id, leo. Sed lacinia, nulla sed interdum pulvinar, lacus turpis fermentum lacus, a aliquet magna augue a nulla. Donec ut nisl nec eros egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sed nibh. Donec nec metus. Sed eget ligula et diam varius sagittis. Sed fringilla est eget mi. Donec facilisis velit ac velit. Morbi erat dui, porttitor ac, condimentum eu, vestibulum ut, purus. Nulla in leo a nibh pellentesque tristique. Sed eget massa non tortor molestie bibendum. Mauris suscipit velit suscipit tortor. Sed non arcu. Donec vehicula. Phasellus massa ante, auctor et, hendrerit vel, accumsan at, mauris. Curabitur volutpat eros eget dui.
<br/><br/>
Integer non turpis. Sed risus lectus, pellentesque eget, vulputate ut, rutrum in, ligula. Donec vulputate imperdiet odio. Aenean nisi sem, vulputate vel, ultricies commodo, tristique ultricies, purus. Maecenas a nibh non orci interdum imperdiet. Suspendisse aliquet. Ut nunc risus, ultrices consequat, aliquet id, tempor eget, ligula. Sed in pede non magna tristique vehicula. Sed eu velit. Vivamus placerat, quam quis sagittis tempor, libero nisi rutrum lorem, a porta pede leo et justo. Etiam a ante. Curabitur ornare mi eu pede. In aliquam. Vivamus molestie dolor in neque. Maecenas tellus lorem, ultrices luctus, bibendum ut, varius convallis, eros. Sed tristique semper enim. Aliquam eu mi. Maecenas tortor.
<br/><br/>
Donec orci. Morbi commodo dui cursus eros. Nullam dui tellus, fermentum non, pulvinar ac, ornare quis, est. Phasellus vel nibh id libero elementum cursus. Ut ornare. In posuere interdum arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis. Morbi aliquam lacus. Donec rutrum hendrerit metus. Duis ultricies, leo id fringilla sodales, lacus nulla bibendum mi, eu hendrerit nunc enim vitae nisl. Duis venenatis feugiat est. Duis pulvinar ligula id urna blandit dapibus.
<br/><br/>
Vivamus a nunc sed tortor sodales viverra. Donec faucibus leo eget sem. Quisque et odio. Vivamus a ante at tortor aliquam venenatis. Curabitur feugiat posuere nunc. Nunc ut nisl id velit faucibus fringilla. Aliquam rhoncus. Nullam consectetuer placerat metus. Aliquam bibendum massa sed pede. Quisque nunc. Phasellus congue volutpat turpis.
<br/><br/>
Phasellus at ligula. Donec dapibus, libero eu vulputate tincidunt, turpis justo dictum libero, non euismod augue lorem vel nunc. Nulla accumsan, tortor sit amet molestie fringilla, felis tellus fermentum ante, quis dignissim est nulla eu dui. Proin ultricies. Quisque molestie. Vivamus congue laoreet quam. Suspendisse congue. Integer purus dolor, tempus non, interdum adipiscing, malesuada non, nunc. Donec euismod. Nunc nec diam non sapien fermentum accumsan. Nunc vel nunc ac massa pulvinar dapibus. Donec fermentum justo nec sem. Maecenas consectetuer. Nullam tristique dictum felis. Nulla auctor, mauris quis hendrerit faucibus, tortor erat tristique pede, vel semper mi mi eget sem. Nullam imperdiet cursus nisl. Praesent sit amet neque molestie sem molestie molestie. In at eros. Aliquam tellus. Aenean tincidunt mollis nisl. 
</div>
</body>
[HTML] pobierz, plaintext

Weź jeszcze pod uwagę to, że IE6 nie renderuje poprawnie position: fixed i musisz sobie poszukać na to hacka.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.