johna's blog

Responsive collapsing search filters in Bootstrap 4

2018-03-26T12:00:00+10:00

In responsive design there are times when on a mobile screen you want to hide some options with a button to show them, but on a large screen always show these options.

For example, a search results page with a bunch of search filters. On a desktop you might want those filters always visible, but on a small screen there might not be enough room and you don't want the search filters at the end of the page because the user would have to scroll all the way to the bottom to find them (they might not know they exist), and you don't want them taking up valuable room at the top of the page.

In these cases you want the user to see that filters are available at the top of the small screen page, and give them the option to show these filters with a button.

You can do this quite simply in Bootstrap 4 with a few classes.

In my example, I'll create a simple two column layout: one for search results and one for search filters. On large screens I want the search filters to be on the right side, but on small screens I want them to appear above the search results and be hidden.

So I'll put the search filters column first but use the "order-" classes to re-order them for larger screens (above md).

<div class="row">
	<div class="col-md-3 order-md-last">
		<!--Search filters-->
	</div>
	<div class="col-md-9 order-md-first">
		<!--Search results-->
	</div>
</div>

Next I'll add a button that uses the "collapse" feature and make this visible on small screens but hide on large screens.

<button type="button" data-toggle="collapse" data-target="#filters" class="d-block d-md-none btn btn-primary btn-block mb-3">Filters &dtrif;</button>

And I'll create a DIV that will house my search filters and make this be shows and hidden by the button collapse, but always shown on large screens.

<div id="filters" class="collapse d-md-block">
	<!--Search filters-->
</div>

See the demo for full example code and see it working.

Demo

Yet another enhancement of the simple Pinterest Style Grid Layout jQuery Plugin

2017-11-16T12:00:00+10:00

The problem with the last version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid was that each item would be added consecutively in the next column or row.

If one column had very long items then that column could be much longer than the other columns.

A critical feature of this layout for my applications is that items should appear top to bottom in a specific order, often chronological.

I've updated the script so that items are added to the shortest column. The result is that items may be placed out of order but they are always placed closest to the top.

The updated script is below, and a demo is available.

/*
	Pinterest Grid Plugin
	Copyright 2014 Mediademons
	@author smm 16/04/2014
		
	Modified by John Avis 16/11/2017
		
	usage:
		
		$(document).ready(function() {
		$('#blog-landing').pinterest_grid({
			no_columns: 4
		});
	});
*/
; (function ($, window, document, undefined) {
	var pluginName = 'pinterest_grid',
		defaults = {
			padding_x: 10,
			padding_y: 10,
			no_columns: 4,
			margin_bottom: 50,
			breakpoints: [
				[767, 1],
				[991, 2],
				[1199, 3]
			]
		},
		columns,
		$article,
		article_width;

	function Plugin(element, options) {
		this.element = element;
		this.options = $.extend({}, defaults, options);
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype.init = function () {
		var self = this,
			resize_finish;

		$(this.element).find("img").load(function () {
			$(window).resize();
		});

		$(window).resize(function () {
			clearTimeout(resize_finish);
			resize_finish = setTimeout(function () {
				self.make_layout_change(self);
			}, 11);
		});

		self.make_layout_change(self);

		setTimeout(function () {
			$(window).resize();
		}, 500);
	};

	Plugin.prototype.calculate = function (columns) {
		var self = this,
			tallest = 0,
			row = 0,
			$container = $(this.element),
			container_width = $container.width();
		$article = $(this.element).children();

		if (columns === 1) {
			article_width = $container.width();
		} else {
			article_width = ($container.width() - self.options.padding_x * (columns - 1)) / columns;
		}

		$article.each(function () {
			$(this).css('width', article_width);
		});

		var columnTop = [];
		for (var i = 1; i <= columns; i++) {
			columnTop[i] = 0;
		}

		$article.each(function (index) {
			var current_column,
				left_out = 0,
				top = 0,
				$this = $(this);

			current_column = 0;
			var minColumnTop = -1;
			for (var i = 1; i <= columns; i++) {
				if (minColumnTop == -1 || columnTop[i] < minColumnTop) {
					current_column = i;
					minColumnTop = columnTop[i];
				}
			}

			top = columnTop[current_column];

			columnTop[current_column] += $(this).outerHeight() + self.options.padding_y;

			if (columns === 1) {
				left_out = 0;
			} else {
				left_out = ((current_column - 1) % columns) * (article_width + self.options.padding_x);
			}

			$this.css({
				'left': left_out,
				'top': top
			});
		});

		var paddingy = this.options.padding_y;
		largest = Math.max.apply(Math, columnTop) - paddingy;
		$container.css('height', largest + this.options.margin_bottom);
	};

	Plugin.prototype.make_layout_change = function (_self) {
		columns = _self.options.no_columns;

		for (var i = 0; i < _self.options.breakpoints.length; i++) {
			if ($(window).width() <= _self.options.breakpoints[i][0]) {
				columns = _self.options.breakpoints[i][1];
				break;
			}
		}

		_self.calculate(columns);
	};

	$.fn[pluginName] = function (options) {
		return this.each(function () {
			if (!$.data(this, 'plugin_' + pluginName)) {
				$.data(this, 'plugin_' + pluginName,
					new Plugin(this, options));
			}
		});
	}

})(jQuery, window, document);

See also my first post about this handy jQuery plugin I originally found on www.jqueryscript.net.

Enhanced simple Pinterest Style Grid Layout jQuery Plugin

2017-04-13T12:00:00+10:00

UPDATE: There's a new version available of this script available now that puts content in the shortest column rather than just in the next row/column position.

In response to a request, I have made some improvements to the modified version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.

This original script had a few bugs which I provided fixes for. See my previous post, Simple jQuery Plugin To Create Pinterest Style Grid Layout for more details.

Reader Maxim Usik asked to be able to have more than one breakpoint, so that it might have 3 columns on larger screens, 2 columns on a tablet, and 1 column on a mobile phone.

I have made some changes to the script and you can now specify the number of columns at any number of breakpoints.

The new option is called "breakpoints" and you pass it an array of values, for example:

breakpoints: [  [ 767, 1 ], [ 991, 2 ], [ 1199, 3 ] ]

For each breakpoint, the first value is the maximum width, and the second value is the number of columns.

The default value for this option matches Bootstrap 3.x breakpoints.

Also in this update script is small a fix for adjusting the screen as images load.

Here is a demo using Bootstrap 3.x.

And here is the updated script.

/*
	Pinterest Grid Plugin
	Copyright 2014 Mediademons
	@author smm 16/04/2014

	Modified by John Avis 13/04/2017

	usage:

		$(document).ready(function() {
		$('#blog-landing').pinterest_grid({
			no_columns: 4
		});
	});
*/
; (function ($, window, document, undefined) {
	var pluginName = 'pinterest_grid',
		defaults = {
			padding_x: 10,
			padding_y: 10,
			no_columns: 4,
			margin_bottom: 50,
			breakpoints: [
				[ 767, 1 ],
				[ 991, 2 ],
				[ 1199, 3 ]
			]
		},
		columns,
		$article,
		article_width;

	function Plugin(element, options) {
		this.element = element;
		this.options = $.extend({}, defaults, options);
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype.init = function () {
		var self = this,
			resize_finish;

		$(this.element).find("img").load(function () {
			$(window).resize();
		});

		$(window).resize(function () {
			clearTimeout(resize_finish);
			resize_finish = setTimeout(function () {
				self.make_layout_change(self);
			}, 11);
		});

		self.make_layout_change(self);

		setTimeout(function () {
			$(window).resize();
		}, 500);
	};

	Plugin.prototype.calculate = function (columns) {
		var self = this,
		tallest = 0,
		row = 0,
		$container = $(this.element),
			container_width = $container.width();
		$article = $(this.element).children();

		if (columns === 1) {
			article_width = $container.width();
		} else {
			article_width = ($container.width() - self.options.padding_x * (columns - 1)) / columns;
		}

		$article.each(function() {
			$(this).css('width', article_width);
		});

		$article.each(function (index) {
			var current_column,
				left_out = 0,
				top = 0,
				$this = $(this),
				prevAll = $this.prevAll(),
				tallest = 0;

			if (columns !== 1) {
				current_column = (index % columns);
			} else {
				current_column = 0;
			}

			for (var t = 0; t < columns; t++) {
				$this.removeClass('c' + t);
			}

			if (index % columns === 0) {
				row++;
			}

			$this.addClass('c' + current_column);
			$this.addClass('r' + row);

			prevAll.each(function (index) {
				if ($(this).hasClass('c' + current_column)) {
					top += $(this).outerHeight() + self.options.padding_y;
				}
			});

			if (columns === 1) {
				left_out = 0;
			} else {
				left_out = (index % columns) * (article_width + self.options.padding_x);
			}

			$this.css({
				'left': left_out,
				'top': top
			});
		});

		this.tallest($container);
	};

	Plugin.prototype.tallest = function (_container) {
		var column_heights = [],
			largest = 0;

		var paddingy = this.options.padding_y;

		for (var z = 0; z < columns; z++) {
			var temp_height = 0;
			_container.find('.c' + z).each(function () {
				temp_height += $(this).outerHeight() + paddingy;
			});
			column_heights[z] = temp_height;
		}

		largest = Math.max.apply(Math, column_heights) - paddingy;
		_container.css('height', largest + this.options.margin_bottom);
	};

	Plugin.prototype.make_layout_change = function (_self) {
		columns = _self.options.no_columns;

		for (var i = 0; i < _self.options.breakpoints.length; i++) {
			if ($(window).width() <= _self.options.breakpoints[i][0]) {
				columns = _self.options.breakpoints[i][1];
				break;
			}
		}

		_self.calculate(columns);
	};

	$.fn[pluginName] = function (options) {
		return this.each(function () {
			if (!$.data(this, 'plugin_' + pluginName)) {
				$.data(this, 'plugin_' + pluginName,
				new Plugin(this, options));
			}
		});
	}

})(jQuery, window, document);

Simple jQuery Plugin To Create Pinterest Style Grid Layout

2016-03-09T12:00:00+10:00

When I was looking for an alternative to Masonry to produce a responsive Pinterest style grid that was a lot simpler and lighter weight I came across this jQuery plugin on www.jqueryscript.net that is very simple and works well.

However, It has a few issues which I needed to fix before I could use it.

1. The columns do not take up the full width of the container because the width calculation includes horizontal margin on all columns. It should exclude the margin on the final column.

2. The height calculation is inaccurate as it does not include vertical padding on every element. I needs to include padding for each element except the last one.

3. The function that runs to calculate and adjust sizes calls the window resize event handler every time it runs, which is not necessary, and results in the resize event running constantly. It is possible this was intended to handle loading of images, which effects the size calculation, which I deal with in issue 4.

4. If images are not loaded when the script runs then it can't calculate the height required correctly. To accommodate this, I run the resize event each time an image is loaded within the container.

Here's the final code. See the page on www.jqueryscript.net for instructions on how to use it.

UPDATE 13 April 2017: I've made some further improvements and fixes to this script. The new script allows you to create multiple breakpoints each with a specific number of columns. See my new post, Enhanced simple Pinterest Style Grid Layout jQuery Plugin.

UPDATE 16 Nov 2017: There's a new version available of this script available now that puts content in the shortest column rather than just in the next row/column position.

Note that the comments in the code show changes I made.

 /*
    Pinterest Grid Plugin
    Copyright 2014 Mediademons
    @author smm 16/04/2014

    usage:

     $(document).ready(function() {
        $('#blog-landing').pinterest_grid({
            no_columns: 4
        });
    });
*/
; (function ($, window, document, undefined) {
	var pluginName = 'pinterest_grid',
        defaults = {
        	padding_x: 10,
        	padding_y: 10,
        	no_columns: 3,
        	margin_bottom: 50,
        	single_column_breakpoint: 700
        },
        columns,
        $article,
        article_width;

	function Plugin(element, options) {
		this.element = element;
		this.options = $.extend({}, defaults, options);
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype.init = function () {
		var self = this,
            resize_finish;

		$(".blog-landing img").load(function () {
			$(window).resize();
		});

		$(window).resize(function () {
			clearTimeout(resize_finish);
			resize_finish = setTimeout(function () {
				self.make_layout_change(self);
			}, 11);
		});

		self.make_layout_change(self);

		setTimeout(function () {
			$(window).resize();
		}, 500);
	};

	Plugin.prototype.calculate = function (single_column_mode) {
		var self = this,
            tallest = 0,
            row = 0,
            $container = $(this.element),
            container_width = $container.width();
		$article = $(this.element).children();

		if (single_column_mode === true) {
			article_width = $container.width(); // - self.options.padding_x;
		} else {
			//article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
			article_width = ($container.width() - self.options.padding_x * (self.options.no_columns - 1)) / self.options.no_columns;
		}

		$article.each(function () {
			$(this).css('width', article_width);
		});

		columns = self.options.no_columns;

		$article.each(function (index) {
			var current_column,
                left_out = 0,
                top = 0,
                $this = $(this),
                prevAll = $this.prevAll(),
                tallest = 0;

			if (single_column_mode === false) {
				current_column = (index % columns);
			} else {
				current_column = 0;
			}

			for (var t = 0; t < columns; t++) {
				$this.removeClass('c' + t);
			}

			if (index % columns === 0) {
				row++;
			}

			$this.addClass('c' + current_column);
			$this.addClass('r' + row);

			prevAll.each(function (index) {
				if ($(this).hasClass('c' + current_column)) {
					top += $(this).outerHeight() + self.options.padding_y;
				}
			});

			if (single_column_mode === true) {
				left_out = 0;
			} else {
				left_out = (index % columns) * (article_width + self.options.padding_x);
			}

			$this.css({
				'left': left_out,
				'top': top
			});
		});

		this.tallest($container);
		//$(window).resize();
	};

	Plugin.prototype.tallest = function (_container) {
		var column_heights = [],
            largest = 0;

		var paddingy = this.options.padding_y;

		for (var z = 0; z < columns; z++) {
			var temp_height = 0;
			_container.find('.c' + z).each(function () {
				//temp_height += $(this).outerHeight();
				temp_height += $(this).outerHeight() + paddingy;
			});
			column_heights[z] = temp_height;
		}

		//largest = Math.max.apply(Math, column_heights);
		largest = Math.max.apply(Math, column_heights) - paddingy;
		//_container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
		_container.css('height', largest + this.options.margin_bottom);
	};

	Plugin.prototype.make_layout_change = function (_self) {
		if ($(window).width() < _self.options.single_column_breakpoint) {
			_self.calculate(true);
		} else {
			_self.calculate(false);
		}
	};

	$.fn[pluginName] = function (options) {
		return this.each(function () {
			if (!$.data(this, 'plugin_' + pluginName)) {
				$.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));
			}
		});
	}

})(jQuery, window, document);

It's also easy to change the number of columns when it changes to "single column" mode by changing the Plugin.prototype.calculate method. Here's what the first part of this method should be changed to (comments show changes):

Plugin.prototype.calculate = function (single_column_mode) {
	var self = this,
	tallest = 0,
	row = 0,
	$container = $(this.element),
		container_width = $container.width();
	$article = $(this.element).children();

	//these next lines are new
	if (single_column_mode === true) {
		columns = 2;
		single_column_mode = false;
	}
	else {
		columns = self.options.no_columns;
	}

	if(single_column_mode === true) {
		article_width = $container.width(); // - self.options.padding_x;
	} else {
		//this next line has been changed
		article_width = ($container.width() - self.options.padding_x * (columns - 1)) / columns;
	}

	$article.each(function() {
		$(this).css('width', article_width);
	});

	//this next line should be removed
	//columns = self.options.no_columns;

My blog updated to Bootstrap 3

2015-07-21T12:00:00+10:00

As much as I thought my simple JavaScript solution for responsive web design without media queries was a good idea (and still has a place), I have updated my blog to using the Bootstrap 3 framework.

The main reason for the update was that I wanted to modernise the blog home page to show a timeline of posts rather than the latest post. This has SEO benefits and presumably most people don't go to the home page but instead come to a specific post either from a search engine or from an email or social share. If they do go to the home page they get an overview of all recent posts now.

For the timeline styling I found an excellent solution, Build a Vertical Timeline Archives Page Using Bootstrap, that was simple to implement.

I modified it slightly by removing the colours from the timeline CSS and instead adding the Bootstrap "bg-" classes to apply colour. That way if I change the Bootstrap colour scheme I don't also have to change the timeline CSS.

As part of the upgrade I have also improved the site navigation and made it easier to browse related posts for something of interest rather than having to read through complete posts one by one.

I love the way that Bootstrap gives me, a programmer with little design ability, the ability to focus on back end development and have an attractive and professional looking front end up and running with little to no effort. I know that it then looks like every other Bootstrap site but a blog is (hopefully) more about content so as long as the front end works and doesn't look unattractive then no problem, right?

My blog updated to responsive design

2013-06-21T12:00:00+10:00

For too many years my own blog has been out-dated, still with its' decade old HTML 3.2 markup. I decided to update it and put into action my responsive design techniques.

My intention was to make the layout as responsive as possible with just CSS floats, without JavaScript, and supporting as many browsers as possible, including right back to IE6. Then if the browser window size changed beyond what my layout was intended for, either smaller or larger, then certain elements would be show, hidden or moved.

The content area of my blog was designed to always be 600 pixels wide, unless the browser window fell below 650 pixels wide (600 pixels plus 25 pixel margins either side). Once below this point the content area should change to auto width to fill the browser window (with margins). Then I have another breakpoint to reduce the horizontal margins to only 10px when the display width falls below 620 pixels.

I also wanted anyone browsing full size on a 1920 by 1080 pixel monitor to make more use of all the available space. So I decided to have the comments element positioned to the right of the main content area at display widths above 1890 pixels.

To accomplish the changes at the maximum width of 650 pixels and the minimum width of 1890 pixels I used my Cross-browser responsive design without media queries jQuery to apply different classes to the BODY element at these breakpoints.

This type of design is a simple way of doing effective responsive design without resorting to a more complex grid based layout. Basically my design uses fixed width building blocks which only become fluid when the browser width falls below the standard width of the main content area. To sum up here are some tips:

* Create fixed width elements
* Use CSS floats to position these items
* Add a media query (or equivalent) to change to fluid widths once the width falls below the width of your main content

Also in use is my Image resizing solution for Responsive Design which uses jQuery and server-side image resizing to request the correct sized image from the server for the current browser window size.

Image resizing solution for Responsive Design

2013-06-15T12:00:00+10:00

Following on from my previous article on responsive design without media queries, I have been looking for how to handle the problem of image size and display in responsive design.

The problems are: (a) how do you provide the correct pixel size image; and (b) how do you prevent loading of invisible images.

The solution I present here handles these problems with jQuery and a server-side script to handle image resizing. The idea is that you add the highest resolution image your design will need, then resize it server-side as needed.

Note: this will not be a simple to implement solution for many people. It requires server-side image resizing and a little knowledge of JavaScript/jQuery to suit your needs.

Implementation requires that all images have a width, whether it be in pixels or percentage, and that the responsive image tags be replaced with something like the following:

<img alt="Sample" data-original="http://mysite.com/coffee5.jpg" src="placeholder.gif" />

The src is replaced with a placeholder image that should be used for all responsive image tags, so is only loaded once. It can be a 1 by 1 pixel image.

The data-original attribute is added and has the URL of your server-side image resizing service and the name of the image. The jQuery script will automatically append the required width to this URL.

If JavaScript is disabled it is possible to have a fallback image, for example:

<span class="fallback"><img alt="Sample" data-original="http://mysite.com/coffee5.jpg" src="placeholder.gif" /></span>
<noscript><img alt="Sample" src="http://mysite.com/coffee5.jpg" /></noscript>

The span is added around the image, and the fallback class is set to display:none so as to hide the image initially. If JavaScript is enabled then display:inline can be set on all items with the fallback class. This is required if the image is not set to display using media queries or jQuery, the script will be able to determine if the image is visible or not.

Here's the jQuery plugin to handle loading of the correct size images, if visible:

(function ($) {
	$.fn.responsiveImages = function () {
		return this.each(function () {
			if ($(this).is(":visible")) {
				$(this).attr("src", $(this).attr("data-original") + "?w=" + $(this).width());
			}
		});
	};
})(jQuery);

$(function () {
	$(".fallback").css("display", "inline");
	$("#article img").responsiveImages();

	//Optional reload new images on resize
	var resizeTimer;
	$(window).resize(function () {
		if (resizeTimer !== false) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function () {
			$("#article img").responsiveImages();
		}, 500);
	});
});

There's some optional code in there that will also get new resized images if the window is resized or changed from portrait to landscape, etc. I wouldn't recommend using this if you use proportional size images where there could be many, many different pixel sizes based on the browser window size. If you have only a few breakpoints and fixed pixel widths for the images then it is viable to use this.

Here's a sample that also uses my jQuery responsive design without media queries script.

Example

Cross-browser responsive design without media queries

2013-06-07T12:00:00+10:00

...Or an alternative to media queries for responsive design

I really like the concept of responsive design, and I have read a lot of the positive stuff about it, and also read a lot of the negative too.

Despite the negatives, I do think that responsive design is the way of the future (and now), but it seems that it is far from easy to get right.

I'm taking my first steps in responsive design now, but one of the first issues I encountered is browser compatibility for CSS3 media queries. The Google Analytics statistics for most of the sites I maintain still show enough users with Internet Explorer 8 that I still need to consider these browsers during development.

I have looked at some of the well-known fixes but the idea of requesting my CSS files by AJAX and parsing them doesn't sound too efficient, even though it will only happen with IE8 and below.

An alternative is to use JavaScript or jQuery to handle the change of display size for all browsers, and I put something together quickly to do this. As the experimental work I have done so far has only involved using "max-width", my jQuery example presented here works only that way.

It works simply by applying classes to a specified tag (default is BODY tag). So if you have breakpoints set at 500 pixels and 300 pixels, it will apply no classes at 600 pixels, the 500 pixel class (which you specify) once the display width is less than or equal to 500 pixels, and both the 500 and 300 pixels classes when the display width is less than or equal to 300 pixels. It adjusts classes on document ready and when the browser is resized.

Here's the code and a sample (jQuery required):

<script type="text/javascript">
	(function ($) {
	    	jQuery.responsive = function (options) {
	    		var settings = $.extend({
	    			breakpoints: [],
	    			container: "body"
	    		}, options);
	    		$(window).resize(function () {
	    			respond();
	    		});
	    		respond();
	    		function respond() {
	    			for (var i = 0; i < settings.breakpoints.length; i++) {
	    				if ($(window).width() <= settings.breakpoints[i][0]) {
	    					$(settings.container).addClass(settings.breakpoints[i][1]);
	    				}
	    				else {
	    					$(settings.container).removeClass(settings.breakpoints[i][1]);
	    				}
	    			}
	    		};
	    	}
	})(jQuery);

	//Sample usage - adds two breakpoints and applies class to BODY tag
	$(function () {
		$.responsive({
			//array with max-width in pixels, and class to apply
			breakpoints: [[980, "mw980"], [480, "mw480"]]
			//optional specify container to apply classes to, default is body
			//,container: "#wrapper"
		});
	});
</script>

I mocked up a couple of samples, one using media queries and my alternative using jQuery:

Example using media queries

Example using jQuery

They should appear and operate identically in all browsers, except IE8 and below where the media queries example will not work as designed.

Update: I have since redesigned my blog using this technique. I also added support for min-width. You can look at the source of this page to see updated code.

Update: I found that one of the disadvantages of using this technique is that the adding of classes does not happen until document ready. This means that there can be a delay in applying the classes which is visible to the user. To solve this problem I suggest adding a second script using native JavaScript to add the classes immediately after the BODY open tag (or whichever tag has the clases applied). Example (also applied to this website):

var container = "body"; //must be ID
var breakpoints = [
	["max-width", 650, "max650"],
	["min-width", 986, "min986"]
];
for (var i = 0; i < breakpoints.length; i++) {
	if (breakpoints[i][0] == "max-width") {
		if (window.innerWidth <= breakpoints[i][1]) {
			document.getElementById(container).className = breakpoints[i][2];
		}
	}
	else if (breakpoints[i][0] == "min-width") {
		if (window.innerWidth >= breakpoints[i][1]) {
			document.getElementById(container).className = breakpoints[i][2];
		}
	}
}

I've actually created some ASP.NET server controls to handle this in some of the projects I am working on. Let me know if you're interested in seeing that.

Update:

I have created a pure JavaScript version of the cross-browser responsive media query alternative code. This version should be placed immediately after the opening tag for the element that classes are to be applied. The id of that element and the breakpoints need to be adjusted to your requirements. Here's an example:

<script type="text/javascript">
	function hasClass(el, cls) {
		return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
	}
	function addClass(el, cls) {
		if (!this.hasClass(el, cls)) el.className += " " + cls;
	}
	function removeClass(el, cls) {
		if (hasClass(el, cls)) {
			var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
			el.className = el.className.replace(reg, ' ');
		}
	}

	var addEvent = function (elem, type, eventHandle) {
		if (elem == null || elem == undefined) return;
		if (elem.addEventListener) {
			elem.addEventListener(type, eventHandle, false);
		} else if (elem.attachEvent) {
			elem.attachEvent("on" + type, eventHandle);
		} else {
			elem["on" + type] = eventHandle;
		}
	};

	function responsive() {
		var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

		for (var i = 0; i < breakpoints.length; i++) {
			if (breakpoints[i][0] == "max-width") {
				if (w <= breakpoints[i][1]) {
					addClass(document.getElementById(id), breakpoints[i][2]);
				}
				else {
					removeClass(document.getElementById(id), breakpoints[i][2]);
				}
			}
			else if (breakpoints[i][0] == "min-width") {
				if (w >= breakpoints[i][1]) {
					addClass(document.getElementById(id), breakpoints[i][2]);
				}
				else {
					removeClass(document.getElementById(id), breakpoints[i][2]);
				}
			}
		}
	}

	var resizeTimeoutId;

	function resized() {
		window.clearTimeout(resizeTimeoutId);
		resizeTimeoutId = window.setTimeout('responsive();', 10);
	}

	var id = "body";
	var breakpoints = [["max-width", 630, "max630"], ["min-width", 1890, "min1890"]];

	addEvent(window, "resize", resized);

	responsive();
</script>