Permalink
Browse files

Initial commit

  • Loading branch information...
1 parent 972b19a commit b1913f1214617f50ba471b21282d44a2a69a6fa9 @ten1seven committed May 17, 2012
Showing with 157 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +47 −0 index.html
  3. +104 −0 js/jRespond.js
  4. +4 −0 js/libs/jquery.min.js
View
@@ -0,0 +1,2 @@
+
+.DS_Store
View
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+
+ <!-- META -->
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+ <!-- Force latest IE rendering engine (even in intranet) & Chrome Frame -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <!-- tell mobile browsers to scale -->
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+ <meta name="description" content="">
+
+ <title>jRespond</title>
+
+ <style>
+
+ </style>
+</head>
+<body>
+
+ <p id="test"></p>
+
+ <!-- Javascript -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script>window.jQuery || document.write("<script src='js/libs/jquery.min.js'>\x3C/script>")</script>
+ <script src="js/jRespond.js"></script>
+ <script>
+ jRespond.addFunc('hello');
+ jRespond.addFunc('world');
+
+ // add anther one later
+ setTimeout(function() {
+ jRespond.addFunc('!');
+ }, 1000);
+
+ // make console.log safe to use
+ window.console||(console={log:function(){}});
+ </script>
+
+</body>
+</html>
View
@@ -0,0 +1,104 @@
+/*
+ jRespond holds a list of user-defined functions that are either fired or destroyed
+ based on media breakpoint. Because jRespond was built to be browser agnostic, it does NOT
+ sniff for media queries in the CSS. All media breakpoints need to be defined below.
+*/
+jRespond = (function(window,document,undefined) {
+
+ // let's be serious here...
+ 'use strict';
+
+ // array for registered functions
+ var mediaListeners = [],
+
+ // array of media query breakpoints; adjust as needed
+ mediaBreakpoints = [
+ {
+ 'label': 'handheld',
+ 'enter': 0,
+ 'exit': 767
+ },{
+ 'label': 'tablet',
+ 'enter': 768,
+ 'exit': 979
+ },{
+ 'label': 'laptop',
+ 'enter': 980,
+ 'exit': 1199
+ },{
+ 'label': 'desktop',
+ 'enter': 1200,
+ 'exit': 10000
+ }
+ ],
+
+ // store the current breakpoint
+ curr = '',
+
+ // window resize event timer stuff
+ resizeTimer,
+ resizeW = 0,
+ resizeTmrFast = 100,
+ resizeTmrSlow = 500,
+ resizeTmrSpd = resizeTmrSlow;
+
+
+ // send media to the mediaListeners array
+ var addFunction = function(elm) {
+
+ // add function to stack
+ mediaListeners.push(elm);
+
+ // check to see if it needs to be fired
+ for (var i = 0; i < mediaListeners.length; i++) {
+ //console.log(mediaListeners[i]);
+ }
+ };
+
+ // checks for the correct breakpoint against the mediaBreakpoints list
+ var returnBreakpoint = function(width) {
+
+ for (var i = 0; i < mediaBreakpoints.length; i++) {
+ if (width >= mediaBreakpoints[i]['enter'] && width <= mediaBreakpoints[i]['exit'] && curr !== mediaBreakpoints[i]['label']) {
+
+ console.log(mediaBreakpoints[i]['label']);
+ $('#test').text(mediaBreakpoints[i]['label']);
+
+ curr = mediaBreakpoints[i]['label'];
+ }
+ }
+ };
+
+ // self-calling function that checks the browser width and delegates if it detects a change
+ var checkResize = function() {
+
+ // get current width
+ var w = $(window).width();
+
+ // check if the current width has changed
+ console.log('w: ' + w + ' // resizeW: ' + resizeW + ' // resizeTmrSpd: ' + resizeTmrSpd);
+
+ // if there is a change speed up the timer and fire the returnBreakpoint function
+ if (w !== resizeW) {
+ resizeTmrSpd = resizeTmrFast;
+ resizeW = w;
+
+ returnBreakpoint(w);
+
+ // otherwise keep on keepin' on
+ } else {
+ resizeTmrSpd = resizeTmrSlow;
+ resizeW = w;
+ }
+
+ // calls itself on a setTimeout
+ setTimeout(checkResize, resizeTmrSpd);
+ };
+ checkResize();
+
+ // make mediaCheck public
+ return {
+ 'addFunc': function(elm) { addFunction(elm); }
+ };
+
+}(this,this.document));
View

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit b1913f1

Please sign in to comment.