Permalink
Browse files

Update demos

  • Loading branch information...
1 parent e8c4a04 commit 2c89e84a793e4eab50dd56ced349ba7eeb20a5c2 @chrismorata committed Apr 20, 2012
Binary file not shown.
@@ -1,58 +0,0 @@
-<?php
-/**
-* Demo Class
-* Provides methods for easily creating demo pages
-*/
-
-class Demo {
- public $title;
- public $description;
- public $directory;
- public $css = array();
- public $js = array();
- public $content;
- public $showInfo = true;
-
- function __construct( $title ){
- $this->title = $title;
- }
-
- public function setDescription( $description ){
- $this->description = $description;
- }
-
- public function hideInfo(){
- $this->showInfo = false;
- }
-
- public function addCSS( $path ){
- $this->css[] = $path;
- }
-
- public function addJS( $path ){
- $this->js[] = $path;
- }
-
- public function displaySource( $content, $type ) {
- if($type === "html"){
- $this->content .= '<pre id="'.$type.'" class="prettyprint"><code>'.htmlspecialchars( $this->content ).'</code></pre>';
- } else {
- $this->content .= '<pre id="'.$type.'" class="prettyprint"><code>'.file_get_contents( $content ).'</code></pre>';
- }
- }
-
- public function startDemo(){
- ob_start();
- }
-
- public function endDemo(){
- $this->content = ob_get_clean();
- }
-
- public function renderDemo(){
- ob_start();
- include('demo-template.php');
- echo ob_get_clean();
- }
-}
-?>
View
@@ -0,0 +1,40 @@
+#photo-wall{
+ margin: 0 0 30px 0;
+ padding: 0;
+ max-width: 600px;
+ list-style: none;
+ overflow: hidden;
+}
+
+#photo-wall li{
+ float: left;
+ width: 33.3333%;
+ overflow: hidden;
+}
+
+#photo-wall li img{
+ display: block;
+ border-left: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
+ -moz-transition: opacity 0.5s ease-out; /* FF4+ */
+ -ms-transition: opacity 0.5s ease-out; /* IE10 */
+ -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
+ transition: opacity 0.5s ease-out;
+}
+
+#photo-wall:hover img{
+ opacity: .5;
+}
+
+#photo-wall li:hover img{
+ opacity: 1;
+}
+
+.oldie #photo-wall:hover img{
+ filter: alpha(opacity=50); /* for older versions of IE */
+}
+
+.oldie #photo-wall li:hover img{
+ filter: alpha(opacity=100); /* for older versions of IE */
+}
View
@@ -0,0 +1,9 @@
+$(document).ready(function(){
+ if(!Modernizr.csstransitions){
+ $("#photo-wall li").hover(function(){
+ $(this).siblings().find("img").stop().fadeTo(400, .5);
+ }, function(){
+ $(this).siblings().find("img").stop().fadeTo(400, 1);
+ });
+ }
+});
View
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width" />
+ <meta name="description" content="Nice technique for an image wall using CSS3. When you hover over an image, all images fade out except for the one you hover over." />
+
+ <title>CSS3 Image Wall | Creative and Code</title>
+
+ <link rel="stylesheet" type="text/css" href="../_resources/css/demo-template.css" />
+ <link rel="stylesheet" type="text/css" href="../_resources/css/prettify-sunburst.css" />
+ <link rel="stylesheet" type="text/css" href="demo.css" />
+ <script src="../_resources/js/modernizr-2.5.2.min.js"></script>
+
+</head>
+
+<body>
+
+ <article>
+
+ <header>
+ <h1>CSS3 Image Wall</h1>
+ <p>Nice technique for an image wall using CSS3. When you hover over an image, all images fade out except for the one you hover over.</p>
+ </header>
+
+ <ul id="photo-wall">
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ <li><img src="http://placedog.com/g/200/200" alt="PUPPIES" /></li>
+ </ul>
+
+ </article>
+
+
+ <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../_resources/js/jquery-1.7.2.min.js"><\/script>')</script>
+ <script src="../_resources/js/prettify/prettify.js"></script>
+ <script>
+ window.onload = prettyPrint();
+ </script>
+
+</body>
+</html>
+
@@ -0,0 +1,23 @@
+body{ padding-bottom: 30px; }
+ul{ margin: 0 0 30px; padding: 0; list-style: none; overflow: hidden; }
+ul li{ background-color: #ccc; min-height: 150px; margin-bottom: 15px; }
+ul li h2{ margin: 10px; }
+
+#view-options span{ display: block; background-color: #222; color: #fff; font-size: 16px; font-weight: bold; padding: 8px 16px; -moz-border-radius: 8px; border-radius: 8px; }
+span#view-responsive{ display: none; }
+
+pre{ display: none; }
+
+@media screen and (min-width: 800px){
+ ul li{ float: left; width: 30%; margin-left: 5%; }
+ ul li:first-child{ margin-left: 0; }
+
+ span#view-full{ display: none; }
+ span#view-responsive{ display: inline; }
+}
+
+@media screen and (min-width: 1024px){
+ ul li{ background-color: #cc0000; color: #fff; }
+
+ pre{ display: block; }
+}
@@ -0,0 +1,38 @@
+// viewport stuff
+var targetWidth = 980;
+var deviceWidth = 'device-width';
+var viewport = $('meta[name="viewport"]');
+
+// check to see if local storage value is set on page load
+localStorage.isResponsive = (localStorage.isResponsive == undefined) ? 'true' : localStorage.isResponsive;
+
+var showFullSite = function(){
+ viewport.attr('content', 'width=' + targetWidth);
+
+ if(!$('#view-options #view-responsive').length){
+ $('#view-options').append('<span id="view-responsive">View Mobile Optimized</span>');
+ }
+
+ localStorage.isResponsive = 'false';
+}
+
+var showMobileOptimized = function(){
+ localStorage.isResponsive = 'true';
+ viewport.attr('content', 'width=' + deviceWidth);
+}
+
+// if the user previously chose to view full site, change the viewport
+if(Modernizr.localstorage){
+ if(localStorage.isResponsive == 'false'){
+ showFullSite();
+ }
+}
+
+$("#view-full").on("click", function(){
+ showFullSite();
+});
+
+$('#view-options').on("click", "#view-responsive", function(){
+ showMobileOptimized();
+});
+
@@ -6,64 +6,55 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
- <meta name="description" content="<?php echo $this->description; ?>" />
+ <meta name="description" content="Add a view full site link for visitors who want to see the desktop version of your web page." />
- <title><?php echo $this->title; ?> | Creative and Code</title>
+ <title>View Full Site for Responsive Web Design | Creative and Code</title>
<link rel="stylesheet" type="text/css" href="../_resources/css/demo-template.css" />
<link rel="stylesheet" type="text/css" href="../_resources/css/prettify-sunburst.css" />
- <?php
- foreach( $this->css as $css ){
- echo '<link rel="stylesheet" type="text/css" href="'.$css.'" />';
- }
- ?>
-
+ <link rel="stylesheet" type="text/css" href="demo.css" />
<script src="../_resources/js/modernizr-2.5.2.min.js"></script>
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-30232257-1']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
- </script>
-
</head>
<body>
<article>
- <?php if($this->showInfo){ ?>
<header>
- <h1><?php echo $this->title; ?></h1>
- <p><?php echo $this->description; ?></p>
+ <h1>View Full Site for Responsive Web Design</h1>
+ <p>Add a view full site link for visitors who want to see the desktop version of your web page.</p>
</header>
- <?php } ?>
+
+ <p><em>Please note: make sure you are viewing this demo from a mobile device.</em></p>
+ <br />
+
+ <ul>
+ <li>
+ <h2>Content</h2>
+ </li>
+ <li>
+ <h2>Content</h2>
+ </li>
+ <li>
+ <h2>Content</h2>
+ </li>
+ </ul>
- <?php echo $this->content; ?>
+ <div id="view-options">
+ <span id="view-full">View Full Site</span>
+ </div>
</article>
-
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../_resources/js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="../_resources/js/prettify/prettify.js"></script>
<script>
window.onload = prettyPrint();
</script>
- <?php
- foreach( $this->js as $js ){
- echo '<script type="text/javascript" src="'.$js.'"></script>';
- }
- ?>
-
+ <script type="text/javascript" src="demo.js"></script>
</body>
-</html>
+</html>
+
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="viewport" content="width=device-width" />
+ <meta name="description" content="Add a view full site link for visitors who want to see the desktop version of your web page." />
+
+ <title>View Full Site for Responsive Web Design | Creative and Code</title>
+
+ <link rel="stylesheet" type="text/css" href="../_resources/css/demo-template.css" />
+ <link rel="stylesheet" type="text/css" href="../_resources/css/prettify-sunburst.css" />
+ <link rel="stylesheet" type="text/css" href="demo.css" />
+ <script src="../_resources/js/modernizr-2.5.2.min.js"></script>
+
+</head>
+
+<body>
+
+ <article>
+
+ <header>
+ <h1>View Full Site for Responsive Web Design</h1>
+ <p>Add a view full site link for visitors who want to see the desktop version of your web page.</p>
+ </header>
+
+ <p><em>Please note: make sure you are viewing this demo from a mobile device.</em></p>
+
+ <br />
+ <ul>
+ <li>
+ <h2>Content</h2>
+ </li>
+ <li>
+ <h2>Content</h2>
+ </li>
+ <li>
+ <h2>Content</h2>
+ </li>
+ </ul>
+
+ <span id="view-full">View Full Site</span>
+
+ <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="../_resources/js/jquery-1.7.2.min.js"><\/script>')</script>
+ <script src="../_resources/js/prettify/prettify.js"></script>
+ <script>
+ window.onload = prettyPrint();
+ </script>
+ <script type="text/javascript" src="demo.js"></script>
+</body>
+</html>
+
Oops, something went wrong.

0 comments on commit 2c89e84

Please sign in to comment.