Autor Zpráva
CZghost
Profil
Tvořím webovou stránku za domácí úkol a nějak se mi nechce při rozbalování menu měnit obrázková odrážka.
Jinými slovy: Plus se má při rozbalení změnit na mínus a naopak. Ale to právě nedělá. Samotné rozbalování funguje.
Odkaz na živou ukázku je zde.

HTML:
<div id="menu">
    <ul class="menu">
        <li><a href="index.html" title="Hlavní strana">Domů</a></li>
        <li><a href="o-mne.html" title="Něco o mně">O mně</a></li>
        <li style="list-style-image: url('obrazky/sbaleno.gif');" id="listItemGameDesc"><a href="javascript:void(0);" onclick="toggleMenu('gameDesc'); toggleItem('listItemGameDesc'); return false;" title="Klikněte zde pro rozbalení nebo sbalení podmenu.">Popis hry</a>
            <ul class="menu podmenu" id="gameDesc">
                <li><a href="pribeh.html" title="Příběh hry">Příběh</a></li>
                <li><a href="areny.html" title="Arény ve hře">Arény</a></li>
                <li><a href="zbrane.html" title="Zbraně ve hře">Zbraně</a></li>
                <li><a href="naboje.html" title="Náboje ke zbraním">Náboje</a></li>
                <li style="list-style-image: url('obrazky/sbaleno.gif');" id="listItemVarItems"><a href="javascript:void(0);" onclick="toggleMenu('varItems'); toggleItem('listItemVarItems'); return false;" title="Klikněte zde pro rozbalení nebo sbalení podmenu.">Různé věci</a>
                    <ul class="menu podmenu" id="varItems">
                        <li><a href="lekarnicky.html" title="Lékárničky ve hře">Lékárničky</a></li>
                        <li><a href="brneni.html" title="Typy brnění">Brnění</a></li>
                        <li><a href="vylepseni.html" title="Dočasné vylepšení">Vylepšení</a></li>
                        <li><a href="holdable.html" title="Věci 'v držení'"><i>Holdable items</i></a></li>
                    </ul>
                </li>
                <li><a href="prostredi.html" title="Prvky v herním prostředí">Prostředí</a></li>
                <li style="list-style-image: url('obrazky/sbaleno.gif');" id="listItemTeamArena"><a href="javascript:void(0);" onclick="toggleMenu('teamArena'); toggleItem('listItemTeamArena'); return false;" title="Klikněte zde pro rozbalení nebo sbalení podmenu.">Team Arena</a>
                    <ul class="menu podmenu" id="teamArena">
                        <li><a href="ta-smysl.html" title="Jaký smysl přináší tento datadisk?">Smysl modifikace</a></li>
                        <li><a href="ta-areny.html" title="Nové arény v Team Arena">Nové arény</a></li>
                        <li><a href="ta-zbrane.html" title="Nové zbraně v Team Arena">Zbraně v TA</a></li>
                        <li><a href="ta-naboje.html" title="Náboje ke zbraním v Team Arena">Příslušné náboje</a></li>
                        <li style="list-style-image: url('obrazky/sbaleno.gif');" id="listItemTaVarItems"><a href="javascript:void(0);" onclick="toggleMenu('taVarItems'); toggleItem('listItemTaVarItems'); return false;" title="Klikněte zde pro rozbalení nebo sbalení podmenu.">Různé věci v TA</a>
                            <ul class="menu podmenu" id="taVarItems">
                                <li><a href="ta-vylepseni.html" title="Nové vylepšení hráče v Team Arena">Nové vylepšení</a></li>
                                <li><a href="ta-holdable.html" title="Nové věci 'v držení' v Team Arena">Nové <i>holdable items</i></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="kontakt.php" onclick="alert('Děkuji za iniciativu, ale formulář bohužel není k dispozici. Stránky jsou jen demonstrativní.'); return false;" title="Něco na srdci?">Kontaktujte mě</a></li>
    </ul>
</div>

CSS:
ul.menu {
    padding-left: 1.5em;
}

ul.menu li {
    list-style-type: none;
}

ul.menu li ul.menu li {
    list-style-image: none;
}

ul.menu li a {
    color: black;
    text-decoration: none;
    
}

ul.menu li a:hover {
    text-decoration: underline;
}

ul.podmenu {
    display: none;
}

JavaScript:
function toggleMenu(menuId) {
    menu=document.getElementById(menuId).style;
    menu.display=(menu.display=="block")?"none":"block";
};

function toggleItem(itemId) {
    item=document.getElementById(itemId).style;
    item.listStyleImage=(item.listStyleImage=="url('obrazky/sbaleno.gif')")?"url('obrazky/rozbaleno.gif')":"url('obrazky/sbaleno.gif')";
};

Volání JavaScriptu do dokumentu v hlavičce:
<script type="text/javascript" src="js/menu.js"></script>
Martin02
Profil
CZghost:
Do obsahu funkce toggleItem dej:
var item=document.getElementById(itemId).style;
item.listStyleImage=(item.listStyleImage=="url(http://czghost.ic.cz/solving/problem1/obrazky/sbaleno.gif)")?"url('http://czghost.ic.cz/solving/problem1/obrazky/rozbaleno.gif')":"url('http://czghost.ic.cz/solving/problem1/obrazky/sbaleno.gif')";

To znamená celé absolutní adresy a v podmínce bez apostrofů.
Tedy, nezkoušel jsem všechny prohlížeče, ale ve Chromu mi to fakčí :)
CZghost
Profil
Martin02:
Za domácí úkol znamená na lokálním počítači, což znemožňuje použití absolutní adresy. Celé webové stránky musím poslat p. uč. na email v ZIPu, takže obrázky by pak nemusely fungovat. Všechno jsem to dal na internet jenom pro živou ukázku, jinak to zůstane u mě na počítači a potom i na počítači p. uč. Absolutní adresa tedy není vhodné řešení...

Když teď zkusím pozměnit pořadí (v podmínce je rozbaleno), funguje to jenom tam, ale ne zpátky. Tedy, plus se změní na mínus, ale ne naopak. Absolutní adresy fungují bez chyby, ale ty bohužel použít nesmím, všechno to musí být na lokálním počítači, tedy musím zachovat relativnost. Zkusím ještě odkazovat ze složky js, uvídíme, co to udělá.

Bohužel nefunguje, obrázek zmizí úplně. Absolutní adresování nelze ale použít, protože nelze předpokládat, kde si učitel web uloží. Říct mu, ať si v kódu změní umístění obrázků, je holý nesmysl, za to mi hned nafachčí kouli, protože domácí úkol má být odevzdaný hotový, bez dalších změn.
margin
Profil *
Martin02:
Tedy, nezkoušel jsem všechny prohlížeče, ale ve Chromu mi to fakčí
Mi tedy ne, ani v Opeře, ani v Chromu.

CZghost:
Absolutní adresa tedy není vhodné řešení...
Není problém přepsat absolutní cesty na relativní.
habendorf
Profil
Jdeš na to hrozně složitě. Na onclick bych položce li přidal/odebral třídu, třeba .expanded, zbytek už jen css (změna odrážky plus li.expanded ul {display: ...}.
CZghost
Profil
margin:
To jsem udělal, a začlo to zase blbnout.

habendorf:
Nějak jsem nepochopil, co jsi měl na mysli.
1) Jakou třídu? Třídu mám na tagu UL, který je do tagu LI vnořený. Tam bych asi chybu nehledal.
2) Jak to řešit JavaScriptem? Existuje něco na změnu třídy položky? class v JavaScriptu asi znamená úplně něco jiného, když mi snytax highlighter v Notepad++ označil deklaraci jako klíčové slovo.
3) Nevím, jak složité Ti to připadá. Zvolil jsem postup, který mi byl blízký.

Zkoušel jsem to i v jiných prohlížečích, než v Chromu: Opera, Internet Explorer. Jiné na počítači nemám.
Zjistil jsem velmi zajímavou věc: V Internet Exploreru, tam kde bych čekal největší chybovost, to funguje bez chyby, v Opeře ten samý problém. Tedy jediné, co mi nefunguje v IE 8 (jsem na XP, devítka už není pro XP určena) jsou stíny. Devítka, kterou máme ve škole na počítačích s Win7, snad už stíny podporuje. Tak doufám, že to tam bude fungovat na 100%.

Je to zajímavé, že ve slušných prohlížečích to funguje napůl a v IE to funguje stoprocentně, tedy přesně naopak, než by někdo čekal.
To bude asi na kontakt s Googlem a s vývojáři Opery, že jim nějak blbne JavaScript :-)
margin
Profil *
CZghost:
Devítka, kterou máme ve škole na počítačích s Win7, snad už stíny podporuje.
IE 9 podporuje jen box-shadow, IE 10 podporuje i text-shadow.
CZghost
Profil
margin:
To nevadí, stíny jsem tam dodal stejně jen pro efekt, aby to tolik nešvihalo do očí.

Tímto je problém vyřešen, chyba je jen v prohlížečích.
habendorf
Profil
CZghost:
Nějak jsem nepochopil, co jsi měl na mysli.

Místo abys řídil skriptem styly, nechal bys to vše na css. Nepotřeboval bys v celém dokumentu ani jedno id. A dokonce ani jednu třídu, jen tu přidávanou/odebíranou skriptem. Až tak by to bylo jednoduché :o)

Existuje něco na změnu třídy položky? class v JavaScriptu asi znamená úplně něco jiného, když mi snytax highlighter v Notepad++ označil deklaraci jako klíčové slovo

className
CZghost
Profil
habendorf:
Okay, zkusil jsem to přes className, funguje to ve všech třech prohlížečích stejně... Zvláštní, mělo by to tak fungovat i s použitím přímého stylu, ale není to tak. Tímto uzavírám diskusi jako vyřešenou.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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