Autor Zpráva
SkIpPeR
Profil
Ahoj, nedávno jsem se se naučil s JavaScriptem a rozhodl se že by bylo pro vysouvání a zasouvání prvků vhodné použít to jako animaci, našel sem si tu že přes JQuery to funguje a tak jsem si stáhl JQuery (ten full cca 115kB, poslední verze) a našel kód, zde mam vysvětlivky:
HTML/PHP:
...
<script type="text/javascript" src="./js/menu.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/kniha.js"></script>
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
...
<div id='logo'>
</div>
<?php  echo"
<div id='menu'>
<div id='menu_left'>
</div>
<div id='menu_main'>
"; include 'obsah/menu.php'; echo"
</div>
<div id='menu_right'>
</div>
<div id='menu_bottom'>
</div>
</div>"; 
?>

CSS: (musel jsem upravit, měl jsem tam display: none;)
#logo {
    background-image: url('images/logo.gif');
    width: 244px;
    height: 106px;
    float: left;
    cursor: hand;
    cursor: pointer;
  }
  #menu {
    position: absolute;
    top: 129px; left: 407px;
/*    display: none;*/
    height: 297px
  }
  #menu_left {
    background-image: url('images/menu_left.gif');
    width: 14px;
    height: 250px;
    float: left;
    margin-left: 7px;
  }
  #menu_main {
    background-image: url('images/menu_main.gif');
    width: 172px;
    height: 250px;
    float: left;
  }
  #menu_main ul li {
    display: block;
    width: 137px;
    height: 31px;
    margin: auto;
  }
  #menu_main ul li ul {
    display: none;
  }
  #menu_main ul li:hover>ul {
    display: block;
    position: absolute;
  }
  #menu_main a {
    display: block;
    padding-top: 7px;
    text-align: center;
    width: 137px;
    height: 24px;
  }
  .menu {
    font-weight: normal;
    color: #ffd200;
    background-image: url('images/button_off.gif');
  }
  .menu:hover {
    background-image: url('images/button_mouse.gif');
  }
  .menu:active {
    background-image: url('images/button_on.gif');
  }
  #menu li {
	 list-style: none;
	 display: block;
  } 
  #menu_right {
    background-image: url('images/menu_right.gif');
    width: 14px;
    height: 250px;
    float: left;
  }
  #menu_bottom {
    background-image: url('images/menu_bottom.gif');
    width: 213px;
    height: 47px;
    clear: left;
    cursor: hand;
    cursor: pointer;
  }

JS(menu.js):
$(document).ready(function(){
$("#menu").hide();
$("#logo").click(function(){
    $("#menu").toggle();
});
});

Jenže bych chtěl aby div menu i s tim co obsahuje byl standartně zavřený, a když kliknu na div logo tak to nefunguje, eště bych chtěl že když je menu otevřené tak aby se změnil background-image u divu logo.
Ukázka
Promiňte s JS začínám tak ještě nevím jak přesně na to.
Chamurappi
Profil
Reaguji na SkIpPeRa:
Požadovaný efekt jde napsat na pár řádků v čistém JS. Tobě připadá jednodušší narvat na svůj web třetí framework?
Ve funkci „zobrazSkryj“ v kniha.js pracuješ s proměnnou „el“, kterou nemáš nikde definovanou, ale nevím, jestli je to příčina nefunkčnosti.

cursor: hand;
cursor: pointer;
Když už, tak obráceně.
SkIpPeR
Profil
v kniha.js mam definované funkce do dvou diskuzí na webu, to el opravím, ale to není pro script toggle() - to je můj požadovaný efekt
SkIpPeR
Profil
opraveno
function zobrazSkryjMenu(css){
/*document.getElementById('menu').style.display=(el.display == 'block')?'none':'block';
document.getElementById('logo').style.backgroundImage=(el.display == 'block')?"url('./templates/"+css+"/images/logo_menu.gif')":"url('./templates/"+css+"/images/logo.gif')";*/
}

To je dřívějsí skript pro zobrazování a zavírání menu, teď bych to chtěl udělat pomocí JQuery přes toggle()
SkIpPeR
Profil
muže mi prosím někdo pomoci jak zprovoznit:
$(document).ready(function(){
$("#menu").hide();
$("#logo").click(function(){
    $("#menu").toggle();
});
});

pořád mi to nefunguje
Chamurappi
Profil
Reaguji na SkIpPeRa:
Možná je to kvůli konfliktu mezi frameworky. Najdi si, jak se to v jQuery, v MooTools a v Prototype řeší.
Skutečně mi nepřipadá smysluplné mít na stránce 324 kB skriptů. Když už chceš nějaký framework, nejde stejného efektu dosáhnout v MooTools či v Prototype? Tedy bez jQuery?
SkIpPeR
Profil
MooTools je pryč, ten jsem tam už neměl, jen sem včera zapomněl aktualizovat index.php ... zkusim vypnout prototype (je tam jen kvuli lightboxu) a stahnu lightbox plugin do JQuery, pak se ozvu
SkIpPeR
Profil
pořád nefunguje, vypnul jsem všechny JS a nechal jen jquery.js a menu.js
Chamurappi
Profil
Reaguji na SkIpPeRa:
Skripty se samozřejmě vykonávají v pořadí, v jakém jsou v kódu, takže nemůžeš volat funkce z jQuery v době, kdy jQuery ještě neexistuje. Proto ti také konzole prohlížečů říkají, že neznají „$“.
SkIpPeR
Profil
Aha to jsem nevěděl, pomůžete mi teď prosím někdo s tím aby se to jen neobjevovalo ale pomaleji vyjíždělo? a aby se před tím změnilo plynule i to logo? s JQuery ještě natolik neumim
SkIpPeR
Profil
OK vyřešeno
$(document).ready(function(){
$("#menu").hide();
$("#logo").click(function(){
    $("#menu").toggle("slow");
});
});

ještě kouknu na změnu CSS, pokud se kouknete na výsledek (nahoře uprostřed vyjížděcí menu) tak je tam jeden problém že ten div menu obsahuje více divu a když vyjíždí tak mi v Google Chrome a Firefoxu vyjíždí jen menu_left a po tom co vyjede se zbytek jen zobrazí, ja bych rád udělal aby to vyjelo celý, pomužete mi prosím?
SkIpPeR
Profil
Link nefungoval - na stránkách byl virus, teď už to jde prosím pomoc s tím menu
SkIpPeR
Profil
Tak jsem si pomohl sám, nevíte jak to teď zprovoznit tak, aby při zavírání menu zajelo nejdříve menu a pak až se změnilo logo?
$(document).ready(function(){
$("#menu").hide();
$("#logo").click(function(){
    if($("#menu").is(':visible')){
    $("#menu").slideUp();
    $("#logo").css('background-image','url("./templates/phs/images/logo.gif")');
    }
    else {
    $("#logo").css('background-image','url("./templates/phs/images/logo_menu.gif")');
    $("#menu").slideDown();
    }
});
});

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: