File: click-event-example.html

Recommend this page to a friend!
  Classes of Hensel Hartmann  >  jQuery Auto Positioning  >  click-event-example.html  >  Download  
File: click-event-example.html
Role: Example script
Content type: text/plain
Description: usage demo
Class: jQuery Auto Positioning
Move elements to stay within a specified boundary
Author: By
Last change:
Date: 9 years ago
Size: 4,121 bytes
 

Contents

Class file image Download
<!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>