| Autor | Zpráva | ||
|---|---|---|---|
| 4li3n Profil |
#1 · Zasláno: 7. 4. 2015, 14:14:41
Dobrý den,
rád bych vyřešil problém, kdy mám: 1. Představte si dvě stránky vedle sebe, na každé libovolně dlouhý obsah s několika kotvami 2. Mezi těmito stránkami potřebuji přecházet doprava a doleva - pomocí kotev 3. Dále potřebuji procházet dolů a nahorů pomocí kotev Řešení na podpoře jQuery. Výsledkem by mělo být, že nahoře budu mít menu, které budu fixovat po odrolování, prvních několik odkazů bude přes kotvu odkazovat někam "dolů" na první stránce, dalších několik odkazů bude přes kotvu odkazovat někam dolů na druhé stránce. Pokud kliknu na první stránce na odkaz, který odkazuje na druhou stránku někam doprostřed, výsledkem bude posun doprava a dolů na danou kotvu. To samé obráceně z druhé stránky klik na první - doleva a pak vertikálně na danou kotvu. Hledal jsem různé multi-screen widgety atd. ale vždy se našel nějaký problém, který jsem nemohl vyřešit a tak si jdu zkusit říct o pomoc. Kdybyste někdo o něčem šíkovném věděl, bylo by to super. Onepage design by problém nebyl, ale to rozdělení do dvou sloupců mezi kterými se přechází mi dělá trochu problém. Za každý nápad budu vděčný, potřebuji to nějak vyřešit, úprava řešení není prakticky možná, zadání je tak nějak fixní. Díky. |
||
| Keeehi Profil |
#2 · Zasláno: 7. 4. 2015, 14:48:51
Nejjednodušeji takto.
|
||
| 4li3n Profil |
#3 · Zasláno: 7. 4. 2015, 15:47:37
Díky, nicméně zde je ten problém - tohoto bych asi s trochou snahy dosáhnul taky, ale já bych potřeboval mít prvně ten pravý div mimo obrazovku a po kliknutí na některou položku menu, která by mířila na nějaký obsah z pravého divu, ho teprve zobrazit efektem přejetí doprava a dolů (nahoru) na kotvu..
Rozumíme si? Já nevím jak to lépe popsat... Zkusím ještě jednou: mám monitor 1920x1080 (například, jinak volitelně), načtu obsah (nějak, s tím si poradím, jde mi opravdu spíš o to provedení JS) do dvou sloupců, každý z nich bude mít šířku 1920 a libovolnou délku. V každém z nich bude několik kotev. Na všechny tyto kotvy bude odkazovat fixované menu k hornímu okraji obrazovky - po odrolování - to také není problém... Problém je, když první 4 odkazy menu a druhé 4 odkazy menu budou odkazovat na kotvy v jednotlivých sloupcích, přitom po příchodu na web uvidím pouze sloupec vlevo... Když kliknu například na 6. odkaz, který odkazuje na druhou kotvu v druhém sloupci, potřebuji, aby se celé okno posunulo doprava a pak dolů na tu kotvu a tak naopak - pak kliknu například na 7. odkaz, tak sjedu "jen dolů" protože jsem již byl v pravém sloupci s obsahem. Pak kliknu na 2. odkaz a přejede mi to vlevo a nahoru, protože se obsah nachází v levém sloupci. |
||
| Keeehi Profil |
#4 · Zasláno: 7. 4. 2015, 16:48:10
4li3n:
Tohle se už prostě musí oskriptovat. Pak je už ale naprosto jedno, zda je to kotva nevo cokoli jiného. Prostě si javascriptem zjistíte pozici toho prvku který se má zobrazit a k němu přescrollujete. Teď jdu spát. Pokud to bude aktuální až vstanu, tak se na to můžu zkusit podivat. |
||
| 4li3n Profil |
Díky, aktuální to určitě bude, dneska už jsem to odstavil do fáze "počkám, co tu vymyslíme". Scrollování dolů a nahorů je OK (to mám právě řešené přes kotvy a jQuery pro plynulý přechod), jen do těch stran sem to prostě nevymyslel :)
|
||
| Chamurappi Profil |
#6 · Zasláno: 7. 4. 2015, 17:04:18
Reaguji na 4li3na:
„do dvou sloupců, každý z nich bude mít šířku 1920 a libovolnou délku“ Na šířce sloupců nezáleží. Dáš-li je do rodiče o šířce 200 %, bude každý přes celou obrazovku a kotvy by měly fungovat pořád normálně. |
||
| 4li3n Profil |
Aha, tak pozor, to mě nenapadlo, že by to mohlo být až tak trapně jednoduché - tedy aspoň ten základ...
příklad Zkusil jsem si s tím pohrát, nicméně tady zase vyvstal problém, že po kliknutí na odkaz se mi nevycentruje ten obsah druhého (a poté zpátky už ani toho prvního divu). |
||
| Keeehi Profil |
#8 · Zasláno: 8. 4. 2015, 04:15:30
4li3n:
Když se to IDčko přidá divům, které mají class="wrap" tak už to centrované je. Takže řešením by mělo být přidat tam nějaké obaly navíc.
<div class="wrap">
<div id="kotva1">
<div class="body">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
<div id="kotva2">
<div class="body">
<p> ... </p>
</div>
</div>
</div>
<div class="wrap">
<div id="kotva3">
<div class="body">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
<div id="kotva4">
<div class="body">
<p> ... </p>
</div>
</div>
</div>Když jsem se ale na tu ukázku koukal na mobilu, tak jsem ty 2 stránky měl pod sebou místo vedle sebe. Asi to nějak špatně zvládá tu 200% šířku, tak si to nezapomeňte zkontrolovat. |
||
| 4li3n Profil |
#9 · Zasláno: 8. 4. 2015, 10:30:15
OK, další "problém" ale nastane, až bude potřeba udělat normální kotvu v textu na text - například na nadpis (a že ten problém reálně nastat může)...
Ty telefony taky nic moc, je tam v plánu i mobilní verze, ale ve stejném duchu - opět dvě stránky na oko "vedle sebe". Plus další věc na zamyšlenou - běžně řeším posouvání po stránce takhle: $('a[href*=#]').on('click', function(event){
if($(this).hasClass('external')==false){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top-100 }, 2000);
}
});
Což asi taky nebude ono, když to řeší jen vertiální polohu... Jak z toho ven? |
||
| Keeehi Profil |
#10 · Zasláno: 8. 4. 2015, 14:15:41
4li3n:
Řekl bych že bude existovat i {scrollLeft:$(this.hash).offset().left-100 }
|
||
| 4li3n Profil |
#11 · Zasláno: 8. 4. 2015, 21:58:24
Tak jsem pokročil, nicméně stále je tam problém....
http://jsfiddle.net/pj39dw5x/6/ pokud je v css na html,body overflow-x:hidden aby nebylo videt spodni tahlo, tak nescrolluje (respektive scrolluje jen ve firefoxu, ale ne ve chrome - jinde jsem nezkousel, potrebuji, aby to fungovalo vsude).... Někdo nějaký nápad na jiné řešení? |
||
| 4li3n Profil |
#12 · Zasláno: 8. 4. 2015, 23:27:56
Tak a je tu další update:
http://jsfiddle.net/pj39dw5x/8/ Vyřešil jsem funkčnost - když se overflow-x:hidden dá jen na body a nikoliv na html, začne fungovat i to scrollování přes jQuery - nalezeno na netu... Poslední věc co mě trápí je to, že když se pohybuji v pravém sloupci obsahu a začnu si hrát s velikostí okna (popotahovat doprava a doleva) tak se mi začnou motat obsahy dokupy - asi protože pořád počítáme s relativní šířkou obsahu a sloupců... |
||
|
Časová prodleva: 9 let
|
|||
0