<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="hj hart" />
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="autopositioning.jquery.js"></script>
<style>
#main_canvas
{
margin-left: -100px;
margin-top: -100px;
border: 2px solid black;
width: 2900px;
height:500px;
position:absolute;
background:white;
z-index:1;
}
#sub_canvas
{
margin-left: -30px;
border: 2px solid black;
width: 300px;
height:300px;
position:absolute;
background:white;
z-index:2;
}
#element
{
margin-left: -20px;
border: 2px solid black;
width: 200px;
height:200px;
position:absolute;
background:white;
z-index:3;
}
#main_canvas2
{
margin-left: 1200px;
margin-top: 600px;
border: 2px solid black;
width: 350px;
height:400px;
position:absolute;
background:white;
z-index:4;
}
#sub_canvas2
{
margin-left: -40px;
border: 2px solid black;
width: 300px;
height:300px;
position:absolute;
background:white;
z-index:5;
}
#element2
{
margin-left: -50px;
border: 2px solid black;
width: 200px;
height:200px;
position:absolute;
background:white;
z-index:6;
}
</style>
</head>
<body id="body_id">
<div id="main_canvas">
I am a div and I contain a sub div<br />I will stay within the screen and keep a margin of 100px, if needed, I will resize
<div id="sub_canvas">
<!--
-->
I am also a div and I contain an other sub div<br />I will stay within my parent and keep a margin of 60px
<div id="element">
<!--
-->
I am the last div..<br />I will stay within my parent and keep a margin of 40px<br />
Callback-Reports:<br />
</div>
</div>
</div>
<div id="main_canvas2">
I am a div and I contain a sub div<br />I will stay within the screen keep a margin of 10px
<div id="sub_canvas2">
<!--
-->
I am also a div and I contain an other sub div<br />I will stay within my parent and keep a margin of 10px
<div id="element2">
<!--
-->
I am the last div..<br />I will stay within my parent and keep a margin of 10px
</div>
</div>
</div>
<script>
function pre_foo(o)
{
jQuery('#element').append('<div><strong>'+o.pre_callback_options.foo_time+'</strong>, '+o.pre_callback_options.msg+'</div>');
}
function post_foo(o)
{
jQuery('#element').append('<div><strong>'+o.post_callback_options.foo_time+'</strong>, '+o.post_callback_options.msg+'</div>');
}
jQuery(document).ready(function() {
/* */
jQuery('#main_canvas').autopos(
{
debug: 1, // check console for some details.. - default: 0
boundary_element:'screen', // screen, auto(will try to use the parent) or an id-selector - default: auto
animation_time:1000, // how long shall an animation take - default: 500
element_margin:100, // margin to keep - default: 20
resize_to_fit:true, // if the popup is too big, make it smaller - default: false
//resize_to_fill:false, // allways fill the boundary element, respects margin - default: false
//pre_callback_options:{'any_var_name':'any value'}, // pass options to the pre-callback
//pre_callback:'', // wanna do stuff before positioning?
//post_callback_options:{'any_var_name':'any value'}, // pass options to the post-callback
//post_callback:'' // wanna do stauff after positioning?
});
/* */
/* */
jQuery('#sub_canvas').autopos(
{
debug: 1,
element_margin:60,
boundary_element:'main_canvas',
animation_time:2000,
});
/* */
/* */
jQuery('#element').autopos(
{
debug: 1,
element_margin:40,
boundary_element:'sub_canvas',
animation_time:4000,
pre_callback_options:{'foo_time':'pre callback','msg':"div 3 starts it's movement"},
post_callback_options:{'foo_time':'post callback','msg':"div 3 has ended it's movement"},
pre_callback:pre_foo,
post_callback:post_foo
});
/* */
/* */
jQuery('#main_canvas2').autopos(
{
boundary_element:'screen',
animation_time:4000,
element_margin:10,
resize_to_fit:true,
pre_callback:'',
post_callback:''
});
/* */
/* */
jQuery('#sub_canvas2').autopos(
{
element_margin:10,
animation_time:5000,
pre_callback:'',
post_callback:''
});
/* */
/* */
jQuery('#element2').autopos(
{
element_margin:10,
animation_time:6000,
pre_callback:'',
post_callback:''
});
/* */
});
</script>
</body>
</html>
|
Download
