Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][jQuery] SCROLL UP/DOWN
Forum PHP.pl > Forum > Przedszkole
chłopiec z pieca
Cześć.

Mam div, na który nadałem określoną wartość height - treść się chowa - normalka. Więc chciałbym wprowadzić możliwość przesuwania góra/dół tekstu zawartego w tym divie.
Zdaje sobie sprawę z istnienia overflow: scroll - jednak chciałbym to inaczej rozegrać. Wstawiłbym dwie grafiki (strzałka góra/dół), które regulowałyby zawartość tekstu.

Interesuje mnie rozwiązanie w jQuery, ale czy są gotowe funkcje w nim?
pifarek
http://www.baijs.nl/tinyscrollbar/ a może coś takiego?
#luq
overflow: hidden + oskryptowanie grafik aby zmieniały właściwość scrollTop w jsie
enero_com_pl
Witajcie. Odświeżę temat, żeby nie zakładać nowego w tej samej sprawie.

W tutorialu jaki podał @Pifarek nie ma wersji takiej jaka mnie interesuje.
Poniżej wrzucam screenshot "mechanizmu" jaki mam do zrobienia.

http://i42.tinypic.com/2jab1f.jpg

"BOX" z treścią ma 470px, najlepiej gdyby za 1 kliknięciem scrolla przewijał 270 px w dół/górę.
Mile widziane jakieś gotowe rozwiązanie, choć każda wskazówka dot. ewentualnych modyfikacji skryptów zawartych w tutorialu wyżej również jest dla mnie na wagę złota smile.gif

Pozdrowienia,
Kamil
strife
Cytat(enero_com_pl @ 30.01.2012, 10:43:17 ) *
Witajcie. Odświeżę temat, żeby nie zakładać nowego w tej samej sprawie.

W tutorialu jaki podał @Pifarek nie ma wersji takiej jaka mnie interesuje.
Poniżej wrzucam screenshot "mechanizmu" jaki mam do zrobienia.

http://i42.tinypic.com/2jab1f.jpg

"BOX" z treścią ma 470px, najlepiej gdyby za 1 kliknięciem scrolla przewijał 270 px w dół/górę.
Mile widziane jakieś gotowe rozwiązanie, choć każda wskazówka dot. ewentualnych modyfikacji skryptów zawartych w tutorialu wyżej również jest dla mnie na wagę złota smile.gif

Pozdrowienia,
Kamil

Spróbuj się pobawić tym pluginem do jQuery: http://jscrollpane.kelvinluck.com/scroll_to_animate.html
enero_com_pl
@Strife: Fajny skrypcik, dzięki. Nie mogę sobie jednak z tym poradzić. Czy ktoś może podpowiedzieć, jak te czerwone kwadraciki przemieścić w miejsce tych "strzałek" ? W CSS kombinowałem, ale może to w JS jest pozycjonowane ? I gdzie w kodzie miałbym zmienić wartość przesuwania o Y px ?

Kolejny problem, to brak kompatybilności z przeglądarkami. O ile w IE działa to w Chrome przesuwa tylko o jedną linię, a reszty jakby nie widzi.

tutaj strona z kodem ( podejrzyjcie źródło ) http://www.mediareaktor.pl/projects/basilium/

Sprawdziłem w IE 9 jeszcze i też nie przesuwa tak jak trzeba.
strife
Cytat(enero_com_pl @ 30.01.2012, 11:45:43 ) *
@Strife: Fajny skrypcik, dzięki. Nie mogę sobie jednak z tym poradzić. Czy ktoś może podpowiedzieć, jak te czerwone kwadraciki przemieścić w miejsce tych "strzałek" ? W CSS kombinowałem, ale może to w JS jest pozycjonowane ? I gdzie w kodzie miałbym zmienić wartość przesuwania o Y px ?

Kolejny problem, to brak kompatybilności z przeglądarkami. O ile w IE działa to w Chrome przesuwa tylko o jedną linię, a reszty jakby nie widzi.

tutaj strona z kodem ( podejrzyjcie źródło ) http://www.mediareaktor.pl/projects/basilium/

Sprawdziłem w IE 9 jeszcze i też nie przesuwa tak jak trzeba.


Ostyluj to sobie po prostu, masz elementy:

  1. <a class="jspArrow jspArrowUp jspDisabled"></a>

  1. <a class="jspArrow jspArrowDown"></a>


Wystarczy, że sobie to ostylujesz w cssie i będziesz miał co tylko chcesz zamiast tych kwadratów.

Z tego co pamiętam to ten skrypt jest kombatybilny w większości przeglądarek, więc stawiam na jakiś błąd z zakresu HTML/CSS.

A wartość przesuwania w px, z tego co się orientuje znajdziesz w dokumentacji. Musisz trochę poszukać.
enero_com_pl
Cytat(strife @ 30.01.2012, 11:52:59 ) *
Ostyluj to sobie po prostu, masz elementy:

  1. <a class="jspArrow jspArrowUp jspDisabled"></a>

  1. <a class="jspArrow jspArrowDown"></a>


Wystarczy, że sobie to ostylujesz w cssie i będziesz miał co tylko chcesz zamiast tych kwadratów.

Z tego co pamiętam to ten skrypt jest kombatybilny w większości przeglądarek, więc stawiam na jakiś błąd z zakresu HTML/CSS.

A wartość przesuwania w px, z tego co się orientuje znajdziesz w dokumentacji. Musisz trochę poszukać.


Style mam dołączone do pluginu i już nimi grzebałem. Oryginalnie nie są te kwadraty czerwone i widać pasek scrolla między tymi czerwonymi kwadratami.
Proszę jeżeli ktoś może o zajrzenie w kod. On pewnie wszystko wyjaśni.
strife
Cytat(enero_com_pl @ 30.01.2012, 11:56:23 ) *
Style mam dołączone do pluginu i już nimi grzebałem. Oryginalnie nie są te kwadraty czerwone i widać pasek scrolla między tymi czerwonymi kwadratami.
Proszę jeżeli ktoś może o zajrzenie w kod. On pewnie wszystko wyjaśni.

Na klasach jspDrag i jspTrack, wyzeruj wartość height (height: auto !important). Na klasie jspVerticalBar, ustaw top: 348px. Na klasach jspArrowUp i jspArrowDown ustaw background: transparent
enero_com_pl
Rewelacja, chodziło mi tylko o wysokość tego track i drag. Zapomniałem o tym, że mamy !important jeszcze. Powoli do celu. Ostatni problem, to błędy w HTML/CSS, które mi to chrzanią bo np. w Chrome przewija tylko o jedną linijkę, a reszty nadal nie widzi.

Skopiowałem oryginalny kod i bez grzebania już i kombinowania zmieniłem tylko wartości, które podaleś @Strife oraz usunąłem kolory, żeby efekt był taki jak zamierzałem. W czym problem ?
strife
Cytat(enero_com_pl @ 30.01.2012, 12:16:18 ) *
Rewelacja, chodziło mi tylko o wysokość tego track i drag. Zapomniałem o tym, że mamy !important jeszcze. Powoli do celu. Ostatni problem, to błędy w HTML/CSS, które mi to chrzanią bo np. w Chrome przewija tylko o jedną linijkę, a reszty nadal nie widzi.

Skopiowałem oryginalny kod i bez grzebania już i kombinowania zmieniłem tylko wartości, które podaleś @Strife oraz usunąłem kolory, żeby efekt był taki jak zamierzałem. W czym problem ?


Na początek wywal z: #content p { margin-bottom. Na strzałkach daj background: transparent (jeżeli wymaga to dodaj !important).

Moim zdaniem ogólnie to jest problem z marginesami w #content. Najlepiej to stwórz nowego diva w środku #content i niech jego renderuje ten skrypt. Przede wszystkim pierwsze co musisz zrobić to upewnić się czy cała treść jest poprawnie wyświetlana, a potem dopiero baw się widokiem.
enero_com_pl
Zrobilem tak jak radziłeś, mimo to Chrome nadal się obraża i nie chce scrollować nawet IE scrolluje jak mu się podoba. Raz dobrze, raz źle. Możesz sprawdzić online. ( http://www.mediareaktor.pl/projects/basilium/ )

Edit: Mimo prób z divami i z marginesami, paddingami nadal nie chce to działać...

Up smile.gif

Nadal nie jestem w stanie tego doprowadzić do stanu używalności. Niby działa, ale pod każdą przeglądarką scrolluje inaczej. To wina już samego JS, CSS, a może po prostu fatum ?

1. Może jakiś inny dobry cross-browserowy plugin ?
2. Na podstawie kodu strony: http://www.mediareaktor.pl/projects/basilium/index.html, jak to doprowadzić do porządku, żeby w ogóle chciało scrollować do końca.
3. Cokolwiek, co się przyda.

Pozdrowienia.
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.