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