Skip to content

Instantly share code, notes, and snippets.

@adactio

adactio/conditionalcats.html

Created December 2, 2011 14:54
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adactio/1423515 to your computer and use it in GitHub Desktop.
Save adactio/1423515 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
conditionalcats.html
<!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
Copy link

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