Rollovať stránku do strany po kliknutí na odkaz a zobraziť nový obsah – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Čaute

Mám na stránke odkazy, ale chcem to urobiť tak, že keď sa na ne klikne, tak sa stránka odznova nenačíta ale rolluje sa celá do strany a na konci rolovania tam bude to, čo sa má po kliknutí na odkaz zobraziť. Napadlo mi to riešiť takto:

1. Keď sa klikne na odkaz, zmení sa len anchor (teda časť v url za #) a hneď potom sa spustí nejaký jquery kód

2. Tento kód najprv pomocou ajaxu vygeneruje novú stránku a celú ju vloží doľava alebo doprava od súčasnej stránky . Vôbec neviem ako to urobiť, aby na predošlej stránke nebolo z novej stránky nič vidieť. Pomocou CSS ? Ako má vyzerať HTML ?

3. Všetko sa rollne na novú stránku

4. Teraz sa celá prvá stránka z HTML vymaže aby neplnila miesto a ani by nemalo ísť spoznať, že nová stránka vznikla posunutím z nejakej starej ... malo by to mať rovnaký formát, aby sa zasa z tejto novej stránky išlo rollnuť na nejakú úplne inú stránku po kliknutí na iný odkaz.

Problém môže robiť ešte to, že na starej stránke nemusím byť úplne navrchu, ale zato na novej by som na vrchu mal byť. Dalo by sa celé toto riešiť tak, že všetky veľké div-y na stránke by mali position: fixed alebo absolute (každá stránka môže obsahovať do 10 veľkých div-ov, dalo by sa to urobiť aj tak, že všetky by boli v jednom najväčšom) a stránka by bola vždy len na celú obrazovku a scrollovanie hore/dole by som riešil jquery posúvaním pozícií ? Bude to dostatočne rýchle ? Ako sa správa position:fixed alebo absolute ak sú tam záporné hodnoty ? Ako by to vlastne išlo celé urobiť tak, aby mi na stránke nikdy nevyskočil scrollbar, ale ak by niečo vychádzalo za okraj, tak by sa to proste nezobrazilo (mám pocit, že sa dá urobiť jeden obrovský div presne cez celý monitor s position: fixed a ostatné by boli  jeho deti s position:absolute a overflow:hidden)
Ešte jedna poznámka: Samozrejme nechcem ajaxom načítať stránku celú, len nejakú jej kostru, potom ju zobraziť a obrázky nahradiť nejakým "loading" obrázkom a postupne by som od vrchu obrázky sťahoval a nahrádzal. Myslím, že to by malo fungovať v pohode.

Takže čo si myslíte o celom tomto prístupe ? Je to úplne zle a mám sa tomu vyhnúť, alebo si myslíte, že by to mohlo fungovať ?

Ďakujem

Napad dobrej, ale webove nepraktickej. Prohlizec ma tlacitko vpred a vzad. Kliknuti na tlacitko ovladane javascriptem, ajaxem nezmeni stranku a ani za #. Tudiz, ty si sice nactes novou stranku, ale na kliknuti tlacitka zpet (history.back) se vsechno, cos naklikal, ztrati a kliknutim vpred se dostanes pak do nuloveho stavu, pred klikanim. Urcite ti to nebude vadit?

Pak zkus prostudovat tohle
https://www.google.cz/search?…
http://programujte.com/…st-promenne/

Pripadne, jestli tam nechces cpat 200k javascriptu pro jquery, tak v js se to jmenuje httprequest
http://peter-mlich.wz.cz/…pw/ajax.html
 

#2 peter
Dle mého je nejlepší promítat do iframe. (Vždy to chce mít ID a Name stejné.) Hisotrie většiny prohlížečů to bere a nestojí tě to více, než atribut target... Navíc s iframe můžeš zacházet pomocí DHTML.

#2 peter
Ďakujem za linky ... ale nechápem to o tej histórii. Ja som to plánoval urobiť tak, že len, čo sa klikne na link, tak poviem browseru (neviem presne ako), aby na ten link prešiel (stranka.sk/#nieco) a až potom sa spustí js na pohyb tej stránky. Vo firefoxe mi v pohode back v histórii ide cez všetko, aj cez rôzne návestia ...  na iných browseroch to nerobí ? Lebo musí to fungovať tak, že ak sa napíše priamo do adress baru v browseri stranka.sk/#nieco, tak sa to načíta správne. Pôjde to ??.... dúfam že to neskrachuje na tomto. Ale nestačilo by jednoducho vždy keď broser načíta tú stránku (stranka.sk/#na_tom_nezalezi) spustiť js, ktoré skontroluje, či je niečo za # a podľa toho to načíta ?? To viem že ide ... Takže už len treba urobiť, aby sa po kliknutí na odkaz na stránke okrem tých všetkých posunov a tak zmenila aj časť v adrese za # ... Ak dám normálny <a> odkaz s href "stranka.sk/#nieco" a dám k tomu jquery onclick, ktorá načíta novú stránku a urobí posun a tak ďalej, náhodou sa samotná zmena adresy v browseri nezmení až na konci ? Ak áno, tak jednoducho nenájde potrebné návestie a nič sa nezmení .. alebo sa mýlim ??

:) Nevim, jestli ti uplne zcela rozumim. Precetl jsem si to cele uplne znovu. Prijde mi, ze o JS nemas ani pojeti a vymyslel jsi si hodne slozity problem. Jako, ti to programovat nebudu za tebe :)
Uz jenom nacist stranku a pak do ni nacitat obrazky pres jquery je dost zajimavy problem. Nejspis bys je musel v kodu nejak nahradit.

http://jqueryui.com/effect/
- http://jqueryui.com/show/ , kliknes na Run
- http://jqueryui.com/toggle/
http://jquery.malsup.com/cycle/

http://css-tricks.com/snippets/jquery/smooth-scrolling/ - kliknes na view demo (google = jquery hash scroll down)
http://tympanus.net/…with-jquery/ - opet na view demo (jestli to spravne chapu, ma to nactene do jedne stranky)

Pres meta tag v IE funguji js efekty transtitions. Nepouziva to hash. Mozna by te to take zaujalo.
http://www.webdevelopersnotes.com/…b_pages.php3

https://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

<META http-equiv="Page-Enter"
CONTENT="progid:DXImageTransform.Microsoft.Blinds(Duration=4)" />

<META http-equiv="Page-Exit"
CONTENT="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" />

(Je tam furu prikladu, ale na ten meta zrovna nee, nicmene si ho muzes snadno udelat. Pozor, jen v IE je zarucena funkcnost)