Skrývání textu - kde mám chybu? – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Skrývání textu - kde mám chybu? – JavaScript, AJAX, jQuery – Fórum – Programujte.comSkrývání textu - kde mám chybu? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

end0
Newbie
21. 5. 2015   #1
-
0
-

 Zdravím, poradil by někdo prosím, proč se mi text zobrazuje ihned na stránce a proč nefunguje skrývání?

Děkuji

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>Změna obrázku při najetí kursoru</title>
<style>
  .js .obal div div {display: none; padding: .3em .5em}
  .js .obal div.show div {display: block}
  .js .obal h3 {cursor: pointer}
  .obal div {background: #efefef}
  .obal div h3 {background: #0D6AB7; color: #fff; padding: .3em .5em}
  .obal div.show h3 {background: #1081DD}

  a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
  a.tlacitko:hover {background: #E371AF}
  a.tlacitko:active {position: relative; top: 1px; left: 1px}

</style>


<script>
var el = document.getElementById("obal");
el.className += " js";
document.body.className += " js";

function clearAll() {
	var div = el.getElementsByTagName("div");
	for (var i = 0; i < div.length; i++) {
		div[i].className = "";
	}
}

function init() {
	if (!el) return;
	var div = el.getElementsByTagName("div");

	for (var i = 0; i < div.length; i++) {
		if (div[i].parentNode != el) continue;
		div[i].getElementsByTagName("h3")[0].onclick = function () {
			var div = this.parentNode;
			var puvodni = div.className;
			clearAll();
			div.className = (div.className == "show" || puvodni == "show") ? "" : "show";
		}
	}
}

init();
</script>
</head>
<body>

 <div class="obal js" id="obal">
  <div>
    <h3>HTML
    <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> — vypadá jako tlačítko.</p>
</h3>
<div><p>HTML rozkliknutý text</p></div>
  </div>
  </div>
    </div>
  </div>
</div>


</body>
</html>
Nahlásit jako SPAM
IP: 89.102.247.–
amertak0
Návštěvník
21. 5. 2015   #2
-
0
-

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <title>Změna obrázku při najetí kursoru</title>
    <style>
        .js .obal div div {display: none; padding: .3em .5em}
        .js .obal div.show div {display: block}
        .js .obal h3 {cursor: pointer}
        .obal div {background: #efefef}
        .obal div h3 {background: #0D6AB7; color: #fff; padding: .3em .5em}
        .obal div.show h3 {background: #1081DD}

        a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
        a.tlacitko:hover {background: #E371AF}
        a.tlacitko:active {position: relative; top: 1px; left: 1px}

    </style>



</head>
<body>

<div class="obal js" id="obal">
    <div>
        <h3>HTML
            <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> — vypadá jako tlačítko.</p>
        </h3>
        <div><p>HTML rozkliknutý text</p></div>
    </div>
</div>

<script>
    var el = document.getElementById("obal");
    el.className += " js";
    document.body.className += " js";

    function clearAll() {
        var div = el.getElementsByTagName("div");
        for (var i = 0; i < div.length; i++) {
            div[i].className = "";
        }
    }

    function init() {
        if (!el) return;
        var div = el.getElementsByTagName("div");

        for (var i = 0; i < div.length; i++) {
            if (div[i].parentNode != el) continue;
            div[i].getElementsByTagName("h3")[0].onclick = function () {
                var div = this.parentNode;
                var puvodni = div.className;
                clearAll();
                div.className = (div.className == "show" || puvodni == "show") ? "" : "show";
            }
        }
    }

    init();
</script>
</body>
</html>

V dobe kdy se vykonava ten JS (v hlavicce) neni jeste dom ready (ty elementy jeste neexistuji).

Pokud das ten JS uplne na konec pred </body>, tak mas jiste, ze tam ty elementy mas.

To, ze by bylo lepsi aspon pouzit JQuery a nejak strukturovat ten JS kod aspon na AMD modul bych asi mozna taky zacal resit :)

Nahlásit jako SPAM
IP: 89.103.130.–
peter
~ Anonymní uživatel
4014 příspěvků
21. 5. 2015   #3
-
0
-

Ono by stacilo mozna zmenit radek
if (!el) return; na...
if (!el) {alert ('element nenalezen'); return;}
Pripadne si tam pridat mezi radky kodu alerty a sledovat, ktery se vypise a ktery uz ne. Na tom radku je pak problem

A treba pozdeji budes mit otazku, proc ti to rozhasi styly pri skyvani, tak se zamer na radek
div[i].className = "";
kterej css kompletne smaze, co by mohlo byt neprijemne zvlast na divu
<div class="obal js" id="obal">
 

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:14e0:f0...–
End
~ Anonymní uživatel
49 příspěvků
21. 5. 2015   #4
-
0
-

g#3 peter
Hmm, tak opravený tím prohozením to chodí. No, myslel jsem, že to bude snazší :-(

Přitom nechci nic víc, než docíliti toho, že budu mít nějaký nadpis (třeba jako v příkladu výše HTML) a vedle v hlavičce dvě tlačítka a každé z nich bude ukazovat vlastní text (a vlastí styl css).

Nedal byste to někdo náhodou dohromady?

Nahlásit jako SPAM
IP: 89.102.247.–
End
~ Anonymní uživatel
49 příspěvků
21. 5. 2015   #5
-
0
-

#4 End
Hmm a mam nějakou chybu v logice věci. Protože záměrem bylo, že mohu rozkliknout jakýkoliv text aniž bych změnil třeba ten předchozí rozkliknutý, prostě se zobrazí vždy jeden z více, což tedy záměr nebyl. To bude asi to, co zminoval peter.... hmm, no, jak jsem psal, uz to tak jako snadny pro mne nevidim.

Nahlásit jako SPAM
IP: 89.102.247.–
peter
~ Anonymní uživatel
4014 příspěvků
22. 5. 2015   #6
-
0
-

Jestli ti jde o to, aby se to po rozbaleni neskryvalo, kdyz tam toho mas vic, tak to dela preci ten radek clearAll(); A samozrejme tam nesmis mit duplicitne id, pac id je jedinecne. Napr takove <div class="obal js" id="obal"> tam musi byt jen jednou.

<div class="obal js" id="obal">
    <div>
        <h3>HTML
            <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> - vypadá jako tlačítko.</p>
        </h3>
        <div><p>HTML rozkliknutý text</p></div>
    </div>

    <div>
        <h3>HTML
            <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> - vypadá jako tlačítko.</p>
        </h3>
        <div><p>HTML rozkliknutý text</p></div>
    </div>
</div>
Nahlásit jako SPAM
IP: 2001:718:2601:1f7:e443:64...–
end0
Newbie
22. 5. 2015   #7
-
0
-

#6 peter
No to dává logiku, ale když budu mít proměnný počet rozklikávacích položek (jedno 5, jindy 10), tak to musím mít takový počet id nebo class? A co když jich budu mít třeba 40? To asi na to bude nějaká finta, aby script věděl "teď jsem klepl na položku X a chci ji rozbalit" ostatní beze změny.

Nahlásit jako SPAM
IP: 89.102.247.–
peter
~ Anonymní uživatel
4014 příspěvků
22. 5. 2015   #8
-
0
-

Ja ti nerozumim. Zkusil jsi ten html kod, co jsem k tomu pridal? Vidis v nem duplicitne id? Ja taky ne.
Jak ti to funguje? Kdyz kliknes na prvni, rozbali se prvni. Kdyz na druhou, rozbali se druha, prvni schova. Tak mas postaveny ten program, ne? Tak jsi to zamyslel.

Pak jsem mel jeste druhy predpoklad, ze tomu houby rozumis, kod mas odnekud jinud. Tak jsem ti radeji pridal verzi html, ktera prepina mezi obema polozkami a pridal info, co smazat/zakomentovat, kdyz bys tam nechtel, aby se to samo sryvalo pri prekliknuti na jinou. Ten kod mi prisel totiz na zacatecnika az prilis promysleny :)

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:e443:64...–
end0
Newbie
25. 5. 2015   #9
-
0
-

#8 peter
Ahoj. Zkusil. Vyloučil jsem tu řádku ClearAll(). Funguje to tak, jak byla moje základní vize, že by to mělo být.

No, zkusil jsem přidat do H3 tagu to tlačítko

<h3>HTML <a href="" class="tlacitko" >Ukaž Mapu</a> 
             <a href="" class="tlacitko">Kontakt</a>
    </h3>

dokonce i funguje, ale text, co se má zobrazit jen problikne. Líbilo by se mi mít v záhlaví 2 tlačítka a podle toho na jaké bych kliknul, tak by se mi zobrazil příslušný text s podrobnostmi. Třeba něco jako Ukaž mapu a druhé Kontakt. Případně by se tedy ukázali obě položky.

Pravdu máš v tom, že tomu zase až tak nerozumím, spíš to zkouším intuitivně měnit. No, ale jak vidíš, moc jsem s tím přes víkend nikam nepohnul. Poradil bys s tady tím?

Nahlásit jako SPAM
IP: 89.177.14.–
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, 2 hosté

Podobná vlákna

Kde mám chybu? — založil Anonymní uživatel

Kde mám chybu? — založil tomáš polz

Kde mám chybu? — založil takinoo

 

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