<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get Cursor Position</title>
<script src="js/jquery.js"></script>
</head>
<style>
#dep{width:100%; max-width:400px; position:relative; margin:30px auto 0;}
#dep ul.tabing{margin:0; padding:0;list-style:none;}
#dep ul.tabing li{float:left;}
#dep ul.tabing li a{ background:#236699;border-right: 1px solid #fff;color: #fff;display: block;font-family: open sans;padding: 10px;text-transform: capitalize;}
#dep .code{position:absolute;}
</style>
<body>
<div id="dep">
<ul class="tabing">
<li><a href="#">satish</a></li>
<li><a href="#">mallick</a></li>
<li><a href="#">ui</a></li>
<li><a href="#">designer</a></li>
</ul>
<div class="code">
fast
</div>
<div class="code">
conversion
</div>
<div class="code">
pvt
</div>
<div class="code">
Ltd
</div>
</div>
</body>
</html>
<script>
$(window).load(function(e) {
$('#dep').children('.code').hide();
//$('#dep').children('.code').eq(0).show();
});
$(document).ready(function(e) {
$('.tabing li').mouseenter(function(e) {
var t = parseInt($(this).width());
var cindex = $(this).index();
var allwidth = 0;
for(var k =0;k<=cindex;k++){
allwidth = allwidth + parseInt($(this).parent('ul').children('li').eq(k).width());
}
var finallengt = allwidth - $(this).width();
console.log($(this).width()+"toal width is:"+allwidth+"------"+finallengt)
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.tabing li').removeClass('active');
$('#dep').children('.code').hide();
$(this).addClass('active');
$('#dep').children('.code').eq($(this).index()).css("top","50px").css("left",finallengt).show().css('z-index','9999');
});
$('.tabing li').mouseleave(function(e) {
$('#dep').children('.code').hide();
});
});
</script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get Cursor Position</title>
<script src="js/jquery.js"></script>
</head>
<style>
#dep{width:100%; max-width:400px; position:relative; margin:30px auto 0;}
#dep ul.tabing{margin:0; padding:0;list-style:none;}
#dep ul.tabing li{float:left;}
#dep ul.tabing li a{ background:#236699;border-right: 1px solid #fff;color: #fff;display: block;font-family: open sans;padding: 10px;text-transform: capitalize;}
#dep .code{position:absolute;}
</style>
<body>
<div id="dep">
<ul class="tabing">
<li><a href="#">satish</a></li>
<li><a href="#">mallick</a></li>
<li><a href="#">ui</a></li>
<li><a href="#">designer</a></li>
</ul>
<div class="code">
fast
</div>
<div class="code">
conversion
</div>
<div class="code">
pvt
</div>
<div class="code">
Ltd
</div>
</div>
</body>
</html>
<script>
$(window).load(function(e) {
$('#dep').children('.code').hide();
//$('#dep').children('.code').eq(0).show();
});
$(document).ready(function(e) {
$('.tabing li').mouseenter(function(e) {
var t = parseInt($(this).width());
var cindex = $(this).index();
var allwidth = 0;
for(var k =0;k<=cindex;k++){
allwidth = allwidth + parseInt($(this).parent('ul').children('li').eq(k).width());
}
var finallengt = allwidth - $(this).width();
console.log($(this).width()+"toal width is:"+allwidth+"------"+finallengt)
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.tabing li').removeClass('active');
$('#dep').children('.code').hide();
$(this).addClass('active');
$('#dep').children('.code').eq($(this).index()).css("top","50px").css("left",finallengt).show().css('z-index','9999');
});
$('.tabing li').mouseleave(function(e) {
$('#dep').children('.code').hide();
});
});
</script>
Hello,
No comments:
Post a Comment