Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Can’t Hug Every Cat</title>
<style>
body {
font: 1em/1.5 Cambria, Georgia, serif;
margin: 0 5%;
}
a {
color: #369;
text-decoration: none;
}
@media all and (min-width: 640px) {
[role="main"] {
width: 60%;
float: left;
}
[role="complementary"] {
width: 30%;
float: right;
}
}
</style>
</head>
<body>
<div role="main">
<h1>A Metaphysical Reflection Upon The Nature Of Multitudinous Feline Affection</h1>
<footer>By <a href="http://www.youtube.com/watch?v=sP4NMoJcFd4">Debbie the Online Dater</a></footer>
<p>I love cats.<br>
I love every kind of cat.<br>
I just wanna hug all of them but I can’t;<br>
Can’t hug every cat,<br>
Can’t hug every cat.</p>
<p>So anyway I am a cat lover<br>
And I love to run.<br>
I’m sorry I’m thinking about cats again.<br>
I really love cats.</p>
<p>I’m thinking about cats again<br>
And again, and again and again and again.<br>
I think about how many don’t have a home<br>
And how I should have them.<br>
I think about how cute they are<br>
And how their ears and the whiskers and the nose.<p>
<p>I just love them.<br>
And I want them.<br>
And I want them in a basket.<br>
And I want little bow ties.<br>
I just love them.<br>
And I want them<br>
To be on a rainbow<br>
And in my bed<br>
And I just want us to roll around.</p>
<p>Sorry I’m getting emotional.<p>
<p>I love cats.<br>
I love every kind of cat.<br>
I just wanna hug all of them but I can’t;<br>
Can’t hug every cat,<br>
Can’t hug every cat.</p>
<p>So anyway I am a cat lover<br>
And I love to run.<br>
I’m sorry I’m thinking about cats again.<br>
I really love cats.<br>
But I can’t hug every cat;<br>
Can’t hug every cat,<br>
Can’t hug every cat.</p>
</div><!-- /@main -->
<div role="complementary">
<aside>
<h1>More about cats...</h1>
<div id="newsresults">
<a href="http://www.google.com/search?q=cats&amp;tbm=nws">Search Google News</a>
</div>
</aside>
</div><!-- /@complementary -->
<script>
var searchNews = function(searchterm) {
var elem = document.createElement('script');
elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews';
document.getElementsByTagName('head')[0].appendChild(elem);
};
var displayNews = function(news) {
var html = '',
items = news.responseData.results,
total = items.length;
if (total>0) {
for (var i=0; i<total; i++) {
var item = items[i];
html+= '<article>';
html+= '<a href="'+item.unescapedUrl+'">';
html+= '<h1>'+item.titleNoFormatting+'</h1>';
html+= '</a>';
html+= '<p>';
html+= item.content;
html+= '</p>';
html+= '</article>';
}
document.getElementById('newsresults').innerHTML = html;
}
};
if (document.querySelector) {
(function (win) {
var sidebar = document.querySelector('[role="complementary"]'),
floating = window.getComputedStyle(sidebar,null).getPropertyValue('float');
if (floating == 'right') {
searchNews('cats');
}
})(this);
}
</script>
</body>
</html>
@Sensiblemnd

This comment has been minimized.

Copy link

commented Apr 18, 2013

Will querySelector and getComputedStyle work on ie 8 and 7? If not what polyfill could we use?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.