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!

Register Log in
  • Congratulations strongm 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

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
 
Sort by date Sort by votes
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);
});
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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

 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
Hei, Big J!
[thumbsup][thumbsup][thumbsup][thumbsup]
You saved my life.
5 stars to you boy.

THANKS.

Sergio
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
373
Kennelbloke
Kennelbloke
trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
275
trevil620
trevil620
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
279
coldbohemia
coldbohemia
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
88
Dara2020
Dara2020

Part and Inventory Search

Sponsor

Back
Top