Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit d4a186c102983d1499eb6b06974201fd212bc67a @indyplanets committed Feb 7, 2012
0 README
No changes.
178 css/style.css
@@ -0,0 +1,178 @@
+/* Reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ font-family: helvetica neue, clean, sans-serif;
+}
+/* Globals */
+body {
+ background: #191919;
+ color: #aaa;
+}
+a {text-decoration: none; color: #ddd;}
+a:hover {text-decoration: none; color: #777;}
+h1,h2 {font-weight: 900}
+h1 {font-size: 21px;margin-bottom: 10px;}
+h2 {font-size: 16px;margin-bottom: 5px;}
+p {font-size: 12px;margin-bottom: 5px;}
+.page-title {font-size: 16px;margin: 4% 10%;text-align: center; color: #888;font-weight: 100;}
+.container {margin: 10px auto;max-width: 1024px;}
+#feature-container {
+ display: none;
+}
+/* Media Boxes */
+.mb-inner {
+ overflow: hidden;
+ margin: 13px 5%;
+}
+.mb-img {
+ float: left;
+ margin: 0 10px 10px 0;
+ max-width: 100px;
+ height: auto;
+}
+.mb-foot {
+ clear: both;
+}
+/* End Media Boxes */
+
+[role="site-info"] p {
+ text-align: center;
+ margin: 10% 0;
+ font-size: 16px;
+}
+[role="site-info"] a {
+ font-weight: 900;
+}
+@media all and (min-width: 640px) {
+ body {
+ background: #151515 url('../images/background.jpg');
+ }
+ .page-title {font-size: 26px;letter-spacing: 1px;}
+ a, img {
+ -webkit-transition: .2s all linear;
+ -moz-transition: .2s all linear;
+ }
+ .featured-content {
+ position: relative;
+ margin: 0 2%;
+ }
+ .featured-stories {
+ position: relative;
+ z-index: 3;
+ clear: both;
+ list-style: none;
+ }
+ /* Media Boxes for larger screens */
+ .example {
+ float: left;
+ margin: 2%;
+ width: 29.333%;
+ background: rgba(0,0,0,.2);
+ -webkit-box-shadow: inset 0 0 3px #000;
+ -moz-box-shadow: inset 0 0 3px #000;
+ box-shadow: inset 0 0 3px #000;
+ }
+ .mb-img {
+ width: 33%;
+ -webkit-box-shadow: 0 0 3px #000;
+ -moz-box-shadow: 0 0 3px #000;
+ box-shadow: 0 0 3px #000;
+ }
+ .mb-link {
+ color: #aaa;
+ -webkit-transition: .2s all linear;
+ -moz-transition: .2s all linear;
+ }
+ .mb-link h2{
+ color: #eee;
+ -webkit-transition: .2s all linear;
+ -moz-transition: .2s all linear;
+ }
+ .mb-link:hover h2{
+ color: #999;
+ }
+ .mb-link:hover .mb-img {
+ opacity: .8;
+ }
+ /* End Media Boxes for larger screens */
+ #feature-container {
+ display: block;
+ }
+
+ .slides {
+ position: relative;
+ list-style: none;
+ width: 100%;
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ -webkit-box-shadow: 0 0 5px #000;
+ -moz-box-shadow: 0 0 5px #000;
+ box-shadow: 0 0 5px #000;
+ }
+ .slides:after,
+ .featured-stories:after {
+ visibility: hidden;
+ display: block;
+ content: "";
+ clear: both;
+ height: 0;
+ margin-bottom: -4px;
+ }
+ .slides li {
+ position: absolute;
+ top: 0;
+ left: 0;
+ -webkit-transition: .3s all linear;
+ -moz-transition: .3s all linear;
+ }
+ .slides img {
+ width: 100%;
+ height: auto;
+ opacity: 0;
+ -webkit-transition: .3s all linear;
+ -moz-transition: .3s all linear;
+ }
+ .slides li.active {
+ z-index: 2;
+ position: relative;
+ }
+ .slides .slide-details {
+ position: absolute;
+ bottom: 5px;
+ left: 0;
+ background: #010101;
+ background: rgba(0,0,0,.8);
+ padding: 2%;
+ color: #fff;
+ opacity: 0;
+ -webkit-transition: .7s all linear;
+ -moz-transition: .7s all linear;
+ }
+ .slides .slide-details h2 {
+ font-size: 28px;
+ }
+ .slides li.active img,
+ .slides li.active .slide-details{
+ opacity: 1;
+ bottom: 30px;
+ -moz-transition: .7s all linear;
+ }
+}
BIN images/background.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/buzz-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/buzz.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/car-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/car.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/coadc-mobile-thumb.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/coadc-mobile.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/conditional-slideshow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/davinci.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/dog.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/fall.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/galilei.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/newton.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/statue.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
135 index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0;">
+<title>Conditional Slideshow for Mobile-First Responsive Web Design</title>
+<link href="css/style.css" rel="stylesheet" type="text/css" / >
+
+</head>
+ <body>
+ <div class="container">
+ <h1 class="page-title">A Conditional Slideshow for Mobile-First Responsive Web Design</h1>
+
+ <section class="featured-content">
+ <div id="feature-container">
+ </div>
+ <ol class="featured-stories">
+ <li class="media-box example">
+ <a href="http://flic.kr/p/bkErUB" id="l1" class="mb-link">
+ <div class="mb-inner">
+ <img src="images/coadc-mobile-thumb.jpg" alt="coadc on a mobile phone" class="mb-img" width=100px height=100px />
+ <h2>COADC</h2>
+ <p class="mb-content"> A mobile-first responsive redesign at Texas A&ampM</p>
+ </div>
+ </a>
+ </li>
+
+ <li class="media-box example">
+ <a href="http://flic.kr/p/aGw5YX" id="l2" class="mb-link">
+ <div class="mb-inner">
+ <img src="images/car-thumb.jpg" alt="car" class="mb-img" width=100px height=100px />
+ <h2>Karmann Ghia</h2>
+ <p class="mb-content">The classic VW stranded on the side of Hwy 77</p>
+ </div>
+ </a>
+ </li>
+
+ <li class="media-box example">
+ <a href="http://flic.kr/p/b1azjB" id="l3" class="mb-link">
+ <div class="mb-inner">
+ <img src="images/buzz-thumb.jpg" alt="Buzz Lightyear" class="mb-img" width=100px height=100px />
+ <h2>Buzz Action</h2>
+ <p class="mb-content">Something clever about Toy Story's Buzz Lightyear</p>
+ </div>
+ </a>
+ </li>
+ </ol>
+
+ </section>
+ <footer role="site-info">
+ <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>
+ </footer>
+ </div>
+
+ <script>
+ window.onload = function () {
+ var feature = document.getElementById('feature-container'),
+ display = window.getComputedStyle(feature,null).getPropertyValue('display');
+ if (display == 'block') {
+ displayFeatures();
+ getLinks();
+ }
+ }(this);
+
+ function getHTTPObject() {
+ var xhr = new XMLHttpRequest();
+ return xhr;
+ }
+
+ function displayFeatures() {
+ var request = getHTTPObject();
+ if (request) {
+ request.onreadystatechange = function() {
+ displayResponse(request);
+ };
+ request.open("GET","slides.html", true);
+ request.send(null);
+ }
+
+ }
+
+ function displayResponse(request) {
+ if (request.readyState == 4) {
+ if (request.status == 200 || request.status == 304) {
+ var feature_container = document.getElementById("feature-container");
+ feature_container.innerHTML = request.responseText;
+ }
+ }
+ }
+
+ // make a simple feature slideshow by adding a class name when clicked
+ function addClass(obj) {
+ var currentId = obj.getAttribute("id"),
+ slide1 = document.getElementById("slide1"),
+ slide2 = document.getElementById("slide2"),
+ slide3 = document.getElementById("slide3"),
+ currentSlideClass1 = slide1.getAttribute("class"),
+ currentSlideClass2 = slide2.getAttribute("class"),
+ currentSlideClass3 = slide3.getAttribute("class");
+
+ if (currentId == "l1") {
+ slide1.setAttribute("class", "active");
+ slide2.removeAttribute("class", "active");
+ slide3.removeAttribute("class", "active");
+ }
+
+ else if (currentId == "l2") {
+ slide1.removeAttribute("class", "active");
+ slide2.setAttribute("class", "active");
+ slide3.removeAttribute("class", "active");
+ }
+ else {
+ slide1.removeAttribute("class", "active");
+ slide2.removeAttribute("class", "active");
+ slide3.setAttribute("class", "active");
+ }
+ }
+ // attach onclick events
+ function getLinks() {
+ var links = document.getElementsByTagName("a");
+ for (var i=0; i<links.length; i++) {
+ if (links[i].getAttribute("class") == "mb-link") {
+ links[i].onclick = function() {
+ addClass(this);
+ return false;
+ }
+ }
+ }
+ }
+
+ </script>
+ <!-- end scripts-->
+
+</body>
+</html>
BIN js/.DS_Store
Binary file not shown.
0 js/my_scripts.js
No changes.
5 slides.html
@@ -0,0 +1,5 @@
+ <ul class="slides">
+ <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>
+ <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>
+ <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>
+ </ul>

0 comments on commit d4a186c

Please sign in to comment.