Download raw (5.1 KB)
<!DOCTYPE HTML>
<html lang="en" class="normal">
<head>
<meta charset="utf-8">
<title>HTML2print</title>
<!-- Uncomment the line below to reset the CSS and get rid of the browser's default CSS. -->
<!--<link rel="stylesheet" href="/assets/lib/reset.css" type="text/css" />-->
<link rel="stylesheet" href="/main.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="/assets/lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
<style type="text/css" media="all">
.moveable {
position: absolute;
overflow: hidden;
z-index: 1010 !important;
&.foreground {
z-index: 1000 !important;
}
figure {
width: 100%;
height: 100%;
}
}
.moveable .properties {
display: none;
position: absolute;
bottom: 0.5em;
right: 0.5em;
text-transform: none;
height: 2em;
}
.moveable:hover .properties {
display: block;
}
.moveable:hover {
outline: 2px solid springgreen;
}
img.fit-height {
height: 100%;
}
img.fit-width {
width: 100%;
}
</style>
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div id="master-page" class="paper">
<div class="page">
<section class="header">
</section>
<section class="body recipient">
</section>
<section class="footer">
</section>
</div>
</div>
</div>
<div id="interface">
<button id="preview" class="button">Preview</button>
<button id="debug" class="button">Debug</button>
<button id="spread" class="button">Spread</button>
<button id="hi-res" class="button">Hi-res</button>
<div class="dropdown">
<button id="zoom" class="button">Zoom</button>
<ul id="zoom-list">
<li><a href="#" title="25">25 %</a></li>
<li><a href="#" title="33">33 %</a></li>
<li><a href="#" title="50">50 %</a></li>
<li><a href="#" title="75">75 %</a></li>
<li><a href="#" title="100">100 %</a></li>
<li><a href="#" title="150">150 %</a></li>
<li><a href="#" title="200">200 %</a></li>
<li><a href="#" title="300">300 %</a></li>
</ul>
</div>
<div id="toc">
<button id="goto" class="button" href="#">Go to</button>
<ul id="toc-pages"></ul>
</div>
</div>
<div id="stories">
<div class="moveable" style="width: 200px; top: 100px; left: 100px;">
<img class="fit-width fit-height" src="bird.gif" />
</div>
<div class="moveable" style="width: 200px; height: 200px; top: 200px; left: 200px;">
<img class="fit-height" src="bird.gif" />
</div>
<div class="moveable" style="width: 200px; height: 200px; top: 300px; left: 300px;">
<img class="fit-width" src="bird.gif" />
</div>
<article id="my-story"></article>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="/assets/lib/less-1.3.0.min.js"></script>
<script type="text/javascript" src="/assets/lib/jquery.min.js"></script>
<script type="text/javascript" src="/setup/setup.js"></script>
<script type="text/javascript" src="/assets/js/html2print.js"></script>
<script type="text/javascript" src="/assets/lib/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
// __________________________________ MOVEABLE ELEMENTS __________________________________ //
$(".moveable").
append("<div class='properties button'>Properties</div>").
draggable({
cursor: "move",
stack: ".moveable",
cancel: ".properties"
}).
resizable();
$('.properties').on('click', function() {
var top = $(this).parent().css('top');
var left = $(this).parent().css('left');
var width = $(this).parent().width();
var height = $(this).parent().height();
$('.properties').on('mouseover', function() {
console.log("hover");
var top = Math.floor(parseInt($(this).parent().css('top')));
var left = Math.floor(parseInt($(this).parent().css('left')));
var width = Math.floor($(this).parent().width());
var height = Math.floor($(this).parent().height());
$(this).text('top: ' + top + 'px; left: ' + left + 'px; width: ' + width + 'px; height: ' + height + 'px;')
});
});
});
</script>
</body>
</html>