-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
25 lines (24 loc) · 1.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Smart Content Placer, image, position, content, responsive, pinterest" />
<meta name="description" content="A small JavaScript class which allows you to arrange data of different widths / heights such that white space is minimized - like pinterest but in both dimensions (variable width and height)" />
<meta name="author" content="Jason Mayes" />
<title>Smart Content Placer by Jason Mayes</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Smart Content / Image Placer</h1>
<p id="intro1"><strong>5 seconds after this page loads</strong> we shall change the margin to 1px and the base unit size to 200px.</p>
<p id="intro2" class="hide"><strong>In another 5 seconds</strong> we shall simulate updating the component with new data (e.g. from some API) and change the draw speed.</p>
<p id="intro3" class="hide"><strong>Cool huh? Now resize this page!</strong></p>
<p>I have created a small component to programmatically position difficult content. What do I mean by that? Well lets assume you have many images which are different widths and heights. How do you fit them on a page such that there are no "gaps"? Using just CSS this is a no go. Imagine Pinterest on steroids Pinterest only allows for variable height), this little component allows for variable width and height content! Enjoy :-) Give me a shoutout if you use it, would love to see!</p>
<a id="linkage" href="http://www.jasonmayes.com" target="_blank">View my website</a>
<div class="container">
<div id="listView"></div>
</div>
<script type="text/javascript" src="js/smartContentPlacer_min.js"></script>
<script type="text/javascript" src="js/exampleUsage.js"></script>
</body>
</html>