1. Tudásbázis
  2. Sminkek
  3. Vízszintes görgetés

Vízszintes görgetés

Beküldte Pál úr - 2012. április 10. 17.33
Pál úr képe

Egy kis segítséget szeretnék kérni...

Vízszintes görgetéssel ("horizontal scrolling") működő weboldalt szeretnék csinálni. A tartalmak egy oldalon való megjelentetése nem gond Views-zal, a vízszintes egymás mellé helyezést float-tal egyszerűen megoldható. Viszont találtam egy nagyon jól működő jQuery plugint (http://flesler.blogspot.com/2009/05/jqueryscrollto-142-released.html), ami nem-drupal oldalon kiválóan megy, ha viszont egy Drupal7 sminkbe elkezdem beépíteni, "val is undefined" hibát ad, és nem működik.

Mi lehet a megoldás? Ha másik plugin-t kellene / lenne érdemes használni, melyiket?

Köszönöm.

Taxonomy upgrade extras: 
Sminkek
Drupal verzió: 
7.x
Fórum: 
Sminkek
aboros képe

Beküldte aboros - 2012. április 10. 18.41

"egy Drupal7 sminkbe elkezdem beépíteni"

kéne látni azt, hogy hogyan kezded beépíteni. kérlek írd le milyen fileokat hova helyezel, mutasd a kódrészleteket amiket magad írtál.

0
0

-
clear: both;

aboros képe

Beküldte aboros - 2012. április 10. 19.07

ez is jó?
css:

#block-system-main > .content {
  overflow: scroll;
  height: 400px;
  width: 10000px;
}
article {
  width: 200px;
  font-size: .7em;
  float: left;
  margin: 1em;
}

vagy hasonló.

a jquery scrollto elég sok mindent tud, pontosan mit szeretnél csinálni és ahogy előbb már kérdeztem, miket hova tettél eddig és mit írtál.

0
0

-
clear: both;

Pál úr képe

Beküldte Pál úr - 2012. április 10. 19.17

1) sites/all/default/sminkem/sminkem.info-ba beletettem a js hivatkozásokat:
scripts[] = js/jquery.scrollTo-1.4.2.js
scripts[] = js/scripts.js

2) felmásoltam a fájlokat, a scripts.js-ben ennyi van:

(function($) {
	Drupal.behaviors.myBehavior = {
		attach: function (context, settings) {
		//code starts
		$('a.link').click(function () {
			$('#view-content').scrollTo($(this).attr('href'), 800);
			return false;  
			});  
		//code ends
		}
	}
})(jQuery);

3) sminket újra mentettem a cache ürérítés céljából

4) amennyiben egy link tulajdonjogú hivatkozásra kattintok, a következő hibát kapom vissza:
val is undefined, a 161. sorban. A környék így néz ki:

var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ? parseFloat(val) / 100 * max : val;
0
0
pp képe

Beküldte pp - 2012. április 11. 07.22

scrollTo($($(this).attr('href')), ...

pp

0
-1

Palócz István
https://palocz.hu | https://tanarurkerem.hu

Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 11. 19.59

Már miért lenne ez jó?

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 11. 20.11 

$('#view-content').scrollTo($(this).attr('href'), 800);

Ez csak akkor esélyes, hogy működik, ha a $(this).attr('href') egy oldalon belüli horgonyra való hivatkozást tartalmaz, mint pl. ez: #ide_akarsz_ugrani
Tehát konkrétan ilyen:

<a href="#ide_akarsz_ugrani" class="link">Hopp</a>

Ezenkívül ebben az esetben léteznie kell egy ilyen id-val rendelkező elemnek is, pl.:
<div id="ide_akarsz_ugrani">
Blablabla
</div>

$('a.link')

Ez nem egy "link tulajdonjogú hivatkozás", ahogy Te fogalmaztál, hanem egy "link" osztályba tartozó hivatkozás, tehát olyasmi, mint a fentebb említett példa.

Na, szóval mutass nekünk valami markupot.
Vagy ha van élőben megkukkantható változat, az is jól jöhet.

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 11. 20.43

Most készítettem neked egy jsFiddle demót arról, ahogyan gyaníthatóan Te is szeretnéd használni a plugint, tehát oldalon belüli horgonyokkal, de én a $.scrollTo()-t használom jelen esetben, ami az egész ablakhoz képest görgeti (nem pl. egy adott diven belül).
Remélem lesz haszna.

http://jsfiddle.net/Sk8erPeter/eKcSD/

Esetleg beleszerkeszthetnél, ha nem éppen ilyenre gondoltál, és megmutathatnád, nálad hogy néz ki a dolog.

0
0
Pál úr képe

Beküldte Pál úr - 2012. április 11. 20.55

.. bocs, majdnem azt írtam, hogy nem tudom, hogy kell használni, de már sikerült. Csak itt pont az a baj, hogy fel-le megy a görgetés, amihez pl. nem kellene a scrollTo.

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 11. 22.00

Ahhoz, hogy ilyen full egyszerűen meg tudjam oldani az animált scrollozást, miért ne kellene a scrollTo?
Biztos feltalálhatnám a spanyolviaszt, de mi a fenének.

0
0
Pál úr képe

Beküldte Pál úr - 2012. április 11. 22.06

De ha jól látom, a demo oldalad nem használja a http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js oldalról letölthető scrollTo plugint.

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 11. 22.09

Akkor rosszul látod.
Kattins a jsFiddle bal oldali paneljánál lévő "Manage Resources (1)" linkre, ott láthatod, hogy alapból hozzáadja a felhasznált erőforrásokhoz (include-olja).
Kényelmesebb, mint berakni a tagek közé.

Tessék, oldalra is görget:
http://jsfiddle.net/Sk8erPeter/eKcSD/1/

0
0
Pál úr képe

Beküldte Pál úr - 2012. április 11. 22.26

a demoba, most már használja.

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 12. 09.47

Eddig is használta. Gondold át még egyszer, amit az imént írtam. Kattints a bal oldali részen a "Manage Resources"-ra, ott láthatod a "jquery.scrollTo-min.js" nevű fájlt.

0
0
Pál úr képe

Beküldte Pál úr - 2012. április 11. 20.52

Tehát az oldalamon van egy navigáció, ahol minden menüelem így néz ki, mint pl. ez:
<li><a href="#rolunk" class="link">Rólunk</a></li>
és az oldalon van olyan, hogy <a name="rolunk">Rólunk</a>. Ez annyira így van, hogy amennyiben a menüre kattintok, oda is ugrik, pontosabban nagyon vicces módon amennyiben pl. a "Rólunk" a mostani pozíciómtól jobbra van, akkor odaugrik, de csak annyira, hogy a képernyő jobb szénén megjelenik a "Rólunk".

Sajnos demo oldalt én is csináltam rogyásig, azon jól megy a scrollTo, a Drupal eszik meg valamit, amire én nem jövök rá. De mindjárt varázsolok egy nyilvános demo oldalt.

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 11. 21.58

Idézlek: "

<li><a href="#rolunk" class="link">Rólunk</a></li>

és az oldalon van olyan, hogy <a name="rolunk">Rólunk</a>"

A "name" attribútum megléte miatt alapból működik az, hogy ide-oda ugrabugrálsz az oldalon. Ezt támogatják a böngészők - tehát ebben az esetben ha mondjuk a <a name="rolunk">Rólunk</a> jó messz az alján lenne, akkor a http://example.com/tokmindegy#rolunk cím megnyitására (figyelj a #rolunk-ra) oda is ugrana egyből a böngésző.
DE ez nem jelenti azt, hogy ez egy érvényes jQuery objektum lenne: $('#rolunk')!!! Mivel sehol nem adtad meg a "rolunk" id-t.
Így lenne érvényes objektum: $('[name="rolunk"]') (jQuery-vel elég perverz módon is össze lehet kaparni a DOM-ból az elemeket).

Magyarul ahhoz, hogy a kódod működjön, így kéne kinéznie a markupnak:
<a name="rolunk" id="rolunk">Rólunk</a>
Gondolom látod a különbséget: megadtam az id-t is.

Remélem érthető.

0
0
eager képe

Beküldte eager - 2012. április 12. 00.44

http://www.w3.org/TR/html401/struct/links.html#h-12.2.3

onnantól különösen érdekes, ahol azt írja, hogy "The id and name attributes share the same name space."

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 13. 01.26

Ez nem változtat azon, amit korábban mondtam, és nem is vonja kétségbe az abban foglaltak igazságtartalmát, lényeg röviden:

$('#rolunk')
- mint írtam is, mivel nincs "rolunk" id-vel rendelkező elem az oldalon, nem is fog működni az a kód, amit a kérdező bemásolt. Ergo a $('#rolunk') egy üres objektumot ad vissza!

$('[name="rolunk"]')
Ez viszont működik, "érvényes" jQuery-objektumot kapunk vissza. De talán egyszerűbb lenne hozzáadni az id-t...

Remélem érthető, amit próbálok magyarázni, ha nem világos valami, mindenképp szólj! Ahogy észreveszem, a kérdezőnek sem sikerült még megfejtenie, amit fentebb írtam. :D

Aztán lehet, hogy félreértettem a kommented célját, és csak arra szeretted volna felhívni a figyelmet, hogy a böngészők a name és az id attribútum hatására is alapból támogatják az oldalon belüli ugrálást (a # jel után írt érvényes name-mel vagy id-vel). Mert ha utóbbi, akkor arra csak annyit mondok, hogy igen, ez így van. :)

1
0
Pál úr képe

Beküldte Pál úr - 2012. április 12. 22.10

Nos, lassan, de biztosan haladok.

Sikerült összeépíteni egy demo oldalt, http://drupal.rudan.hu/

Itt kellene működnie, de nem teszi.

Semmi nincsen az oldalon, egy Zen sminkből származtatott smink-kezdemény, valamint a 2 szükséges js fájl.

És továbbra is val is undefined.

Nyilván én rontok el valamit, csak mit?

Köszönöm, P

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 13. 01.27

Engedelmeddel ezt a demót felraktam jsFiddle-re, mert egyrészt itt könnyen szerkeszthető, másrészt a kódolási problémádnak tulajdonképpen a Drupal és a ScrollTo plugin együttműködéséhez abszolúte semmi köze - ez inkább azt bizonyítja, hogy alapvetően értetted félre a ScrollTo működését.

  1. Tehát itt a demo, amit az oldaladon mutattál, ez egész pontosan ugyanaz (még a CSS-sel kapcsolatos dolgok is ugyanazok, a markup is teljesen bemásolva, egyedül a Zen logó elérési útját szerkesztettem át, hogy semmit ne húzzon be a Te oldaladról):
    http://jsfiddle.net/Sk8erPeter/tnVWD/
  2. Ahol a kódodat működőképessé teszem úgy, hogy a jelenlegi HTML-felépítésen SEMMIT nem változtatok, csakis a JavaScript-kódon:
    http://jsfiddle.net/Sk8erPeter/tnVWD/1/
  3. Ahol a HTML-tartalmakat apró módosítással átszerkesztem úgy, hogy az eredeti kódod működjön:
    http://jsfiddle.net/Sk8erPeter/tnVWD/2/
    Lásd a kommenteket az egyértelmű magyarázathoz!
    A lényeg: az eredeti kódod teljesen működőképes volt a markup id attribútummal történő kiegészítésével, amelynek az értéke megegyezett a name-ével:
    <a name="rolunk"></a>
    HELYETT lett
    <a name="rolunk" id="rolunk"></a>
    - és íme, a demo bizonyítja, így már működik. Az "Akkor meg is van, miért nem megy" című hozzászólásomban pont ezt fejtegettem. :)

Remélem így már mindenki számára tiszta.

2
0
eager képe

Beküldte eager - 2012. április 13. 18.33

Nem csak ezért, hanem a munkádért általában.

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 13. 22.41

Én is köszi, még a végén elpirulok :D, és nincs mit, öröm, ha tudok valakinek segíteni, különösen, ha a Drupal-közösség tagja. :))

0
0
Pál úr képe

Beküldte Pál úr - 2012. április 13. 23.48

Hála és köszönet, valóban ez volt a hiba. Most, hogy így újra leírtad, érthetővé vált az előző bejegyzés is, amire hivatkozol, valószínűleg az én készülékemben volt a hiba, hogy elsőre nem értettem meg.

Még egyszer, köszönöm szépen!

0
0
Sk8erPeter képe

Beküldte Sk8erPeter - 2012. április 14. 14.03

Szívesen, örülök, hogy megtaláltuk a megoldást!

0
0