Iframe cropping tool in JavaScript via drag n drop rectangle creator

Iframe cropping tool in JavaScript via drag n drop rectangle creator

Cancelled

Job Description

Here is an example of a cropped iframe: http://snapplr.com/5e4k

And here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
#mainContainer {width:100%;}
#theFrame {width: 300px; height: 400px; margin:0 auto; overflow:hidden;}
iframe {border:none; width: 1280px; height:1000px;display:block;position:relative;left:-140px;top:-70px;}
</style>
</head>

<body>

<div id="mainContainer">
<div id="theFrame">
<iframe src="http://en.wikipedia.org/wiki/Al_Pacino" scrolling="no"></iframe>
</div>
</div>

</body>
</html>


That is an iframe in a div that has overflow:hidden. The iframe has relative:position set and is moved to display part of the iframe web page.

I want to create a JavaScript drag n drop rectangle creator tool to generate the above HTML/CSS. Essentially we are generating widgets that contain partial web pages.

So we need to overlay a resizable rectangle on top of an iframe of a web page that will generate the HTML and CSS to create copy/paste code to paste just the cropped part of the iframe. Obviously I will be dynamically supplying the iframe src, but that is not your problem.

It must work on both desktop and tablet. In fact a tablet touch version is more important than the desktop version.