Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

first commit

  • Loading branch information...
commit d4a186c102983d1499eb6b06974201fd212bc67a 0 parents
Jason Weaver authored February 06, 2012
0  README
No changes.
178  css/style.css
... ...
@@ -0,0 +1,178 @@
  1
+/* Reset */
  2
+html, body, div, span, applet, object, iframe,
  3
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4
+a, abbr, acronym, address, big, cite, code,
  5
+del, dfn, em, img, ins, kbd, q, s, samp,
  6
+small, strike, strong, sub, sup, tt, var,
  7
+b, u, i, center,
  8
+dl, dt, dd, ol, ul, li,
  9
+fieldset, form, label, legend,
  10
+table, caption, tbody, tfoot, thead, tr, th, td,
  11
+article, aside, canvas, details, embed, 
  12
+figure, figcaption, footer, header, hgroup, 
  13
+menu, nav, output, ruby, section, summary,
  14
+time, mark, audio, video {
  15
+	margin: 0;
  16
+	padding: 0;
  17
+	border: 0;
  18
+	font-size: 100%;
  19
+	font: inherit;
  20
+	vertical-align: baseline;
  21
+	font-family: helvetica neue, clean, sans-serif;
  22
+}
  23
+/* Globals */
  24
+body {
  25
+	background: #191919;
  26
+	color: #aaa;
  27
+}
  28
+a {text-decoration: none; color: #ddd;}
  29
+a:hover {text-decoration: none; color: #777;}
  30
+h1,h2 {font-weight: 900}
  31
+h1 {font-size: 21px;margin-bottom: 10px;}
  32
+h2 {font-size: 16px;margin-bottom: 5px;}
  33
+p {font-size: 12px;margin-bottom: 5px;}
  34
+.page-title {font-size: 16px;margin: 4% 10%;text-align: center; color: #888;font-weight: 100;}
  35
+.container {margin: 10px auto;max-width: 1024px;}
  36
+#feature-container {
  37
+	display: none;	
  38
+}
  39
+/* Media Boxes */
  40
+.mb-inner {
  41
+	overflow: hidden;
  42
+	margin: 13px 5%;
  43
+}
  44
+.mb-img {
  45
+	float: left;
  46
+	margin: 0 10px 10px 0;
  47
+	max-width: 100px;
  48
+	height: auto;
  49
+}
  50
+.mb-foot {
  51
+	clear: both;
  52
+}
  53
+/* End Media Boxes */
  54
+
  55
+[role="site-info"] p {
  56
+	text-align: center;
  57
+	margin: 10% 0;
  58
+	font-size: 16px;
  59
+}
  60
+[role="site-info"] a {
  61
+	font-weight: 900;
  62
+}
  63
+@media all and (min-width: 640px) {
  64
+	body {
  65
+		background: #151515 url('../images/background.jpg');
  66
+	}
  67
+	.page-title {font-size: 26px;letter-spacing: 1px;}
  68
+	a, img {
  69
+		-webkit-transition: .2s all linear;	
  70
+		-moz-transition: .2s all linear;	
  71
+		}	
  72
+	.featured-content {
  73
+		position: relative;
  74
+		margin: 0 2%;		
  75
+	}
  76
+	.featured-stories  {
  77
+		position: relative;
  78
+		z-index: 3;
  79
+		clear: both;
  80
+		list-style: none;
  81
+	}	
  82
+	/* Media Boxes for larger screens */
  83
+	.example  {
  84
+        float: left;
  85
+        margin: 2%;
  86
+        width: 29.333%;
  87
+		background: rgba(0,0,0,.2);
  88
+		-webkit-box-shadow: inset 0 0 3px #000;
  89
+		-moz-box-shadow: inset 0 0 3px #000;		
  90
+		box-shadow: inset 0 0 3px #000;		
  91
+	}	
  92
+	.mb-img {
  93
+		width: 33%;
  94
+		-webkit-box-shadow: 0 0 3px #000;
  95
+		-moz-box-shadow: 0 0 3px #000;		
  96
+		box-shadow: 0 0 3px #000;			
  97
+	}
  98
+	.mb-link {
  99
+		color: #aaa;
  100
+		-webkit-transition: .2s all linear;	
  101
+		-moz-transition: .2s all linear;			
  102
+	}
  103
+	.mb-link h2{
  104
+		color: #eee;
  105
+		-webkit-transition: .2s all linear;	
  106
+		-moz-transition: .2s all linear;			
  107
+	}
  108
+	.mb-link:hover h2{
  109
+		color: #999;	
  110
+	}			
  111
+	.mb-link:hover .mb-img {
  112
+		opacity: .8; 	
  113
+	}
  114
+	/* End Media Boxes for larger screens */
  115
+	#feature-container {
  116
+		display: block;	
  117
+	}
  118
+	
  119
+	.slides {
  120
+		position: relative;	
  121
+		list-style: none;
  122
+		width: 100%;
  123
+		overflow: hidden;
  124
+		padding: 0;
  125
+		margin: 0;
  126
+		-webkit-box-shadow: 0 0 5px #000;
  127
+		-moz-box-shadow: 0 0 5px #000;		
  128
+		box-shadow: 0 0 5px #000;
  129
+	}
  130
+	.slides:after,
  131
+	.featured-stories:after {
  132
+		visibility: hidden;
  133
+		display: block;
  134
+		content: "";
  135
+		clear: both;
  136
+		height: 0;
  137
+		margin-bottom: -4px;				
  138
+	}		
  139
+	.slides li {
  140
+		position: absolute;
  141
+		top: 0;
  142
+		left: 0;		
  143
+		-webkit-transition: .3s all linear;	
  144
+		-moz-transition: .3s all linear;			
  145
+	}
  146
+	.slides img {
  147
+		width: 100%;
  148
+		height: auto;
  149
+		opacity: 0;
  150
+		-webkit-transition: .3s all linear;	
  151
+		-moz-transition: .3s all linear;			
  152
+	}
  153
+	.slides li.active {
  154
+		z-index: 2;
  155
+		position: relative;
  156
+	}
  157
+	.slides .slide-details {
  158
+		position: absolute;
  159
+		bottom: 5px;
  160
+		left: 0;
  161
+		background: #010101;		
  162
+		background: rgba(0,0,0,.8);
  163
+		padding: 2%;
  164
+		color: #fff;
  165
+		opacity: 0;
  166
+		-webkit-transition: .7s all linear;	
  167
+		-moz-transition: .7s all linear;		
  168
+	}	
  169
+	.slides .slide-details h2 {
  170
+		font-size: 28px;
  171
+	}	
  172
+	.slides li.active img, 
  173
+	.slides li.active .slide-details{
  174
+		opacity: 1;
  175
+		bottom: 30px;
  176
+		-moz-transition: .7s all linear;		
  177
+	}							
  178
+}
BIN  images/background.jpg
BIN  images/background.png
BIN  images/buzz-thumb.jpg
BIN  images/buzz.jpg
BIN  images/car-thumb.jpg
BIN  images/car.jpg
BIN  images/coadc-mobile-thumb.jpg
BIN  images/coadc-mobile.jpg
BIN  images/conditional-slideshow.png
BIN  images/davinci.jpg
BIN  images/dog.jpg
BIN  images/fall.jpg
BIN  images/galilei.jpg
BIN  images/newton.jpg
BIN  images/statue.jpg
135  index.html
... ...
@@ -0,0 +1,135 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+<meta charset="UTF-8">
  5
+<meta name="viewport" content="width=device-width, initial-scale=1.0;">	
  6
+<title>Conditional Slideshow for Mobile-First Responsive Web Design</title>
  7
+<link href="css/style.css" rel="stylesheet" type="text/css" / >
  8
+
  9
+</head>
  10
+  <body>		
  11
+	<div class="container">		
  12
+		<h1 class="page-title">A Conditional Slideshow for Mobile-First Responsive Web Design</h1>
  13
+			
  14
+		<section class="featured-content">
  15
+			<div id="feature-container">
  16
+			</div>
  17
+			<ol class="featured-stories">
  18
+			<li class="media-box example">
  19
+				<a href="http://flic.kr/p/bkErUB" id="l1" class="mb-link">			
  20
+					<div class="mb-inner">
  21
+						<img src="images/coadc-mobile-thumb.jpg" alt="coadc on a mobile phone" class="mb-img" width=100px height=100px />
  22
+						<h2>COADC</h2>						
  23
+						<p class="mb-content"> A mobile-first responsive redesign at Texas A&ampM</p>
  24
+				</div>
  25
+				</a>
  26
+			</li>
  27
+
  28
+			<li class="media-box example">
  29
+				<a href="http://flic.kr/p/aGw5YX" id="l2" class="mb-link">				
  30
+					<div class="mb-inner">
  31
+						<img src="images/car-thumb.jpg" alt="car" class="mb-img" width=100px height=100px />
  32
+						<h2>Karmann Ghia</h2>						
  33
+						<p class="mb-content">The classic VW stranded on the side of Hwy 77</p>
  34
+					</div>
  35
+				</a>				
  36
+			</li>
  37
+	
  38
+			<li class="media-box example">
  39
+				<a href="http://flic.kr/p/b1azjB" id="l3" class="mb-link">				
  40
+					<div class="mb-inner">
  41
+						<img src="images/buzz-thumb.jpg" alt="Buzz Lightyear" class="mb-img" width=100px height=100px />
  42
+						<h2>Buzz Action</h2>						
  43
+						<p class="mb-content">Something clever about Toy Story's Buzz Lightyear</p>
  44
+					</div>
  45
+				</a>				
  46
+			</li>	
  47
+		</ol>
  48
+											
  49
+		</section> 
  50
+	<footer role="site-info">
  51
+		<p><a href="http://jasonweaver.name">Jason Weaver</a> made this. <a href="http://jasonweaver.name/blog/slideshow-redux/">Read the post</a> about the technique.</p>
  52
+	</footer>
  53
+	</div>
  54
+	
  55
+	<script> 
  56
+	window.onload = function () {
  57
+        var feature = document.getElementById('feature-container'),
  58
+            display = window.getComputedStyle(feature,null).getPropertyValue('display');
  59
+        if (display == 'block') {
  60
+			displayFeatures();
  61
+			getLinks();
  62
+        }
  63
+    }(this);
  64
+	
  65
+	function getHTTPObject() {
  66
+		var xhr = new XMLHttpRequest();
  67
+		return xhr;
  68
+	}
  69
+	
  70
+	function displayFeatures() {
  71
+		var request = getHTTPObject();
  72
+			if (request) {
  73
+				request.onreadystatechange = function() {
  74
+					displayResponse(request);
  75
+				};
  76
+				request.open("GET","slides.html", true);
  77
+				request.send(null);
  78
+			}
  79
+
  80
+	}
  81
+	
  82
+	function displayResponse(request) {
  83
+		if (request.readyState == 4) {
  84
+			if (request.status == 200 || request.status == 304) {
  85
+				var feature_container = document.getElementById("feature-container");
  86
+				feature_container.innerHTML = request.responseText;
  87
+			}
  88
+		}
  89
+	}
  90
+		
  91
+	// make a simple feature slideshow by adding a class name when clicked
  92
+	function addClass(obj) {
  93
+		var currentId = obj.getAttribute("id"),
  94
+		slide1 = document.getElementById("slide1"),
  95
+		slide2 = document.getElementById("slide2"),
  96
+		slide3 = document.getElementById("slide3"),						
  97
+		currentSlideClass1 = slide1.getAttribute("class"),
  98
+		currentSlideClass2 = slide2.getAttribute("class"),			
  99
+		currentSlideClass3 = slide3.getAttribute("class");
  100
+					
  101
+		if (currentId == "l1") {
  102
+			slide1.setAttribute("class", "active");
  103
+			slide2.removeAttribute("class", "active");						
  104
+			slide3.removeAttribute("class", "active");
  105
+		}
  106
+
  107
+		else if (currentId == "l2") {
  108
+			slide1.removeAttribute("class", "active");
  109
+			slide2.setAttribute("class", "active");						
  110
+			slide3.removeAttribute("class", "active");
  111
+		}
  112
+		else {
  113
+			slide1.removeAttribute("class", "active");
  114
+			slide2.removeAttribute("class", "active");						
  115
+			slide3.setAttribute("class", "active");
  116
+		}
  117
+	}	
  118
+	// attach onclick events	
  119
+	function getLinks() {
  120
+		var links = document.getElementsByTagName("a");
  121
+		for (var i=0; i<links.length; i++) {
  122
+			if (links[i].getAttribute("class") == "mb-link") {
  123
+				links[i].onclick = function() {
  124
+					addClass(this);
  125
+					return false;
  126
+				}	
  127
+			}				
  128
+		}							
  129
+ 	}	
  130
+
  131
+	</script>
  132
+	<!-- end scripts-->
  133
+
  134
+</body>
  135
+</html>
BIN  js/.DS_Store
Binary file not shown
0  js/my_scripts.js
No changes.
5  slides.html
... ...
@@ -0,0 +1,5 @@
  1
+				<ul class="slides">
  2
+					<li class="active" id="slide1"><a href="http://flic.kr/p/bkErUB" id="#coadc"><img src="images/coadc-mobile.jpg" alt="coadc on mobile" /><div class="slide-details"><h2>College of Agriculture Development Council</h2><p class="mb-content"> Mobile-First Responsive redesign of a Texas A&amp;M Website</p></div></a></li>
  3
+					<li id="slide2"><a href="http://flic.kr/p/aGw5YX" id="#car"><img src="images/car.jpg" alt="car" /><div class="slide-details"><h2>Karmann Ghia</h2><p class="mb-content">The classic VW stranded on the side of Hwy 77</p></div></a></li>
  4
+					<li id="slide3"><a href="http://flic.kr/p/b1azjB" id="#buzz"><img src="images/buzz.jpg" alt="buzz lightyear" /><div class="slide-details"><h2>Buzz Action</h2><p class="mb-content">Something clever about Toy Story's Buzz Lightyear</p></div></a></li>
  5
+				</ul>

0 notes on commit d4a186c

Please sign in to comment.
Something went wrong with that request. Please try again.