Animovaný odkaz na jiné místo v dokumentu vs. korektní funkce historie prohlížeče

1. 8. 2011 08:21:18

Ahoj Webtrh people,

co teď napíšu, je otázka z pohledu člověka poučeného, nikoliv znalého. Z pohledu člověka, který je spojovacím článkem mezi zákazníkem a developerem. Jak se tomu mezi laiky říká, projektovým vedoucím.

Proto, prosím, omluvte ne úplně korektní "pravopis" popisu mého technického problému. Myslím, že ale popis bude pochopitelný a díky uvedenému příkladu naprosto jasný.

Snažíme se budovat web, který je složen pouze z jediné stránky, a odkazy v menu jsou pouze prokliky na jiné místo ve stejném dokumentu. Chceme, ať je přechod efektně animovaný - viz. stieglarsson.se.

Jenže je tady potíž: pokud se snažíme o to, aby byly prokliky efektně animované, nedaří se nám, aby korektně fungovala historie prohlížeče. Je totiž nanejvýš nevhodné, aby po kliknutí na tlačítko zpět, nebo udeření do klávesy backspace, nebyl uživatel vrácen na poslední položku, ale třeba do výsledků vyhledávání Google či jinou zdrojovou stránku prokliku.

Pokud použijeme obyčejné proklikávání se skokovým přechodem mezi místy dokumentu, funguje historie, samozřejmě, v pořádku. Ale to zase není ono.

Můžete si všimnout, že ani u zmíněného webu stieglarsson.se historie nefunguje korektně. Zatím se mi nepodařilo najít žádný příklad toho, aby fungovala i animace i historie. Developeři to většinou(byť pro mě naprosto nepochopitelně) neřeší a nechají efekt bez efektivity.

Dokáže nám někdo poradit? Nechcete-li odhalovat své know-how veřejně, pište do privátních zpráv nebo na můj mail. Můj developer je po týdenním dumání snad už ve slepé uličce a proto pro mě není problém odměnit autora řešení částkou z budgetu za projekt.

1. 8. 2011 08:21:18

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661453

(20 hodnocení)

1. 8. 2011 08:52:12

pridavat do adresy sekci s # samozrejme nalinkovane na odkazy v menu... pokud to vas programator nevi nebo nevi jak upravit existujici reseni aby pridal tuto fci, je nejvyssi cas ho vymenit....

1. 8. 2011 08:52:12

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661452

polakpet

(2 hodnocení)

1. 8. 2011 08:56:22

Dobrý den Aleši,

nejspíš nerozumím Vašemu příspěvku. Nechcete to napsat jinak? Přijde, mi, že mi radíte, abych použil # odkazy na odkazování do jiného místa dokumentu. Ale tu techniku známe. Jen nám nejde zkombinovat, aby to fungovalo správně se zápisem do historie prohlížeče a zároveň byl ten přechod na odkazy animovaný.

Díval jste se na přiložený odkaz? Prakticky to funguje, jak si představuji, ale pokud kliknete na "zpět", jste okamžitě tady na webtrhu, místo toho, abyste se vrátil o jeden krok v rámci toho dokumentu.

Možná Vám jen nerozumím...

1. 8. 2011 08:56:22

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661451

ghostik

(21 hodnocení)

1. 8. 2011 09:03:08

rekl bych, ze chovani je otazkou interpretace prohlizece:

FF 5.0:

funguje historie pekne po backspace i tl. zpet

Chrome:

nefunguje ani zpet ani backspace

Opera 11.11

nefunguje ani zpet ani backspace

IE 8:

nefunguje ani zpet ani backspace

Safari 5.0.1:

nefunguje ani zpet ani backspace

Vse testovano na XP.

Nejsem takovy programator, abych tu psal reseni, jen me napadlo to ukladat do cookies ci neco podobneho.

1. 8. 2011 09:03:08

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661450

(20 hodnocení)

1. 8. 2011 09:04:03

jde o to, ze prohlizec uklada stav pred zmenou adresy a to vcetne zmen adresy pomoci # coz je mimo jine jedina mozna zmena bez opusteni dokumentu... tudiz pres javascript prescrolujeme na jine misto (klidne animaci) a zaroven zmenime adresu s pomoci # tedy odkazu na jine misto dokumentu (jeste pred zacatkem animovani). prohlizec ulozi stav dokumentu pred zmenou adresy, tudiz bude schopen se vratit zpet po kliknuti an tlacitko zpet...

ale opet opakuji ze pokud vas programator tuto zakladni znalost nema, je nejvyssi cas ho vymenit...

1. 8. 2011 09:04:03

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661449

Miroslav Pešťák

(26 hodnocení)

1. 8. 2011 10:14:37

Podobně jako Aleš J. moc nevidím problém... možná že to v nějakých prohlížečích ne zcela funguje, ale zkuste se třeba podívat na jeden z mých webů http://www.bedlive.info/ najeďte dolů na stránku a klikněte na "Back to Top" - javascript vás naroluje nahorů na stránku a v prohlížeči mohu kliknout na zpět a dostanu se na původní adresu bez použitá kotvy #.

Možná jsem také ne zcela pochopil problém, nebo vy hledáte problém kde není!

1. 8. 2011 10:14:37

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661448

(20 hodnocení)

1. 8. 2011 10:16:31

zrovna ten web neni dobry priklad, protoze adresu meni az po prescrolovani takze tlacitko zpet me nevrati zpet dolu :)

1. 8. 2011 10:16:31

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661447

Tom

(6 hodnocení)

1. 8. 2011 10:21:34

A nebo v nových prohlížečích můžete s historií manipulovat, je na to nějaká JS funkce..

Nejjednodušší bude použít tento plugin http://tkyk.github.com/jquery-history-plugin/

Je tam i demo...

1. 8. 2011 10:21:34

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661446

ghostik

(21 hodnocení)

1. 8. 2011 10:32:47

Napsal mirecekp;683828
... http://www.bedlive.info/ ...

toto vam funguje jen ve FF, jinde ne

navic problem viz Ales

1. 8. 2011 10:32:47

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661445

Plesin

1. 8. 2011 12:03:17

Zdravím, jestli je to myšleno nějak podobně jako třeba tady http://www.radekpleskac.com/

Tak to jde celkem jednoduše dosáhnout pomocí jQuery pluginu http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

1. 8. 2011 12:03:17

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661444

polakpet

(2 hodnocení)

1. 8. 2011 17:54:53

Díky všem za vaše dosavadní nápady a rady,

přesto mi zatím žádná nepomohla. Buď to nejsou dobré tipy, které fungují jen v některých prohlížečích nebo omezeně(Plesin - nefunguje v IE 8; mirecekp . funguje jen ve FF; Jadro007) nebo je příliš abstraktní, aby mě ve smyslu chytrého nakopni dostatečně nakopla(Aleš Jiříček - díky němu zatím vím s jistotou jen, že bych dle jeho názoru měl vyhodit developera. Aleši, nemáte nějaký praktický příklad?).

Jak mi to upřesnil developer problém není ve fungující historii, což je podle něj řešitelné i bez pluginů.

Problematikou je(cituji doslova)

jak to spojit s tou animací, protože když při kliku na
odkaz #2 nejprve JavaScriptem změníš hash v URL z #1 na #2, tak
browser rovnou skočí na to místo #2 v dokumentu a animace se tím
"předběhne", takže ji uživatel vůbec nezaznamená, de facto se
přeskočí, JavaScript proběhne až když dokument už je nastavený na
cílové místo.

Ale když uděláš nejdřív animaci na cílové místo a pak teprve změníš
URL, tak když animace skončí, tak prohlížeč už je nascrolovaný na
cílovém místě, a přitom ještě na původní URL a prohlížeč si
zapamatuje, že na téhle URL jsi nascrolovaný na tuhle pozici, takže
když pak změníš URL na #2 a uděláš krok zpět, tak v URL se sice udělá
krok na #1, ale dokument bude pořád nastavený na #2 (takže uživatel
krok zpět vůbec nepostřehne, prostě to neskočí zpět na pozici #1 v
dokumentu), protože ta animace to tam nascrolovala ještě když URL bylo
nastavené na #1, a prohížeč si to zapamatoval. To je právě ten
problém, že prohlížeč při kroku zpět nenačte znovu URL, ale pamatuje
si i pozici scrollu na dané URL. Nějaký nápad, jak to obejít?

Já jsem to zkoušel obejít pomocí onhashchange (poté co se mi po mnoha
pokusech nepodařilo vyřešit to nějakou manipulací s historí
prohlížeče, což má dost omezené limity kvůli bezpečnosti) - aby prostě
změna URL scrolovala z libovolného místa v dokumentu na místo vymezené
v URL, takže by animace fungovaly i po kroku zpět.

Pánové(a dámy), co vy na to?

1. 8. 2011 17:54:53

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661443

(20 hodnocení)

1. 8. 2011 18:03:14

ze jste dostal v predchozim prispevku odkaz na stranku, ktera je resena presne tak jak potrrebujete (a zklousel jsem zda funguje a ano, funguje...) a odkaz primo na jquery plugin co je k tomu urcen "Tak to jde celkem jednoduše dosáhnout pomocí jQuery pluginu http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html " tak proc se bud na zpusob nepodivate tam nebo ho rovnou nepouzijete... nevim jak lepe jeste pomoci :)

1. 8. 2011 18:03:14

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661442

polakpet

(2 hodnocení)

1. 8. 2011 18:09:25

Než začnete soudit svět, zkuste nejprve pozorně číst, Aleši. Ve své odpovědi jsem napsal, že Plesinovo řešení nefunguje v IE8. Technice toho pluginu nerozumím, nevím, jestli jde ta "chyba" jednoduše odstranit, nicméně mám na počítači nainstalovaný IE8 a tam to nefunguje.

Jestli máte v úmyslu ještě dále ponižovat mne nebo kohokoliv dalšího v tématu, prosím, nepište.

EDIT

Text výše vychází z původního příspěvku Aleše Jiříčka, který napsal:

ze jste dostal v predchozim prispevku odkaz na stranku, ktera je resena presne tak jak potrrebujete a odkaz primo na jquery plugin co je k tomu urcen "Tak to jde celkem jednoduše dosáhnout pomocí jQuery pluginu http://flesler.blogspot.com/2007/10/...scroll-10.html " tak proc se bud na zpusob nepodivate tam nebo ho rovnou nepouzijete... vy jste teda vyvojari to by jeden pohledal...

Následně svůj text upravil a proto vypadá můj příspěvek trochu mimo, že si stěžuji na urážky, které neexistují.

1. 8. 2011 18:09:25

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661441

Tom

(6 hodnocení)

1. 8. 2011 18:35:45

Pokud to ty pluginy neumí, tak pravděpodobně proto, že to nejde.

http://toplist.cz/global.html - podíl IE8 mi vychází zhruba 15% (http://www.toplist.cz/stat/?a=history&type=1 - modrá čára) - rozhodni se, jestli ti to stojí za stále zmenšující se podíl jednoho prohlížeče - případně pro něj můžeš vytvořit alternativu.

1. 8. 2011 18:35:45

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661440

polakpet

(2 hodnocení)

1. 8. 2011 18:46:48

Jardo, přestože rozumím tvé pointě, dovolím si trochu hnidopišně polemizovat, neboť jsi přidal dosud druhý příspěvek do tématu a pokaždé je to nedotažená myšlenka. Po nabídnutí pluginu fungujícím jen v jednom prohlížeči, nabízíš statistiku, která nemá příliš vypovídající hodnotu, protože seznam prohlížečů v ní zastoupených je opravdu úzký. Proč tam třeba není Google Chrome? Proč tam není Opera 10; 11? Znamená to snad, že jejich zastoupení je 0%? Nebo snad jsou vvšechny sečteny do kategorie Neznámý? A mají tímpádem nižší procento zastoupení než IE6?

Omlouvám se, jestli by se Tě to dotklo, ale použít takové sloupečky z Toplistu(už ten zdroj sám o sobě není v současnoti moc korektní), to není řádný argument a celková čísla budou výrazně odlišná. Chci tím říct, že jestli chceš být úspěšný, asi budeš muset své myšlenky víc dotahovat? (Opravdu bez urážky)

Nicméně k věci: samozřejmě, že nemá smysl optimalizovat pro všechny menšinové prohlížeče, protože to snad ani není v silách malého studia o pár lidech, nicméně říct, že 15% (i kdyby to bylo přesné číslo) je MÁLO???? Tobě nevadí, když skoro šestině uživatelů nebude fungovat Tvůj web korektně?

To je další důvod, proč bys měl myšlenky dotahovat více do konce. Mě záleží na tom, aby se drtivé většině zobrazil web správně. 15% je moc velké číslo jako "zanedbatelná odchylka" :-)

1. 8. 2011 18:46:48

https://webtrh.cz/diskuse/animovany-odkaz-na-jine-misto-v-dokumentu-vs-korektni-funkce-historie-prohlizece#reply661439