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

1. 8. 2011 20:12:27

tady jsem to zkoušel na stránce, kde nejsou narozdíl od té původní ukázky žádné jiné skripty jako cufon, modernizr a žádné html tagy a vypadá to, že to funguje i v IE8.

http://scroll.radekpleskac.com/

1. 8. 2011 20:12:27

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

polakpet

(2 hodnocení)

1. 8. 2011 20:20:57

Díky moc za tvou snahu! Vážím si toho, nicméně v mém IE 8 to zase nefunguje. Kliky vpřed se hezky odanimují(což u prvního webu v IE8 nešlo) a tlačítko zpět vždy vrátí stránku úplně nahoru. Jedno kam klikám a kolikrát:-x V čem je chyba, netušíš?

1. 8. 2011 20:20:57

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

800XE

(8 hodnocení)

1. 8. 2011 20:40:53

Proč tam třeba není Google Chrome? Proč tam není Opera 10; 11?

Google Chrome spadá pod jádro webkit, takže to je ta světle zelená čára a u Opery se počty uživatelů tradičně moc nehýbou.

Tobě nevadí, když skoro šestině uživatelů nebude fungovat Tvůj web korektně?

Mě záleží na tom, aby se drtivé většině zobrazil web správně.

Fungovat korektně by měl, to každopádně. Ale jestli se někomu, kdo si za pět let nenašel pět minut na upgrade prohlížeče bude animovat posuv stránky při procházení historie nebo mu to rovnou skočí na příslušné místo, to by mi bylo celkem ukradený. "Na funkci to nemá vliv".

Jinak jedno řešení mě napadá. Je to sice trochu prasárna, ale mohlo by to fungovat. Zkusím, jestli to není blbost a dám vědět.

1. 8. 2011 20:40:53

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

polakpet

(2 hodnocení)

1. 8. 2011 20:51:47

Ano, je to tak - Google je založený na Webkitu. To, že Toplist.cz sčítá dohromady Chrome a Safari, něco říká o Toplistu jako vhodnému zdroji informací. Komentář k číslům u Opery neberu. To, že se čísla tradičně nemění znamená co? To, že když za 31.7.2011(jakožto reprezentativní prvek "statistiky") bylo v sekci Auto-moto 0.01% uživatelů Opera 8.x a 8.74% uživatelů Opera 9.x, co to znamená ve vztahu k Opeře 11.x? Tohle vlastně ani není k diskuzi. Zkrátka tahle tabulka není zdroj seriozních informací. Ale nepřesná statistika malého vzorku internetových stránek.

Promiň, náš pohled na věc je zcela zásadní. Můj způsob myšlení a práce je silně pro-zákaznický. Respektuju Tvůj názor, že pokud si uživatel nenašel za dva roky čas aktualizovat prohlížeč, dobře mu tak,.. nicméně zákazník je pán. A mou povinností je přizpůsobit se zákazníkovi/uživateli. Ne on mě. On není povinný aktualizovat software, i když je to doporučováno. Někdo to třeba udělat neumí/nechce. Jsou firmy, které mají bezpečnostní pravidla pro užívání PC a třeba neschválí instalaci nové verze některého softwaru. A někdo je prostě jen líný. Je mi to fuk, když je to můj zákazník, musím mu vyjít vstříc. Obzvlášť, když se bavíme o jedné šestině(pokud teda zrovna pro účely diskuze používáme čísla TOPlistu) z celého počtu.

A poslední odstavec - těším se na to, co vymyslíš. Jestli to bude fungovat, bude to určitě zajímavé... Minimálně to bude výborná inspirace, i když třeba něco neklapne. Sem s příkladem, i kdyby to nakonec nešlo.

1. 8. 2011 20:51:47

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

Plesin

1. 8. 2011 21:52:36

Tak jsem se díval jak to ten plugin vlastně dělá. On těsně před tím než nastaví prohlížeči location.hash, tak aby zabránil tomu, že se stránka okamžitě posune, tak vytvoří link s id stejným jako je cílový element a dá mu pozici úplně stejnou, jako je současné posunutí stránky, čili ona se ta stránka vůbec nehne když se nastaví location.hash a pak se ten link zase odebere ze stránky a dokončí se ta animace. Dojde k tomu, že na krátkou chvíli jsou v DOM dva elementy se stejným id, a to teoreticky může způsobovat ten problém s IE. Protože jestli jsem se díval dobře, tak ten plugin nemá žádnou událost na sledování změny hashe při návratu v historii a tedy by tam neměl javascript hrát vůbec žádnou roli.

Samotnýho mě to zajímá, zkusím se na to ještě zítra podívat.

1. 8. 2011 21:52:36

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

Tom

(6 hodnocení)

1. 8. 2011 22:24:44

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" :-)

Nedotklo se mě to.

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.

- Uznávám, že 15% je hodně, ale pro třeba na jednom mém webu tvoří podle GA IE8 asi 2.5%. Ale každopádně, jak už jsem psal, můžeš vytvořit alternativu. To bych při 15% určitě doporučil.

Ad Toplist: byl to první zdroj, který mě napadl - řekl bych, že má k dispozici slušné množství dat, takže by mohl být relativně přesný - ale nemá cenu o tom tady polemizovat, pokud o to máte zájem, můžete založit nové vlákno.

1. 8. 2011 22:24:44

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

800XE

(8 hodnocení)

1. 8. 2011 23:50:35

Hm, dá se to rozběhat všude, jen v tom ******** IE ne. Problém je v tom, že IE nějak divně uchovává kotvy(www.adresa#kotva) v historii. Při prvním průchodu historií zpět se kotvy nezobrazují v adresním řádku, ale v location.href normálně jsou. Při následném průchodu vpřed, ani při dalším průchodu zpět už tam ale nejsou, takže není podle čeho určit, na který prvek se má doscrollovat. Podle mě se tím nejspíš nemá smysl dál zabývat.

---------- Příspěvek doplněn 02.08.2011 v 05:47 ----------

Tak nakonec mi to nedalo, ještě jsem se v tom chvíli vrtal a nejspíš mám řešení. Funguje to ve všech prohlížečích včetně IE8/IE9:

<!doctype html><html>    <head>        <title></title>        <meta            http-equiv="Content-Type"            content="text/html; charset=utf-8"        />        <script            src="http://code.jquery.com/jquery-1.6.2.min.js"            type="text/javascript"        ></script>        <script            src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"            type="text/javascript"        ></script>        <script            src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"            type="text/javascript"        ></script>        <script type="text/javascript">            var                                /**                 * Zjistí aktuálně nascrollovaný prvek                 *                 * @param _default Prvek, který se vrátí při neúspěchu                 */                target = function(_default) {                    return '#' + (location.href.split('#') || _default);                },                previous = target('test1');            // Inicializace            $(function() {                $(window)                                        // Nascrolluje na první prvek                    .scrollTo(previous)                                        // Scrollování na aktuální prvek při změně url/historie                    .hashchange(function() {                        // Aktuální prvek                        var current = target('test1');                        $(this)                                                        // Nascrolluje na předchozí prvek bez prodlevy kvůli                            // automatickému skoku na pozici zapamatovanou prohlížečem                            .scrollTo(previous)                                                        // S prodlevou nascrolluje na aktuální prvek                            .scrollTo(current, 500);                        // Workaround pro IE                        if ($.browser.msie)                            location.href = current;                        // Uloží aktuální prvek                        previous = current;                    });            });        </script>        <style type="text/css">            body {                margin: 0;                padding: 0;            }                        #navigation {                position: fixed;                top: 0;                left: 0;                right: 0;                background: black;                text-align: center;            }                        #navigation a {                color: white;            }                        #navigation a + a {                margin-left: 10px;            }                        div {                width: 100%;                height: 1100px;            }            #test1 {                background: orange;            }                        #test2 {                background: green;            }                        #test3 {                background: red;            }                        #test4 {                background: yellow;            }        </style>    </head>    <body>        <div id="navigation">            <a href="#test1">                1            </a>            <a href="#test2">                2            </a>            <a href="#test3">                3            </a>            <a href="#test4">                4            </a>        </div>        <div id="test1"></div>        <div id="test2"></div>        <div id="test3"></div>        <div id="test4"></div>    </body></html>

1. 8. 2011 23:50:35

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

(20 hodnocení)

2. 8. 2011 11:23:04

zda se ze to neanimuje v opere, proste to jen preskoci, ale aspon uz jde ten IE :)

2. 8. 2011 11:23:04

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

800XE

(8 hodnocení)

2. 8. 2011 16:10:57

Co máš za verzi Opery? Testoval jsem to v 11.1/11.5 na Linuxu i ve Windows a mě to funguje. I když teď jsem si znova prohlídl ten kód a bylo tam pár nesmyslů, tak jsem ho trochu upravil.

2. 8. 2011 16:10:57

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

polakpet

(2 hodnocení)

2. 8. 2011 22:37:13

Zdá se, že jsi na to opravdu přišel. Můj počítač s Operou 11.5 animuje krásně tam i zpět. I IE8, i když tam před samotnou animací proběhne okamžikové probliknutí, to ale je teď zanedbatelné, protože se zdá, že máme vyřešené jádro celého problému... Ještě to ověřím i na jiných konfiguracích, když Aleš říká, že mu to nejede v Opeře.

---------- Příspěvek doplněn 02.08.2011 v 22:40 ----------

Jadro007: Panečku, Toplistu bych v dnešní době věnoval místečko v muzeu, a ne diskuzní vlákno:-))

To, že křižovatkou se semafory kousek od mého zaměstnání projede denně slušné číslo aut ještě neznamená, že složení všech aut, které projedou křižovatkou říkají něco o rozložení modelů aut mezi lidstvem celosvětově.

2. 8. 2011 22:37:13

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

800XE

(8 hodnocení)

2. 8. 2011 23:59:18

Jsem rád, že to funguje. Jinak je to jenom takový nástřel, napadá mě plno vylepšení včetně odstranění toho problikávání, ale to už nechám na vašem programátorovi ;-).

2. 8. 2011 23:59:18

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

Kovboj

(13 hodnocení)

3. 8. 2011 20:16:26

Napsal polakpet;683802
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.

Lehká OT poznámka - taková navigace na jedné "ohromné stránce" je sice efektní, ale sebevražedná záležitost z hlediska SEO a obecně přístupu z vyhledávačů.

Rozhodně by bylo lepší udělat to vše jako samostatné stránky, v rámci JS by se asi dalo řešit že by stránka po kliknutí na odkaz nejdříve třeba odrolovala nebo zčernala a po načtení nové stránky opět s nějakým efektem plynule najela. Zjednodušilo by to navigaci, přístup z vyhledávačů, zobrazování v minoritních prohlížečích i rozšiřování obsahu do budoucna. Pokud by prohlížeč nedokázal zpracovat ty funkce JS tak by to fungovalo jako normální stránky. Řešení jedna velká stránka znamená by v takových prohlížečích nefungovalo buď vůbec nebo jako jedna gigantická nepřehledná stánka.

3. 8. 2011 20:16:26

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

polakpet

(2 hodnocení)

4. 8. 2011 15:07:07

Napsal 800XE;684742
Jsem rád, že to funguje. Jinak je to jenom takový nástřel, napadá mě plno vylepšení včetně odstranění toho problikávání, ale to už nechám na vašem programátorovi ;-).

jsem zvědav, jak si s problikáváním poradí.....

Napsal Kovboj
Rozhodně by bylo lepší udělat to

Díky za tip, nicméně to ROZHODNĚ není lepší. Je to lepší z Tvého subjektivního pohledu. Z mého je to lepší takhle. O způsobu dělat web na několik podstránek už jsem slyšel. Nicméně uděláme to takhle. To není k diskuzi:-)

4. 8. 2011 15:07:07

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