<!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>
#gui
{
border: 2px solid black;
width: 600px;
height:300px;
margin-left: 40%;
}
#element,#element2
{
margin-left: 20px;
border: 2px solid black;
cursor:pointer;
float:left;
width: 200px;
height:40px;
text-align:center;
}
#sub_canvas
{
margin-left: -130px;
border: 2px solid black;
width: 600px;
height:600px;
display:none;
background:silver;
margin-left: 40%;
}
</style>
</head>
<body id="body_id">
<div style="width: 200%;">
somewhere on the right, you will find a test-element..
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="gui">
Click to open a "Tool-Tip". <br />
The problem is, it is too big, it will be partially outside the screen.<br />
AutoPositioning will correct that..<br />
You can scroll the page to get different test cases..<br />
<br /><strong>both examples use:</strong><br />
boundary_element:<strong>'screen'</strong><br />
resize_to_fit:<strong>true</strong><br />
animation_time:<strong>220</strong><br />
element_margin:<strong>20</strong><br />
<br />
<div id="element2">
resize_to_fill:<strong>false</strong><br />
</div>
<div id="element">
resize_to_fill:<strong>true</strong><br />
</div>
</div>
<br />
<div id="sub_canvas">
<span style="float: right;" id="close_link">CLOSE</span>
I am the tool tip that is too big..<br />
Use the scrolbars to move me out of sight and than click my parent again..<br />
I will jump back into sight..
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<script>
jQuery(document).ready(function() {
jQuery('#element').bind('click',show_tooltip);
jQuery('#element2').bind('click',show_tooltip2);
jQuery('#close_link').bind('click',function(){jQuery('#sub_canvas').hide();});
});
function show_tooltip(el_id)
{
jQuery('#sub_canvas').show().autopos(
{
debug: 1, // check console for some details.. - default: 0
boundary_element:'screen', // screen, auto or an id-selector
resize_to_fit:true, // if the popup is too big, make it smaller
resize_to_fill:true, // allways fill the boundary element, respects margin
animation_time:220, // how long shall an animation take
element_margin:20, // margin to keep
pre_callback:'', // wanna do stuff before positioning?
post_callback:'' // wanna do stauff after positioning?
});
}
function show_tooltip2(el_id)
{
jQuery('#sub_canvas').show().autopos(
{
debug: 1, // check console for some details..
boundary_element:'screen', // screen, auto or an id-selector - default: auto
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
animation_time:220, // how long shall an animation take - default: 500
element_margin:20, // margin to keep - default: 20
pre_callback:'', // wanna do stuff before positioning?
post_callback:'' // wanna do stauff after positioning?
});
}
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
