Autor Zpráva
T1000
Profil
Ahoj,
mám na své stránce dlouhou novinku a chtěl bych ji zkrátit.
Takže by to mělo vypadat takto:
začátek novinky...[celý článek]
při kliknutí na celý článek by mělo "...[celý článek]" zmiznout a článek by měl normálně dál pokračovat.
A aby se dole pod tím článkem zase zobrazilo [sbalit] nebo něco takového.

Jsem úplný nováček v Javascriptu (tohle je můj první příklad), ani jsem si nečetl základy, to proto že Javascript nepotřebuju, až teď, ale myslím, že ho zase dlouho použivat nebudu.
Takže kdyby jste byli tak hodní a napsali mi ten script.
Moc děkuji
Eddie
Profil
v php by to nemohlo byt? je to ovela jednoduchsie...
Alphard
Profil
http://www.jakpsatweb.cz/javascript/priklady/skryvani-odkryvani.html
Joker
Profil
Je to vcelku jednoduché:

HTML:
<p>Krátké shrnutí příspěvku</p>
<a href="javascript:zobrazeni('prispevek1',true)">celý článek</a>
<p id="prispevek1">Toto je celý text příspěvku <a href="javascript:zobrazeni('prispevek1',false)">skrýt text</a>
</p>
<p>Krátké shrnutí druhého příspěvku</p>
<a href="javascript:zobrazeni('prispevek2',true)">celý článek</a>
<p id="prispevek2">Toto je celý text druhého příspěvku <a href="javascript:zobrazeni('prispevek2',false)">skrýt text</a>
</p>
<script type="text/javascript">
zobrazeni("prispevek1", false);
zobrazeni("prispevek2", false);
</script>

Javascript:

function prvek(jmeno) {
var obj=0;

// getElementByID - ne-IE prohlizece a nove verze IE
if(document.getElementById){
obj = document.getElementById(jmeno);
}
// document.all - stare verze IE
else if (document.all){
obj = document.all(jmeno);
}
return obj;
}

function zobrazeni(id, viditelny){
el = prvek(id);
if(el && el.style){
el.style.display = viditelny ? "block" : "none";
}
}
Joker
Profil
Pár poznámek:
- Texty příspěvků je potřeba nechat přes HTML zobrazené a potom je Javascriptem skrývat, aby to fungovalo i při vypnutém JS.
- Když vyloučíme IE starší než IE 6 (budou vidět stránku stejně jako ti s vypnutým JS), můžeme zrušit funkci prvek() a místo el = prvek(id); psát: el = document.getElementById(id);
Dero
Profil
T1000: Kolegové už řešení dodali, já mám také jedno, které možná bude vyhovovat trochu přesněji. Ale že by bylo napsáno hezky, to určitě ne. Účelně ano a snad bude i vyhovovat.

http://83.240.10.78/showhide.html
Dero
Profil
Joker: AFAIK IE umí getElementById už od své páté verze.
T1000
Profil
zkoušel jsem to a funguje to, ale to celý článek nezmizne, když se otevře zbytek toho článku
Joker
Profil
Dero
Já myslel, že až od 6. Jinak tu funkci jsem vytvořil před několika lety a od té doby jí prostě používám, ale v dnešní době to bude asi už zbytečné. Nojo, to jsou ty knihovny funkcí, za chvíli budu jak ty weby, co ještě dneska řešej konstrukce pro NN4 :-)

ale to celý článek nezmizne, když se otevře zbytek toho článku
Ouha... tak tenhle požadavek už nebude tak jednoduchý. První co mě napadá je pojmenovat odkaz stejně jako text, ale s nějakou koncovkou, třeba:
<a href="javascript:zobrazeni('prispevek1',true)" id="prispevek1_o">celý článek</a>

a funkci upravit:
function zobrazeni(id, viditelny){
el = getElementById(id);
odkaz = getElementById(id+"_o");
if(el && el.style && odkaz && odkaz.style){
el.style.display = viditelny ? "block" : "none";
odkaz.style.display = viditelny ? "none" : "block";
}
}

Pak to jde ještě udělat jak psal Dero, že není "zobrazovací odkaz" a "skrývací odkaz", ale jen jeden "přepínací odkaz", který přepíná zobrazení prvku a podle stavu zobrazení mění text na "zobrazit" nebo "skrýt"
ah01
Profil
Jokerovo řešení je tak z javascriptové doby kamenné, to nemyslím nějak zle, ale dnes se používají elegantnější postupy jak to řešit. Např.

HTML kód novinky:
<div class="news">

<p>Úvodní text...</p>
<div>
<p>Pokračování zbytku textu</p>
<p>A to i klidně i více odstavců...</p>
</div>
</div>


Pomocí JS by se pak prošla celá stránka a u všech novinek (tagů div s třídou „news“) by se přidal odkaz pro zobrazení celého textu, přičemž první vnořený div by se skryl. Toto řešení má jednu velkou výhod. A to úplné oddělení JS kódu od HTML kódu stránky. Navíc takto můžeš mít na jedné stránce několik novinek.

Celé řešení: http://emp.wz.cz/pub/hide.html
(V praxi by se pak samozřejmě skript umístil do externího souboru.)

Dero
To je docela důvtipné řešení. Ale má IMHO jeden háček, v případě, že se řádek textu celý neskryje, trčí kus ven a to není moc pěkné. Možná by vypadalo zajímavě dát před něj poloprůhledný png obrázek s přechodem. Co ty na to?
Joker
Profil
ah01
Tohle řešení je zajímavé; já jsem holt zvyklý na to, že stránku generuje PHP z nějakých šablon, takže přidat něco ke každému článku mi přišlo jako triviální záležitost. Ale tohle je pravda elegantní.
Dero
Profil
ah01: Existuje nepřeberné množství způsobů. Kdyby šlo o nasazení na nějaký prestižní web, dalo by se vymyslet řešení ještě krásnější, efektivnější, rychlejší, obecnější a já nevímco -ší než všechny uvedené dohromady (ačkoliv to Tvoje je opravdu hezké). Jde spíš o co nejjednodušší a nejsnáze pochopitelný koncept.

Jinak ad "Ale má IMHO jeden háček v případě, že se řádek textu celý neskryje a trčí kus ven.": Nu, upravil jsem to. Jak jinak než důmyslně. Teď už se nemůže stát, že by se řádek textu neskryl. :o)

Já myslel, že až od 6. Jinak tu funkci jsem vytvořil před několika lety a od té doby jí prostě používám, ale v dnešní době to bude asi už zbytečné. Nojo, to jsou ty knihovny funkcí, za chvíli budu jak ty weby, co ještě dneska řešej konstrukce pro NN4 :-)

Joker: Přesně to jsem si myslel, holt se vždycky musí najít někdo se zdviženým ukazovákem, kdo řekne: "Ale Žertéři, takto zanedlouho budete sotva Královnou, ba možná Desítkou. Dělejte se sebou něco!" :o)
T1000
Profil
no to se mi líbí víc, ta novější verze, ale po kliknutí tam zase není možnost skýt
Joker
Profil
Přesně to jsem si myslel, holt se vždycky musí najít někdo se zdviženým ukazovákem, kdo řekne: "Ale Žertéři, takto zanedlouho budete sotva Královnou, ba možná Desítkou. Dělejte se sebou něco!" :o)
:o)))))
T1000
Profil
no jo, ale tobě zase nemizlo ten text: "celý článek"
když na to kliknu tak se nesmí zobrazit text: "celý článek" a naopak se musí zobrazit ten zbývajíci text a pod ním musí být skrýt text.
T1000
Profil
jak mám jednomu tlačítku přidělit 2 funkce?
něco takového: <a href="javascript:zobrazeni('prispevek1',true)" href="javascript:zobrazeni('prispevek2',false)">Celý článek</a>

takhle to samozřejmě nejde
Toto téma je uzamčeno. Odpověď nelze zaslat.