SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Timer for Delaying Drop-Down Hide Process

    Hello everyone,

    I am attempting to put a delay effect on hiding the drop-down menu when the user's mouse leaves the drop-down menu on my home page. The following code is inverting the behavior of the menu, as you can tell.

    Code JavaScript:
    	  var timer = false;
    	  $("#pMenu div, #bMenu div").hover(function(){
    	  	clearTimeout(timer);
    		$("#pMenu div, #bMenu div").show();
    	  },
    	  function(){
    		setTimeout(function(){
    			$("#pMenu div, #bMenu div").hide();
    		}, 400);
    	  });

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    I am attempting to put a delay effect on hiding the drop-down menu when the user's mouse leaves the drop-down menu
    Currently it is CSS that is causing your drop down menu to show and hide.

    Am I right to believe that you are wanting to make it easier for the menu to remain on the screen while a person moves their mouse around?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Currently it is CSS that is causing your drop down menu to show and hide.

    Am I right to believe that you are wanting to make it easier for the menu to remain on the screen while a person moves their mouse around?
    Yes, that is the idea.

    Here are the styles for the drop-down menu:
    Code:
    @charset "utf-8";
    /* Drop Down Menus */
    
    /*******************/
    /*PERSONAL NAV MENU*/
    /*******************/
    #pMenu{
    	padding:94px 0 0 47px;
    	background:url(pMenuBG.gif) no-repeat scroll 50% 39px transparent;
    	height:350px;
    	z-index:50;
    	margin:0 auto;
    }
    
    #pMenu ul{
    	margin:0;
    	padding:0;
    }
    
    #pMenu li{
    	list-style:none;
    	float:left;
    	margin-right:10px;
    	position:relative;
    	letter-spacing:2px;
    }
    
    #pMenu li li{
    	width:100%;
    	padding-top:1px;
    	margin-right:2px;
    	text-align:left;
    	list-style:square;
    	list-style-position:inside;
    	min-width:140px;
    	letter-spacing:1px;
    }
    
    #pMenu a{text-decoration:none;}
    #pMenu li>a{
    	color: #FFF;
    	text-shadow:1px 1px 3px #000;
    	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
    	min-width:50px;
    	padding:3px;
    	border:5px groove #BB0013;
    	font-size:16px;
    	font-weight:bold;
    	
    	/*begin main gradient*/
    	background: #a90329; /* Old browsers */
    	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    	/*end main gradient*/
    }
    
    #pMenu a:hover, #pMenu li:hover a, #pMenu a:active, #pMenu li:active a{
              color:#FF0;
    		  
    		  /*begin hover gradient top level*/
    		  background: #a0030b; /* Old browsers */
    		background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); 		/* FF3.6+ */
    		background: -webkit-gradient(linear, left top, left bottom, 			color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
    		background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
    		background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
    		background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); 				/* IE10+ */
    		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
    		background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
    }
    	
    #pMenu div{
    	left:-999em;
    	position:absolute;
    	margin-top:8px;
    	border:2px solid #003;
    	padding:4px;
    	z-index:2;
    		
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{left:0;}
    
    #health{width:275px;}
    #insurance{margin-left:-30px; width:260px;}
    #general{margin-left:-78px; width:280px;}
    #dating{margin-left:-87px; width:200px;}
    #education{margin-left:-108px; width:225px;}
    #pLegal{margin-left:-181px; width:225px;}
    
    #pMenu li:hover li a{
           color:#039;
    	   text-decoration:underline;
    	   text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    #pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
    	text-decoration:none;
    	color:#069;
    }
    
    #pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
    	color:#0F0;
    	background:none;
    	filter:none;
    	border:none;
    }
    
    #pMenu h3, #pMenu h2{margin:0;}
    #pMenu li li{padding:0 2px 0 0;}
    
    #pMenu h2{
    	font-style:bold;
    	text-align:left;
    	font-size:14px;
    	padding-left:3px;
    }
    #pMenu li:hover h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #pMenu li:hover h2 a:hover, #pMenu li:hover h2 a:active, #pMenu li:hover h2 a:focus{color:#33C; text-decoration:none;}
    
    #pMenu h3{
    	text-align:left;
    	color:#000000;
    	font-size:13px;
    	padding-left:20px;
    }
    #pMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a:hover, #pMenu li:hover h3 a:active{color:#33C; text-decoration:none;}
    
    #pMenu h3 span{
    	display:list-item;
    	list-style-type:disc;
    	list-style-position:inside;
    }
    /******************/
    /*End Personal Nav*/
    /******************/
    
    /**************/
    /*BIZ NAV MENU*/
    /**************/
    #bMenu{
    	background:url(bMenuBG.gif) no-repeat scroll 50% 82px transparent;
    	width:560px;
    	margin:0 auto;
    	height:78px;
    	padding-top:100px;
    	z-index:40;
    }
    
    #bMenu li{
    	list-style:none;
    	float:left;
    	position:relative;
    	margin-right:11px;
    	letter-spacing:2px;
    }
    
    #bMenu ul{margin:0; padding:0;}
    #bMenu h2{margin:0;}
    #bMenu li li{padding-top:0; padding-bottom:0; margin:0;}
    
    #bMenu a{text-decoration:none;}
    #bMenu li>a{
    	color: #FFF;
    	/*text shadow*/
    	text-shadow:1px 1px 3px #000;
    	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
    	font-weight:bold;
    	width:auto;
    	padding:3px;
    	border:5px groove #09F;
    	font-size:16px;
    
    	/*main gradient*/
    	background: #1e5799; /* Old browsers */
    	background: -moz-linear-gradient(top, #1e5799 0%, #5578e0 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#5578e0)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #1e5799 0%,#5578e0 100%); /* IE10+ */
    	background: linear-gradient(top, #1e5799 0%,#5578e0 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5578e0',GradientType=0 ); /* IE6-9 */
    }
    
    #bMenu li:hover a, #bMenu a:hover, #bMenu li:active a, #bMenu a:active{
        color:#FF0;
    	
    	/*main hover gradient*/
    	background: #738fdd; /* Old browsers */
    	background: -moz-linear-gradient(top, #738fdd 0%, #1e5799 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#738fdd), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #738fdd 0%,#1e5799 100%); /* IE10+ */
    	background: linear-gradient(top, #738fdd 0%,#1e5799 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#738fdd', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    }
    
    #bMenu li li{
    	width:100%;
    	padding-top:1px;
    	padding-bottom:1px;
    	margin-left:2px;
    	text-align:left;
    	list-style:square;
    	list-style-position:inside;
    	letter-spacing:1px;
    }
    
    #bMenu li:hover div{left:0;}
    
    #bMenu div{
    	left:-999em;
    	bottom:25px;
    	position:absolute;
    	padding:4px;
    	border:2px solid #003;
    	
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #bMenu li:hover li a{
           color:#039;
    	   text-decoration:underline;
    	   text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    #bMenu li:hover li a:hover, #bMenu li:hover li a:focus, #bMenu li:hover li a:active{
    	text-decoration:none;
    	color:#069;
    }
    
    #bMenu div a:hover, #bMenu div a:focus, #bMenu div a:active{
    	color:#0F0;
    	background:none;
    	filter:none;
    	border:none;
    }
    
    #bMenu h2{
    	font-style:bold;
    	text-align:left;
    	font-size:14px;
    	padding-left:3px;
    }
    #bMenu li:hover h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #bMenu li:hover h2 a:hover, #bMenu li:hover h2 a:active, #bMenu li:hover h2 a:focus{color:#33C; text-decoration:none;}
    
    
    #bMenu h3{
    	text-align:left;
    	font-size:13px;
    	padding:4px 0 0 25px;
    	color:#000000;
    	margin:2px 0 2px 0;
    }
    #bMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #bMenu li:hover h3 a:hover, #bMenu li:hover h3 a:active, #bMenu li:hover h3 a:focus{color:#33C; text-decoration:none;}
    
    #bMenu h3 span{
    	display:list-item;
    	list-style-type:disc;
    	list-style:disc;
    	list-style-position:inside;
    }
    
    #bizopps{width:260px; z-index:3;}
    #bizservices{width:280px; margin-left:-68px; z-index:3;}
    #bLegal{width:240px; margin-left:-121px; z-index:3;}
    /**************/
    /**End Biz Nav*/
    /**************/
    
    #wrapper{height:auto; width:auto; background:url("homepagedivider.gif") no-repeat 50% 20px;}

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    Yes, that is the idea
    Okay - when CSS is being used for hover techniques, JavaScript cannot override the CSS in that regard.
    It looks to be a nice CSS menu that you have there, and I do believe that with some tweaking it can work much better for you.

    So I'll send this thread over to the CSS forum because I believe that some people there may be able to help you better to find a solution for your problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can use CSS3 transitions to delay the drop menu. E.g.:

    http://www.greywyvern.com/?post=337

    Won't work in older browsers, but WTH ...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just for fun, I wanted to try that CSS3 myself. I've used it with Paul O'Brien's dropdown:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>CSS Drop down with delay</title>
    
    
    <style type="text/css">
    body {font: 100% Verdana, Arial, Helvetica, sans-serif;}
    
    #nav {margin-bottom: 30px;}
    
    #nav:after {content:""; display:table; clear:both;}
    
    ul#nav, ul#nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    ul#nav  li {
    	position: relative;
    	float: left;
    	width:149px;
    }
    	
    #nav li ul {
    	position: absolute;
    	top: auto;
    	left:0;
    }
    
    ul#nav  li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #ffffcc;
    	padding: 5px;
    	border: 1px solid #ccc;
    	margin-bottom:-1px;
    	min-height:0;
    }
     
    #nav li:hover a,#nav  li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
       	color: #fff;
       	background-color: red;}
    
    #nav li:hover li a,#nav li.over li a {
       	color: #777;
       	background-color: #ffffcc;
    }
    
    #nav li ul li a { padding: 2px 5px; }  
    
    /* the CSS from greywyvern */
    
    #nav li > ul {
      visibility:hidden;
      opacity:0;
      transition:visibility 0s linear 0.5s,opacity 0.5s linear;
    }
    
    #nav li:hover > ul {
      visibility:visible;
      opacity:1;
      transition-delay:0s;
    }
    
    </style>
    </head>
    <body> 
    <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a> 
        <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Offices</a></li>
        </ul>
      </li> 
      <li><a href="#">Services</a> 
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Internet Marketing</a></li>
          <li><a href="#">Hosting</a></li>
          <li><a href="#">Domain Names</a></li>
          <li><a href="#">Broadband</a></li>
        </ul>
      </li> 
      <li><a href="#">Contact Us</a> 
        <ul>
          <li><a href="#">United Kingdom</a></li>
          <li><a href="#">France</a></li>
          <li><a href="#">USA</a></li>
          <li><a href="#">Australia</a></li>
        </ul>
      </li> 
    </ul> 
    
    <p>Dropdown example by <a href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm">Paul O'Brien</a>, modified for hover delay based on this <a href="http://www.greywyvern.com/?post=337">greywyvern post</a>.</p>
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    In the case of the original post, it would look something like this:

    Code:
    #pMenu li > div {
      visibility:hidden;
      opacity:0;
      transition:visibility 0s linear 0.5s,opacity 0.5s linear;
    }
    
    #pMenu li:hover > div {
      visibility:visible;
      opacity:1;
      transition-delay:0s;
    }
    Hoever, the current JS needs to be removed, which otherwise can be done with CSS (for testing purposes):

    Code:
    #pMenu div {
    left: 0 !important; display: block !important;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, that certainly is an interesting transition property to play with in CSS.

    It doesn't help accomplish my goal of allowing a short time period before the menu fades away, which won't annoy visitors if their mouse leaves the div area for a quick second, which they'll immediately lose view of the drop-down options.

    When the user's mouse leaves the div area, the child links are taking on the styles of the main-level links (red blocks with groove borders). I'm confident I can figure that out as it most likely is the target specified for the child links.

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Timer Effect Accomplished but No Nifty Fade-In Effect

    Edit: Still trying to obtain the effects... unsuccessfully, with the following styles:

    Code:
    #pMenu li > div{
    	visibility:hidden;
    	opacity:0;
    	transition-delay:3s;
    	transition:visibility 1s linear 0.5s,opacity 0.5s linear;
    	position:absolute;
    	margin-top:8px;
    	border:2px solid #003;
    	padding:4px;
    	z-index:2;
    		
    	/*second gradient*/
    	background: #9ebcbf; /* Old browsers */
    	background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
    	background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    I updated the files on the live site, so you can see the behavior.

    Edit: I am still not seeing the time elapse after the mouse leaves the area.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •