« 1 2 »
Autor Zpráva
Zdenka
Profil
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
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
Keeehi:
Díky moc.

1. Budu hledat...
2. Funguje :-). Hezké jednoduché řešení.
Zdenka
Profil
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
O řádek výše vám chybí </script>
Zdenka
Profil
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
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;
  });
nebo
$('.next a').click(function (){
    $('#druhy').load($(this).attr('href'));
    return false;
  });
ale nefunguje.
Keeehi
Profil
To co máš v [#8] přiváže událost onclick na elementy v době svého spuštění. Když se změní obsah, vytvoří se nové elementy a na ty už to navázané není. Takže buď to po vytvoření těch nových spustit znova a nebo použít .live (v novějších verzích by se snad mělo místo .live používat .on)
pcmanik
Profil
Keeehi:
Ani v starsich verziach nieje dobre pouzivat live, stale je tu moznost delegate.
Zdenka
Profil
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
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
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
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
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
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
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
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
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
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
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
$('#prvni a').click(
Tam máte 2x, jednou ve script.js, podruhé rovnou v kódu. Nevím, jak to má jquery řešené, zda se to netříská.


$('#druhy').load(page+".htm #sub-content")
#sub-content je tam zbytečně, to se k to co je za hashem se k servru vůbec nedostává.
Zdenka
Profil
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;
        })
})
tak se soubor nenačte vůbec. Je to špatně?
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")
pořád tam máte zbytečné znaky
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
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)
    }
})
Není tem ještě přidaný ten vykřičník a snad jsem nic nerozbil.

Ještě si nejsem jistý tímto řádkem:
$(window).on('hashchange',hashChange).trigger('hashchange');
Na jquery nejsem odborník, ale zdá se mi přeplácaný. Když se na window zachytí hashchange, vyvoláváte znovu hashchange? Možná to tak je správně, ale nezdá se mi to.
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
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
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
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.
« 1 2 »

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: