Sziasztok!
Ezt a Fórumbejegyzést véve alapul:
http://drupal.hu/comment/63583#comment-63583
megpróbáltam animált horizontális görgetésre rábírni a Drupal oldalam.
1. Létrehoztam négy oldalt, aminek a tetejére az alábbi navigációt tettem:
2. Mind a négy oldalon valahová beszúrtam egy hasonló div-etz:
ez van lejjebb
3. Készítettem egy view-t, ami pontosan ezt a négy oldalt tartalmazza (mező típusú és a body-t is felveszem a megjelenítendő mezők közé)
4. A sminkben gondoskodom róla, hogy egymás mellé kerüljenek a view sorai:
#block-system-main .view {
position: absolute;
width: 6050px;
border:solid green;
}
#block-system-main .views-row {
float: left;
min-height: 650px;
position: relative;
width: 1500px;
border:solid red;
}
5. Készítettem egy származtatott myBartik sminket, aminek a js almappájába bemásoltam a script.js-t és a jquery.scrollTo-1.4.2.js-t.
6. A smink info file-jába megmondom, hogy ezeket a js-eket fogom használni:
scripts[] = js/script.js
scripts[] = js/jquery.scrollTo-1.4.2.js
7. A script.js-be ezt a kódot másoltam a file végére:
(function($) {
Drupal.behaviors.myBartik = {
attach: function (context, settings) {
//code starts
$('.link').click(function () {
alert($(this).attr('href'));
$('#view-content').scrollTo($(this).attr('href'), 800);
return false;
});
//code ends
}
}
})(jQuery);
Amíg a script.js-be nem kerül bele a scrollozásra vonatkozó kód, addig szépen működik, pontosan a megfelelő helyre ugrik (csak persze nem animáltan). Azonban ahogy bemásolom a 7-es pontbeli kódot, nem történik semmi a navigációs elemekre kattintva.
Itt lehet megnézni (kiíratom a $(this).attr('href')-t, ami jó is mindenhol):
http://www.induserv-webdesign.hu/artilia7/hu/horizontal_page
Mi lehet a baj? Szerintem ebben a megoldásban irreleváns, hogy kétnyelvű tartalmakkal próbálkozom, de azért hátha ez is bekavarhat.
$('#view-content').scrollTo(...) HELYETT $.scrollTo(...)
Szia!
Csak ezt rontottad el:
$('#view-content').scrollTo($(this).attr('href'), 800);
HELYETT:
$.scrollTo($(this).attr('href'), 800);
(Meg még annyi, hogy a végén, az egyik kapcsos zárójel után lemaradt egy pontosvessző, de az minimális hiba.)
És így már menni fog.
Szóval az egész:
helyes script a vízszintes scroll-ozáshoz
Igen, ezzel a scripttel már megy!
Köszönöm a segítséget :)
Böngészők "vissza" és "előre" gombjainak működőképessé tétele
Szívesen, ennek örülök! :))
Még annyi jutott eszembe, hogy az oldal kényelmessé tétele érdekében meg kellene oldanod, hogy a hash akár az adott elem id-jával hozzácsapódjon az URL-hez, hogy lehessen a böngészők vissza és előre gombját használni a navigációhoz, amikor klikkelsz.
Tehát rákattint a felhasználó az "egyes oldal" linkre, akkor mondjuk
www.example.com/drupal/
cím helyett legyen például
www.example.com/drupal/#egyes
ha ilyen a linkje az egyes oldalnak:
<a href="#egyes">Egyes oldal</a>
A Drupal 7 például már beletette a core-ba a jQuery BBQ plugint:
http://benalman.com/projects/jquery-bbq-plugin/
ezt használja arra, hogy az Overlay modul (tudod, az a felpattanó vászon az admin-linkekre kattintásnál) vászonjának felugrásakor megváltozzon az URL, és bekerüljön egy hash a címbe (valami.hu/#overlay=blabla/asdasd). Így a böngésző "Vissza" gombját is lehet használni a navigációra.
Elvileg a History.js meg a Statehandler pont ilyen célra való:
http://drupal.org/project/history_js
http://drupal.org/project/statehandler
Remélem, sikerül!