Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JQuery show menu OnMouseMove. 1

Status
Not open for further replies.

SBonfiglio

IS-IT--Management
Sep 15, 2008
24
IT
Hello Folks.
I have a customer who hates menus. She would like to see the menu the very few time she needs is, to make the selection and then hide again.
The ideal situation should be to display the menu with a quick fade in, then, if the mouse stops moving, after a certain timeout the menu fades out and disappears again.
I tried the following code, but unsuccessfully:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jQuery/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
function hideNav() {
$('#menu').stop().fadeIn(1000);
var menu = $('#menu');
menu.fadeOut(1000);
}

function showNav() {
$('#menu').stop().fadeIn(1000);
var menu = $('#menu');
menu.fadeIn(1000);
}
</script>

<script type="text/javascript">

var hide = setTimeout(function() {
hideNav();
}, 2000);

$(document).mousemove(function() {
clearTimeout(hide);
var hide = setTimeout(function() {
hideNav();
}, 2000);
showNav();
});

</script>

<title>TEST NAVIGATION HIDE-SHOW</title>
</head>
<body>
<div id="menu">
<table width="60%" border="1" cellspacing="0" cellpadding="5" align="center">
<tr>
<td width="20%" align="center">TEST FEATURE 1</td>
<td width="20%" align="center">TEST FEATURE 2</td>
<td width="20%" align="center">TEST FEATURE 3</td>
<td width="20%" align="center">TEST FEATURE 4</td>
<td width="20%" align="center">TEST FEATURE 5</td>
</tr>
</table>
</div>
</body>
</html>

The menu correctly fades out, but the mousemove action doesn't make it appear again.
Is there anybody who can tell me why ?
Thanks in advance for any help.

Sergio
 
this seems to work for me (I set the visibility of the menu div to display:none; in css.

Code:
$('document').ready( function(){
		
	var menu = $('#menu');
	var timer;
	var menuOn = false;
	var hideNav = function() {
		if (menuOn == true) {
			menu.stop(true);
			menu.fadeOut(1000);
			menuOn = false;
		}
	}
	var showNav = function(){
		if(menuOn == true) return;
		menu.stop( true );
		menuOn = true;
		menu.fadeIn( 1000, function(){
			timer = setTimeout(hideNav, 2000);
		});
	}
	$(document).on('mousemove', showNav);
});
 
Hi Sergio,

I suggest give he your client opportunity to show the manu and after he leaves box with menu its automatically disappear
example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST NAVIGATION HIDE-SHOW</title>

<script src="jquery.js"></script> <!-- change this to work on your PC -->

<style type="text/css">
#menu{ overflow: hidden; width: 600px; display: none; border: 1px solid red; }
#menu ul{ list-style-type: none;}
#menu li{float: left; background-color: #f1f1f1; padding: 10px; margin: 5px; }
#menu li:hover{ background-color: #ffffff; border: 1px solid #f1f1f1; cursor: pointer; }
</style>

<script type="text/javascript">
$(document).ready(function(){

$('#showMenu').click(function(){

$('#menu').fadeIn("slow");

});

$('#menu').mouseleave(function(){

$(this).fadeOut("slow");

})

});
</script>

</head>
<body>
<div id="showMenu">show menu</div>
<div id="menu">

<ul>
<li>FEATURE 1</li>
<li>FEATURE 2</li>
<li>FEATURE 3</li>
<li>FEATURE 4</li>
<li>FEATURE 5</li>
</ul>

</div>
</body>
</html>
 
Thank you jpadie.
Unfortunately it seems not working for me (i'm feeling a sort of idiot...).
Could you please post the complete example that works for you ?
Thanks in advance.
Sergio
 
Hi Krystian.
Thanks for your example, but it is mandatory to hide everything and not to force to click on a kind of MENU controller.
I prefer an active/passive functioning like the document.onmousemove management.
However thank you for your code.
I appreciate it.

Sergio

 
sure. I've tweaked the code a bit to fix a bug, make it more jQuery 'neat', reduce resources (by removing the event rather than conditioning its functionality) and to add timer for debugging

Code:
[b][COLOR=#000080]<!DOCTYPE[/color][/b] [COLOR=#009900]html[/color] [COLOR=#009900]PUBLIC[/color] [COLOR=#FF0000]"-//W3C//DTD XHTML 1.0 Transitional//EN"[/color] [COLOR=#FF0000]"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona..."[/URL][/color][b][COLOR=#000080]>[/color][/b]
[b][COLOR=#0000FF]<html[/color][/b] [COLOR=#009900]xmlns[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL][/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<head>[/color][/b]
[b][COLOR=#0000FF]<meta[/color][/b] [COLOR=#009900]http-equiv[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"Content-Type"[/color] [COLOR=#009900]content[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/html; charset=utf-8"[/color] [b][COLOR=#0000FF]/>[/color][/b]
[b][COLOR=#0000FF]<script[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/javascript"[/color] [COLOR=#009900]src[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"[/URL][/color][b][COLOR=#0000FF]></script>[/color][/b]

[b][COLOR=#0000FF]<script[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/javascript"[/color][b][COLOR=#0000FF]>[/color][/b]
$('document').ready( function(){
[tab][tab]
[tab]var menu = $('#menu');
[tab]var timer;
[tab]var mouseOver = false;
[tab]var ot =2000;
[tab]var t = ot;
[tab]var interval = 100;
[tab]
[tab]var display = function() {
[tab][tab]if(t>=0) $('#timer').html("Countdown: " + t);
[tab]};
[tab]
[tab]var decrement = function(){
[tab][tab]if(mouseOver == false) t = t-interval;
[tab][tab]display();
[tab]};
[tab]
[tab]var startTimer = function(){
[tab][tab]stopTimer();
[tab][tab]t=ot;
[tab][tab]timer = setTimeout(hideNav, ot);
[tab]};
[tab]
[tab]var stopTimer = function(){
[tab][tab]clearTimeout(timer);
[tab]};
[tab]var setWatcher = function(){
[tab][tab]menu.fadeIn(1000, function(){
[tab][tab][tab]menu.stop(true, true);
[tab][tab][tab]startTimer();
[tab][tab][tab]$(document).off('mousemove', setWatcher);
[tab][tab][tab]$(document).on('mousemove', startTimer); 
[tab][tab]});
[tab]};
[tab]
[tab]var hideNav = function(){
[tab][tab]menu.fadeOut(1000, function(){
[tab][tab][tab]menu.stop(true, true);
[tab][tab][tab]$(document).on( 'mousemove',  setWatcher);
[tab][tab][tab]$(document).off('mousemove', startTimer);
[tab][tab]});
[tab][tab]stopTimer(); //not really necessary
[tab]};

[tab]menu.on({
[tab][tab][tab]'mouseover': function(){
[tab][tab][tab][tab]mouseOver = true;
[tab][tab][tab][tab]menu.css('opacity', 1);
[tab][tab][tab][tab]menu.stop(true);
[tab][tab][tab][tab]stopTimer();
[tab][tab][tab][tab]$(document).off('mousemove', startTimer);
[tab][tab][tab]},
[tab][tab][tab]'mouseleave': function(){
[tab][tab][tab][tab]menu.css('opacity', 0.4);
[tab][tab][tab][tab]startTimer();
[tab][tab][tab][tab]$(document).on('mousemove', startTimer);
[tab][tab][tab][tab]mouseOver = false;
[tab][tab][tab]}
[tab][tab]});
[tab]
[tab]
[tab]$('div:not(:first)').css({  'margin-top': menu.height() + 10, 
[tab][tab][tab][tab][tab][tab][tab][tab]'background-color':'yellow'
[tab][tab][tab][tab][tab][tab][tab]});
[tab]
[tab]menu.css('opacity',0.4);

[tab]setWatcher();
[tab]setInterval(decrement, interval);
});
[b][COLOR=#0000FF]</script>[/color][/b]

[b][COLOR=#0000FF]<title>[/color][/b]TEST NAVIGATION HIDE-SHOW[b][COLOR=#0000FF]</title>[/color][/b]
[b][COLOR=#0000FF]</head>[/color][/b]
[b][COLOR=#0000FF]<body>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"menu"[/color] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]" position:fixed; background-color:#ADD4F5; top:0; overflow-y:hidden;"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][b][COLOR=#0000FF]<table[/color][/b] [COLOR=#009900]width[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"60%"[/color] [COLOR=#009900]border[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"1"[/color] [COLOR=#009900]cellspacing[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"0"[/color] [COLOR=#009900]cellpadding[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"5"[/color] [COLOR=#009900]align[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"center"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab][tab][b][COLOR=#0000FF]<tr>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<td[/color][/b] [COLOR=#009900]width[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"20%"[/color] [COLOR=#009900]align[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"center"[/color][b][COLOR=#0000FF]>[/color][/b]TEST FEATURE 1[b][COLOR=#0000FF]</td>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<td[/color][/b] [COLOR=#009900]width[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"20%"[/color] [COLOR=#009900]align[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"center"[/color][b][COLOR=#0000FF]>[/color][/b]TEST FEATURE 2[b][COLOR=#0000FF]</td>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<td[/color][/b] [COLOR=#009900]width[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"20%"[/color] [COLOR=#009900]align[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"center"[/color][b][COLOR=#0000FF]>[/color][/b]TEST FEATURE 3[b][COLOR=#0000FF]</td>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<td[/color][/b] [COLOR=#009900]width[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"20%"[/color] [COLOR=#009900]align[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"center"[/color][b][COLOR=#0000FF]>[/color][/b]TEST FEATURE 4[b][COLOR=#0000FF]</td>[/color][/b]
[tab][tab][tab][b][COLOR=#0000FF]<td[/color][/b] [COLOR=#009900]width[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"20%"[/color] [COLOR=#009900]align[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"center"[/color][b][COLOR=#0000FF]>[/color][/b]TEST FEATURE 5[b][COLOR=#0000FF]</td>[/color][/b]
[tab][tab][b][COLOR=#0000FF]</tr>[/color][/b]
[tab][b][COLOR=#0000FF]</table>[/color][/b]
[b][COLOR=#0000FF]</div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"margin-top:40px;"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab]body text goes here
[b][COLOR=#0000FF]</div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"timer"[/color][b][COLOR=#0000FF]></div>[/color][/b]
[b][COLOR=#0000FF]</body>[/color][/b]
[b][COLOR=#0000FF]</html>[/color][/b]
 
Hei, Big J!
[thumbsup][thumbsup][thumbsup][thumbsup]
You saved my life.
5 stars to you boy.

THANKS.

Sergio
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top