File: index.html

Recommend this page to a friend!
  Classes of Michele Andreoli   Corners detector   index.html   Download  
File: index.html
Role: Example script
Content type: text/plain
Description: Example of use
Class: Corners detector
Determine the coordinates of corners of an element
Author: By
Last change: update jquery library links
Date: 12 years ago
Size: 4,771 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Corners Detector Plugin</title> <link href="layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://jabprogramming.com/demos/JQuery/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://jabprogramming.com/demos/JQuery/jquery-ui/js/jquery-ui-1.8.14.custom.min.js"></script> <script type="text/javascript" src="http://jabprogramming.com/demos/multirotation/jquery.multirotation-1.1.js"></script> <script type="text/javascript" src="jquery.cornersdetector-1.0.js"></script> </head> <body> <div class="banner" style="margin:auto;text-align:center"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-1556550762157872"; /* jabprogr demo text */ google_ad_slot = "6496070893"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="working-space"> <div id="red_box" class="container">350x200 Drag the items to move them outside the container, or click to perform a rotation. <div id="square" class="draggable red square">50x50<br/>square</div> <div id="irect" class="draggable red rect">50x100<br/>irect</div> <div id="rect" class="draggable red irect">100x50<br/>rect</div> </div> </div> <div id="console" class="console"> <h1>Corners Detector Plugin Activity: </h1> <ul class="list"> </ul> </div> <div class="home_page"> <a title="go to home page" href="http://jabprogramming.com/jsclasses/corners-detector"><img class="home_page" alt="jabprogramming.com" src="http://jabprogramming.com/other/banner_l.png" /></a> </div> <div class="banner" style="margin:auto;text-align:center"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-1556550762157872"; /* jabprogr demo links */ google_ad_slot = "8478524329"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <script type="text/javascript"> $(function() { /* ROTATE ELEMENT */ $('div.draggable').live('click', function() { $(this).rotate({ angle: 45 }); writePosition($(this)); writeOuterCorners($(this)); $(this).moveElement($(this).getCurrentDegrees()); } ); /* DRAGGABLE ELEMENTS */ $('div.draggable').draggable({ cursor: 'move', helper: 'original', stack: '.red', distance: 10, stop: function(event, ui) { writePosition($(this)); writeOuterCorners($(this)); $(this).moveElement($(this).getCurrentDegrees()); } }); function writePosition(elem) { var name = elem.prop('id'); var console = $('div#console').find('ul.list'); var pts = elem.getCorners(elem.getCurrentDegrees()).elem_pts; console.append('<li>$(#' + name + ').getCorners('+ elem.getCurrentDegrees() +').elem_pts = A[' + pts.a.x + ','+ pts.a.y +'], B[' + pts.b.x + ','+ pts.b.y +'], C[' + pts.c.x + ','+ pts.c.y +'], D[' + pts.d.x + ','+ pts.d.y +']</li>'); console.parent().scrollTop(console.height()); } function writeOuterCorners(elem) { var name = elem.prop('id'); var console = $('div#console').find('ul.list'); var pts = elem.checkCorners(elem.getCurrentDegrees()); if (pts.length > 0) { console.append('<li class="error"> $(#'+name+') has ' + pts.length + ' point/s out of its container</li>'); var sublist = '<ul class="sublist">'; for (var i = 0; i < pts.length; i++) { var p = pts[i]; sublist += '<li>$(#' + name + ').checkCorners('+ elem.getCurrentDegrees() +')['+ i +'] = POINT['+ p.point.x +','+ p.point.y +'] OFFSET['+ p.offset.x +','+ p.offset.y +']</li>'; } sublist += '</ul>'; console.append(sublist); console.append('<li> $(#'+name+') was repositioned inside its container</li>'); } else { console.append('<li class="warn"> $(#'+name+') hasn\'t point/s out of its container</li>'); } console.parent().scrollTop(console.height()); } }); </script> </body> </html>