Jump to content
Forum Roportal
Sign in to follow this  
sorin21us

AJAX

Rate this topic

Recommended Posts

Fratilor sunt incepator in ce priveste AJAX. Incerc sa-l invat si nu sa copii de pe internet. vreau sa fac un meniu pt pagina mea dar m-am blocat la functia onMouseOver, pt ca nu stiu cum sa fac ca meniul drop down(HV menu) sa dipara dupa ce iau mouse-ul.

Codu e acesta:

 

 

<html>

<head>

<title>

HV menu

</title>

<style type='text/css'>

div#menuTop1

{

border: 2px solid black;

width: 150px;

}

 

div#dropDown1

{

visibility: hidden;

width: 150px;

}

 

.subItem

{

text-align: center;

margin-bottom: 1px;

}

 

.subItem a

{

background: blue;

text-decoration: none;

display: block;

font-weight: bold;

border: blue;

color: white;

}

 

.subItem a:active

{

 

border: gray;

}

 

.subItem a:hover

{

background:gray;

color: #000000;

width: 150px;

}

 

div#showInRight

{

position: absolute;

top: 30px;

left: 150px;

width: 150px;

z-index: 20;

visibility: hidden;

}

 

</style>

<script language='javascript'>

function hideMenus()

{

document.getElementById('dropDown1').style.visibility='hidden';

}

function hideSubMenu()

{

document.getElementById('showInRight').style.visibility='hidden';

}

// the show menu function takes one argument which is the menu to be shown

function showMenu(sm)

{

document.getElementById(sm).style.visibility='visible';

}

</script>

</head>

<body>

<div id='menuTop1' onMouseOver="showMenu('dropDown1');">

Start Here

</div>

<div id='dropDown1'>

<div id='sub1-1' class='subItem' onClick="hideMenus();" onMouseOver="showMenu('showInRight');"><a href='#'>link1</a></div>

<div id='sub1-2' class='subItem' onClick="hideMenus();"><a href='#'>link2</a></div>

<div id='sub1-3' class='subItem' onClick="hideMenus();"><a href='#'>link3</a></div>

<div id='sub1-4' class='subItem' onClick="hideMenus();"><a href='#'>link4</a></div>

<div id='sub1-5' class='subItem' onClick="hideMenus();"><a href='#'>link5</a></div>

</div>

<div id="showInRight" onblur="hideSubMenu();" >

<div id='sub1-1-1' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-1</a></div>

<div id='sub1-1-2' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-2</a></div>

<div id='sub1-1-3' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-3</a></div>

<div id='sub1-1-4' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-4</a></div>

</div>

</body>

</html>

 

 

Are cineva vreo idee?

Share this post


Link to post
Share on other sites
nu exista cumva un eveniment separat, onMouseOut sau ceva asemanator?

Ba da exista. Si l-am incecat inainte sa scriu aici. Acum am onClick=hideMenus() dar daca pun onMouseOver nu merge.

Share this post


Link to post
Share on other sites

Hmm.

Acu', din ce-mi amintesc .. onClick se refera la momentul cand userul apasa butonul mausului (deci e compus din onButtonDown si onButtonUp - sau ceva de genul asta). Tie-ti trebuie un event pentru momentul cand userul a scos sageata de pe meniu :doh:

Then again, cu ce se mananca Ajax ala? :o:

Share this post


Link to post
Share on other sites

In linii mari AJAX (Asyncronimous Javascript And Xml) permite sa faci o cerere catre server fara sa reincarci pagina

Share this post


Link to post
Share on other sites

Multumesc celor care incearca sa ma ajute dar astept si raspunsul celor care stiu despre ce vorbesc. Am vazut ca sunt cativa pe aici care se pricep dar poate acum sunt ocupati cu lucruri mai serioase decat onMouseOut-ul meu. :doh: .

O sa mai intreb si pe altii ca vreau sa invat si nu sa copii de pe net gata facut.(acum cat am timp :o: )

Share this post


Link to post
Share on other sites

Eu cred ca tu confunzi, ca asta nu este AJAX... in fine

Ar trebui ca meniurile sa isi cuprinda submeniurile; Eu as face ceva in genul:

 

<div id='menuTop1' onMouseOver="showMenu('dropDown1');" onMouseOut="hideMenus();">Start Here
<div id='dropDown1'>
	<div id='sub1-1' class='subItem' onClick="hideMenus();" onMouseOver="showMenu('showInRight');"><a href='#'>link1</a>
	<div id="showInRight">
		<div id='sub1-1-1' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-1</a></div>
		<div id='sub1-1-2' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-2</a></div>
		<div id='sub1-1-3' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-3</a></div>
		<div id='sub1-1-4' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-4</a></div>
	</div>		
</div>
	<div id='sub1-2' class='subItem' onClick="hideMenus();"><a href='#'>link2</a></div>
	<div id='sub1-3' class='subItem' onClick="hideMenus();"><a href='#'>link3</a></div>
	<div id='sub1-4' class='subItem' onClick="hideMenus();"><a href='#'>link4</a></div>
	<div id='sub1-5' class='subItem' onClick="hideMenus();"><a href='#'>link5</a></div>
</div>
</div>

Edited by Argv

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×