1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Little help with jQuery problem

         

Sub_Seven

6:44 pm on May 5, 2012 (gmt 0)

10+ Year Member



Hello,

I need a little help with something I'm almost done with, I have a little problem and I have tried so many different things I feel like I'm running out of options.

If someone could be so kind to run this HTML and CSS locally for a better understanding of my problem.

I'll explain briefly what I'm trying to achieve:

1 - I get the position of the cursor to determine in which block with the class of .cat the mouse is in.
2 - Based on this I toggle the display of a child div with the class of .subCat with some animation.
3 - When the mouse moves away the div with the class of .subCat goes back to original position and hides.

It's all working just fine except for the fact that is the mouse changes too fast from one block to another, the position of the toggled .subCat div something goes off from where it should be.

If someone could reproduce the code locally would be able to spot the problem pretty easy.

Below the CSS and HTML needed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./css/styles.css" media="screen" />
</head>
<body>
<div id="screen">
<div class="genH" id="headerH">
<div id="header">
<p class="center">Header</p>
</div>
</div>
<div class="genH">
<div>
<div id="content">
<h1 id="status2" class="center">Title</h1>
<div class="cat">
<h2 class="center">Category 1</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 1</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 2</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 2</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 3</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 3</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 4</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 4</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 5</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 5</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 6</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 6</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 7</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 7</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 8</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 8</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 9</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 9</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 10</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 10</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 11</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 11</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 12</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 12</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
</div>
<div class="rightpanel">
<p class="center">Right Panel</p>
<ul>
<li>Some</li>
<li>Links</li>
<li>under</li>
<li>this</li>
<li>unordered</li>
<li>list</li>
<li>for</li>
<li>navigation</li>
<li>purposes</li>
<li>!</li>
</ul>
</div>
</div>
</div>
<div id="clearfooter"></div>
</div><!-- #screen -->
<div class="genH" id="footer">
<p class="center">Footer</p>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#content").bind('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
if(x >= 10 && x < 240){
$(".cat").hover(function(){
$(this).children('.subCat').css({zIndex: 1,display: 'inline'});
$(this).children('.subCat').stop().animate({
opacity: 1,
position: 'absolute',
top: 0,
left: 0
}, 500 );
},function(){
$(this).children('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
});
}
else if(x >= 250 && x < 480){
$(".cat").hover(function(){
$(this).children('.subCat').css({zIndex: 1,display: 'inline'});
$(this).children('.subCat').stop().animate({
opacity: 1,
position: 'absolute',
top: 0,
left: '-240px'
}, 500 );
},function(){
$(this).children('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
});
}
else if(x >= 490 && x < 720){
$(".cat").hover(function(){
$(this).children('.subCat').css({zIndex: 1,display: 'inline'});
$(this).children('.subCat').stop().animate({
opacity: 1,
position: 'absolute',
top: 0,
left: '-480px'
}, 500 );
},function(){
$(this).children('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
});
}
else{
$('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
}
});
</script>
</body>
</html>


@charset "utf-8";
*,body{margin:0;padding:0;}
html{overflow-x:hidden;overflow-y:scroll;}
html,body{height:100%;font-family:Arial, "Arial Unicode MS";}
img{border:none;}
h1{font-size:1.4em;margin-bottom:15px;}
h2{font-size:.8em;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
ul li{list-style:none;}
.clear{clear:both;}
.center{text-align:center ! important;}
.right{text-align:right;}
.genH{width:100%;min-width:960px;}
.green{color:green;}
.italic{font-style:italic;}
.button{padding:3px 7px;}
.red{color:red ! important;}
.fleft{float:left;}
.fright{float:right;}
#screen{width:100%;min-height:100%;margin-bottom:-170px;position:relative;}
#clearfooter{height:170px;clear:both;margin-top:15px;}
#headerH{margin-bottom:30px;background:#ccc;}
#header{width:960px;height:115px;position:relative;}
#footer{height:140px;padding-top:30px;position:relative;background:#ccc;}
.genH > div,.genH #header{margin:0 auto;width:960px;}
#active a:link,#active a:active,#active a:hover,#active a:visited{}
#content{float:left;width:720px;padding:5px;margin-right:10px;background:#fff;}
#content a:link,#content a:active,#content a:visited{color:#265c9c;font-weight:bold;}
#content a:hover{color:#265c9c;text-decoration:underline;font-weight:bold;}
.rightpanel{float:left;width:200px;padding:10px;}
#content,.rightpanel{margin-bottom:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
-webkit-box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;}
#content p,.rightpanel p{text-align:justify;font-family:Georgia, serif;margin:1.12em 0;line-height:25px;color:#464646;}
.rightpanel ul li{list-style:none;font-size:.8em;font-family:Georgia, serif;margin:5px 0;}
.rightpanel li a:link,.rightpanel li a:active,.rightpanel li a:visited{color:#fff;text-shadow:1px 1px 0px #000;}
.rightpanel li a:hover{text-decoration:underline;}

.cat{float:left;width:220px;padding:5px;margin:5px;position:relative;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
-webkit-box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;}
.subCat{position:absolute;top:0;padding:5px;width:700px;background:#fff;z-index:1;opacity:0;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
-webkit-box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;}


Any help would be highly appreciated, thanks in advanced for any responses provided.

Sub_Seven

11:52 pm on May 9, 2012 (gmt 0)

10+ Year Member



Nobody?

Fotiman

12:10 am on May 10, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Sorry, I started to look, but then was overwhelmed by the sheer amount of code you posted. Perhaps you'll get more participation if you trim it down some.

Fotiman

12:19 am on May 10, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The jQuery stop() [api.jquery.com] documentation talks about a jumpToEnd parameter. Sounds like it "may" be related to what you're seeing. Have you played around with that at all?

Sub_Seven

12:29 am on May 10, 2012 (gmt 0)

10+ Year Member



I suppose you're right Fotiman,

I did trim it down, hope this is enough, if I cut more code you (or anyone else for that matter) wouldn't be able to see what I'm trying to expose, here is the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<body>
<div id="screen">
<div id="content">
<div class="cat">
<h2 class="center">Category 1</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 1</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 2</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 2</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 3</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 3</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 4</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 4</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 5</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 5</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
<div class="cat">
<h2 class="center">Category 6</h2>
<p>Category description here</p>
<div class="subCat">
<h2 class="center">Category 6</h2>
<p>Category description here</p>
<p>More Category description here</p>
</div>
</div>
</div>
</div><!-- #screen -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#content").bind('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
if(x >= 10 && x < 240){
$(".cat").hover(function(){
$(this).children('.subCat').css({zIndex: 1,display: 'inline'});
$(this).children('.subCat').stop().animate({
opacity: 1,
position: 'absolute',
top: 0,
left: 0
}, 500 );
},function(){
$(this).children('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
});
}
else if(x >= 250 && x < 480){
$(".cat").hover(function(){
$(this).children('.subCat').css({zIndex: 1,display: 'inline'});
$(this).children('.subCat').stop().animate({
opacity: 1,
position: 'absolute',
top: 0,
left: '-240px'
}, 500 );
},function(){
$(this).children('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
});
}
else if(x >= 490 && x < 720){
$(".cat").hover(function(){
$(this).children('.subCat').css({zIndex: 1,display: 'inline'});
$(this).children('.subCat').stop().animate({
opacity: 1,
position: 'absolute',
top: 0,
left: '-480px'
}, 500 );
},function(){
$(this).children('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
});
}
else{
$('.subCat').css({'zIndex': '-1','position': 'absolute','top':0,'left':0,'opacity': 0,'display': 'none'});
}
});
</script>
</body>
</html>

@charset "utf-8";
html,body{height:100%;}
.center{text-align:center ! important;}
.genH{width:100%;min-width:960px;}
.fleft{float:left;}
.fright{float:right;}
#screen{width:100%;min-height:100%;margin-bottom:-170px;position:relative;}
#content{float:left;width:720px;padding:5px;margin-right:10px;background:#fff;}
#content p{margin:1.12em 0;line-height:25px;}
.cat{float:left;width:220px;padding:5px;margin:5px;position:relative;
-webkit-box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;}
.subCat{position:absolute;top:0;padding:5px;width:700px;background:#fff;z-index:1;opacity:0;
-webkit-box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;box-shadow: 1px 1px 1px 0px #000,-1px -1px 1px 0px #000;}


I know the HTML is still big but that's as much as I can trim it, hope this is better, thanks a lot.

Sub_Seven

12:39 am on May 10, 2012 (gmt 0)

10+ Year Member



Hey again Fotiman,

I tried both options stop(false, true) and stop(true, true) just for the sake of testing but the results are not positive, the only difference is the animation loses smoothness but the misplacing of the hidden div when the mouse is moved too quick from one div to another is still there.

Fotiman

5:02 pm on May 10, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I played around with it a bit. Here's what I think the problem is.

When you mouseover the content area, depending on the coordinates of the mouse, you set the hover (handlerIn and handlerOut) values for ALL of the ".cat" elements, vs. just the one you are currently hovering over. Suppose you hover over something in column 1... it calculates that the x coordinate is < 240, and attaches a hover handler to the ".cat" element in column 2 (as well as all other ".cat" elements, but lets focus on column 2 for now) which specifies a css "left" value of 0. Now, when you move the mouse over the ".cat" element in column 2, you have a race condition between the current hover handler for the item in column 2 (which, as mentioned, has a left value of 0 that is not correct for column 2), and the mouseover handler that attaches a new hover handler with the correct left setting for column 2.

That's as far as I've gotten with it so far, but hopefully that gives you some ideas.

[edited by: Fotiman at 5:45 pm (utc) on May 10, 2012]

Sub_Seven

5:44 pm on May 10, 2012 (gmt 0)

10+ Year Member



Well,

True, I'm calling all .cat(s) and .subCat(s) elements to keep jQuery as simple as possible assuming that running them under $(this) it would rule out all other -not- being hovered by the mouse.

I suppose I could expand the jQuery to look for specific IDs and that would definitely fix the issue but maintaining that code would be a nightmare and a total mess taking into account the idea is to have this divs be generated from a DB...

Thanks for taking the time to see it btw.

Fotiman

5:54 pm on May 10, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I made a minor tweak, which seems to be a slight improvement. I updated your code to filter the .cat using the :nth-child selector. This seems to provide better results, but it seems the animation of the right and center columns to the left side only happens the first time they are hovered. Here's the code: 

$("#content").bind('mousemove', function (e) {
  var x = e.pageX - this.offsetLeft;
  if (x >= 10 && x < 240) {
    $(".cat").filter(":nth-child(3n-1)").hover(function () {
      $(this).children('.subCat').css({
        zIndex: 1,
        display: 'inline'
      });
      $(this).children('.subCat').stop().animate({
        opacity: 1,
        position: 'absolute',
        top: 0,
        left: 0
      }, 500);
    }, function () {
      $(this).children('.subCat').css({
        'zIndex': '-1',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0,
        'display': 'none'
      });
    });
  } else if (x >= 250 && x < 480) {
    $(".cat").filter(":nth-child(3n)").hover(function () {
      $(this).children('.subCat').css({
        zIndex: 1,
        display: 'inline'
      });
      $(this).children('.subCat').stop().animate({
        opacity: 1,
        position: 'absolute',
        top: 0,
        left: '-240px'
      }, 500);
    }, function () {
      $(this).children('.subCat').css({
        'zIndex': '-1',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0,
        'display': 'none'
      });
    });
  } else if (x >= 490 && x < 720) {
    $(".cat").filter(":nth-child(3n+1)").hover(function () {
      $(this).children('.subCat').css({
        zIndex: 1,
        display: 'inline'
      });
      $(this).children('.subCat').stop().animate({
        opacity: 1,
        position: 'absolute',
        top: 0,
        left: '-480px'
      }, 500);
    }, function () {
      $(this).children('.subCat').css({
        'zIndex': '-1',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0,
        'display': 'none'
      });
    });
  } else {
    $('.subCat').css({
      'zIndex': '-1',
      'position': 'absolute',
      'top': 0,
      'left': 0,
      'opacity': 0,
      'display': 'none'
    });
  }
});

Sub_Seven

6:18 pm on May 10, 2012 (gmt 0)

10+ Year Member



I'll play around with it and see what I get, I'll keep you posted, thanks a lot!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026