forked from xoxco/breakpoints
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
112 lines (82 loc) · 2.94 KB
/
example.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
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://xoxco.com/projects/code/breakpoints/breakpoints.js"></script>
<script>
$(function() {
$(window).bind('exitBreakpoint320',function() {
$('#log').append('<p>Exiting 320 breakpoint</p>');
});
$(window).bind('enterBreakpoint320',function() {
$('#log').append('<p>Entering 320 breakpoint</p>');
});
$(window).bind('exitBreakpoint480',function() {
$('#log').append('<p>Exiting 480 breakpoint</p>');
});
$(window).bind('enterBreakpoint480',function() {
$('#log').append('<p>Entering 480 breakpoint</p>');
});
$(window).bind('exitBreakpoint768',function() {
$('#log').append('<p>Exiting 768 breakpoint</p>');
});
$(window).bind('enterBreakpoint768',function() {
$('#log').append('<p>Entering 768 breakpoint</p>');
});
$(window).bind('exitBreakpoint1024',function() {
$('#log').append('<p>Exiting 1024 breakpoint</p>');
});
$(window).bind('enterBreakpoint1024',function() {
$('#log').append('<p>Entering 1024 breakpoint</p>');
});
$(window).setBreakpoints();
$('#distinct').bind('click',function() {
$(window).resetBreakpoints();
$(window).setBreakpoints({distinct: $('#distinct').is(":checked")});
$(window).resize();
});
});
</script>
<style>
#log p {
font-size: 12px;
padding: 5px 10px;
}
#status {
border:1px solid #000;
margin-bottom:20px;
}
#status p { color: #CCC; margin:0px; padding:10px;}
.breakpoint-1024 #status p.breakpoint1024 { color: #000; font-weight:bold; background: #F0F0F0; }
.breakpoint-768 #status p.breakpoint768 { color: #000; font-weight:bold; background: #F0F0F0;}
.breakpoint-480 #status p.breakpoint480 { color: #000; font-weight:bold; background: #F0F0F0; }
.breakpoint-320 #status p.breakpoint320 { color: #000; font-weight:bold; background: #F0F0F0; }
</style>
</head>
<body>
<div id="instructions">
<h3>Demo</h3>
<p>
<strong>Resize your browser window now and watch events in the box below.</strong>
</p>
<p>
<input name="distinct" type="checkbox" id="distinct" checked /> <label for="distinct">Use only largest available breakpoint</label>
</p>
</div>
<div id="log">
<h3>Active Breakpoints</h3>
<div id="status">
<p class="breakpoint1024">1024</p>
<p class="breakpoint768">768</p>
<p class="breakpoint480">480</p>
<p class="breakpoint320">320</p>
</div>
<h3>Event Log:</h3>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-84020-8");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>