JS - zložité menu? – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

JS - zložité menu? – JavaScript, AJAX, jQuery – Fórum – Programujte.comJS - zložité menu? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
I'mNub
~ Anonymní uživatel
5 příspěvků
21. 12. 2008   #1
-
0
-

Robím si menu ktoré by vyzeralo asi takto:
Button (o rozmeroch: 25 x 25px) umiestnený v ľavom hornom rohu.Po prejdení myšou by sa pomocou JS a jQuery knižnice (plná - celá knižnica ) vynorilo menu,ktoré by nebolo vidieť - proste by neexistovalo dovtedy - dokedy ho nepotrebujem(neviem teraz ako sa to volá; bolo by umiestnené hornej lište o width: 25px; height: 100%;) a potrebujem pomoc s JS:
1.)Po prejetí myškou nad buttonom by vyliezlo menu z horného okraja prehliadača;(plynule)
2.)Po OnMouseOver (po odchode myšky) by sa po určitom intervale skrylo; (plynule)

Nahlásit jako SPAM
IP: 85.135.243.–
Reklama
Reklama
21. 12. 2008   #2
-
0
-

- mej to menu mej normalne v kodu jako div/ul s position absolute na pozici 0,0 a s display none
- po najeti na to spoustitko dej $("#idmenu").show()
- po odjeti z toho divu dej $("#idmenu").hide()
- to zpozdeni odjeti muzes udelat timerem, ktery znicis v pripade, ze se mys znova objevi nad tim menu

Nahlásit jako SPAM
IP: 81.30.238.–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
Anonymní uživatel
~ Anonymní uživatel
0 příspěvků
22. 12. 2008   #3
-
0
-

ty vm!...

Nahlásit jako SPAM
IP: 85.135.228.–
I'mNub
~ Anonymní uživatel
5 příspěvků
24. 12. 2008   #4
-
0
-

už som tu zase!...tentokrát nwm kde a ako pokračovať...kod: (126 riadkov)



/*
*JavaScript menu (v. 1.0)
*/

//(f) mymenu - get id from document and search "MyMenu" Id
function MyMenu(){
if (MyMenu.isSupported())
{
MyMenu.initialize();
var MyMenu = document.getElementById("mymenu");
};
//(f) menuOpt - menu Options (Activate(Onmouseover)/deactivate(OnMouseOut))
function MenuOpt(){
//=====================//
//Options for menu(1-7)//
//=====================//

var menu1.onactivate = function() { document.getElementById("menu1").className = "hover"; };
var menu1.ondeactivate = function() { document.getElementById("menu1").className = ""; };

var menu2.onactivate = function() { document.getElementById("menu2").className = "hover"; };
var menu2.ondeactivate = function() { document.getElementById("menu2").className = ""; };

var menu3.onactivate = function() { document.getElementById("menu3").className = "hover"; };
var menu3.ondeactivate = function() { document.getElementById("menu3").className = ""; };

var menu4.onactivate = function() { document.getElementById("menu4").className = "hover"; };
var menu4.ondeactivate = function() { document.getElementById("menu4").className = ""; };

var menu5.onactivate = function() { document.getElementById("menu5").className = "hover"; };
var menu5.ondeactivate = function() { document.getElementById("menu5").className = ""; };

var menu6.onactivate = function() { document.getElementById("menu6").className = "hover"; };
var menu6.ondeactivate = function() { document.getElementById("menu6").className = ""; };

var menu7.onactivate = function() { document.getElementById("menu7").className = "hover"; };
var menu7.ondeactivate = function() { document.getElementById("menu7").className = ""; };

};
};

//Menu Settings (CSS & HTML)

var MyMenu.WaitTime = 10000; // time for waiting if will be used OnMouseOver and "Stand By"
var MyMenu.HideTime = 550; // time for waiting if will be used OnMouseOut
var MyMenu.SlideTime = 1200; // time for waiting if will be used OnMouseOut and "Stand By"
var MyMenu.ShadowColr ="#666666"; // color of menus shadow
var MyMenu.ShadowOfft = 2; // Shadow Offset
var MyMenu.ShadowSize = 3; // Shadow size under menu
var MyMenu.ShadowPng ="IMG/shadow.png";// Image what will be used for shadow
var MyMenu.BgColor ="#444444"; // Backgroud color will be used if image doesn't exist
var MyMenu.height = 450px; // Height of menu
var MyMenu.width = 25px; // width of menu
//===============================================
//---------JavaScript Internal properities-------
//===============================================

var MyMenu.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
var MyMenu.direction = {down:1,right:2};
var MyMenu.registry = [];
var MyMenu._maxZ = 100;

//==================================================================================================
//----------------------------------Static methods for explorers------------------------------------
//==================================================================================================
// supporting win ie5+, mac ie5.1+ and gecko >= mozilla 1.0
var NavName = navigator.appName;
var Platform = navigator.platform;
var UsrAgent = navigator.userAgent;
var nan = false;

//============================================
//--------Chceck Explorers--------------------
//============================================

if (UsrAgent.indexOf("Gecko") > -1 && navigator.productSub >= 20020605) nan = true; // gecko >= moz 1.0
else if (NavName == "Microsoft Internet Explorer") {
if (document.getElementById) { // ie5.1+ mac,win
if (Platform.indexOf("mac") == 0) {
nan = /msie (\d(.\d*)?)/.test(UsrAgent) && Number(RegExp.$1) >= 5.1;
}
else nan = true;
}
}

return nan;
}
//
// call this in onload once menus have been created
//
MyMenu.initialize = function() {
for (var i = 0, menu = null; menu = this.registry[i]; i++) {
menu.initialize();
}
};
//
// call this in document body to write out menu html
//

MyMenu.renderAll = function() {
var MxHtml = [];
for (var i = 0, menu = null; menu = this.registry[i]; i++) {
MxHtml[i] = menu.toString();
}
document.write(aMenuHtml.join(""));
};
function ShowMyMenu(){

}

//=============================================================
//------------------Make Interval set no.1---------------------
//=============================================================

//var MyMenu.WaitTime = 10000; // time for waiting if will be used OnMouseOver and "Stand By"
//var MyMenu.HideTime = 550; // time for waiting if will be used OnMouseOut
//var MyMenu.SlideTime = 1200; // time for waiting if will be used OnMouseOut and "Stand By"


function firstInterval(){
var ButtonInterval;
var Button = document.getElementById("button1").onclick;
var Button = setInterval("showMyMenu()",750);
var Ende = clearTimeout("hideMyMenu()");
if (Button){

};
};

len sa chcem opýtať,či to robím dobre/kadiaľ by som sa mal uberať a čo urobiť...

Nahlásit jako SPAM
IP: 85.135.245.–
24. 12. 2008   #5
-
0
-

Dpc, proc nepouzivas to jQuery? S tim bys to mel na deset - patnact radku kodu.

Nahlásit jako SPAM
IP: 81.30.238.–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
Nefaritus
~ Redaktor
+2
Posthunter
24. 12. 2008   #6
-
0
-

To CommanderZ : Možná i míň :)

Nahlásit jako SPAM
IP: 213.191.111.–
I\\\'mNub
~ Anonymní uživatel
1 příspěvek
24. 12. 2008   #7
-
0
-

pretože ešte s ním skoro nič nwm =D

Nahlásit jako SPAM
IP: 85.135.245.–
24. 12. 2008   #8
-
0
-

No, jQuery je o hodne jednodussi nez JS samotny. Celkove je takove dost podobne prirozenemu jazyku, vetsinou je to tak, ze jednim prikazem opravdu udelas jeden ukon,ne ze pouzijes 10 raku na zmizeni objektu.

A nauc se pouzivat anonymni funkce, to je genialni code-saver i v samotnem JS, v jQuery to samozrejme take plati.

Nahlásit jako SPAM
IP: 81.30.238.–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
I\\\\\\\\\\\\\\\'mNub
~ Anonymní uživatel
1 příspěvek
24. 12. 2008   #9
-
0
-

ok...ale co teraz?...poradí mi nekdo?...alebo mám ísť na jpw.cz ?...zive.cz? =D

Nahlásit jako SPAM
IP: 85.135.245.–
24. 12. 2008   #10
-
0
-

Nejrychlejsi budes to mit to prepsat do jQuery. Tretina toho kodu jsou kontroly prohlizecu, druha tretina jsou definice menu, coz ve spolupraci s jQuery udelas jako normalni UL tag s LI polozkami, ktery nasledne nakonfigurujes pomoci javascriptu.

Nahlásit jako SPAM
IP: 81.30.238.–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
I'mNub
~ Anonymní uživatel
5 příspěvků
24. 12. 2008   #11
-
0
-

takže predsa to NEBUDE tých 10-15 riadkov...ok...ale s tým jQuery potrebujem hlp...lebo mám v tom TROCHU chaos

Nahlásit jako SPAM
IP: 85.135.245.–
Nefaritus
~ Redaktor
+2
Posthunter
24. 12. 2008   #12
-
0
-

Když si zajdeš na web jQuery a prohlídneš si torchu dokumentaci a příklady, co tam jsou, tak to musíš časem dát dokupy. Když ti sem někdo vyklopí hotový kód nic se nenaučíš :) Něco zkus a až se dostaneš ke konkrétní komplikaci, tak sem postni kód a my ti řekneme (pokud budeme vědět), kde je chyba a co je potřeba poupravit :)

Nahlásit jako SPAM
IP: 213.191.111.–
I'mNub
~ Anonymní uživatel
5 příspěvků
24. 12. 2008   #13
-
0
-

tú komplikaci vidím už teďka...ako tie jednoduché príklady chápem...ale čím ďalej tým horšie...JS som nikdy nemal rád...

Nahlásit jako SPAM
IP: 85.135.245.–
I'mNub
~ Anonymní uživatel
5 příspěvků
25. 12. 2008   #14
-
0
-



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>


$(document).ready(function(){
$("#button").click(function () {
$("#menu").show(1500);
});
var
var WaitTime = setInterval(wait,5000);


$("#button").click(function(){$("#menu").hide(1500);});

function wait(){

}

});
</script>
<style>
#bg { top: 0px; left: 0px; width: 1280px; height: 1024px; margin: 0px; padding: 0px;}
#menu { background-color: #000000; filter: Alpha(Opacity=30, style=3);-moz-opacity: 0.3; opacity: 0.3; color: #fff; position: absolute; display: none; height: 25px; width: 100%;}
</style>
</head>
<body>
<div id="bg">
<div id="button">V</div>
<div id="menu">Hiya ...Such interesting text, eh?</div>
</div>
</body>
</html>


toto so m dosiaľ vypotil...ide to...len neviem urobiť aby čakal na interval (waitTime())

Nahlásit jako SPAM
IP: 85.135.231.–
26. 12. 2008   #15
-
0
-

Co na tom nechapes, po tom intervalu (5000) se spusti kod (!), ne pouze funkce. takze jestli chces proste spustit funkci wait, tak tam napises "wait()" - i s temi uvozovkami. kdyz to budes chtit zrusit, tak udelas clearTimeout(WaitTime). A mas tam jedno var navic.

Takove veci ale musis zvladnout odhalit pomoci javascriptove konzole.

Nahlásit jako SPAM
IP: 81.30.238.–
Prosím, jestli potřebujete s něčím poradit,zeptejte se na fóru. Jakýkoliv bezdůvodný pokus mě kontaktovat skončí okamžitým přidáním do ignore listu![br][br] Současný počet osob, které to nepochopily: 7
psenik0
Návštěvník
26. 12. 2008   #16
-
0
-

jQuery - to je věc.. používám ho měsíc a už mám pocit že umím programovat líp než předtím:-D JS skoro neznám a přitom efekty a jednoduchost jQuery dosahují víc než profesionální úrovně.. Je to asi jediná knihovna která mi sedla..:-)

Nahlásit jako SPAM
IP: 88.146.14.–
Pk
Anonymní uživatel
~ Anonymní uživatel
0 příspěvků
1. 1. 2009   #17
-
0
-

misia vyriešená!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("#button").mouseover(function () {
$("p").slideDown(1000);
});

$("p").mouseout(function wait(){
var m = setInterval(hide,5000);});

function hide(){
$("p").slideUp(1000);
}

});
</script>
<style>
p { background:yellow; }
</style>
</head>
<body>
<div id="button">Show it</div>
<p style="display: none">Hello</p>
</body>
</html>

Nahlásit jako SPAM
IP: 85.135.236.–
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, 17 hostů

Podobná vlákna

Menu — založil jozo0025

MENU — založil Anonymní uživatel

Menu — založil KiRoS

Menu — založil Pavelv

 

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