Rollovať stránku do strany po kliknutí na odkaz a zobraziť nový obsah – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
lukas.balaz0
Super člen
25. 1. 2015   #1
-
0
-

Č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

Nahlásit jako SPAM
IP: 80.242.41.–
Reklama
Reklama
peter
~ Anonymní uživatel
2533 příspěvků
26. 1. 2015   #2
-
0
-

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
 

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:ad9f:b4...–
Matěj Andrle+1
Grafoman
26. 1. 2015   #3
-
0
-

#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.

Nahlásit jako SPAM
IP: 78.136.164.–
lukas.balaz0
Super člen
26. 1. 2015   #4
-
0
-

#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 ??

Nahlásit jako SPAM
IP: 80.242.41.–
peter
~ Anonymní uživatel
2533 příspěvků
26. 1. 2015   #5
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:ad9f:b4...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 24 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý