From 039249759fba99afb655f1d636e14cdb1c2cbe36 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Tue, 17 Jan 2012 16:51:12 +0100 Subject: [PATCH 01/22] complete rewrite for version 2.0 --- breakpoints.js | 106 ++++++++++++++----------------------------------- example.html | 77 ++++------------------------------- 2 files changed, 36 insertions(+), 147 deletions(-) diff --git a/breakpoints.js b/breakpoints.js index 2e73a35..1d392c0 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -1,90 +1,42 @@ /* Breakpoints.js - version 1.0 + version 2.0 Creates handy events for your responsive design breakpoints - Copyright 2011 XOXCO, Inc + Copyright 2011-2012 XOXCO, Inc http://xoxco.com/ - Documentation for this plugin lives here: - http://xoxco.com/projects/code/breakpoints - + Version 2.0 rewrite by Eike Send + http://eike.se/nd + Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php */ (function($) { - - var lastSize = 0; - var interval = null; - - $.fn.resetBreakpoints = function() { - $(window).unbind('resize'); - if (interval) { - clearInterval(interval); - } - lastSize = 0; - }; - - $.fn.setBreakpoints = function(settings) { - var options = jQuery.extend({ - distinct: true, - breakpoints: new Array(320,480,768,1024) - },settings); - - - interval = setInterval(function() { - - var w = $(window).width(); - var done = false; - - for (var bp in options.breakpoints.sort(function(a,b) { return (b-a) })) { - - // fire onEnter when a browser expands into a new breakpoint - // if in distinct mode, remove all other breakpoints first. - if (!done && w >= options.breakpoints[bp] && lastSize < options.breakpoints[bp]) { - if (options.distinct) { - for (var x in options.breakpoints.sort(function(a,b) { return (b-a) })) { - if ($('body').hasClass('breakpoint-' + options.breakpoints[x])) { - $('body').removeClass('breakpoint-' + options.breakpoints[x]); - $(window).trigger('exitBreakpoint' + options.breakpoints[x]); - } - } - done = true; - } - $('body').addClass('breakpoint-' + options.breakpoints[bp]); - $(window).trigger('enterBreakpoint' + options.breakpoints[bp]); - - } - - // fire onExit when browser contracts out of a larger breakpoint - if (w < options.breakpoints[bp] && lastSize >= options.breakpoints[bp]) { - $('body').removeClass('breakpoint-' + options.breakpoints[bp]); - $(window).trigger('exitBreakpoint' + options.breakpoints[bp]); - - } - - // if in distinct mode, fire onEnter when browser contracts into a smaller breakpoint - if ( - options.distinct && // only one breakpoint at a time - w >= options.breakpoints[bp] && // and we are in this one - w < options.breakpoints[bp-1] && // and smaller than the bigger one - lastSize > w && // and we contracted - lastSize >0 && // and this is not the first time - !$('body').hasClass('breakpoint-' + options.breakpoints[bp]) // and we aren't already in this breakpoint - ) { - $('body').addClass('breakpoint-' + options.breakpoints[bp]); - $(window).trigger('enterBreakpoint' + options.breakpoints[bp]); - - } - } - - // set up for next call - if (lastSize != w) { - lastSize = w; - } - },250); - }; - + $.fn.breakpoints = function(breakpoints) { + + var oldBP, currentBP; + + function getCurrentBreakPoint() { + var w = $(window).width(); + for (var bp in breakpoints) { + bp = parseInt(bp); + if (w >= breakpoints[bp] && ( breakpoints.length == bp + 1 || w < breakpoints[bp+1] )) { + return breakpoints[bp]; + } + } + return 0; + } + + setInterval(function() { + currentBP = getCurrentBreakPoint(); + if (oldBP != currentBP) { + $(window).trigger('changeBreakpoint', {oldBP: oldBP, newBP: currentBP}); + oldBP = currentBP; + } + }, 200); + + }; })(jQuery); diff --git a/example.html b/example.html index e859db4..9c01364 100644 --- a/example.html +++ b/example.html @@ -1,91 +1,42 @@ + - +
-

Demo

-

Resize your browser window now and watch events in the box below.

- -

- -

- -

Active Breakpoints

1024

@@ -93,20 +44,6 @@

Active Breakpoints

480

320

-

Event Log:

-
- - - - - From 0ac1b63b6d9badf71a9b938aefd5c66f404142bc Mon Sep 17 00:00:00 2001 From: Eike Send Date: Tue, 17 Jan 2012 16:57:34 +0100 Subject: [PATCH 02/22] updating readme --- README.md | 46 +++++++--------------------------------------- 1 file changed, 7 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index ff317fa..4b71e9b 100644 --- a/README.md +++ b/README.md @@ -2,49 +2,17 @@ Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. -[Get it from Github](https://github.com/xoxco/breakpoints) - -[View Demo](http://xoxco.com/projects/code/breakpoints/) +[Get it from Github](https://github.com/eikes/breakpoints) Created by [XOXCO](http://xoxco.com) ## Instructions - $(window).setBreakpoints({ - // use only largest available vs use all available - distinct: true, - // array of widths in pixels where breakpoints - // should be triggered - breakpoints: [ - 320, - 480, - 768, - 1024 - ] - }); - - $(window).bind('enterBreakpoint320',function() { - ... - }); - - $(window).bind('exitBreakpoint320',function() { - ... - }); - - $(window).bind('enterBreakpoint768',function() { - ... - }); + // array of widths in pixels where breakpoints should be triggered + $(window).breakpoints([320, 480, 768, 1024]); - $(window).bind('exitBreakpoint768',function() { - ... + // the info object contains info about what breakpoint was left + // and which was entered + $(window).bind('changeBreakpoint', function(event, info) { + alert("Old:" + info.oldBP + " New: " + info.newBP); }); - - - $(window).bind('enterBreakpoint1024',function() { - ... - }); - - $(window).bind('exitBreakpoint1024',function() { - ... - }); - From 14302ed586e686ebf095d31d70a0f13a8cb94914 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Mon, 23 Jan 2012 19:00:43 +0100 Subject: [PATCH 03/22] do not skip over breakpoints that lie in between, for example when using the maximize window button --- breakpoints.js | 50 ++++++++++++++++++++++++++++++++++++-------------- example.html | 6 ++++-- 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/breakpoints.js b/breakpoints.js index 1d392c0..ef5affe 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -15,25 +15,47 @@ */ (function($) { - $.fn.breakpoints = function(breakpoints) { - - var oldBP, currentBP; - - function getCurrentBreakPoint() { - var w = $(window).width(); - for (var bp in breakpoints) { - bp = parseInt(bp); - if (w >= breakpoints[bp] && ( breakpoints.length == bp + 1 || w < breakpoints[bp+1] )) { - return breakpoints[bp]; - } + + $.getCurrentBreakPoint = function(breakpoints, width) { + for (var bp in breakpoints) { + bp = parseInt(bp); + if (width >= breakpoints[bp] && ( breakpoints.length == bp + 1 || width < breakpoints[bp+1] )) { + return breakpoints[bp]; } - return 0; } + return 0; + }; + + $.fn.breakpoints = function(breakpoints) { + + var oldBP = currentBP = -1; // This causes the initial changing of breakpoints from + breakpoints = breakpoints.sort(function(a,b){return a-b}); setInterval(function() { - currentBP = getCurrentBreakPoint(); + var width = $(window).width(); + currentBP = $.getCurrentBreakPoint(breakpoints, width); if (oldBP != currentBP) { - $(window).trigger('changeBreakpoint', {oldBP: oldBP, newBP: currentBP}); + var inBetweenBreakPoints = $.map(breakpoints, function(el) { + if (el >= oldBP && el <= currentBP || el >= currentBP && el <= oldBP) { + return el; + } + return null + }); + if (currentBP < oldBP) { + inBetweenBreakPoints = inBetweenBreakPoints.reverse(); + } + if (inBetweenBreakPoints.length > 1) { + for (var i = 0; i < inBetweenBreakPoints.length-1; i++ ) { + var bp1 = inBetweenBreakPoints[i] + bp2 = inBetweenBreakPoints[i+1]; + $(window).trigger('changeBreakpoint', {oldBP: bp1, newBP: bp2 }); + $(window).trigger('changeBreakpoint-' + bp1 + "-" + bp2); + console.log('changeBreakpoint-' + bp1 + "-" + bp2); + } + } else { + $(window).trigger('changeBreakpoint', {oldBP: 0, newBP: currentBP }); + $(window).trigger('changeBreakpoint-' + 0 + "-" + currentBP); + } oldBP = currentBP; } }, 200); diff --git a/example.html b/example.html index 9c01364..c51b5f9 100644 --- a/example.html +++ b/example.html @@ -6,10 +6,10 @@ $(function() { $(window).bind('changeBreakpoint', function(event, info) { $('#log').append('

Changing breakpoint: old breakpoint = ' + info.oldBP + ", new breakpoint: " + info.newBP); - $('body').removeClass("breakpoint-320 breakpoint-480 breakpoint-768 breakpoint-1024"); + $('body').removeClass("breakpoint-0 breakpoint-320 breakpoint-480 breakpoint-768 breakpoint-1024"); $('body').addClass("breakpoint-"+info.newBP); }); - $(window).breakpoints([320, 480, 768, 1024]); + $(window).breakpoints([0, 320, 480, 768, 1024]); }); @@ -27,6 +27,7 @@ .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; } + .breakpoint-0 #status p.breakpoint0 { color: #000; font-weight:bold; background: #F0F0F0; } @@ -43,6 +44,7 @@

Active Breakpoints

768

480

320

+

0

Event Log:

From cc52b662aad6da12aca52ddff4cac0fac5fbb4da Mon Sep 17 00:00:00 2001 From: Eike Send Date: Mon, 23 Jan 2012 19:03:56 +0100 Subject: [PATCH 04/22] remove console.log --- breakpoints.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/breakpoints.js b/breakpoints.js index ef5affe..a3c0e4e 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -28,7 +28,7 @@ $.fn.breakpoints = function(breakpoints) { - var oldBP = currentBP = -1; // This causes the initial changing of breakpoints from + var oldBP = currentBP = -1; breakpoints = breakpoints.sort(function(a,b){return a-b}); setInterval(function() { @@ -50,7 +50,6 @@ bp2 = inBetweenBreakPoints[i+1]; $(window).trigger('changeBreakpoint', {oldBP: bp1, newBP: bp2 }); $(window).trigger('changeBreakpoint-' + bp1 + "-" + bp2); - console.log('changeBreakpoint-' + bp1 + "-" + bp2); } } else { $(window).trigger('changeBreakpoint', {oldBP: 0, newBP: currentBP }); From cefbf4372d32d36f8bdb7b8399725c6b146c098a Mon Sep 17 00:00:00 2001 From: Eike Send Date: Mon, 23 Jan 2012 19:22:34 +0100 Subject: [PATCH 05/22] updating readme and example --- README.md | 22 ++++++++++++++-------- breakpoints.js | 3 +++ example.html | 10 ++++++++-- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 4b71e9b..256d6a2 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,17 @@ Created by [XOXCO](http://xoxco.com) ## Instructions - // array of widths in pixels where breakpoints should be triggered - $(window).breakpoints([320, 480, 768, 1024]); - - // the info object contains info about what breakpoint was left - // and which was entered - $(window).bind('changeBreakpoint', function(event, info) { - alert("Old:" + info.oldBP + " New: " + info.newBP); - }); +array of widths in pixels where breakpoints should be triggered + $(window).breakpoints([320, 480, 768, 1024]); + +the info object contains info about what breakpoint was left +and which was entered + $(window).bind('changeBreakpoint', function(event, info) { + alert("Old:" + info.oldBP + " New: " + info.newBP); + }); + +Or use this event, it has no info object + $(window).bind('changeBreakpoint-480-768', function(event) { + alert("Old: 480 New: 768"); + }); + diff --git a/breakpoints.js b/breakpoints.js index a3c0e4e..b8ea3d7 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -31,6 +31,9 @@ var oldBP = currentBP = -1; breakpoints = breakpoints.sort(function(a,b){return a-b}); + // ToDo: In stead of the setInterval, bind to the window resize event + // and throttle it with setInterval + setInterval(function() { var width = $(window).width(); currentBP = $.getCurrentBreakPoint(breakpoints, width); diff --git a/example.html b/example.html index c51b5f9..ca02778 100644 --- a/example.html +++ b/example.html @@ -1,15 +1,21 @@ - + From afeb9b4b518e2df598ae2ed1b10acba4ccf544ba Mon Sep 17 00:00:00 2001 From: Eike Send Date: Mon, 23 Jan 2012 19:27:59 +0100 Subject: [PATCH 06/22] Update README.md --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 256d6a2..2f5733a 100644 --- a/README.md +++ b/README.md @@ -8,16 +8,19 @@ Created by [XOXCO](http://xoxco.com) ## Instructions -array of widths in pixels where breakpoints should be triggered +Initialize the plugin with an array of widths in pixels where breakpoints should be triggered + $(window).breakpoints([320, 480, 768, 1024]); -the info object contains info about what breakpoint was left -and which was entered +Then bind to the general "changeBreakpoint" event on the window object. The info object, that +gets passed in, contains information about what breakpoint was left and which was entered: + $(window).bind('changeBreakpoint', function(event, info) { alert("Old:" + info.oldBP + " New: " + info.newBP); }); -Or use this event, it has no info object +Alternatively bind to specific events which are fired for each transition between breakpoints: + $(window).bind('changeBreakpoint-480-768', function(event) { alert("Old: 480 New: 768"); }); From 6164073f603dc6b74b5f76dc2381cbe0139fac2e Mon Sep 17 00:00:00 2001 From: Eike Send Date: Mon, 30 Jan 2012 12:44:40 +0100 Subject: [PATCH 07/22] bind to window resize event but throttle calls --- breakpoints.js | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/breakpoints.js b/breakpoints.js index b8ea3d7..4fc2db4 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -31,10 +31,24 @@ var oldBP = currentBP = -1; breakpoints = breakpoints.sort(function(a,b){return a-b}); - // ToDo: In stead of the setInterval, bind to the window resize event - // and throttle it with setInterval + var lastCall = (new Date()).getTime(), + resizeDefer, + resizeThrottle = 30; - setInterval(function() { + var checkBreakPoints = function(fromResize) { + + // This throttles the calls to this function and still allows immediate reaction + var now = (new Date()).getTime(); + if( fromResize && lastCall && now - lastCall < resizeThrottle ){ + clearTimeout( resizeDefer ); + resizeDefer = setTimeout( checkBreakPoints, resizeThrottle ); + return; + } + else { + lastCall = now; + } + + // This checks if breakpoints have changed and triggers accordingly var width = $(window).width(); currentBP = $.getCurrentBreakPoint(breakpoints, width); if (oldBP != currentBP) { @@ -60,7 +74,13 @@ } oldBP = currentBP; } - }, 200); + } + + function resizeBreakPoints(){ + checkBreakPoints(true); + } + + $(window).bind("resize", resizeBreakPoints).resize(); }; })(jQuery); From dbe17f6c5ef9bba048a473619bf278fa4b437cc5 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Mon, 30 Jan 2012 12:57:18 +0100 Subject: [PATCH 08/22] trigger the very first millisecond as well --- breakpoints.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/breakpoints.js b/breakpoints.js index 4fc2db4..de69bd5 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -31,7 +31,7 @@ var oldBP = currentBP = -1; breakpoints = breakpoints.sort(function(a,b){return a-b}); - var lastCall = (new Date()).getTime(), + var lastCall = 0, resizeDefer, resizeThrottle = 30; From 5f0adfb70452877353ea33a1ccb811586e28f2ad Mon Sep 17 00:00:00 2001 From: Eike Send Date: Thu, 29 Mar 2012 17:47:52 +0200 Subject: [PATCH 09/22] removing jQuery dependency, can be used standalone now --- breakpoints.js | 180 +++++++++++++++++++++++++++------------------ breakpoints.min.js | 23 ++++++ example.html | 57 -------------- index.html | 84 +++++++++++++++++++++ 4 files changed, 216 insertions(+), 128 deletions(-) create mode 100644 breakpoints.min.js delete mode 100644 example.html create mode 100644 index.html diff --git a/breakpoints.js b/breakpoints.js index de69bd5..a5affbe 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -1,86 +1,124 @@ /* - Breakpoints.js - version 2.0 - - Creates handy events for your responsive design breakpoints - - Copyright 2011-2012 XOXCO, Inc - http://xoxco.com/ + * Breakpoints.js + * Version 3.0 + * + * Creates handy events for your responsive design breakpoints. + * Use it like this to bind to certain breakpoint changes: + * + * breakpoints([0, 480, 960], function(oldP, newP) { + * console.log(oldP, newP) + * }); + * + * Version 1.0 written and copyright by XOXCO, Inc + * http://xoxco.com/ + * + * Version 2.0 and 3.0 rewrite and copyright by Eike Send + * http://eike.se/nd + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + */ - Version 2.0 rewrite by Eike Send - http://eike.se/nd - - Licensed under the MIT license: - http://www.opensource.org/licenses/mit-license.php - -*/ -(function($) { +(function(){ + var oldBP = currentBP = -1, + breakpointArray, + lastCall = 0, + resizeDefer, + resizeThrottle = 30; - $.getCurrentBreakPoint = function(breakpoints, width) { - for (var bp in breakpoints) { - bp = parseInt(bp); - if (width >= breakpoints[bp] && ( breakpoints.length == bp + 1 || width < breakpoints[bp+1] )) { - return breakpoints[bp]; + // This is the function that is exported into the global namespace + breakpoints = function(userBreakpoints, callback) { + // just in case, sort the given breakpoints + breakpointArray = userBreakpoints.sort(function(a, b) { return a - b } ); + // Bind to the resize event, but don't remove other bindings + var oldResizeFunc = window.onresize; + window.onresize = function(){ + if (oldResizeFunc) { + oldResizeFunc(); } + checkBreakPoints(true); } - return 0; - }; + if (callback) { + breakpoints.bind(callback); + } + checkBreakPoints(); + } - $.fn.breakpoints = function(breakpoints) { + // Does the actual work: + var checkBreakPoints = function(fromResize) { - var oldBP = currentBP = -1; - breakpoints = breakpoints.sort(function(a,b){return a-b}); + // Throttle the calls to this function but still allow immediate reaction + var now = (new Date()).getTime(); + if( fromResize && lastCall && now - lastCall < resizeThrottle ){ + clearTimeout( resizeDefer ); + resizeDefer = setTimeout( checkBreakPoints, resizeThrottle ); + return; + } + else { + lastCall = now; + } - var lastCall = 0, - resizeDefer, - resizeThrottle = 30; + // Get window width, code stolen from jQuery + var docwindowProp = document.documentElement["clientWidth"]; + var width = document.compatMode === "CSS1Compat" && docwindowProp + || document.body && document.body["clientWidth"] + || docwindowProp; - var checkBreakPoints = function(fromResize) { - - // This throttles the calls to this function and still allows immediate reaction - var now = (new Date()).getTime(); - if( fromResize && lastCall && now - lastCall < resizeThrottle ){ - clearTimeout( resizeDefer ); - resizeDefer = setTimeout( checkBreakPoints, resizeThrottle ); - return; + // This checks if breakpoints have changed and triggers accordingly + currentBP = breakpoints.getCurrentBreakPoint(breakpointArray, width); + if (oldBP != currentBP) { + var inBetweenBreakPoints = []; + // Find all the breakpoints that have been crossed and trigger the event as well + for (var i = 0; i < breakpointArray.length; i++) { + var el = breakpointArray[i]; + if (el >= oldBP && el <= currentBP || el >= currentBP && el <= oldBP) { + inBetweenBreakPoints.push(el); + } } - else { - lastCall = now; + if (currentBP < oldBP) { + inBetweenBreakPoints = inBetweenBreakPoints.reverse(); } - - // This checks if breakpoints have changed and triggers accordingly - var width = $(window).width(); - currentBP = $.getCurrentBreakPoint(breakpoints, width); - if (oldBP != currentBP) { - var inBetweenBreakPoints = $.map(breakpoints, function(el) { - if (el >= oldBP && el <= currentBP || el >= currentBP && el <= oldBP) { - return el; - } - return null - }); - if (currentBP < oldBP) { - inBetweenBreakPoints = inBetweenBreakPoints.reverse(); - } - if (inBetweenBreakPoints.length > 1) { - for (var i = 0; i < inBetweenBreakPoints.length-1; i++ ) { - var bp1 = inBetweenBreakPoints[i] - bp2 = inBetweenBreakPoints[i+1]; - $(window).trigger('changeBreakpoint', {oldBP: bp1, newBP: bp2 }); - $(window).trigger('changeBreakpoint-' + bp1 + "-" + bp2); - } - } else { - $(window).trigger('changeBreakpoint', {oldBP: 0, newBP: currentBP }); - $(window).trigger('changeBreakpoint-' + 0 + "-" + currentBP); - } - oldBP = currentBP; + for (var i = 0; i < inBetweenBreakPoints.length; i++) { + trigger(inBetweenBreakPoints[i]); } + oldBP = currentBP; } - - function resizeBreakPoints(){ - checkBreakPoints(true); + } + + // Utility function to get the value that is the highest in an array below or equal the given value + // Defaults to 0 + // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 250) -> 200 + // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 25) -> 0 + breakpoints.getCurrentBreakPoint = function(breakpoints, width) { + for (var bp in breakpoints) { + bp = parseInt(bp); + if (width >= breakpoints[bp] && ( breakpoints.length == bp + 1 || width < breakpoints[bp+1] )) { + return breakpoints[bp]; + } } - - $(window).bind("resize", resizeBreakPoints).resize(); - + return 0; }; -})(jQuery); + + var breakpointsHistory = [], boundFunctions = []; + // These functions are are used to bind and trigger callbacks of breakpoint events + breakpoints.bind = function(func) { + boundFunctions.push(func); + if (breakpointsHistory.length) { + for (var i = 1; i < breakpointsHistory.length; i++) { + func(breakpointsHistory[i-1], breakpointsHistory[i]) + } + } + } + + var trigger = function(value) { + for (var i = 0; i < boundFunctions.length; i++) { + var func = boundFunctions[i]; + if (breakpointsHistory.length > 0 + && breakpointsHistory[breakpointsHistory.length-1] != value) { + func(breakpointsHistory[breakpointsHistory.length-1], value) + } + } + breakpointsHistory.push(value); + } +})(); diff --git a/breakpoints.min.js b/breakpoints.min.js new file mode 100644 index 0000000..72ef596 --- /dev/null +++ b/breakpoints.min.js @@ -0,0 +1,23 @@ +/* + * Breakpoints.js + * Version 3.0 + * + * Creates handy events for your responsive design breakpoints. + * Use it like this to bind to certain breakpoint changes: + * + * breakpoints([0, 480, 960], function(oldP, newP) { + * console.log(oldP, newP) + * }); + * + * Version 1.0 written and copyright by XOXCO, Inc + * http://xoxco.com/ + * + * Version 2.0 and 3.0 rewrite and copyright by Eike Send + * http://eike.se/nd + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + */ +(function(){var a=currentBP=-1,b,c=0,d,e=30;breakpoints=function(a,c){b=a.sort(function(a,b){return a-b});var d=window.onresize;window.onresize=function(){d&&d(),f(!0)},c&&breakpoints.bind(c),f()};var f=function(g){var h=(new Date).getTime();if(g&&c&&h-c=a&&n<=currentBP||n>=currentBP&&n<=a)&&l.push(n)}currentBP=a[c]&&(a.length==c+1||b0&&g[g.length-1]!=a&&c(g[g.length-1],a)}g.push(a)}})(); + diff --git a/example.html b/example.html deleted file mode 100644 index ca02778..0000000 --- a/example.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - -
-

Demo

-

- Resize your browser window now and watch events in the box below. -

-
-
-

Active Breakpoints

-
-

1024

-

768

-

480

-

320

-

0

-
-

Event Log:

-
- diff --git a/index.html b/index.html new file mode 100644 index 0000000..77247dd --- /dev/null +++ b/index.html @@ -0,0 +1,84 @@ + + Breakpoints.js Demo + + + +
+

breakpoints.js

+

Media queries for JavaScript

+

Active Breakpoint:

+
+ 0 + 160 + 320 + 480 + 768 + 1024 +
+

+ Breakpoints.js is a javascript library which lets you bind to resize + events on an advanced level. You provide an array of screen widths + and a callback function which is called whenever one of these + breakpoints is crossed. +

+

+ If the browser is resized by using the maximize button of the browser, all + the breakpoints that are in between are triggered as separate events. +

+

Responsive JavaScript

+

+ breakpoints.js makes the most sense when you do responsive design and you + would like to reorder elements in the DOM for certain screen sizes and + you can't do it with regular media queries. For example move selected + items into the sidebar which are part of the regular page on mobile + devices. +

+

Usage

+ 
+      <script type="text/javascript" src="breakpoints.js"></script>
+      <script type="text/javascript">
+        breakpoints([0, 160, 320, 480, 768, 1024], function(oldPoint, newPoint) {
+          console.log(oldPoint, newPoint);
+        });
+      <script>
+
+

Demo

+

+ + Resize your browser window to see new log entries below or changes to the active breakpoint above. + +

+
+

Event Log:

+
+
+ + + Fork me on GitHub + From bcef1a6909d88913cf2e6e6a672575b9d137d507 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Thu, 29 Mar 2012 17:53:34 +0200 Subject: [PATCH 10/22] updating Readme --- README.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 2f5733a..6ee1030 100644 --- a/README.md +++ b/README.md @@ -9,19 +9,21 @@ Created by [XOXCO](http://xoxco.com) ## Instructions Initialize the plugin with an array of widths in pixels where breakpoints should be triggered +and pass a callback that is triggered. It gets information about what breakpoint was left and which was entered: - $(window).breakpoints([320, 480, 768, 1024]); - -Then bind to the general "changeBreakpoint" event on the window object. The info object, that -gets passed in, contains information about what breakpoint was left and which was entered: + breakpoints([0, 160, 320, 480, 768, 1024], function (oldPoint, newPoint) { + console.log(oldPoint, newPoint); + }); - $(window).bind('changeBreakpoint', function(event, info) { - alert("Old:" + info.oldBP + " New: " + info.newBP); +Alternatively bind your callbacks at another time: + + breakpoints.bind(function (oldPoint, newPoint) { + console.log("after", oldPoint, newPoint); }); -Alternatively bind to specific events which are fired for each transition between breakpoints: + breakpoints([0, 160, 320, 480, 768, 1024]); - $(window).bind('changeBreakpoint-480-768', function(event) { - alert("Old: 480 New: 768"); + breakpoints.bind(function (oldPoint, newPoint) { + console.log("before", oldPoint, newPoint); }); From 1145d1a8da34399aacf11d59f5d19234cca93b32 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Thu, 29 Mar 2012 17:54:46 +0200 Subject: [PATCH 11/22] updating Readme --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 6ee1030..67e7018 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,6 @@ Define breakpoints for your responsive design, and Breakpoints.js will fire cust [Get it from Github](https://github.com/eikes/breakpoints) -Created by [XOXCO](http://xoxco.com) - ## Instructions Initialize the plugin with an array of widths in pixels where breakpoints should be triggered @@ -27,3 +25,4 @@ Alternatively bind your callbacks at another time: console.log("before", oldPoint, newPoint); }); +Originally created by [XOXCO](http://xoxco.com) From 6b1c9487370ff007b3ace3eb82496977697784a1 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Fri, 30 Mar 2012 12:21:00 +0200 Subject: [PATCH 12/22] add moveElements.js to the mix --- index.html | 45 ++++++++++++++++++++++++++----------------- moveElements.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 18 deletions(-) create mode 100644 moveElements.js diff --git a/index.html b/index.html index 77247dd..fb208d8 100644 --- a/index.html +++ b/index.html @@ -26,24 +26,30 @@

Active Breakpoint:

768 1024 -

- Breakpoints.js is a javascript library which lets you bind to resize - events on an advanced level. You provide an array of screen widths - and a callback function which is called whenever one of these - breakpoints is crossed. -

-

- If the browser is resized by using the maximize button of the browser, all - the breakpoints that are in between are triggered as separate events. -

-

Responsive JavaScript

-

- breakpoints.js makes the most sense when you do responsive design and you - would like to reorder elements in the DOM for certain screen sizes and - you can't do it with regular media queries. For example move selected - items into the sidebar which are part of the regular page on mobile - devices. -

+
+

+ Breakpoints.js is a javascript library which lets you bind to resize + events on an advanced level. You provide an array of screen widths + and a callback function which is called whenever one of these + breakpoints is crossed. +

+
+
+

+ If the browser is resized by using the maximize button of the browser, all + the breakpoints that are in between are triggered as separate events. +

+
+
+

Responsive JavaScript

+

+ breakpoints.js makes the most sense when you do responsive design and you + would like to reorder elements in the DOM for certain screen sizes and + you can't do it with regular media queries. For example move selected + items into the sidebar which are part of the regular page on mobile + devices. +

+

Usage

       <script type="text/javascript" src="breakpoints.js"></script>
@@ -59,11 +65,13 @@ 
Demo

         Resize your browser window to see new log entries below or changes to the active breakpoint above.
       
     

+    

   
   
Event Log:

   

   

   
+  
   
   Fork me on GitHub
 
diff --git a/moveElements.js b/moveElements.js
new file mode 100644
index 0000000..0c2a13f
--- /dev/null
+++ b/moveElements.js
@@ -0,0 +1,51 @@
+(function(){
+  // Adapted from Dustin Diaz Code:
+  function getElementsByClass(searchClass,node,tag) {
+    if ( node == null ) node = document;
+    if ( tag == null ) tag = '*';
+    if ( document.getElementsByClassName ) {
+      return node.getElementsByClassName(searchClass);
+    } else {
+      var els = node.getElementsByTagName(tag);
+      var classElements = new Array();
+      var elsLen = els.length;
+      var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
+      for (i = 0; i < elsLen; i++) {
+        if ( pattern.test(els[i].className) ) {
+          classElements.push(els[i]);
+        }
+      }
+      return classElements;
+    }
+  }
+
+  moveElements = function(breakPoint, destinationElement, sourceClassName, sourceWrapperElement, sourceTagName) {
+    var elements = getElementsByClass(sourceClassName, sourceWrapperElement, sourceTagName);
+    var placeHolders = [];
+    breakpoints.bind(function(oldPoint, newPoint) {
+      if (oldPoint < newPoint && newPoint == breakPoint) {
+        for (var i = elements.length-1; i >= 0; i--) {
+          var parentEl = elements[i].parentElement;
+          if (placeHolders[i] === undefined) {
+            placeHolders[i] = document.createElement("span");
+            parentEl.insertBefore(placeHolders[i], elements[i]);
+          }
+          var el = parentEl.removeChild(elements[i]);
+          destinationElement.insertBefore(el, destinationElement.firstChild);
+        }
+      }
+      if (oldPoint > newPoint && oldPoint == breakPoint) {
+        var l = elements.length-1;
+        var removedEls = [];
+        for (var i = l; i >= 0; i--) {
+          var parentEl = elements[i].parentElement;
+          removedEls[i] = parentEl.removeChild(elements[i]);
+        }
+        for (var i = l; i >= 0; i--) {
+          placeHolders[i].parentElement.insertBefore(removedEls[i], placeHolders[i]);
+        }
+      }
+    });
+  }
+
+})();

From 3e12716b7f98380115f01637db756026fe4d3882 Mon Sep 17 00:00:00 2001
From: Eike Send 
Date: Mon, 2 Apr 2012 17:52:32 +0200
Subject: [PATCH 13/22] use 'relocate' as function name, don't throttle resize
 events, the callbacks are invoked rarely anyway

---
 breakpoints.js                 | 28 ++++++----------------------
 breakpoints.min.js             |  4 +---
 index.html                     |  8 +++++---
 moveElements.js => relocate.js |  2 +-
 relocate.min.js                |  1 +
 5 files changed, 14 insertions(+), 29 deletions(-)
 rename moveElements.js => relocate.js (93%)
 create mode 100644 relocate.min.js

diff --git a/breakpoints.js b/breakpoints.js
index a5affbe..1b291dd 100644
--- a/breakpoints.js
+++ b/breakpoints.js
@@ -22,22 +22,17 @@
 
 (function(){
   var oldBP = currentBP = -1,
-      breakpointArray,
-      lastCall = 0,
-      resizeDefer, 
-      resizeThrottle = 30;
+      breakpointArray;
   
   // This is the function that is exported into the global namespace
   breakpoints = function(userBreakpoints, callback) {
     // just in case, sort the given breakpoints
     breakpointArray = userBreakpoints.sort(function(a, b) { return a - b } );
     // Bind to the resize event, but don't remove other bindings
-    var oldResizeFunc = window.onresize;
-    window.onresize = function(){
-      if (oldResizeFunc) {
-        oldResizeFunc();
-      }
-      checkBreakPoints(true);
+    if (window.addEventListener) {
+      window.addEventListener("resize", checkBreakPoints, false);
+    } else if (window.attachEvent) {
+      window.attachEvent("onresize", checkBreakPoints);
     }
     if (callback) {
       breakpoints.bind(callback);
@@ -46,18 +41,7 @@
   }
   
   // Does the actual work:
-  var checkBreakPoints = function(fromResize) {
-    
-    // Throttle the calls to this function but still allow immediate reaction
-    var now = (new Date()).getTime();
-    if( fromResize && lastCall && now - lastCall < resizeThrottle ){
-      clearTimeout( resizeDefer );
-      resizeDefer = setTimeout( checkBreakPoints, resizeThrottle );
-      return;
-    }
-    else {
-      lastCall = now;
-    }
+  var checkBreakPoints = function() {
     
     // Get window width, code stolen from jQuery
     var docwindowProp = document.documentElement["clientWidth"];
diff --git a/breakpoints.min.js b/breakpoints.min.js
index 72ef596..b532e45 100644
--- a/breakpoints.min.js
+++ b/breakpoints.min.js
@@ -18,6 +18,4 @@
  * Licensed under the MIT license:
  * http://www.opensource.org/licenses/mit-license.php
  *
- */
-(function(){var a=currentBP=-1,b,c=0,d,e=30;breakpoints=function(a,c){b=a.sort(function(a,b){return a-b});var d=window.onresize;window.onresize=function(){d&&d(),f(!0)},c&&breakpoints.bind(c),f()};var f=function(g){var h=(new Date).getTime();if(g&&c&&h-c=a&&n<=currentBP||n>=currentBP&&n<=a)&&l.push(n)}currentBP=a[c]&&(a.length==c+1||b0&&g[g.length-1]!=a&&c(g[g.length-1],a)}g.push(a)}})();
-
+ */(function(){var a=currentBP=-1,b;breakpoints=function(a,d){b=a.sort(function(a,b){return a-b}),window.addEventListener?window.addEventListener("resize",c,!1):window.attachEvent&&window.attachEvent("onresize",c),d&&breakpoints.bind(d),c()};var c=function(){var c=document.documentElement.clientWidth,d=document.compatMode==="CSS1Compat"&&c||document.body&&document.body.clientWidth||c;currentBP=breakpoints.getCurrentBreakPoint(b,d);if(a!=currentBP){var e=[];for(var g=0;g=a&&h<=currentBP||h>=currentBP&&h<=a)&&e.push(h)}currentBP=a[c]&&(a.length==c+1||b0&&d[d.length-1]!=a&&c(d[d.length-1],a)}d.push(a)}})()
\ No newline at end of file
diff --git a/index.html b/index.html
index fb208d8..9981f0e 100644
--- a/index.html
+++ b/index.html
@@ -52,11 +52,13 @@ 
Responsive JavaScript

     
     
Usage

     
-      <script type="text/javascript" src="breakpoints.js"></script>
+      <script type="text/javascript" src="breakpoints.min.js"></script>
+      <script type="text/javascript" src="relocate.min.js"></script>
       <script type="text/javascript">
         breakpoints([0, 160, 320, 480, 768, 1024], function(oldPoint, newPoint) {
           console.log(oldPoint, newPoint);
         });
+        relocate(480, document.getElementById("target"), "movethis");
       <script>
     

     
Demo

@@ -71,7 +73,7 @@ 
Event Log:

   

   

   
-  
+  
   
   Fork me on GitHub
 
diff --git a/moveElements.js b/relocate.js
similarity index 93%
rename from moveElements.js
rename to relocate.js
index 0c2a13f..3493123 100644
--- a/moveElements.js
+++ b/relocate.js
@@ -19,7 +19,7 @@
     }
   }
 
-  moveElements = function(breakPoint, destinationElement, sourceClassName, sourceWrapperElement, sourceTagName) {
+  relocate = function(breakPoint, destinationElement, sourceClassName, sourceWrapperElement, sourceTagName) {
     var elements = getElementsByClass(sourceClassName, sourceWrapperElement, sourceTagName);
     var placeHolders = [];
     breakpoints.bind(function(oldPoint, newPoint) {
diff --git a/relocate.min.js b/relocate.min.js
new file mode 100644
index 0000000..800c106
--- /dev/null
+++ b/relocate.min.js
@@ -0,0 +1 @@
+(function(){function a(a,b,c){b==null&&(b=document),c==null&&(c="*");if(document.getElementsByClassName)return b.getElementsByClassName(a);var d=b.getElementsByTagName(c),e=new Array,f=d.length,g=new RegExp("(^|\\s)"+a+"(\\s|$)");for(i=0;i=0;e--){var f=g[e].parentElement;h[e]===undefined&&(h[e]=document.createElement("span"),f.insertBefore(h[e],g[e]));var i=f.removeChild(g[e]);c.insertBefore(i,c.firstChild)}if(a>d&&a==b){var j=g.length-1,k=[];for(var e=j;e>=0;e--){var f=g[e].parentElement;k[e]=f.removeChild(g[e])}for(var e=j;e>=0;e--)h[e].parentElement.insertBefore(k[e],h[e])}})}})()
\ No newline at end of file

From 353a1fbeadbbbae400a5c2f5fa278436bf6125e8 Mon Sep 17 00:00:00 2001
From: Eike Send 
Date: Mon, 2 Apr 2012 18:16:56 +0200
Subject: [PATCH 14/22] dont touch global namespace

---
 breakpoints.js     |  2 +-
 breakpoints.min.js | 22 +---------------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/breakpoints.js b/breakpoints.js
index 1b291dd..7577a6e 100644
--- a/breakpoints.js
+++ b/breakpoints.js
@@ -21,7 +21,7 @@
  */
 
 (function(){
-  var oldBP = currentBP = -1,
+  var oldBP, currentBP,
       breakpointArray;
   
   // This is the function that is exported into the global namespace
diff --git a/breakpoints.min.js b/breakpoints.min.js
index b532e45..201100d 100644
--- a/breakpoints.min.js
+++ b/breakpoints.min.js
@@ -1,21 +1 @@
-/*
- * Breakpoints.js
- * Version 3.0
- * 
- * Creates handy events for your responsive design breakpoints.
- * Use it like this to bind to certain breakpoint changes:
- * 
- * breakpoints([0, 480, 960], function(oldP, newP) { 
- *   console.log(oldP, newP)
- * });
- * 
- * Version 1.0 written and copyright by XOXCO, Inc
- * http://xoxco.com/
- * 
- * Version 2.0 and 3.0 rewrite and copyright by Eike Send
- * http://eike.se/nd
- * 
- * Licensed under the MIT license:
- * http://www.opensource.org/licenses/mit-license.php
- *
- */(function(){var a=currentBP=-1,b;breakpoints=function(a,d){b=a.sort(function(a,b){return a-b}),window.addEventListener?window.addEventListener("resize",c,!1):window.attachEvent&&window.attachEvent("onresize",c),d&&breakpoints.bind(d),c()};var c=function(){var c=document.documentElement.clientWidth,d=document.compatMode==="CSS1Compat"&&c||document.body&&document.body.clientWidth||c;currentBP=breakpoints.getCurrentBreakPoint(b,d);if(a!=currentBP){var e=[];for(var g=0;g=a&&h<=currentBP||h>=currentBP&&h<=a)&&e.push(h)}currentBP=a[c]&&(a.length==c+1||b0&&d[d.length-1]!=a&&c(d[d.length-1],a)}d.push(a)}})()
\ No newline at end of file
+(function(){var a,b,c;breakpoints=function(a,b){c=a.sort(function(a,b){return a-b}),window.addEventListener?window.addEventListener("resize",d,!1):window.attachEvent&&window.attachEvent("onresize",d),b&&breakpoints.bind(b),d()};var d=function(){var d=document.documentElement.clientWidth,e=document.compatMode==="CSS1Compat"&&d||document.body&&document.body.clientWidth||d;b=breakpoints.getCurrentBreakPoint(c,e);if(a!=b){var f=[];for(var h=0;h=a&&i<=b||i>=b&&i<=a)&&f.push(i)}b=a[c]&&(a.length==c+1||b0&&e[e.length-1]!=a&&c(e[e.length-1],a)}e.push(a)}})()
\ No newline at end of file

From 972cec4174a712edb8f304f0628685bcf0d28458 Mon Sep 17 00:00:00 2001
From: Eike Send 
Date: Mon, 2 Apr 2012 18:28:05 +0200
Subject: [PATCH 15/22] one less else creates denser minified code

---
 breakpoints.js     | 3 ++-
 breakpoints.min.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/breakpoints.js b/breakpoints.js
index 7577a6e..30dac72 100644
--- a/breakpoints.js
+++ b/breakpoints.js
@@ -31,7 +31,8 @@
     // Bind to the resize event, but don't remove other bindings
     if (window.addEventListener) {
       window.addEventListener("resize", checkBreakPoints, false);
-    } else if (window.attachEvent) {
+    } 
+    if (window.attachEvent) {
       window.attachEvent("onresize", checkBreakPoints);
     }
     if (callback) {
diff --git a/breakpoints.min.js b/breakpoints.min.js
index 201100d..f7d323a 100644
--- a/breakpoints.min.js
+++ b/breakpoints.min.js
@@ -1 +1 @@
-(function(){var a,b,c;breakpoints=function(a,b){c=a.sort(function(a,b){return a-b}),window.addEventListener?window.addEventListener("resize",d,!1):window.attachEvent&&window.attachEvent("onresize",d),b&&breakpoints.bind(b),d()};var d=function(){var d=document.documentElement.clientWidth,e=document.compatMode==="CSS1Compat"&&d||document.body&&document.body.clientWidth||d;b=breakpoints.getCurrentBreakPoint(c,e);if(a!=b){var f=[];for(var h=0;h=a&&i<=b||i>=b&&i<=a)&&f.push(i)}b=a[c]&&(a.length==c+1||b0&&e[e.length-1]!=a&&c(e[e.length-1],a)}e.push(a)}})()
\ No newline at end of file
+(function(){var a,b,c;breakpoints=function(a,b){c=a.sort(function(a,b){return a-b}),window.addEventListener&&window.addEventListener("resize",d,!1),window.attachEvent&&window.attachEvent("onresize",d),b&&breakpoints.bind(b),d()};var d=function(){var d=document.documentElement.clientWidth,e=document.compatMode==="CSS1Compat"&&d||document.body&&document.body.clientWidth||d;b=breakpoints.getCurrentBreakPoint(c,e);if(a!=b){var f=[];for(var h=0;h=a&&i<=b||i>=b&&i<=a)&&f.push(i)}b=a[c]&&(a.length==c+1||b0&&e[e.length-1]!=a&&c(e[e.length-1],a)}e.push(a)}})()
\ No newline at end of file

From 4fe51cfb5c093650fe363d13067cd609ae9b1493 Mon Sep 17 00:00:00 2001
From: Eike Send 
Date: Tue, 3 Apr 2012 03:05:30 +0300
Subject: [PATCH 16/22] fix bug!

---
 breakpoints.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/breakpoints.js b/breakpoints.js
index 30dac72..c56082b 100644
--- a/breakpoints.js
+++ b/breakpoints.js
@@ -38,6 +38,7 @@
     if (callback) {
       breakpoints.bind(callback);
     }
+    oldBP = breakpointArray[0];
     checkBreakPoints();
   }
   

From eb1cfd1936bad0bda22d74aa63ce6cae856b60c5 Mon Sep 17 00:00:00 2001
From: Eike Send 
Date: Wed, 4 Apr 2012 12:05:53 +0200
Subject: [PATCH 17/22] new version without getElementsByClassName polyfill

---
 README.md          | 19 ++++++++++--
 breakpoints.js     | 35 +++++++++++-----------
 breakpoints.min.js |  2 +-
 index.html         |  6 ++--
 relocate.js        | 73 +++++++++++++++++-----------------------------
 relocate.min.js    |  2 +-
 6 files changed, 66 insertions(+), 71 deletions(-)

diff --git a/README.md b/README.md
index 67e7018..e964150 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,6 @@
 
 Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.
 
-[Get it from Github](https://github.com/eikes/breakpoints)
-
 ## Instructions
 
 Initialize the plugin with an array of widths in pixels where breakpoints should be triggered
@@ -25,4 +23,19 @@ Alternatively bind your callbacks at another time:
       console.log("before", oldPoint, newPoint);
     });
 
-Originally created by [XOXCO](http://xoxco.com)
+## Relocate.js
+
+Depends on breakpoints.js
+
+    var elements = document.getElementsByClassName("movethis");
+    relocate(480, document.getElementById("target"), elements);
+
+## Credit
+
+Breakpoints.js was originally created by [XOXCO](http://xoxco.com)
+
+Version 2.0 and 3.0 have been rewritten by [Eike Send](http://eike.se/nd)
+
+Version 2.0 removed dependencies on DOM classes and fixed bugs
+
+Version 3.0 removed jQuery dependency and introduced relocate.js
diff --git a/breakpoints.js b/breakpoints.js
index c56082b..67941f4 100644
--- a/breakpoints.js
+++ b/breakpoints.js
@@ -20,8 +20,9 @@
  *
  */
 
-(function(){
-  var oldBP, currentBP,
+(function(win){
+  var oldBP, currentBP, i,
+      doc = win.document, 
       breakpointArray;
   
   // This is the function that is exported into the global namespace
@@ -29,11 +30,11 @@
     // just in case, sort the given breakpoints
     breakpointArray = userBreakpoints.sort(function(a, b) { return a - b } );
     // Bind to the resize event, but don't remove other bindings
-    if (window.addEventListener) {
-      window.addEventListener("resize", checkBreakPoints, false);
+    if (win.addEventListener) {
+      win.addEventListener("resize", checkBreakPoints, false);
     } 
-    if (window.attachEvent) {
-      window.attachEvent("onresize", checkBreakPoints);
+    if (win.attachEvent) {
+      win.attachEvent("onresize", checkBreakPoints);
     }
     if (callback) {
       breakpoints.bind(callback);
@@ -46,9 +47,9 @@
   var checkBreakPoints = function() {
     
     // Get window width, code stolen from jQuery
-    var docwindowProp = document.documentElement["clientWidth"];
-    var width = document.compatMode === "CSS1Compat" && docwindowProp 
-                || document.body && document.body["clientWidth"] 
+    var docwindowProp = doc.documentElement["clientWidth"];
+    var width = doc.compatMode === "CSS1Compat" && docwindowProp 
+                || doc.body && doc.body["clientWidth"] 
                 || docwindowProp;
     
     // This checks if breakpoints have changed and triggers accordingly
@@ -56,7 +57,7 @@
     if (oldBP != currentBP) {
       var inBetweenBreakPoints = [];
       // Find all the breakpoints that have been crossed and trigger the event as well
-      for (var i = 0; i < breakpointArray.length; i++) {
+      for (i = 0; i < breakpointArray.length; i++) {
         var el = breakpointArray[i]; 
         if (el >= oldBP && el <= currentBP || el >= currentBP && el <= oldBP) {
           inBetweenBreakPoints.push(el);
@@ -65,7 +66,7 @@
       if (currentBP < oldBP) {
         inBetweenBreakPoints = inBetweenBreakPoints.reverse();
       }
-      for (var i = 0; i < inBetweenBreakPoints.length; i++) {
+      for (i = 0; i < inBetweenBreakPoints.length; i++) {
         trigger(inBetweenBreakPoints[i]);
       }
       oldBP = currentBP;
@@ -77,10 +78,9 @@
   // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 250) -> 200
   // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 25)  -> 0
   breakpoints.getCurrentBreakPoint = function(breakpoints, width) {
-    for (var bp in breakpoints) {
-      bp = parseInt(bp);
-      if (width >= breakpoints[bp] && ( breakpoints.length == bp + 1 || width < breakpoints[bp+1] )) {
-        return breakpoints[bp];
+    for (i = 0; i < breakpoints.length; i++) {
+      if (width >= breakpoints[i] && ( breakpoints.length == i + 1 || width < breakpoints[i+1] )) {
+        return breakpoints[i];
       }
     }
     return 0;
@@ -99,12 +99,11 @@
   
   var trigger = function(value) {
     for (var i = 0; i < boundFunctions.length; i++) {
-      var func = boundFunctions[i];
       if (breakpointsHistory.length > 0 
           && breakpointsHistory[breakpointsHistory.length-1] != value) {
-        func(breakpointsHistory[breakpointsHistory.length-1], value)
+        boundFunctions[i](breakpointsHistory[breakpointsHistory.length-1], value)
       }
     }
     breakpointsHistory.push(value);
   }
-})();
+})(this);
diff --git a/breakpoints.min.js b/breakpoints.min.js
index f7d323a..480b946 100644
--- a/breakpoints.min.js
+++ b/breakpoints.min.js
@@ -1 +1 @@
-(function(){var a,b,c;breakpoints=function(a,b){c=a.sort(function(a,b){return a-b}),window.addEventListener&&window.addEventListener("resize",d,!1),window.attachEvent&&window.attachEvent("onresize",d),b&&breakpoints.bind(b),d()};var d=function(){var d=document.documentElement.clientWidth,e=document.compatMode==="CSS1Compat"&&d||document.body&&document.body.clientWidth||d;b=breakpoints.getCurrentBreakPoint(c,e);if(a!=b){var f=[];for(var h=0;h=a&&i<=b||i>=b&&i<=a)&&f.push(i)}b=a[c]&&(a.length==c+1||b0&&e[e.length-1]!=a&&c(e[e.length-1],a)}e.push(a)}})()
\ No newline at end of file
+(function(a){var b,c,d,e=a.document,f;breakpoints=function(c,d){f=c.sort(function(a,b){return a-b}),a.addEventListener&&a.addEventListener("resize",g,!1),a.attachEvent&&a.attachEvent("onresize",g),d&&breakpoints.bind(d),b=f[0],g()};var g=function(){var a=e.documentElement.clientWidth,g=e.compatMode==="CSS1Compat"&&a||e.body&&e.body.clientWidth||a;c=breakpoints.getCurrentBreakPoint(f,g);if(b!=c){var h=[];for(d=0;d=b&&i<=c||i>=c&&i<=b)&&h.push(i)}c=a[d]&&(a.length==d+1||b0&&h[h.length-1]!=a&&i[b](h[h.length-1],a);h.push(a)}})(this)
\ No newline at end of file
diff --git a/index.html b/index.html
index 9981f0e..71da82c 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,8 @@ 
Usage

         breakpoints([0, 160, 320, 480, 768, 1024], function(oldPoint, newPoint) {
           console.log(oldPoint, newPoint);
         });
-        relocate(480, document.getElementById("target"), "movethis");
+        var elements = document.getElementsByClassName("movethis");
+        relocate(480, document.getElementById("target"), elements);
       <script>

Demo

@@ -89,7 +90,8 @@

Event Log:

document.getElementById("log").style.width = "100%"; } }); - relocate(480, document.getElementById("target"), "movethis"); + var elements = document.getElementsByClassName("movethis"); + relocate(480, document.getElementById("target"), elements); Fork me on GitHub diff --git a/relocate.js b/relocate.js index 3493123..c3c73ec 100644 --- a/relocate.js +++ b/relocate.js @@ -1,51 +1,32 @@ -(function(){ - // Adapted from Dustin Diaz Code: - function getElementsByClass(searchClass,node,tag) { - if ( node == null ) node = document; - if ( tag == null ) tag = '*'; - if ( document.getElementsByClassName ) { - return node.getElementsByClassName(searchClass); - } else { - var els = node.getElementsByTagName(tag); - var classElements = new Array(); - var elsLen = els.length; - var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); - for (i = 0; i < elsLen; i++) { - if ( pattern.test(els[i].className) ) { - classElements.push(els[i]); +// Move Elements in the DOM when a certain breakpoint is crossed +// Requires breakpoints.js +// Copyright: Eike Send http://eike.se/nd +// License: MIT License + +function relocate(breakPoint, destinationElement, elements) { + var placeHolders = []; + breakpoints.bind(function(oldPoint, newPoint) { + if (oldPoint < newPoint && newPoint == breakPoint) { + for (var i = elements.length-1; i >= 0; i--) { + var parentEl = elements[i].parentElement; + if (placeHolders[i] === undefined) { + placeHolders[i] = document.createElement("span"); + parentEl.insertBefore(placeHolders[i], elements[i]); } + var el = parentEl.removeChild(elements[i]); + destinationElement.insertBefore(el, destinationElement.firstChild); } - return classElements; } - } - - relocate = function(breakPoint, destinationElement, sourceClassName, sourceWrapperElement, sourceTagName) { - var elements = getElementsByClass(sourceClassName, sourceWrapperElement, sourceTagName); - var placeHolders = []; - breakpoints.bind(function(oldPoint, newPoint) { - if (oldPoint < newPoint && newPoint == breakPoint) { - for (var i = elements.length-1; i >= 0; i--) { - var parentEl = elements[i].parentElement; - if (placeHolders[i] === undefined) { - placeHolders[i] = document.createElement("span"); - parentEl.insertBefore(placeHolders[i], elements[i]); - } - var el = parentEl.removeChild(elements[i]); - destinationElement.insertBefore(el, destinationElement.firstChild); - } + if (oldPoint > newPoint && oldPoint == breakPoint) { + var l = elements.length-1; + var removedEls = []; + for (var i = l; i >= 0; i--) { + var parentEl = elements[i].parentElement; + removedEls[i] = parentEl.removeChild(elements[i]); } - if (oldPoint > newPoint && oldPoint == breakPoint) { - var l = elements.length-1; - var removedEls = []; - for (var i = l; i >= 0; i--) { - var parentEl = elements[i].parentElement; - removedEls[i] = parentEl.removeChild(elements[i]); - } - for (var i = l; i >= 0; i--) { - placeHolders[i].parentElement.insertBefore(removedEls[i], placeHolders[i]); - } + for (var i = l; i >= 0; i--) { + placeHolders[i].parentElement.insertBefore(removedEls[i], placeHolders[i]); } - }); - } - -})(); + } + }); +} diff --git a/relocate.min.js b/relocate.min.js index 800c106..779781d 100644 --- a/relocate.min.js +++ b/relocate.min.js @@ -1 +1 @@ -(function(){function a(a,b,c){b==null&&(b=document),c==null&&(c="*");if(document.getElementsByClassName)return b.getElementsByClassName(a);var d=b.getElementsByTagName(c),e=new Array,f=d.length,g=new RegExp("(^|\\s)"+a+"(\\s|$)");for(i=0;i=0;e--){var f=g[e].parentElement;h[e]===undefined&&(h[e]=document.createElement("span"),f.insertBefore(h[e],g[e]));var i=f.removeChild(g[e]);c.insertBefore(i,c.firstChild)}if(a>d&&a==b){var j=g.length-1,k=[];for(var e=j;e>=0;e--){var f=g[e].parentElement;k[e]=f.removeChild(g[e])}for(var e=j;e>=0;e--)h[e].parentElement.insertBefore(k[e],h[e])}})}})() \ No newline at end of file +function relocate(a,b,c){var d=[];breakpoints.bind(function(e,f){if(e=0;g--){var h=c[g].parentElement;d[g]===undefined&&(d[g]=document.createElement("span"),h.insertBefore(d[g],c[g]));var i=h.removeChild(c[g]);b.insertBefore(i,b.firstChild)}if(e>f&&e==a){var j=c.length-1,k=[];for(var g=j;g>=0;g--){var h=c[g].parentElement;k[g]=h.removeChild(c[g])}for(var g=j;g>=0;g--)d[g].parentElement.insertBefore(k[g],d[g])}})} \ No newline at end of file From ac4243d1dd881624dad54f4e35d11ce031ffd362 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Wed, 4 Apr 2012 12:10:29 +0200 Subject: [PATCH 18/22] update README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index e964150..41c20fa 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ Depends on breakpoints.js var elements = document.getElementsByClassName("movethis"); relocate(480, document.getElementById("target"), elements); +To use this in IE8 or less you can use this [getElementsByClassName polyfill](https://gist.github.com/2299607) + ## Credit Breakpoints.js was originally created by [XOXCO](http://xoxco.com) From 168f3efb5def91bf9064d7a5cb6965f9633923bd Mon Sep 17 00:00:00 2001 From: Eike Send Date: Wed, 4 Apr 2012 13:40:15 +0200 Subject: [PATCH 19/22] fix bug which caused infinite loop and browser crash --- breakpoints.js | 6 +++--- breakpoints.min.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/breakpoints.js b/breakpoints.js index 67941f4..25d9af6 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -21,7 +21,7 @@ */ (function(win){ - var oldBP, currentBP, i, + var oldBP, currentBP, doc = win.document, breakpointArray; @@ -55,7 +55,7 @@ // This checks if breakpoints have changed and triggers accordingly currentBP = breakpoints.getCurrentBreakPoint(breakpointArray, width); if (oldBP != currentBP) { - var inBetweenBreakPoints = []; + var i, inBetweenBreakPoints = []; // Find all the breakpoints that have been crossed and trigger the event as well for (i = 0; i < breakpointArray.length; i++) { var el = breakpointArray[i]; @@ -78,7 +78,7 @@ // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 250) -> 200 // breakpoints.getCurrentBreakPoint([100, 200, 300, 400], 25) -> 0 breakpoints.getCurrentBreakPoint = function(breakpoints, width) { - for (i = 0; i < breakpoints.length; i++) { + for (var i = 0; i < breakpoints.length; i++) { if (width >= breakpoints[i] && ( breakpoints.length == i + 1 || width < breakpoints[i+1] )) { return breakpoints[i]; } diff --git a/breakpoints.min.js b/breakpoints.min.js index 480b946..25d76f7 100644 --- a/breakpoints.min.js +++ b/breakpoints.min.js @@ -1 +1 @@ -(function(a){var b,c,d,e=a.document,f;breakpoints=function(c,d){f=c.sort(function(a,b){return a-b}),a.addEventListener&&a.addEventListener("resize",g,!1),a.attachEvent&&a.attachEvent("onresize",g),d&&breakpoints.bind(d),b=f[0],g()};var g=function(){var a=e.documentElement.clientWidth,g=e.compatMode==="CSS1Compat"&&a||e.body&&e.body.clientWidth||a;c=breakpoints.getCurrentBreakPoint(f,g);if(b!=c){var h=[];for(d=0;d=b&&i<=c||i>=c&&i<=b)&&h.push(i)}c=a[d]&&(a.length==d+1||b0&&h[h.length-1]!=a&&i[b](h[h.length-1],a);h.push(a)}})(this) \ No newline at end of file +(function(a){var b,c,d=a.document,e;breakpoints=function(c,d){e=c.sort(function(a,b){return a-b}),a.addEventListener&&a.addEventListener("resize",f,!1),a.attachEvent&&a.attachEvent("onresize",f),d&&breakpoints.bind(d),b=e[0],f()};var f=function(){var a=d.documentElement.clientWidth,f=d.compatMode==="CSS1Compat"&&a||d.body&&d.body.clientWidth||a;c=breakpoints.getCurrentBreakPoint(e,f);if(b!=c){var g,h=[];for(g=0;g=b&&j<=c||j>=c&&j<=b)&&h.push(j)}c=a[c]&&(a.length==c+1||b0&&g[g.length-1]!=a&&h[b](g[g.length-1],a);g.push(a)}})(this) \ No newline at end of file From b6d20a84f43397c3ed05ba1ec8f182047de2fb9e Mon Sep 17 00:00:00 2001 From: Eike Send Date: Wed, 11 Apr 2012 10:34:42 +0200 Subject: [PATCH 20/22] use parentNode because it's better supported --- relocate.js | 6 +++--- relocate.min.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/relocate.js b/relocate.js index c3c73ec..3d0d1bb 100644 --- a/relocate.js +++ b/relocate.js @@ -8,7 +8,7 @@ function relocate(breakPoint, destinationElement, elements) { breakpoints.bind(function(oldPoint, newPoint) { if (oldPoint < newPoint && newPoint == breakPoint) { for (var i = elements.length-1; i >= 0; i--) { - var parentEl = elements[i].parentElement; + var parentEl = elements[i].parentNode; if (placeHolders[i] === undefined) { placeHolders[i] = document.createElement("span"); parentEl.insertBefore(placeHolders[i], elements[i]); @@ -21,11 +21,11 @@ function relocate(breakPoint, destinationElement, elements) { var l = elements.length-1; var removedEls = []; for (var i = l; i >= 0; i--) { - var parentEl = elements[i].parentElement; + var parentEl = elements[i].parentNode; removedEls[i] = parentEl.removeChild(elements[i]); } for (var i = l; i >= 0; i--) { - placeHolders[i].parentElement.insertBefore(removedEls[i], placeHolders[i]); + placeHolders[i].parentNode.insertBefore(removedEls[i], placeHolders[i]); } } }); diff --git a/relocate.min.js b/relocate.min.js index 779781d..aa8eb45 100644 --- a/relocate.min.js +++ b/relocate.min.js @@ -1 +1 @@ -function relocate(a,b,c){var d=[];breakpoints.bind(function(e,f){if(e=0;g--){var h=c[g].parentElement;d[g]===undefined&&(d[g]=document.createElement("span"),h.insertBefore(d[g],c[g]));var i=h.removeChild(c[g]);b.insertBefore(i,b.firstChild)}if(e>f&&e==a){var j=c.length-1,k=[];for(var g=j;g>=0;g--){var h=c[g].parentElement;k[g]=h.removeChild(c[g])}for(var g=j;g>=0;g--)d[g].parentElement.insertBefore(k[g],d[g])}})} \ No newline at end of file +function relocate(a,b,c){var d=[];breakpoints.bind(function(e,f){if(e=0;g--){var h=c[g].parentNode;d[g]===undefined&&(d[g]=document.createElement("span"),h.insertBefore(d[g],c[g]));var i=h.removeChild(c[g]);b.insertBefore(i,b.firstChild)}if(e>f&&e==a){var j=c.length-1,k=[];for(var g=j;g>=0;g--){var h=c[g].parentNode;k[g]=h.removeChild(c[g])}for(var g=j;g>=0;g--)d[g].parentNode.insertBefore(k[g],d[g])}})} \ No newline at end of file From faa8fbf844b317567d01e91e9afd8cd6762b9448 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Wed, 11 Apr 2012 17:59:29 +0200 Subject: [PATCH 21/22] refactor to allow multiple instances of breakpoints on the same page, move relocate into the same file --- README.md | 22 +++--- breakpoints.js | 123 ++++++++++++++++++++++--------- breakpoints.min.js | 2 +- index.html | 177 ++++++++++++++++++++++++++++++--------------- relocate.js | 32 -------- relocate.min.js | 1 - 6 files changed, 218 insertions(+), 139 deletions(-) delete mode 100644 relocate.js delete mode 100644 relocate.min.js diff --git a/README.md b/README.md index 41c20fa..ac7978e 100644 --- a/README.md +++ b/README.md @@ -4,31 +4,29 @@ Define breakpoints for your responsive design, and Breakpoints.js will fire cust ## Instructions -Initialize the plugin with an array of widths in pixels where breakpoints should be triggered +Initialize the plugin with an array of widths or an individual width in pixels where breakpoints should be triggered and pass a callback that is triggered. It gets information about what breakpoint was left and which was entered: - breakpoints([0, 160, 320, 480, 768, 1024], function (oldPoint, newPoint) { + breakpoints(600, function(oldPoint, newPoint) { console.log(oldPoint, newPoint); }); - -Alternatively bind your callbacks at another time: - breakpoints.bind(function (oldPoint, newPoint) { - console.log("after", oldPoint, newPoint); + breakpoints([0, 160, 320, 480, 768, 1024], function(oldPoint, newPoint) { + console.log(oldPoint, newPoint); }); - breakpoints([0, 160, 320, 480, 768, 1024]); +Alternatively bind your callbacks at another time: - breakpoints.bind(function (oldPoint, newPoint) { - console.log("before", oldPoint, newPoint); + var myPoints = breakpoints([0, 160, 320, 480, 768, 1024]); + + myPoints.bind(function (oldPoint, newPoint) { + console.log("after", oldPoint, newPoint); }); ## Relocate.js -Depends on breakpoints.js - var elements = document.getElementsByClassName("movethis"); - relocate(480, document.getElementById("target"), elements); + relocate(480, document.getElementById("sidebar"), elements); To use this in IE8 or less you can use this [getElementsByClassName polyfill](https://gist.github.com/2299607) diff --git a/breakpoints.js b/breakpoints.js index 25d9af6..09cc716 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -1,6 +1,6 @@ /* * Breakpoints.js - * Version 3.0 + * Version 3.5 * * Creates handy events for your responsive design breakpoints. * Use it like this to bind to certain breakpoint changes: @@ -21,55 +21,70 @@ */ (function(win){ - var oldBP, currentBP, - doc = win.document, - breakpointArray; + var doc = win.document; // This is the function that is exported into the global namespace breakpoints = function(userBreakpoints, callback) { + return new Breakpoints(userBreakpoints, callback); + } + + Breakpoints = function(userBreakpoints, callback) { + this.arr = null; // The array of used breakpoints + this.old = null; // Old breakpoint + this.cur = null; // Current breakpoint + this.hst = []; // History of breakpoints + this.fnc = []; // List of functions bound to the breakpoints array + + // Create an array if it is not an Array(like) structure + if (!(userBreakpoints instanceof Array )) userBreakpoints = [0, userBreakpoints]; // just in case, sort the given breakpoints - breakpointArray = userBreakpoints.sort(function(a, b) { return a - b } ); + this.arr = userBreakpoints.sort(function(a, b) { return a - b } ); + var instance = this; // Bind to the resize event, but don't remove other bindings + var resizeCallback = function(){ + instance.check.apply(instance) + } if (win.addEventListener) { - win.addEventListener("resize", checkBreakPoints, false); - } - if (win.attachEvent) { - win.attachEvent("onresize", checkBreakPoints); + win.addEventListener("resize", resizeCallback, false); + } else { + win.attachEvent("onresize", resizeCallback); } if (callback) { - breakpoints.bind(callback); + instance.bind(callback); } - oldBP = breakpointArray[0]; - checkBreakPoints(); + instance.old = instance.arr[0]; + instance.check(); + } // Does the actual work: - var checkBreakPoints = function() { + Breakpoints.prototype.check= function() { + var instance = this; // Get window width, code stolen from jQuery var docwindowProp = doc.documentElement["clientWidth"]; var width = doc.compatMode === "CSS1Compat" && docwindowProp || doc.body && doc.body["clientWidth"] || docwindowProp; - // This checks if breakpoints have changed and triggers accordingly - currentBP = breakpoints.getCurrentBreakPoint(breakpointArray, width); - if (oldBP != currentBP) { + // instance checks if breakpoints have changed and triggers accordingly + instance.cur = breakpoints.getCurrentBreakPoint(instance.arr, width); + if (instance.old != instance.cur) { var i, inBetweenBreakPoints = []; // Find all the breakpoints that have been crossed and trigger the event as well - for (i = 0; i < breakpointArray.length; i++) { - var el = breakpointArray[i]; - if (el >= oldBP && el <= currentBP || el >= currentBP && el <= oldBP) { + for (i = 0; i < instance.arr.length; i++) { + var el = instance.arr[i]; + if (el >= instance.old && el <= instance.cur || el >= instance.cur && el <= instance.old) { inBetweenBreakPoints.push(el); } } - if (currentBP < oldBP) { + if (instance.cur < instance.old) { inBetweenBreakPoints = inBetweenBreakPoints.reverse(); } for (i = 0; i < inBetweenBreakPoints.length; i++) { - trigger(inBetweenBreakPoints[i]); + instance.trigger(inBetweenBreakPoints[i]); } - oldBP = currentBP; + instance.old = instance.cur; } } @@ -86,24 +101,64 @@ return 0; }; - var breakpointsHistory = [], boundFunctions = []; // These functions are are used to bind and trigger callbacks of breakpoint events - breakpoints.bind = function(func) { - boundFunctions.push(func); - if (breakpointsHistory.length) { - for (var i = 1; i < breakpointsHistory.length; i++) { - func(breakpointsHistory[i-1], breakpointsHistory[i]) + Breakpoints.prototype.bind = function(func) { + var instance = this; + instance.fnc.push(func); + if (instance.hst.length) { + for (var i = 1; i < instance.hst.length; i++) { + func(instance.hst[i-1], instance.hst[i]) } } } - var trigger = function(value) { - for (var i = 0; i < boundFunctions.length; i++) { - if (breakpointsHistory.length > 0 - && breakpointsHistory[breakpointsHistory.length-1] != value) { - boundFunctions[i](breakpointsHistory[breakpointsHistory.length-1], value) + Breakpoints.prototype.trigger = function(value) { + var instance = this; + for (var i = 0; i < instance.fnc.length; i++) { + if (instance.hst.length > 0 + && instance.hst[instance.hst.length-1] != value) { + instance.fnc[i](instance.hst[instance.hst.length-1], value) } } - breakpointsHistory.push(value); + if (instance.hst[instance.hst.length-1] != value) { + instance.hst.push(value); + } } })(this); + +// Move Elements in the DOM when a certain breakpoint is crossed + +function relocate(breakPoint, destinationElement, elements) { + // ensure that we use an array-like argument + if (!(elements instanceof Array || elements instanceof NodeList)) + elements = [elements]; + var placeHolders = [], + els = [], + parentEl, el, i, + l = elements.length; + // first, create a non-live copy of the elements + for (i = l-1; i >= 0; i--) { + els.push(elements[i]); + } + // then create a Breakpoints object that operates on it: + return breakpoints(breakPoint, function(oldPoint, newPoint) { + if (oldPoint < newPoint && newPoint == breakPoint) { + for (i = 0; i < l; i++) { + parentEl = els[i].parentNode; + if (placeHolders[i] === undefined) { + placeHolders[i] = document.createElement("span"); + parentEl.insertBefore(placeHolders[i], els[i]); + } + el = parentEl.removeChild(els[i]); + destinationElement.insertBefore(el, destinationElement.firstChild); + } + } + if (oldPoint > newPoint && oldPoint == breakPoint) { + for (i = 0; i < l; i++) { + parentEl = els[i].parentNode; + el = parentEl.removeChild(els[i]); + placeHolders[i].parentNode.insertBefore(el, placeHolders[i]); + } + } + }); +} diff --git a/breakpoints.min.js b/breakpoints.min.js index 25d76f7..4125608 100644 --- a/breakpoints.min.js +++ b/breakpoints.min.js @@ -1 +1 @@ -(function(a){var b,c,d=a.document,e;breakpoints=function(c,d){e=c.sort(function(a,b){return a-b}),a.addEventListener&&a.addEventListener("resize",f,!1),a.attachEvent&&a.attachEvent("onresize",f),d&&breakpoints.bind(d),b=e[0],f()};var f=function(){var a=d.documentElement.clientWidth,f=d.compatMode==="CSS1Compat"&&a||d.body&&d.body.clientWidth||a;c=breakpoints.getCurrentBreakPoint(e,f);if(b!=c){var g,h=[];for(g=0;g=b&&j<=c||j>=c&&j<=b)&&h.push(j)}c=a[c]&&(a.length==c+1||b0&&g[g.length-1]!=a&&h[b](g[g.length-1],a);g.push(a)}})(this) \ No newline at end of file +function relocate(a,b,c){c instanceof Array||c instanceof NodeList||(c=[c]);var d=[],e=[],f,g,h,i=c.length;for(h=i-1;h>=0;h--)e.push(c[h]);return breakpoints(a,function(c,j){if(cj&&c==a)for(h=0;h=a.old&&g<=a.cur||g>=a.cur&&g<=a.old)&&f.push(g)}a.cur=a[c]&&(a.length==c+1||b0&&b.hst[b.hst.length-1]!=a&&b.fnc[c](b.hst[b.hst.length-1],a);b.hst[b.hst.length-1]!=a&&b.hst.push(a)}})(this) \ No newline at end of file diff --git a/index.html b/index.html index 71da82c..6ad22f2 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,13 @@ - Breakpoints.js Demo + relocate elements on breakpoints / media queries for javascript
-

breakpoints.js

-

Media queries for JavaScript

-

Active Breakpoint:

-
- 0 - 160 - 320 - 480 - 768 - 1024 -
-
+ +
+

relocate elements on breakpoints

+

Media queries for JavaScript

+
+

Active Breakpoint:

+
+ 0 + 160 + 320 + 480 + 768 + 1024 +
+
+

breakpoints

Breakpoints.js is a javascript library which lets you bind to resize events on an advanced level. You provide an array of screen widths and a callback function which is called whenever one of these breakpoints is crossed.

-
-

If the browser is resized by using the maximize button of the browser, all the breakpoints that are in between are triggered as separate events.

-
-
-

Responsive JavaScript

+

relocate

+

+ breakpoints.js makes the most sense when you do mobile first responsive + design and you would like to reorder or show / hide elements in the DOM + for certain screen sizes and you can't do it with regular media queries. +

- breakpoints.js makes the most sense when you do responsive design and you - would like to reorder elements in the DOM for certain screen sizes and - you can't do it with regular media queries. For example move selected - items into the sidebar which are part of the regular page on mobile - devices. + That's where the relocate function comes into play, + for example move selected items into the sidebar which are mixed into + the regular page on mobile devices. Pass it a breakpoint + an Array or a NodeList of elements and a target element where to + relocate the elements to.

+
+

Demo

+

+ + Resize your browser window to see new log entries below or changes to the active breakpoint above. + +

+
+
+

Event Log:

+
+
+
-

Usage

- 
-      <script type="text/javascript" src="breakpoints.min.js"></script>
-      <script type="text/javascript" src="relocate.min.js"></script>
-      <script type="text/javascript">
-        breakpoints([0, 160, 320, 480, 768, 1024], function(oldPoint, newPoint) {
-          console.log(oldPoint, newPoint);
-        });
-        var elements = document.getElementsByClassName("movethis");
-        relocate(480, document.getElementById("target"), elements);
-      <script>
-
-

Demo

-

- - Resize your browser window to see new log entries below or changes to the active breakpoint above. - -

-
-
-

Event Log:

-
+

Usage

+

+ Here is the code that is used to move things around on this page: + 

+<script type="text/javascript" src="breakpoints.min.js"></script>
+<script type="text/javascript">
+
+// Log the event on different breakpoints:
+breakpoints([0, 300, 600, 900, 1200], function(oldPoint, newPoint) {
+  var message = 
+    "New Point: " + newPoint + 
+    "<br> Old Point: " + oldPoint +  "<br><hr>"
+  document.getElementById("log").innerHTML = 
+    message + document.getElementById("log").innerHTML;
+  });
+
+// Hightlight elements depending on the breakpoint
+var myPoints = breakpoints([0, 160, 320, 480, 768, 1024], 
+  function(o, n) {
+    document.getElementById("breakpoint" + o).style.color = "";
+    document.getElementById("breakpoint" + n).style.color = "red";
+  }
+);
+
+// Call breakpoints without callback 
+// and bind any amount of callbacks later:
+myPoints.bind(function(oldPoint, newPoint){
+    if (newPoint == 320 && newPoint < oldPoint) {
+      document.getElementById("sidebar").style.display = "none";
+    }
+    if (oldPoint == 320 && newPoint > oldPoint) {
+      document.getElementById("sidebar").style.display = "block";
+    }
+  });
+
+// Use the relocate function to move things around:
+var elements = document.getElementsByClassName("movethis");
+relocate(480, document.getElementById("sidebar"), elements);
+
+<script>
+
- Fork me on GitHub diff --git a/relocate.js b/relocate.js deleted file mode 100644 index 3d0d1bb..0000000 --- a/relocate.js +++ /dev/null @@ -1,32 +0,0 @@ -// Move Elements in the DOM when a certain breakpoint is crossed -// Requires breakpoints.js -// Copyright: Eike Send http://eike.se/nd -// License: MIT License - -function relocate(breakPoint, destinationElement, elements) { - var placeHolders = []; - breakpoints.bind(function(oldPoint, newPoint) { - if (oldPoint < newPoint && newPoint == breakPoint) { - for (var i = elements.length-1; i >= 0; i--) { - var parentEl = elements[i].parentNode; - if (placeHolders[i] === undefined) { - placeHolders[i] = document.createElement("span"); - parentEl.insertBefore(placeHolders[i], elements[i]); - } - var el = parentEl.removeChild(elements[i]); - destinationElement.insertBefore(el, destinationElement.firstChild); - } - } - if (oldPoint > newPoint && oldPoint == breakPoint) { - var l = elements.length-1; - var removedEls = []; - for (var i = l; i >= 0; i--) { - var parentEl = elements[i].parentNode; - removedEls[i] = parentEl.removeChild(elements[i]); - } - for (var i = l; i >= 0; i--) { - placeHolders[i].parentNode.insertBefore(removedEls[i], placeHolders[i]); - } - } - }); -} diff --git a/relocate.min.js b/relocate.min.js deleted file mode 100644 index aa8eb45..0000000 --- a/relocate.min.js +++ /dev/null @@ -1 +0,0 @@ -function relocate(a,b,c){var d=[];breakpoints.bind(function(e,f){if(e=0;g--){var h=c[g].parentNode;d[g]===undefined&&(d[g]=document.createElement("span"),h.insertBefore(d[g],c[g]));var i=h.removeChild(c[g]);b.insertBefore(i,b.firstChild)}if(e>f&&e==a){var j=c.length-1,k=[];for(var g=j;g>=0;g--){var h=c[g].parentNode;k[g]=h.removeChild(c[g])}for(var g=j;g>=0;g--)d[g].parentNode.insertBefore(k[g],d[g])}})} \ No newline at end of file From 84d5ff3ae2dba2765c13c1c4698dfb47e7122df8 Mon Sep 17 00:00:00 2001 From: Eike Send Date: Thu, 19 Apr 2012 10:39:08 +0200 Subject: [PATCH 22/22] fix bug in firefox where HTMLCollection is returned from getElementsByClassName --- breakpoints.js | 5 ++--- breakpoints.min.js | 22 +++++++++++++++++++++- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/breakpoints.js b/breakpoints.js index 09cc716..b73cb12 100644 --- a/breakpoints.js +++ b/breakpoints.js @@ -129,9 +129,8 @@ // Move Elements in the DOM when a certain breakpoint is crossed function relocate(breakPoint, destinationElement, elements) { - // ensure that we use an array-like argument - if (!(elements instanceof Array || elements instanceof NodeList)) - elements = [elements]; + // ensure that we use an array-like argument, NodeList and HTMLCollection work as well + if (elements instanceof Element) elements = [elements]; var placeHolders = [], els = [], parentEl, el, i, diff --git a/breakpoints.min.js b/breakpoints.min.js index 4125608..0c58256 100644 --- a/breakpoints.min.js +++ b/breakpoints.min.js @@ -1 +1,21 @@ -function relocate(a,b,c){c instanceof Array||c instanceof NodeList||(c=[c]);var d=[],e=[],f,g,h,i=c.length;for(h=i-1;h>=0;h--)e.push(c[h]);return breakpoints(a,function(c,j){if(cj&&c==a)for(h=0;h=a.old&&g<=a.cur||g>=a.cur&&g<=a.old)&&f.push(g)}a.cur=a[c]&&(a.length==c+1||b0&&b.hst[b.hst.length-1]!=a&&b.fnc[c](b.hst[b.hst.length-1],a);b.hst[b.hst.length-1]!=a&&b.hst.push(a)}})(this) \ No newline at end of file +/* + * Breakpoints.js + * Version 3.5 + * + * Creates handy events for your responsive design breakpoints. + * Use it like this to bind to certain breakpoint changes: + * + * breakpoints([0, 480, 960], function(oldP, newP) { + * console.log(oldP, newP) + * }); + * + * Version 1.0 written and copyright by XOXCO, Inc + * http://xoxco.com/ + * + * Version 2.0 and 3.0 rewrite and copyright by Eike Send + * http://eike.se/nd + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + */function relocate(a,b,c){c instanceof Element&&(c=[c]);var d=[],e=[],f,g,h,i=c.length;for(h=i-1;h>=0;h--)e.push(c[h]);return breakpoints(a,function(c,j){if(cj&&c==a)for(h=0;h=a.old&&g<=a.cur||g>=a.cur&&g<=a.old)&&f.push(g)}a.cur=a[c]&&(a.length==c+1||b0&&b.hst[b.hst.length-1]!=a&&b.fnc[c](b.hst[b.hst.length-1],a);b.hst[b.hst.length-1]!=a&&b.hst.push(a)}})(this) \ No newline at end of file