Skip to content

Instantly share code, notes, and snippets.

@osvik

osvik/generic.html

Last active December 4, 2018 01:26
Show Gist options
  • Save osvik/1437668b9e82988dd046107cdc5f94b7 to your computer and use it in GitHub Desktop.
Save osvik/1437668b9e82988dd046107cdc5f94b7 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive svg infographics
Raw
generic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive infographic test - Generic</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- GREENPEACE INFOGRAPH -->
<div id="infoContainer" style="width: 100%;"></div>
<script src="generic.js" type="application/javascript" defer></script>
<!-- /GREENPEACE INFOGRAPH -->
</body>
</html>
Raw
generic.js
/* jshint browser: true */
document.addEventListener("DOMContentLoaded", function (event) {
var urlList = {
url360: "https://storage.googleapis.com/gpes-static/plasticos/plasticos-360.svg",
url510: "https://storage.googleapis.com/gpes-static/plasticos/plasticos-510.svg",
url730: "https://storage.googleapis.com/gpes-static/plasticos/plasticos-730.svg",
url1024: "https://storage.googleapis.com/gpes-static/plasticos/plasticos-1024.svg"
};
var containerEl = document.getElementById("infoContainer");
// var parentEl = containerEl.parentElement;
var elwidth = containerEl.offsetWidth;
var infoSize = elwidth;
var infoUrl;
if (elwidth < 435) {
infoUrl = urlList.url360;
} else if (elwidth >= 435 && elwidth < 620) {
infoUrl = urlList.url510;
} else if (elwidth >= 620 && elwidth < 878) {
infoUrl = urlList.url730;
} else if (elwidth >= 878 ) {
infoUrl = urlList.url1024;
}
var objectHtmlElement = document.createElement('object');
objectHtmlElement.setAttribute("type", "image/svg+xml");
objectHtmlElement.setAttribute("width", infoSize);
objectHtmlElement.setAttribute("height", "auto");
objectHtmlElement.setAttribute("data", infoUrl);
containerEl.appendChild(objectHtmlElement);
});
Raw
generic.min.js
<!-- GREENPEACE INFOGRAPH -->
<div id="infoContainer" style="width: 100%;"></div>
<script type="application/javascript">
document.addEventListener("DOMContentLoaded", function (t) {
var s, e = "https://storage.googleapis.com/gpes-static/plasticos/plasticos-360.svg",
o = "https://storage.googleapis.com/gpes-static/plasticos/plasticos-510.svg",
a = "https://storage.googleapis.com/gpes-static/plasticos/plasticos-730.svg",
i = "https://storage.googleapis.com/gpes-static/plasticos/plasticos-1024.svg",
g = document.getElementById("infoContainer"),
p = g.offsetWidth,
c = p;
p < 435 ? s = e : p >= 435 && p < 620 ? s = o : p >= 620 && p < 878 ? s = a : p >= 878 && (s = i);
var l = document.createElement("object");
l.setAttribute("type", "image/svg+xml"), l.setAttribute("width", c), l.setAttribute("height", "auto"), l.setAttribute("data", s), g.appendChild(l)
});
</script>
<!-- /GREENPEACE INFOGRAPH -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment