We looked at using different stylesheets depending on the conditions under which the page is displayed. We used window.innerWidth as the determining factor. But JavaScript media queries are even better.
I asked students to write two stylesheets for a page: one three column layout for wide views and one single column version for narrow displays. To really push the boat out students could use the horizontal and vertical menus developed in earlier classes.
some code:
<html>
<head>
<link id="stylelink" rel="stylesheet" href="style1.css" type="text/css" />
<script type="text/javascript">
function resetcounter()
{
document.getElementById("counter").innerHTML = window.innerWidth;
if (window.innerWidth < 500)
{
document.getElementById('stylelink').setAttribute('href', "style2.css");
}
else
{
document.getElementById('stylelink').setAttribute('href', "style1.css");
}
}
</script>
</head>
<body onresize=resetcounter();>
<div id="counter">000</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment