Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
138 lines (124 sloc) 4.38 KB
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Demo of jQuery Noverlap</title>
<meta name="description" content="Demo for Noverlap">
<meta name="author" content="Addy Osmani">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/style.css?v=2">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header>
<h1>Non-overlapping demo</h1>
</header>
<div id="main" role="main">
</div>
<p><h2>Animated Positioning</h2></p>
<p>
<div id="magic1">
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" style="position:absolute;left:609px;top:202px;background:red;width:120px;padding:5px;height:50px">elem</a>
</div>
</p>
<p><h2>Using String Selector & CSS-only positioning</h2></p>
<p>
<div id="magic2">
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
<a href="#" class="win">elem</a>
</div>
</p>
<p><h2>Using jQuery Selector & CSS positioning</h2></p>
<p>
<div id="magic3">
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
<a href="#" class="dot">elem</a>
</div>
</p>
<footer>
</footer>
</div>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->
<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-noverlap.js"></script>
<script type="text/javascript">
$(function(){
//$('#magic1 .win').noverlap({'regionWidth':'600px', 'regionHeight':'300px'}); //doesnt animate
//$('#magic1 .win').noverlap({'boundTo':'#magic1'});
$('#magic1 .win').noverlap({'boundTo':'#magic1','coords':[{'height':70,'width':140,'top':202,'left':609}]});
$('#magic2 .win').noverlap({'boundTo':'#magic2', 'animate':false});
//$('#magic3 .dot').noverlap({'boundTo':$('#magic3'), 'animate':false});
//$('#magic2 .win').noverlap({'boundTo':$('#magic2'),'animate':false});
//$('#magic3 .win').noverlap({'boundTo':$('#magic3'),'animate':false});
});
</script>
</body>
</html>