Skip to content

Instantly share code, notes, and snippets.

@kcsluis
Created September 12, 2015 00:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kcsluis/92a0f06874f1ae3211f2 to your computer and use it in GitHub Desktop.
Save kcsluis/92a0f06874f1ae3211f2 to your computer and use it in GitHub Desktop.
Mobile, Responsive
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*css*/
.content {
width: 840px;
margin: 20px auto;
padding: 40px;
text-align: center;
background-color: #ddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="graphicContainer"></div>
<div class="foo">foo</div>
<div class="content">content</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
// for resizing for mobile
var graphic = d3.select(".graphicContainer");
var currentWidth;
// cray mobile stuff
window.onresize = resize;
function resize() {
// graphic.node().clientWidth is the magic
currentWidth = graphic.node().clientWidth;
d3.selectAll('.foo').remove();
drawMyChart(currentWidth);
};
function drawMyChart(currentWidth) {
if (currentWidth < 960) {
d3.select('.content').classed('hide', true);
} else {
d3.select('.content').classed('hide', false);
};
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment