jQuery-s scrollozás Drupal7-ben

Kocsis Kata képe

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.

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
Drupal verzió: 
Sk8erPeter képe

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:

  1. (function ($) {
  2.  
  3. Drupal.behaviors.myBartik = {
  4. /**
  5.   * Attaches the behavior.
  6.   */
  7. attach: function (context, settings) {
  8. //code starts
  9. $('.link').click(function () {
  10. alert($(this).attr('href'));
  11.  
  12. $.scrollTo($(this).attr('href'), 800);
  13. return false;
  14. });
  15. //code ends
  16. }
  17. };
  18.  
  19. })(jQuery);
2
0
Kocsis Kata képe

Igen, ezzel a scripttel már megy!

Köszönöm a segítséget :)

0
0
Sk8erPeter képe

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!

1
0