Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: js Przycisk do przesuwania strony o okres
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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 biggrin.gif

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:

  1. <a href="#nr1">Aerodynamika</a><br>
  2. <a name="#nr1"></a>


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:

  1. ...
  2. <link rel="stylesheet" type="text/css" href="test.css" />
  3. <div id="test"></div>
  4. ...


i utworzyłęm plik CSS:

  1. div{ height: 40%; width: 10%; }
  2. #test{ position: fixed; top: 30%; right: 20px; height: 50%; background-color: red; }


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
  1. <a href="#nr1">


questionmark.gif?
kamil4u
Trochę nie rozumiesz kodu CSS smile.gif
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 smile.gif
franz87
Fakt,CSS uczę się dopiero jak coś potrzebuje biggrin.gif
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:
  1. {height: 50%; width: 10%;}

questionmark.gifquestionmark.gifquestionmark.gif

Teraz ustawiłem je na "none", bo szerokość i wysokość obrazka i tak ustalam w
  1. #test{ position:


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ś:

  1. $z=1;
  2. echo '<div id="test">';
  3. echo '<a href="#nr'.$z.'"><img src="ala.gif"></a></div>';
  4. $z=$z+1;


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
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.