js Przycisk do przesuwania strony o okres Opcje

[franz87]

Witam,chciałbym na mojej stronie zrobić taki przycisk,który cały czas podąża za scrollem.Zawsze jest z boku.
Gdy się na niego naciśnie strona przesuwa się w dół lub w górę dokładnie o jeden okres.(mam na stronie 50%film 50%tekst height)
Widziałem to na pewnej stronie,ale teraz nie umiem tego znaleźć. Wg frazy też nie umiem tego sprecyzować.
Wie ktoś jak taki skrypt wykonać? Na java script się nie znam.Może ktoś coś takiego robił i ma skypt, lub wie gdzie znajdę?

Rys poglądowy

http://www.voila.pl/263/oyidq/index.php?get=1&f=1

Pozdrawiam

[kamil4u]

CSS: position -> fixed
JS: https://developer.mozilla.org/en/DOM/element.scrollTop + inne funkcje operujące na scroll

Jeżeli znasz podstawy to powinieneś sobie poradzić. Jak Ci nie wyjdzie to pokaż swój dotychczasowy kod to postaramy się go poprawić.
Powodzenia

[franz87]

Witam,co do samego przemieszczania się to mam:

[HTML] pobierz, plaintext 
    <a href="#nr1">Aerodynamika</a><br>
    <a name="#nr1"></a>
[HTML] pobierz, plaintext 

Jak widać robię to poprzez HTML i nie ma problemu.
Kod mam w HTML/PHP.
Wyświetlam 10 filmów na stronę w pętli for.
Bez problemu co pętla mogę dać:
<a name="#nr1"></a>

Tak więc "samo" przeskakiwanie mam już załatwione.
Teraz tylko jak zrobić przycisk,który podąża za scrollem, a w razie naciśnięcia wskazuje link do
<a href="#nr1"> oraz oraz #nr1 - 1 ,czyli do poprzedniego.

[kamil4u]

To już Ci napisałem... - CSS, pozycjonowanie, wartość "fixed"
Najprostszy przykład: http://jsfiddle.net/nMxSH/

[franz87]

Ok,zrobiłem w mojej stronie HTML/CSS:

[HTML] pobierz, plaintext 
...
<link rel="stylesheet" type="text/css" href="test.css" />
<div id="test"></div>
...
[HTML] pobierz, plaintext 

i utworzyłęm plik CSS:

[HTML] pobierz, plaintext 
div{ height: 40%; width: 10%; }
#test{ position: fixed; top: 30%; right: 20px; height: 50%; background-color: red; }
[HTML] pobierz, plaintext 

Wszystko śmiga,czerwony kwadracik jest stałym elementem - o to mi chodziło.
Tylko jak teraz:

-Zamiast kwadracika wstawić obrazek
-Obrazek ma być odnośnikiem typu

[HTML] pobierz, plaintext 
<a href="#nr1">
[HTML] pobierz, plaintext 

?

[kamil4u]

Trochę nie rozumiesz kodu CSS
W tym przypadku kod div{ height: 40%; width: 10%; } jest zbędny. W ogóle to poducz się CSS, bo inaczej nic nie zdołasz poprawić.

Co do problemu:

Kod

<div id="test">
<a href="#nr1">
  <img src="./obrazek.jpg">
</a>
</div>

+ ew. jakiś CSS, który zrobisz już sam

[franz87]

Fakt,CSS uczę się dopiero jak coś potrzebuje
To co podałeś wszystko śmiga.

1.Teraz masz jakiś pomysł,żeby po każdym naciśnięciu
#nr1 zmieniał się na #nr2 itd.
Mam do wyświetlenia 20 filmów.


2.Za co odpowiada:

[HTML] pobierz, plaintext 
{height: 50%; width: 10%;}
[HTML] pobierz, plaintext 

Teraz ustawiłem je na "none", bo szerokość i wysokość obrazka i tak ustalam w

[HTML] pobierz, plaintext 
#test{ position: 
[HTML] pobierz, plaintext 

3.Jest jakaś możliwość zrobienia stylu background-color tak,żeby plik nie musiał być kwadratem.
Żeby w momencie jak ma nieregularne kształty nie musiał mieć tła?
Wiem ,że w C++ dawało się różowe tło,a jak tutaj? Jest to w ogóle możliwe?

//EDIT: co do 1 to zrobiłem takie coś:

[PHP] pobierz, plaintext 
$z=1;
echo '<div id="test">';
echo '<a href="#nr'.$z.'"><img src="ala.gif"></a></div>';
$z=$z+1;
[PHP] pobierz, plaintext 

Przy pierwszym naciśnięciu działa,ale przy nastepnym nie bo znowu jest przypisywana wartość 1.
Nie wiem jak zrobić,żeby dodawało co 1,ale nie trzeba było deklarować tej pierwszej wartości zmiennej

Ten post edytował franz87 21.06.2011, 14:51:39