homepage Welcome to WebmasterWorld Guest from 54.234.143.43
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Little help with jQuery problem
Sub_Seven




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

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




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

Nobody?

Fotiman




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved