Page is a not externally linkable
Sub_Seven - 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.