iSticky/index.html at master · mashcode/iSticky · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>mashcode/iSticky @ GitHub</title>

    <link rel="stylesheet" type="text/css" href="css/styles-iphone.css" media="handheld, only screen and (max-width: 480px)" />
	<link rel="stylesheet" type="text/css" href="css/styles-all.css" media="screen and (min-width: 481px)" />
	<link rel="stylesheet" type="text/css" href="css/styles-ipad.css" media="screen and (min-width: 768px) and (max-width: 1024px)" />
   	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie.css" media="all" />
	<![endif]-->
<script language="javascript">
if (Modernizr.canvas) {
// let's draw some shapes!
	} else {
	// no native canvas support available :(
	}
</script>

</head>

<body>

<div class="wrapper">
  <a href="http://github.com/mashcode/iSticky"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>

	<div id="header">
		<div id="nav">

		<div style="float: left;">
		<a href="http://github.com/mashcode/iSticky/zipball/master">
        <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
		<a href="http://github.com/mashcode/iSticky/tarball/master">
        <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
		</div>

		<h1><a href="http://github.com/mashcode/iSticky">i<span style="color:green;">S</span>ticky</a>
		<!--span class="small">by <a href="http://github.com/mashcode">mashcode</a></span--></h1>

		</div>
	<div class="clear"></div>
	</div>

	<div id="section">

		<div id="article">

    <p>
      <h2>iPad <small>[and iPhone:orientation]</small> sticky footer template</h2>
    </p>
	<p>
    An experiment in how it might be possible to target devices using media queries. Due to uneven @media browser support additional client-side detection will most assuredly deliver a better user experience across all browsers and platforms.
    </p>
    <p>
    The relevant media queries without src attributes:
    </p>
    <p>
    <pre>
&lt;link rel="stylesheet" media="handheld, only screen and (max-width: 480px)"/&gt; &lt;!-- iPhone --&gt;
&lt;link rel="stylesheet" media="screen and (min-width: 481px)"/&gt;  &lt;!-- everything else --&gt;
&lt;link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)"/&gt;  &lt;!-- iPad --&gt;
&lt;!--[if lt IE 9]&gt;
&lt;link rel="stylesheet" type="text/css" href="ie.css" media="all"/&gt;
&lt;![endif]--&gt;
    </pre>

    The relevant CSS is commented in <a href="css/styles-ipad.css">styles-ipad.css</a>
    </p>

    <p>
    The relevant html tag structure: [thanks to <a href="http://ryanfait.com" target="_blank">Ryan Fait</a>]
    </p>

    <pre>
&lt;div class="wrapper"&gt;
Content
&lt;div class="push">&lt;/div&gt;
&lt;/div&gt;

&lt;div id="footer"&gt;&lt;/div&gt;
    </pre>

    <!--h2>Author</h2>
	<p>Marc Shifflett (marc@marcshifflett.com)</p-->
	<h2>Contact</h2>
	<p>Marc Shifflett (marc@marcshifflett.com)</p>
    <h2>Download</h2>
    <p>
      You can download this project in either
      <a href="http://github.com/mashcode/iSticky/zipball/master">zip</a> or
      <a href="http://github.com/mashcode/iSticky/tarball/master">tar</a> formats.
    </p>
    <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
      by running:
      <pre style="background:#000;color: #fff;padding:15px;">$ git clone git://github.com/mashcode/iSticky</pre>
    </p>

    <!-- This does some landscape/portrait detection -->
	<div class="state">
      <div class="ls" title="landscape"></div>
      <div class="pt" title="portrait"></div>
    </div>

        </div>
	</div>


 <div class="push"></div>
 </div><!--/EndWrapper -->

	<div class="clear"></div>

    <div id="footer">
      get the source code on GitHub : <a href="http://github.com/mashcode/iSticky">mashcode/iSticky</a>
    </div>


</body>
</html>