| Autor | Zpráva | ||
|---|---|---|---|
| Zdenka Profil |
#1 · Zasláno: 29. 7. 2012, 09:50:20
Ahoj,
dělám atlas hub pomocí dvou sloupců. Vlevo seznam druhů, vpravo obrázky. Stránky zde. Chtěla bych poprosit o rady: 1. Nevím si rady s tím, jak vlevo psát odkazy, aby se mi načetly do pravého sloupce. Vždycky se to načte celé do levého. Pokud bych načetla oba sloupce znovu, bude to OK (viz první dva odkazy), ale chtěla bych načítat jen obsah pravého sloupce, aby se seznam druhů nevrátil zpět na začátek a nemusel se znovu rolovat. Jde to vůbec? Jak? 2. Pozicování 2.sloupce - v Chrome a Firefoxu funguje, v Exploreru a telefonu s Androidem posunuté (margin-left). Nebo naopak. Co s tím? #first { float: left; width: 200; margin-top:10px; overflow: auto;}
#second { width: 700; margin-left: 210; overflow: none;
position:absolute; margin-top:0px; text-align: center;} |
||
| Keeehi Profil |
#2 · Zasláno: 29. 7. 2012, 10:10:20
Zdenka:
1. Mě se to pro jistotu nenačte do levého sloupce, ale načte se úplně jiná samostatná stránka. Pokud chceš měnit jen část stránky (obsah pravého sloupce) hledej AJAX. 2. Dej oba sloupce float:left; a nepozicuj.
|
||
| Zdenka Profil |
#3 · Zasláno: 29. 7. 2012, 10:18:03
Keeehi:
Díky moc. 1. Budu hledat... 2. Funguje :-). Hezké jednoduché řešení. |
||
| Zdenka Profil |
#4 · Zasláno: 29. 7. 2012, 22:06:13
Tak jsem hledala a našla, ale nefunguje mi to, ani ty nejjednodušší příklady. Netuším proč. Je tam nějaká chyba?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('p.load_it a').click(function(){
$('#demo_content').load('vnejsi.html');
return false;
});
});
</script><body> <p class='load_it'><a href='#'>Klikni.</a></p> <div id='soubor'></div> </body> |
||
| Keeehi Profil |
#5 · Zasláno: 30. 7. 2012, 01:29:27
O řádek výše vám chybí
</script>
|
||
| Zdenka Profil |
#6 · Zasláno: 30. 7. 2012, 08:59:03
Keeehi:
Kde? Jsou tam do páru. Jednu chybu už tady vidím, a to v označení divu, kam se má soubor načíst. Ani po opravě to ale nefunguje. |
||
| Keeehi Profil |
Zdenka:
„Kde?“ řádek 16 <script type="text/javascript" src="ajaxtabscontent/ajaxtabs/ajaxtabs.js"></script> |
||
| Zdenka Profil |
#8 · Zasláno: 30. 7. 2012, 12:35:11
Keeehi:
Aha, díky, já to hledala v tom příkladu, ten jsem měla zvlášť. Už mi to funguje (tedy zatím jen několik prvních odkazů) z levého sloupce do pravého. Ve druhém mám ale ještě navigační šipky a tam si opět nevím rady. Můžu načítat z už načteného? Zkoušela jsem: $('#druhy a').click(function (){
$('#druhy').load($(this).attr('href'));
return false;
});$('.next a').click(function (){
$('#druhy').load($(this).attr('href'));
return false;
}); |
||
| Keeehi Profil |
#9 · Zasláno: 30. 7. 2012, 13:09:55
|
||
| pcmanik Profil |
#10 · Zasláno: 30. 7. 2012, 13:24:24
Keeehi:
Ani v starsich verziach nieje dobre pouzivat live, stale je tu moznost delegate. |
||
| Zdenka Profil |
#11 · Zasláno: 30. 7. 2012, 14:44:40
Keeehi:
Díky moc :-) .on nefungovalo, ale s .live mi to jde. Teď to je podle mých představ. Ještě jednou díky za spolupráci, sama bych to asi vzdala. |
||
| Keeehi Profil |
#12 · Zasláno: 30. 7. 2012, 15:04:16
Zdenka:
Pokud to chcete udělat pořádně, tak vás čeká ještě běh na pořádně dlouhou trať. 1) Máte tam rozsypanou diakritiku, ale to byste měla zvládnout opravit (sjednotit kódování). Odkázal bych, ale nemůžu viz další problém. 2) Při přechodu mezi stránkami se nemění url -> nedá se odkázat přímo na nějakou houbu. Měnit části adresy bez toho, aby se stránky přesměrovali je možné až za #. Proto byste měla při přechodu mezi houbami nějak měnit informaci za tímto znakem. Zároveň i při příchodu na stránku, pokud je za křížkem něco, tak k tomu zobrazit příslušnou houbu. (Existuje sice řešení s měněním celé adresy, ovšem nefunguje v IExploreru, takže se to pro něj musí vytvořit řešení s #, což mi přijde lehce schizofrenní.) 3) Vyhledávače si zatím s ajaxem moc nerozumějí. Ovšem, pokud implementujete bod 2 (s jistými úpravami), zvládá google procházení obsahu načítaného ajaxem. |
||
| Zdenka Profil |
#13 · Zasláno: 30. 7. 2012, 16:03:06
Keeehi:
Já vím :-) Ale chci do toho jít, docela mě to baví a mám radost, když se něco povede. 1) Musím předělat každý druh zvlášť, takže to postupně opravím. Už to samo o sobě bude slušná práce, těch druhů mám tuším víc než 300 a přibývají další fotky a další druhy. 2) Tohle mě docela mrzí, určitě to chci řešit. Zatím se v tom vůbec neorientuji, moje angličtina je dost bídná. Netuším jak tu informaci do adresy dostat a naopak. Budu opět hledat. 3) Pokud se mi podaří bod 2, tak použiji. |
||
| Keeehi Profil |
#14 · Zasláno: 30. 7. 2012, 16:22:41
2)
https://www.google.cz/search?q=hash+fragment+javascript&lr=lang_cs https://www.google.cz/search?q=javascript+location+hash&lr=lang_cs 3) Na to je dobré myslet už při implementaci 2). Nic složitého to není. V krátkosti: odkazy musí být ve tvaru http://example.com/something.php#!foo. Jakmile tento odkaz google uvidí, zavolá adresu http://example.com/something.php?_escaped_fragment_=foo to co dostane tam považuje za obsah, který vidí uživatel když do prohlížeče zadá http://example.com/something.php#!foo.
Dokonce v nástrojích pro správce webu máte možnost se podívat, jak vidí stránku samotný googlebot. |
||
| Zdenka Profil |
#15 · Zasláno: 31. 7. 2012, 12:37:45
Keeehi:
1) Až po písmeno C (včetně) už by ta diakritika měla být OK. Dál jsem se zatím nedostala. 2) Něco zkouším, ale pro změnu mi pak nejde otevřít odkaz v příslušném divu. V atlase to zase nefunguje naopak a nevím proč. 3) Tak jsem to pochopila, pouze si nejsem úplně jistá, že se mi podaří zvládnout bod 2. |
||
| Keeehi Profil |
#16 · Zasláno: 31. 7. 2012, 13:22:38
http://www.beautifulnature.cz/test/hash.js
- pokud se nepletu, tak se snažíte využívat javascriptovou knihovnu seznamu JAK (osobně s ní zkušenosti nemám), ovšem nikde ji tam nemáte přilinkovanou. Proč nezůstanete u jquery když už ji používáte? K části za # se dá v jevascriptu dostat velmi primitivně - location.hash
Existuje událost onhashchange s určitou podporou v různých prohlížečích. Pro ty, co to nepodporují, budete muset změnu hashe kontrolovat preriodicky scriptem, nebo si najít prostě nějaký workaround. |
||
| Zdenka Profil |
#17 · Zasláno: 31. 7. 2012, 14:05:27
Keeehi:
Jednoduše protože se v tom opravdu neorientuji. Tohle mi přišlo celkem srozumitelné, ale zjevně ne dostatečně. Jsem samouk a k pochopení mi chybí základy. Učím se to na příkladech. Teď jsem třeba zkusila použít to location.hash, ale výsledek je stejný a znovu nevím proč. Taky nechápu rozdíl mezi location.hash a onhashchange. Díky za trpělivost .
|
||
| Keeehi Profil |
#18 · Zasláno: 31. 7. 2012, 14:33:52
location.hash je "proměnná" z které mžeme číst to co je za # a nebo pokud do ní něco zapíšeme, tak se to za křížkem objeví.
onhashchange je událost která reaguje na změnu hashe, stejně jako onclick reaguje na kliknutí.
|
||
| Zdenka Profil |
#19 · Zasláno: 31. 7. 2012, 22:41:44
Keeehi:
A proč mi v té zkušební stránce funguje buď jedno nebo druhé? Když smažu link na jeden ze skriptů, tak to funguje, ale obojí najednou ne. |
||
| Keeehi Profil |
#20 · Zasláno: 31. 7. 2012, 22:50:59
hash.js - Na #some žádný odkaz neodkazuje, navíc ani funkce some() nikde nevidím definovanou.
script.js - Neexistují elementy s potřebnými idčky. Vzájemně by se však ovlivňovat neměli. |
||
| Zdenka Profil |
#21 · Zasláno: 31. 7. 2012, 23:23:42
Keeehi:
No to jsem tam nechala nějakou blbost. Teď to celkem jde, ale proč až na druhé kliknutí? A nedala by se ta dlouhá adresa nějak zkrátit? |
||
| Keeehi Profil |
#22 · Zasláno: 31. 7. 2012, 23:32:52
$('#prvni a').click($('#druhy').load(page+".htm #sub-content") |
||
| Zdenka Profil |
#23 · Zasláno: 31. 7. 2012, 23:55:52
Keeehi:
Možná proto mi to prvně šlo buď jedno nebo druhé. Jenže když to zkusím dát dohromady: $(document).ready(function(){
$('#prvni a').click(function(){
location.hash=$(this).attr('href').match(/(^.*)\./)[1];
return false;
$('#druhy').load($(this).attr('href'));
return false;
})
}) |
||
| Keeehi Profil |
return ukončuje přeci funkci; tudíž to končí už na řádku 5 a k 7. se to už nedostane.
$('#druhy').load(page+".htm #")$('#druhy').load(page+".htm") |
||
| Zdenka Profil |
Keeehi:
No to jsou ty moje mezery v základech. Teď už to funguje, takže opět díky. Dá se tam ještě nějak dostat ten vykřičník pro vyhledávač? A jak to upravit pro to co se načítá pomocí .live?
|
||
| Keeehi Profil |
#26 · Zasláno: 1. 8. 2012, 01:12:41
Zdenka:
Vykřičník je v tomto případě stejně obyčejný znak jako třeba m. „A jak to upravit pro to co se načítá pomocí .live?“ Úplně stejně jako ty 2 odkazy, co jsou tam na začátku. Ovšem jsou tam drobnosti, co by chtěli opravit: $(document).ready(function(){
$('#prvni a').click(function(){
location.hash=$(this).attr('href').match(/(^.*)\./)[1];
return false;
})
$('.previous a').live("click", function (){
location.hash=$(this).attr('href').match(/(^.*)\./)[1];
return false;
});
$('.next a').live("click", function (){
location.hash=$(this).attr('href').match(/(^.*)\./)[1];
return false;
});
var originalTitle=document.title
function hashChange(){
var page=location.hash.slice(1);
if (page!=""){
$('#druhy').load(page+".htm");
document.title=originalTitle+' – '+page;
}
}
var lastHash=''
if ("onhashchange" in window){
$(window).on('hashchange',hashChange).trigger('hashchange');
} else {
setInterval(function(){
if (lastHash!=location.hash)
lastHash=location.hash;
hashChange();
},100)
}
})Ještě si nejsem jistý tímto řádkem: $(window).on('hashchange',hashChange).trigger('hashchange');Navíc se to dá zapsat i bez jquery což se mě osobně líbí mnohem víc. var lastHash=''
if ("onhashchange" in window){
window.onhashchange = hashChange;
} else {
setInterval(function(){
if (lastHash!=location.hash)
lastHash=location.hash;
hashChange();
},100)
}Na to ostatní jquery dejme tomu. A když už jsme u toho, rušení přejití na odkaz v té funkci reagující na kliknutí by bylo lepší dělat než pomocí return false; tímto. - preventDefault
|
||
| Zdenka Profil |
#27 · Zasláno: 1. 8. 2012, 11:58:46
Keeehi:
1) Takže vykřičník můžu přidat přímo do názvu souboru? Funguje to, ale nevím, jestli je to správný postup. 2) Uvažuju o tom, dát soubory s druhy do výchozího adresáře a upravit odkazy, protože ta dlouhá adresa s lomítky se mi opravdu nelíbí. Za # by pak bylo jen např. !anyzovnik_vonny což je rozhodně lepší. Navíc pokud budu mít před názvy souborů vykřičník, tak je budu mít řazené přehledně za sebou. 3) Za ten kód moc díky. K načtení souboru z jakéhokoliv elementu je tam tohle? if (page!=""){
$('#druhy').load(page+".htm");4) To window.onhashchange = hashChange; se mi taky líbí víc a tomu původnímu řádku úplně nerozumím.
5) event.preventDefault() - proč? Protože to je jQuery? Nebo je v tom jiný rozdíl?
6)To var originalTitle=document.title a document.title=originalTitle+' – '+page;
asi můžu umazat, stejně to pak vypadá hrozně a chtělo by to vyřešit jinak že? |
||
| Keeehi Profil |
#28 · Zasláno: 1. 8. 2012, 13:23:01
Zdenka:
1) Ne do názvu souboru, ale do adresy. Pak stačí při extrahování ignorovat první znak. 2) Ono hlavně pro to, aby to pak fungovalo pro vyhledávač ten obsah bude muset servírovat php script 3) Moc nerozumím otázce ale nejspíše ano 5) http://css-tricks.com/return-false-and-prevent-default/ Raději jsem vytvořil funkční demo. |
||
| Zdenka Profil |
#29 · Zasláno: 1. 8. 2012, 15:09:59
1) Už chápu, bohužel neznám tyhle možnosti.
2) To mi uniklo a z toho houba.php chápu jen tu druhou část. Ten adresář je tam hezky vyřešen. Třetí až pátý řádek jsem mimo. Nechybí tam ?> ?
3) Že se nemusí specifikovat ID nebo class. Dělá to problém s rejstříkem, záložka latinsky. 5) Díky. Tak to bych nevymyslela, děkuji moc :-) . Nevím, jestli se mám snažit to teď chápat, měla bych asi moc hloupých otázek. Ale vím, že mi to bude vrtat hlavou a postupem času to snad pochopím. Večer se na to ještě podívám a zkusím to použít. |
||
| Keeehi Profil |
Zdenka:
2) Ta první část slouží jako ochrana proti úročníkům. Povoluje jen znaky anglické abecedy a pomlčku. „Nechybí tam ?>“ Nechybí. Není povinná. Navíc, pokud není potřeba, tak je lepší ji neuvádět. Je to hlavně kvůli bílým znakům, která by se za ní mohli vyskytovat, kterých se špatně všímá a když by se pak script includoval do jiného, ve kterém by bylo použit později header("xyz");, mohli by z toho být problémy. Takhle jsou bílé znaky součástí php scriptu kterému je to jedno.
|
||
|
Téma pokračuje na další straně.
|
|||
0