-
Notifications
You must be signed in to change notification settings - Fork 0
/
matchMedia.js
53 lines (47 loc) · 1.51 KB
/
matchMedia.js
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
// Variable
var mm = 'window.matchMedia("(max-width: 480px)")';
// slideToggle function
function Sliding(clickElement,toggleElement,timer) {
$(clickElement).off("click." + mm).on("click." + mm, function() {
$(toggleElement).stop().slideToggle(timer);
});
}
// fadeToggle function
function Fading(clickElement,toggleElement,timer) {
$(clickElement).off("click." + mm).on("click." + mm, function() {
$(toggleElement).stop().fadeToggle(timer);
});
}
// Toggle function
function Toggling(clickElement,toggleElement,timer) {
$(clickElement).off("click." + mm).on("click." + mm, function() {
$(toggleElement).stop().toggle(timer);
});
}
/*
Detection function for matchMedia
Example with Parameter: 'window.matchMedia("(max-width: 480px)")'
*/
function screenHandling(mql) {
if (mql.matches) {
// if matchMedia "true", then call one of these function
/*
Examples:
1.) Fading(clickElement,toggleElement,timer);
2.) Sliding(clickElement,toggleElement,timer);
3.) Toggling(clickElement,toggleElement,timer);
*/
} else {
// if matchMedia "false", then call an another one of these function
/*
Examples:
1.) Fading(clickElement,toggleElement,timer);
2.) Sliding(clickElement,toggleElement,timer);
3.) Toggling(clickElement,toggleElement,timer);
*/
}
}
// Handle media query event
screenHandling(mm);
mm.addListener(screenHandling);
// We can also define any other functions and bind it into "if" and "else" condition