├── .gitignore
├── Gruntfile.js
├── README.md
├── index.html
├── mediaquerydetection.js
├── package.json
├── style.css
└── style.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | style.css.map
2 | .sass-cache/
3 | node_modules/
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 |
3 | /* ====================================
4 | Project configuration
5 | ==================================== */
6 |
7 | grunt.initConfig({
8 | pkg: grunt.file.readJSON('package.json'),
9 |
10 | /*
11 | Watch
12 | ==================================== */
13 | watch: {
14 | sass: {
15 | files: ['*.scss'],
16 | tasks: ['sass:dev', 'autoprefixer'],
17 | options: {
18 | livereload: true,
19 | }
20 | }
21 | },
22 |
23 | /*
24 | Sass
25 | ==================================== */
26 | sass: {
27 | dev: {
28 | options: {
29 | style: 'expanded',
30 | trace: true
31 | },
32 | files: {
33 | 'style.css': 'scss/style.scss'
34 | }
35 | }
36 | },
37 |
38 | /*
39 | CSS autoprefixer
40 | ==================================== */
41 | autoprefixer: {
42 | dist: {
43 | options: {
44 | browsers: ['last 3 versions', '> 1%', 'ie 8', 'ie 7']
45 | },
46 | src: 'style.css',
47 | dest: 'style.css'
48 | }
49 | }
50 | });
51 |
52 | /* ====================================
53 | Enable plugins
54 | ==================================== */
55 |
56 | grunt.loadNpmTasks ('grunt-autoprefixer');
57 | grunt.loadNpmTasks ('grunt-contrib-sass');
58 | grunt.loadNpmTasks ('grunt-contrib-watch');
59 |
60 | /* ====================================
61 | Tasks
62 | ==================================== */
63 |
64 | grunt.registerTask('default', [
65 | 'sass:dev',
66 | 'autoprefixer',
67 | 'watch'
68 | ]);
69 |
70 | };
71 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Z63 - Listen to media query changes with Javascript
2 |
3 | Tutorial and demo can be found over [here](http://zerosixthree.se/detecting-media-queries-with-javascript/).
4 | Made by [zerosixthree](http://zerosixthree.se/).
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Z63 - Listen to media query changes with Javascript
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/mediaquerydetection.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var Z63 = (function (parent, $) {
3 |
4 | var MediaQueryListener = function() {
5 | this.afterElement = window.getComputedStyle ? window.getComputedStyle(document.body, ':after') : false;
6 | this.currentBreakpoint = '';
7 | this.lastBreakpoint = '';
8 | this.init();
9 | };
10 |
11 | MediaQueryListener.prototype = {
12 |
13 | init: function () {
14 | var self = this;
15 |
16 | if(!self.afterElement) {
17 | return;
18 | }
19 |
20 | self._resizeListener();
21 |
22 | },
23 | _resizeListener: function () {
24 | var self = this;
25 |
26 | $(window).on('resize orientationchange load', function() {
27 | // Regexp for removing quotes added by various browsers
28 | self.currentBreakpoint = self.afterElement.getPropertyValue('content').replace(/^["']|["']$/g, '');
29 |
30 | if (self.currentBreakpoint !== self.lastBreakpoint) {
31 | $(window).trigger('breakpoint-change', self.currentBreakpoint);
32 | self.lastBreakpoint = self.currentBreakpoint;
33 | }
34 |
35 | });
36 | }
37 |
38 | };
39 |
40 | parent.mediaqueryListener = parent.mediaqueryListener || new MediaQueryListener();
41 |
42 | return parent;
43 |
44 | }(Z63 || {}, jQuery));
45 |
46 | $(window).on('breakpoint-change', function(e, breakpoint) {
47 |
48 | if(breakpoint === 'bp-small') {
49 | document.body.innerHTML = 'CSS Breakpoint screen-small';
50 | }
51 |
52 | if(breakpoint === 'bp-medium') {
53 | document.body.innerHTML = 'CSS Breakpoint screen-medium';
54 | }
55 |
56 | if(breakpoint === 'bp-large') {
57 | document.body.innerHTML = 'CSS Breakpoint screen-large';
58 | }
59 |
60 | });
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Z63MQDetectWithJS",
3 | "preferGlobal": "false",
4 | "version": "0.1.0",
5 | "devDependencies": {
6 | "grunt": "~0.4.1",
7 | "grunt-autoprefixer": "^0.8.2",
8 | "grunt-contrib-sass": "^0.7.3",
9 | "grunt-contrib-watch": "^0.6.1"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* ===========================================
2 | Defining media queries
3 | =========================================== */
4 | /* ===========================================
5 | Mixin for writing out breakpoint names in
6 | an after pseudo element
7 | =========================================== */
8 | /* ===========================================
9 | Calling our writing-out function
10 | =========================================== */
11 | @media only screen and (min-width: 25em) {
12 | body:after {
13 | content: "bp-small";
14 | display: none;
15 | }
16 | }
17 | @media only screen and (min-width: 35em) {
18 | body:after {
19 | content: "bp-medium";
20 | display: none;
21 | }
22 | }
23 | @media only screen and (min-width: 65em) {
24 | body:after {
25 | content: "bp-large";
26 | display: none;
27 | }
28 | }
29 |
30 | /* ===========================================
31 | Demo styling only
32 | =========================================== */
33 | html {
34 | height: 100%;
35 | -webkit-transform-style: preserve-3d;
36 | transform-style: preserve-3d;
37 | }
38 |
39 | body {
40 | margin: 0;
41 | text-align: center;
42 | font-size: 4vw;
43 | font-family: sans-serif;
44 | background: #E33D61;
45 | color: #FFFFFF;
46 | text-transform: uppercase;
47 | position: relative;
48 | top: 50%;
49 | -webkit-transform: translateY(-50%);
50 | -ms-transform: translateY(-50%);
51 | transform: translateY(-50%);
52 | font-weight: normal;
53 | }
54 |
55 | span {
56 | display: block;
57 | color: #812236;
58 | font-weight: bold;
59 | font-size: 5.5vw;
60 | }
61 |
--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
1 | /* ===========================================
2 | Defining media queries
3 | =========================================== */
4 |
5 | @mixin bp-huge {
6 | @media only screen and (min-width: 65em) {
7 | @content;
8 | }
9 | }
10 |
11 | @mixin bp-medium {
12 | @media only screen and (min-width: 35em) {
13 | @content;
14 | }
15 | }
16 |
17 | @mixin bp-small {
18 | @media only screen and (min-width: 25em) {
19 | @content;
20 | }
21 | }
22 |
23 | /* ===========================================
24 | Mixin for writing out breakpoint names in
25 | an after pseudo element
26 | =========================================== */
27 |
28 | @mixin define-breakpoint($name) {
29 | &:after {
30 | content: $name;
31 | display: none;
32 | }
33 | }
34 |
35 | /* ===========================================
36 | Calling our writing-out function
37 | =========================================== */
38 |
39 | body {
40 | @include bp-small(){
41 | @include define-breakpoint("bp-small");
42 | }
43 |
44 | @include bp-medium(){
45 | @include define-breakpoint("bp-medium");
46 | }
47 |
48 | @include bp-huge(){
49 | @include define-breakpoint("bp-large");
50 | }
51 | }
52 |
53 |
54 | /* ===========================================
55 | Demo styling only
56 | =========================================== */
57 |
58 | html {
59 | height: 100%;
60 | transform-style: preserve-3d;
61 | }
62 |
63 | body {
64 | margin: 0;
65 | text-align: center;
66 | font-size: 4vw;
67 | font-family: sans-serif;
68 | background: #E33D61;
69 | color: #FFFFFF;
70 | text-transform: uppercase;
71 | position: relative;
72 | top: 50%;
73 | transform: translateY(-50%);
74 | font-weight: normal;
75 | }
76 |
77 | span {
78 | display: block;
79 | color: #812236;
80 | font-weight: bold;
81 | font-size: 5.5vw;
82 | }
--------------------------------------------------------------------------------