Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Working responsive example - except in Opera, which is freaking out

  • Loading branch information...
commit adc1a4a7bcc53bc4b5d9e2bcb1bc578a8a9e0971 1 parent b1e6bc5
@jakearchibald authored
Showing with 170 additions and 8 deletions.
  1. +68 −8 css/base.css
  2. +10 −0 index.html
  3. +92 −0 js/base.js
View
76 css/base.css
@@ -6,13 +6,73 @@ a {
color: #369;
text-decoration: none;
}
-@media all and (min-width: 640px) {
- [role="main"] {
- width: 60%;
- float: left;
+/* Gallery */
+ .gallery,
+ .gallery li {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ font-size: 0;
}
- [role="complementary"] {
- width: 30%;
- float: right;
+ .gallery li {
+ display: inline;
+ }
+ .gallery a:link,
+ .gallery a:visited {
+ display: inline-block;
+ width: 75px;
+ height: 75px;
+ padding: 10px;
+ margin: -10px 0 0 -10px;
+ }
+ .gallery a:hover,
+ .gallery a:active {
+ background: #eee;
+ }
+ .gallery img {
+ vertical-align: middle;
+ display: block;
+
+ -webkit-transition: opacity 0.5s ease-out;
+ -moz-transition: opacity 0.5s ease-out;
+ -ms-transition: opacity 0.5s ease-out;
+ -o-transition: opacity 0.5s ease-out;
+ transition: opacity 0.5s ease-out;
+ }
+ .fade-imgs .gallery img {
+ opacity: 0;
+ }
+ .fade-imgs .gallery img.loaded {
+ opacity: 1;
+ }
+/* Responsive stuff */
+ .gallery-test {
+ width: 10px;
+ }
+ @media all and (min-width: 640px) {
+ [role="main"] {
+ width: 60%;
+ float: left;
+ }
+ [role="complementary"] {
+ width: 30%;
+ float: right;
+ }
+ }
+ @media all and (min-width: 926px) {
+ .gallery-test {
+ width: 20px;
+ }
+ .gallery a:link,
+ .gallery a:visited {
+ height: 240px;
+ width: 240px;
+ line-height: 245px;
+ overflow: hidden;
+ padding: 0;
+ margin: 0 10px 10px 0;
+ }
+ .gallery img {
+ display: inline-block;
+ }
}
-}
View
10 index.html
@@ -7,6 +7,7 @@
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
+ <script>document.documentElement.className='fade-imgs'</script>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
@@ -77,6 +78,7 @@
I like cats most when they are asleep because they're
not looking at me.
</p>
+ <script class="gallery-hide">document.write('<!--')</script><noscript>
<ul class="gallery">
<li>
<a href="http://www.flickr.com/photos/jimmiehomeschoolmom/3037941702/">
@@ -129,6 +131,7 @@
</a>
</li>
</ul>
+ </noscript><!---->
</section>
<section>
<h1>Cats not asleep</h1>
@@ -137,6 +140,7 @@
which is why <strong>you</strong> think you love cats. Also,
I'm the only person who truely 'gets' music.
</p>
+ <script class="gallery-hide">document.write('<!--')</script><noscript>
<ul class="gallery">
<li>
<a href="http://www.flickr.com/photos/anna_debenham/2581322728/">
@@ -189,6 +193,7 @@
</a>
</li>
</ul>
+ </noscript><!---->
</section>
</div>
@@ -251,5 +256,10 @@
</p>
</article>
</aside>
+<script src="js/base.js"></script>
+<script>
+ iLoveCats.fadeImgsOnLoad();
+ iLoveCats.initGalleries();
+</script>
</body>
</html>
View
92 js/base.js
@@ -0,0 +1,92 @@
+(function() {
+ function hasClass(elm, className) {
+ return (' ' + elm.className + ' ').indexOf( className ) != -1;
+ }
+
+ function addListener(elm, type, callback) {
+ if (elm.addEventListener) {
+ elm.addEventListener( type, callback, false );
+ }
+ else if (elm.attachEvent) {
+ elm.attachEvent( 'on' + type, callback );
+ }
+ }
+
+ window.iLoveCats = {
+
+
+ fadeImgsOnLoad: function() {
+ // Little trick to fade images in when they load
+ var imgs = document.getElementsByTagName( 'img' );
+
+ // Catch images that have already loaded
+ for (var i = imgs.length; i--;) if (imgs[i].naturalWidth) {
+ imgs[i].className += ' loaded';
+ }
+
+ if (document.addEventListener) {
+ document.addEventListener('load', function(event) {
+ var target = event.target;
+ if ( target.nodeName.toLowerCase() == 'img' ) {
+ target.className += ' loaded';
+ }
+ }, true);
+ }
+ },
+
+
+ initGalleries: function() {
+ var testDiv = document.createElement( 'div' ),
+ scripts = document.getElementsByTagName( 'script' ),
+ lastTinyThumbValue,
+ galleries = [];
+
+ function FlickrGallery(script) {
+ this.htmlStr = script.nextSibling.nodeValue.slice( 10, -15 );
+ this.container = document.createElement( 'div' );
+ script.parentNode.insertBefore( this.container, script.nextSibling );
+ }
+
+ FlickrGallery.prototype.changeLayout = function(tinyThumbs) {
+ var htmlStr = this.htmlStr;
+
+ if (tinyThumbs) {
+ htmlStr = htmlStr.replace( /_m\.jpg/g, '_s.jpg' );
+ }
+
+ this.container.innerHTML = htmlStr;
+ };
+
+ // Add the test div to the page
+ testDiv.className = 'gallery-test';
+ document.body.insertBefore( testDiv, document.body.firstChild );
+
+ // Init galleries
+ for ( var i = scripts.length; i--; ) {
+ var script = scripts[i];
+
+ if ( hasClass(script, 'gallery-hide') ) {
+ galleries.push( new FlickrGallery(script) );
+ }
+ }
+
+ function respond() {
+ var tinyThumbs = (testDiv.offsetWidth == 10);
+
+ if (tinyThumbs === lastTinyThumbValue) {
+ return;
+ }
+
+ for (var i = galleries.length; i--;) {
+ galleries[i].changeLayout(tinyThumbs);
+ }
+ lastTinyThumbValue = tinyThumbs;
+ }
+
+ respond();
+ addListener(window, 'resize', respond);
+ }
+
+
+ };
+})();
Please sign in to comment.
Something went wrong with that request. Please try again.