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: 12 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>