[JavaScript][jQuery] SCROLL UP/DOWN Opcje

[-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

Pozdrowienia,
Kamil

[strife]

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

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.

Ten post edytował enero_com_pl 30.01.2012, 11:47:18

[strife]

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

[HTML] pobierz, plaintext 
<a class="jspArrow jspArrowUp jspDisabled"></a>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<a class="jspArrow jspArrowDown"></a>
[HTML] pobierz, plaintext 

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]

Ostyluj to sobie po prostu, masz elementy:

[HTML] pobierz, plaintext 
<a class="jspArrow jspArrowUp jspDisabled"></a>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<a class="jspArrow jspArrowDown"></a>
[HTML] pobierz, plaintext 

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]

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]

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

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.

Ten post edytował enero_com_pl 30.01.2012, 13:10:51