-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo-jquery.html
105 lines (86 loc) · 3.4 KB
/
demo-jquery.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery.formatChange() demo</title>
<!--[if (lt IE 9)&(!IEMobile) ]>
<style type="text/css">
@media screen {
body:before,/* <- debugging style */
#mediaformat:after { content:"full"; }#mediaformat{ font-family:"full"; }
}
</style>
<![endif]--><!--[if gte IE 9]><!-->
<style type="text/css">
@media screen and (min-width: 320px) {
body:before,/* <- debugging style */
#mediaformat:after { content:"phone"; }#mediaformat{ font-family:"phone"; }
}
@media screen and (min-width: 480px) {
body:before,/* <- debugging style */
#mediaformat:after { content:"phablet"; }#mediaformat{ font-family:"phablet"; }
}
@media screen and (min-width: 760px) {
body:before,/* <- debugging style */
#mediaformat:after { content:"tablet"; }#mediaformat{ font-family:"tablet"; }
}
@media screen and (min-width: 960px) {
body:before,/* <- debugging style */
#mediaformat:after { content:"netbook"; }#mediaformat{ font-family:"netbook"; }
}
@media screen and (min-width: 1150px) {
body:before,/* <- debugging style */
#mediaformat:after { content:"widescreen"; }#mediaformat{ font-family:"widescreen"; }
}
</style>
<!--<![endif]-->
</head>
<body>
<h1>jQuery.formatChange() demo</h1>
<p>Format is: <b>undefined</b> (was: <span>undefined</span>)</p>
<p><tt></tt></p>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="./formatchange.js"></script>
<script>
(function($){
var formatGroups = {
Small: { phone:1, phablet:1 },
Large: { tablet:1, netbook:1, widescreen:1 }
};
var formatMonitor = $.formatChange( formatGroups );
var tOut;
$(window).on('formatchange', function (e, media) {
$('b').html(media.is+'');
$('span').html(media.was+'');
$('tt').html(
(media.isSmall ? 'is Small - ' : '')+
(media.isLarge ? 'is Large - ' : '')+
(media.wasSmall ? 'was Small - ' : '')+
(media.wasLarge ? 'was Large - ' : '')+
(media.becameSmall ? 'became Small - ' : '')+
(media.becameLarge ? 'became Large - ' : '')+
(media.leftSmall ? 'left Small - ' : '')+
(media.leftLarge ? 'left Large - ' : '')
);
$('tt').css('background-color', '#ffa')
clearTimeout( tOut );
tOut = setTimeout(function(){ $('tt').css({'background-color': ''}); }, 500);
});
formatMonitor.formatGroups.Funky = { phone:1, tablet:1, widescreen:1 };
formatMonitor.refresh(); // soft refresh to fully register the Funky group
$(window).on('formatchange', function (e, media) {
$('tt').append(
'<b>'+
(formatMonitor.media.becameFunky ? 'became Funky - ' : '')+
(formatMonitor.media.leftFunky ? 'left Funky - ' : '')+
'</b>'
);
});
window.media = formatMonitor.media;
})(jQuery);
</script>
</body>
</html>