Skip to content

Instantly share code, notes, and snippets.

View bballentine's full-sized avatar

Brandon Ballentine bballentine

11 followers · 21 following
View GitHub Profile
@bballentine
bballentine / index.html
Last active December 12, 2015 09:19
WEB2710: W3-1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Short Page Title</title>
</head>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
@bballentine
bballentine / gist:4750207
Created February 10, 2013 16:57
WEB2710: W3-2
<ul>
<li><a href="tel:5555555555">Call Me</a></li>
<li><a href="mailto:example@email.com?subject=contactform%20submission">Email Me</a></li>
<li><a href="sms://5555555555?message=someMessage">Text Me</a></li>
</ul>
@bballentine
bballentine / example.css
Last active December 13, 2015 17:48
WEB 2710: css-media-query-example
div.example {
/*add all base styling here*/
}
@media only screen and (min-width: 320px) {
/*add styling for base smart phones here*/
}
@media only screen and (min-width: 480px) {
/*add styling for base smart phones in landscape orientation here*/
@bballentine
bballentine / Picture Element Sample
Created March 4, 2013 21:10
Picture element
<picture width="500" height="500">
<source media="(min-width: 769px)" src="large.jpg">
<source media="(min-width: 480px)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>
@bballentine
bballentine / Picture Element with srcset
Created March 4, 2013 21:14
Picture element with srcset example
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>
@bballentine
bballentine / Picturefill Example
Created March 4, 2013 21:16
PictureFill Example
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
@bballentine
bballentine / geolocation-high-accuracy.html
Created April 8, 2013 17:23
WEB 2710 Geolocation Example
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(function() {
// code to run when the document is ready
if (Modernizr.geolocation){
$("p.check4location").html("Congratulations, your browser supports Geolocation!").addClass("locationSuccess");
navigator.geolocation.getCurrentPosition(
@bballentine
bballentine / Mobile Redirect
Created April 16, 2013 13:57
Simple redirect for iOS and Android
<?php
if( strstr([‘HTTP_USER_AGENT’],’iPhone’) || strstr([‘HTTP_USER_AGENT’],’iPod’) || strstr([‘HTTP_USER_AGENT’],’Android’) ) {
header(‘Location: http://www.google.com');
exit();
}
?>
@bballentine
bballentine / Conditional-Release.html
Created July 9, 2013 13:09
D2L Replace Strings Example - Conditional Release
Hi {FirstName}. It looks like you didn't do so well on the Unit 1 test. For the next exam, you may want to spend some additional time looking at the Study Guide and Practice Test. Please get in touch if you have any questions!
@bballentine
bballentine / Course-Welcome.html
Created July 9, 2013 13:10
D2L Replace Strings Example - Course Welcome
<p>Hi, {FirstName} and welcome to {OrgUnitName}. We're going to have a great time this semester. Please take a few minutes to look through Module 1 in the <strong>Course Content</strong> area, where you'll find the Syllabus and Course Schedule.</p>