Hour 23 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Hour 23 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 23.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 23.2.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="main">
      <header>
        <h1>Dandylions</h1>
        <h2>Not Your Mother's Weed</h2>
      </header>
      <nav>
        <ul id="navigation">
          <li><a href="#">Home<br> 
          <small>Where Dandelions roam free</small></a></li>
          <li><a href="#">Products<br> 
          <small>These flowers will grow on you</small></a></li>
          <li><a href="#">Services<br> 
          <small>We care for the flowers you have</small></a></li>
          <li><a href="#">Support<br> 
          <small>We love to help with dandelions</small></a></li>
          <li><a href="#">About<br> 
          <small>Why we love dandelions so much</small></a></li>
          <li><a href="#">Reading<br> 
          <small>Read more about this wondrous plant</small></a></li> 
          <li><a href="#">Contact<br> 
          <small>Ask us about your dandelion needs</small></a></li>
        </ul>
        <select id="mobileNav">
          <option value="">Go to...</option>
          <option value="/home">Home</option>
          <option value="/products">Products</option>
          <option value="/services">Services</option>
          <option value="/support">Support</option>
          <option value="/about">About</option>
          <option value="/articles">Reading</option>
          <option value="/contact">Contact</option>
        </select>
      </nav>
      <div id="bodyContent" class="clearfix"> 
        <article id="mainarticle">
          <h3>What is a Dandelion?</h3>
          <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
          <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in
          the family Asteraceae. They are native to Eurasia and North and South
          America, and two species, T. officinale and T. erythrospermum, are
          found as weeds worldwide. Both species are edible in their entirety.
          The common name <span class="pronounce"><strong>dandelion</strong>
          <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French
          dent-de-lion, meaning "lion's tooth") is given to members of the
          genus, and like other members of the Asteraceae family, they have very
          small flowers collected together into a composite flower head. Each
          single flower in a head is called a floret. Many <em>Taraxacum</em>
          species produce seeds asexually by apomixis, where the seeds are
          produced without pollination, resulting in offspring that are
          genetically identical to the parent plant.</p>
        </article>
      <div class="sidebars">
      <aside id="links">
        <h3>Learn More About Dandelions</h3>
        <ul>
          <li><a href="http://chemistry.about.com/b/2013/07/26/do-dandelions-burn-in-colors.htm">Do Dandelions Burn in Colors?</a></li>
          <li><a href="http://herbgardens.about.com/od/herbrecipes/tp/10-uses-for-dandelions.htm">Top 5 Things To Do With Dandelion</a></li>
          <li><a href="http://organicgardening.about.com/od/howtogrowveggies/a/How-To-Grow-Dandelion-Greens.htm">How to Grow and Harvest Dandelion Greens</a></li>
          <li><a href="http://homecooking.about.com/od/condimentrecipes/r/bljelly9.htm">Dandelion Honey Recipe</a></li>
          <li><a href="http://landscaping.about.com/od/weedsdiseases/a/kill_dandelions_2.htm">Get Rid of Dandelions the Smart Way&#8212;Eat Them!</a></li>
        </ul>
      </aside>
      <aside id="sidebar">
        <p><img src="images/dandy.jpg" width="400" height="300" alt=""/></p>
        <p><img src="images/seeded.jpg" width="400" height="300" alt=""/></p>
      </aside>
        </div><!-- end sidebars -->
      </div> <!-- end bodyContent -->
      <footer>
        <p>Text from 
        <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
      </footer>
    </div><!-- end main -->
    <script>
    $(function() {
    $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
    });
    });
    </script>
  </body>
</html>

Listing 23.2

/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 400px);
/* styles for all browser widths */
/* very basic reset */
* { font-size: 100%; }
*, *:before, *:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

h1, h2, h3 { font-family: 'Playfair Display SC', serif; line-height: 1.2; }

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; line-height: 1.275; }
#bodyContent, footer { margin: 0 0.2em; }

/* images */ 
img { width: 100%; max-width: 100%; height: auto; }

/* nav bar */
nav {
  width: 100%;
  margin: auto;  
}
nav ul {
  list-style: none;
  overflow: hidden;
  background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream_vera_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/* small text */
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}
/* default to smallest browser size */ 
nav ul { display: none; }
nav select { display: inline-block; margin: 0.5em 0; }

/*header */
header {
  background: url(images/dandy-header-bg-small.png) bottom left no-repeat;
  color: #EDEE6A;
  text-shadow: 3px 2px #000000;
}

/* styles for smartphones and tablets */
@media screen and (min-width: 400px)  {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
  #bodyContent { margin-right: 0; }
  header {
    background: url(images/dandy-header-bg.png) bottom left no-repeat;
  }
}
/* styles just for smartphones */
@media screen and (min-width: 400px) and (max-width: 970px) {
  
  /* two columns */ 
  #mainarticle {
    width: 50%;
    float: left;
    padding-right: 2em;
  }
  .sidebars {
    width: 48%;
    float: right; 
  }
  
  /* header */
  header { 
    height: 10em;
  }
  
}
/* change to full nav for larger screens */ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}
/* styles for the largest screens */
@media screen and (min-width: 971px) {
  /* three columns */
  #mainarticle {
    width: 40%; 
    float: left;
    padding-right: 2em;
  }
  .sidebars {
    width: 60%;
    float: right; 
  }
  .sidebars #links {
    width: 30%;
    float: left; 
  }
  .sidebars #sidebar {
    width: 65%;
    float: right;
  }
  /* header */
  header {
    height: 20em;
  }
  header h1 {
    padding-top: 1.5em;
    padding-left: 0.5em;
  }
  header h2 {
    padding-left: 6em;
    padding-top: 1em;
  }
}

Listing 23.3

<?php
// Include the configuration file
include_once '/wurfl/inc/wurfl.php';

$wurflInfo = $wurflManager->getWURFLInfo();

if (isset($_GET['ua']) && trim($_GET['ua'])) {
  $ua = $_GET['ua'];
  $requestingDevice = $wurflManager->getDeviceForUserAgent($_GET['ua']);
} else {
  $ua = $_SERVER['HTTP_USER_AGENT'];
  // This line detects the visiting device by looking at its
  // HTTP Request ($_SERVER)
  $requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER);
}

$isMobile = $requestingDevice->getCapability('is_wireless_device');
?>

Listing 23.4

var isMobile = "<?php echo $isMobile; ?>";

if (isMobile === 'true') {
	alert ("Greetings Mobile Customers");
} else {
	alert ("Not on Mobile, I see");
}

Leave a Reply

Your email address will not be published.