[jQuery] Re: Need help making a menu appear next to the users image....

2008-09-05 Thread Ca-Phun Ung 

Aaron wrote:
> I already  Tried many ways... even hover events and mouse over events
> been playing around with them and was not able to make them to
> function as I want them too.
>
> I want the user to put the mouse over their image to get a menu  to
> fade in and when the mouse is off the users image I want the menu to
> fade out only if the mouse is not over the menu.
>
> I can't get it to work.
>   
Do you have a demo online? Would make it easier to help you if you could 
show us some code.

-- Ca-Phun Ung
+ http://yelotofu.com

[jQuery] Re: Need help making a menu appear next to the users image....

2008-09-04 Thread Jack Killpatrick 


I think this (below) will work (I tested it locally). The trick is using 
setTimeout to allow some time for the mouse to move between the image 
and the menu, before deciding to hide the menu. This example will make 
the menu appear when you hover over the image, stay visible if you move 
your mouse from the image to the menu, and disappear if you move the 
mouse off of the menu to anywhere other than back to the image, or if 
you move the mouse from the image to something other than the menu.


   
   #imgDiv { float:left }
#menu { float:left; display:none; width:150px; height:150px; border:1px solid silver; padding:10px; } 
   
  
   

   
   var onMenu = false;
   var onImg = false;
   $(function() {
   $('#img').hover(
   function(){
   onImg = true;
   $('#menu').fadeIn('fast');
   },
   function(){
   onImg = false;
   setTimeout(function(){
   if (!onMenu) $('#menu').fadeOut('fast');
   },50);
   }
   );

   $('#menu').hover(
   function(){
   onMenu = true;
   },
   function(){
   onMenu = false;
   setTimeout(function(){
   if (!onImg) $('#menu').fadeOut('fast');
   },50);
   }
   );
   });
   

src="http://www.pups4sale.com.au/maltese_puppy_04.jpg"; width="287" 
height="356" />


   Nice Puppy
   Bad Puppy



- Jack

Aaron wrote:

Hi I  have a website that I am currently working on. I have user's to
upload images and select which image is default.

I want to make the user able to when they have the mouse over the
image to have a menu next to the image fade in.

Now the problem. I tried with hover and then tried using mouseover
functions.

The problem is when the user puts his mouse over his image it would
fade in a menu but when you move your mouse to put it on the menu it
fades out.

I don't know what to do.  I notice since I made the javascript to fade
in when mouse is on user image and when it's off user image it is then
faded out this is a problem since the menu if off the users image.

I been playing around with this. I  have the menu hidden first and
then faded in and out.

I want to have the user to be able to put the mouse on the user image
and move it off the image onto the menu and be able to click buttons
on it and if the mouse is off the users image and not on the menu then
the menu would fade out.

any Ideas???

[jQuery] Re: Need help making a menu appear next to the users image....

2008-09-04 Thread Aaron 

I already  Tried many ways... even hover events and mouse over events
been playing around with them and was not able to make them to
function as I want them too.

I want the user to put the mouse over their image to get a menu  to
fade in and when the mouse is off the users image I want the menu to
fade out only if the mouse is not over the menu.

I can't get it to work.