This repository has been archived by the owner on Nov 27, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (105 loc) · 3.59 KB
/
index.html
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
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 lte9 lte8 lte7 lte6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9 lte9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Contentshifter plugin</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="example/screen.css" rel="stylesheet" />
<style type="text/css" media="screen">
/* Onmediaquery setup */
html { font-family: 'mobile'; }
html.lte8 { font-family: 'desktop' }
body { font-family: sans-serif; }
body:after { display: none; }
@media screen and (max-width: 767px) {
html { font-family: "mobile"; }
body:after { content: "mobile"; }
}
@media screen and (min-width: 768px) {
html { font-family: "tablet"; }
body:after { content: "tablet"; }
}
@media screen and (min-width: 960px) {
html { font-family: "desktop"; }
body:after { content: "desktop"; }
}
@media screen and (min-width: 1200px) {
html { font-family: "widescreen"; }
body:after { content: "widescreen"; }
}
</style>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/onmediaquery.js"></script>
<script src="js/jquery.contentshifter.js"></script>
<script>
$(function(){
var shifter = $('body').contentshifter();
// Set up onmediaquery to handle changes on breakpoints
var queries = [{
context: 'mobile',
match: function() { shifter.contentshifter("shift", "mobile"); }
},
{
context: 'tablet',
match: function() { shifter.contentshifter("shift", "tablet"); }
},
{
context: 'desktop',
match: function() { shifter.contentshifter("shift", "desktop"); }
},
{
context: 'widescreen',
match: function() { shifter.contentshifter("shift", "widescreen"); }
}];
MQ.init(queries);
$('a.move').on('click', function(e) {
e.preventDefault();
shifter.contentshifter("shift", "move");
});
});
</script>
</head>
<body>
<article>
<h1>Contentshifter</h1>
<section class="intro">
<p>A working example of the <a href="https://github.com/sneaknz/contentshifter">Contentshifter plugin</a>, which shifts content into alternate locations when called.</p>
<p>In this instance the calls are triggered by breakpoint changes using the <a href="https://github.com/JoshBarr/on-media-query">onmediaquery</a> plugin.</p>
</section>
<section class="container main">
<h2>Desktop</h2>
<section class="block">
<p>Do not shift</p>
</section>
<section class="block" data-shift='{"mobile": "#mobile"}'>
<p>Shift to <strong>Mobile</strong></p>
</section>
<section class="block" data-shift='{"move": "#widescreen"}'>
<p><a href="#" class="move">Move me to <strong>Widescreen</strong></a></p>
</section>
<section class="block" data-shift='{"tablet": "#tablet"}'>
<p>Shift to <strong>Tablet</strong></p>
</section>
<section class="block" data-shift='{"widescreen": "#widescreen"}'>
<p>Shift to <strong>Widescreen</strong></p>
</section>
<section class="block" data-shift='{"mobile": "#mobile", "tablet": "#tablet"}'>
<p>Shift to <strong>mobile</strong> and <strong>Tablet</strong></p>
</section>
</section>
<div id="widescreen" class="container">
<h2>Widescreen</h2>
</div>
<div id="mobile" class="container">
<h2>Mobile</h2>
</div>
<div id="tablet" class="container">
<h2>Tablet</h2>
</div>
</article>
</body>
</html>