| Autor | Zpráva | ||
|---|---|---|---|
| SkIpPeR Profil |
#1 · Zasláno: 9. 12. 2009, 15:14:41
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 |
#2 · Zasláno: 9. 12. 2009, 15:26:13
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 |
#3 · Zasláno: 9. 12. 2009, 15:40:18
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 |
#4 · Zasláno: 9. 12. 2009, 15:45:20
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 |
#5 · Zasláno: 9. 12. 2009, 16:37:21
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 |
#6 · Zasláno: 9. 12. 2009, 16:44:25
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 |
#7 · Zasláno: 9. 12. 2009, 16:59:08
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 |
#8 · Zasláno: 9. 12. 2009, 17:10:21
pořád nefunguje, vypnul jsem všechny JS a nechal jen jquery.js a menu.js
|
||
| Chamurappi Profil |
#9 · Zasláno: 9. 12. 2009, 17:36:46
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 |
#10 · Zasláno: 9. 12. 2009, 17:46:03
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 |
#11 · Zasláno: 9. 12. 2009, 20:26:46
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 |
#12 · Zasláno: 10. 12. 2009, 16:39:36
Link nefungoval - na stránkách byl virus, teď už to jde prosím pomoc s tím menu
|
||
| SkIpPeR Profil |
#13 · Zasláno: 10. 12. 2009, 18:01:51
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();
}
});
}); |
||
|
Časová prodleva: 14 let
|
|||
0