Skip to content

Instantly share code, notes, and snippets.

@jameymcelveen

jameymcelveen/TheCityPluginExample

Created October 2, 2013 13:14
Show Gist options
  • Save jameymcelveen/6793546 to your computer and use it in GitHub Desktop.
Save jameymcelveen/6793546 to your computer and use it in GitHub Desktop.
Download ZIP
Working example of a static html Plugin for TheCity that resizes properly
Raw
TheCityPluginExample
<!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<button id="add-button">Add More</button>
<script id="html-template" type="text/html">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</script>
<script>
(function () {
var parentUrl = "https://YOURSUBDOMAIN.onthecity.org";
var htmlTemplate = document.getElementById("html-template").innerHTML;
var addButton = document.getElementById("add-button");
var resizeParent = function (url) {
var target = target || parent;
var body = document.body;
var html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight);
target.postMessage(height, url);
}
var injectHTML = function (html, targetId, repeatCount) {
var count = repeatCount ? repeatCount : 1;
var contents = document.getElementById(targetId);
for (var i = 0; i < count; i++) {
contents.innerHTML += html;
}
}
addButton.onclick = function () {
injectHTML(htmlTemplate, "container", 1);
resizeParent(parentUrl);
}
injectHTML(htmlTemplate, "container", 5);
resizeParent(parentUrl);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment