johna's blog

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

2019-10-15T12:00:00+10:00

For a recent website project I needed a way to enter multiple tags.

I tried a few open-source scripts but didn't find something that suited my needs. Some had browser compatibility, some had other issues, and some were huge!

I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.

My requirements:

• Progressive enhancement (if JavaScript is not available or not working, revert to a simple input text for data entry instead)
• Not allow duplicate tags
• Use Bootstrap 4.x classes
• Validate entered tags
• Autocomplete functionality using HTML 5 datalist
• Autocomplete from an AJAX data source

Demo

Update history

v1.0 - Initial release
v1.1 - Restricted minimum and maximum length of tags, handled tab key (can add tag, or if input text empty then moves to next field), added public method to add tags
v1.2 - Handled enter key or click on datalist option

//tagInput by John Avis Oct 16, 2019
//v1.2

(function ($, win) {
	$.fn.tagInput = function () {
		return this.each(function () {

			//Single function used to add tags
			function addTag(tagName) {
				var cleanTagName = tagName.trim();

				if (cleanTagName != '') {
					//Input validation (this example allows minimum 2 and maximum 50 upper and lower case letters and numbers - change if required)
					if (/^([a-zA-Z0-9]){2,50}$/.test(cleanTagName) === false) {
						return '2-50 letters or numbers only';
					}

					//Check for duplicates (remove if not required)
					var tags = el.val().split(",");
					var rawTagName = rawTag(cleanTagName)
					for (var i = 0; i < tags.length; i++) {
						if (rawTag(tags[i]) === rawTagName) {
							return 'Duplicate tag';
						}
					}

					//check for maximum number of tags reached
					if (tags.length >= 10) {
						return 'Only 10 tags allowed';
					}

					//Add a tag to the list
					el.val(el.val() + (el.val() !== '' ? ',' : '') + cleanTagName);
					$('#' + id + '_form').before('<div class="float-left mr-1 mb-1"><span class="btn btn-secondary btn-sm">' + cleanTagName + ' <button type="button" class="btn badge badge-light" value="' + cleanTagName + '">×</a></span></div>');
					return true;
				}
			}

			function rawTag(tagName) {
				//Compare tags by their raw values only by converting to lower case//
				//You may also use this to remove any non alpha-numeric characters (if allowed) if some characters are ignored for comparisons
				return tagName.toLowerCase();
			}

			//Global variables - the element (jquery object) itself, and the ID which is used as a prefix for dynamic elements
			var el = $(this);
			var id = el.attr('id');

			//Add a reference to the object as data
			el.data('tagInput', this);

			//Hide the original input text
			el.hide();

			//Create the HTML elements for displaying the list of tags and for entering a new tag
			el.after('<div id="' + id + '_list" class="clearfix border rounded pl-1 pt-1">' +
				'<div id="' + id + '_form" class="float-left mb-1">' +
				'<input id="' + id + '_input" type="text" autocomplete="off" class="form-control form-control-sm" maxlength="50" list="' + id + '_datalist" placeholder="Enter a tag" />' +
				'<div id="' + id + '_error" class="text-danger small" style="display:none"></div>' +
				'<button id="' + id + '_add" class="btn btn-outline-secondary sr-only" type="button">Add tag</button>' +
				'</div>' +
				'</div>' +
				'<datalist id="' + id + '_datalist"></datalist>');

			//Attempt to add any existing comma separated values from the input text (can change separator if required)
			var tags = el.val().split(",");
			el.val('');
			for (var i = 0; i < tags.length; i++) {
				addTag(tags[i]);
			}

			var lastVal = '';

			//Watch for blur and keyup
			$('#' + id + '_input').bind('blur keyup', function (e) {

				//Empty and hide any existing validation error
				$('#' + id + '_error').html('').hide();

				//Execute if blur event or enter key pressed (could also trap other keystrokes if required)
				if (e.type === 'blur' || (e.type === 'keyup' && (typeof e.keyCode === 'undefined' || e.keyCode === 13 || (e.shiftKey === false && e.keyCode === 9)))) {

					//Empty and hide any existing validation error
					$('#' + id + '_error').html('').hide();

					//Attempt to add the tag and store the result
					var result = addTag($(this).val());
					if (result === true) {

						//If was successful then clear the input text and autocomplete datalist
						$(this).val('');
						$('#' + id + '_datalist').html('');

						//If enter or tab key was pressed then set focus back to input text
						if (e.type === 'keyup' && (typeof e.keyCode === 'undefined' || e.keyCode === 13 || (e.shiftKey === false && e.keyCode === 9))) {
							$(this).focus();
						}
					}
					else {
						$('#' + id + '_error').html(result).show();
					}
				}
				//Autocomplete datalist is only populated if at least one character has been entered (change if required)
				else if ($(this).val().length < 1) {
					//Less than 1 charcters so make sure the datalist is empty
					$('#' + id + '_datalist').html('');
				}
				//Execute if more than one character has been entered, will populate the datalist with matches
				else if (lastVal != $(this).val().trim()) {
					//Empty the datalist
					$('#' + id + '_datalist').html('');

					//Populate the datalist with dummy data (the first letter entered plus numbers 0 to 50)
					//Replace with an AJAX request or remove if not required
					for (i = 0; i < 50; i++) {
						$('#' + id + '_datalist').append('<option>' + $(this).val().substring(0, 1) + i + '</option>');
					}
				}

				lastVal = $(this).val().trim();
			});

			//Prevent the enter key from submitting the form, and prevent tab key default action if input text has data
			$('#' + id + '_input').bind('keydown', function (e) {
				if (e.keyCode === 13 || (e.shiftKey === false && e.keyCode === 9 && $(this).val().trim() !== '')) {
					e.preventDefault();
					return false;
				}
			});

			//Watch for delete tag button pressed
			$('#' + id + '_list').on('click', '.badge', function () {

				//Get current tags
				var tags = el.val().split(',');

				//Clear current values, ready to add all but the deleted tag
				el.val('');

				//Iterate through current tags and add all but the deleted tag
				for (var i = 0; i < tags.length; i++) {
					if (tags[i] != $(this).val()) {
						el.val(el.val() + (el.val() !== '' ? ',' : '') + tags[i]);
					}
				}

				//Remove the deleted tag element
				$(this).parent().parent().remove();

				//Set focus back to the input text
				el.focus();
			});

			//A public method for adding extra tags
			this.addTags = function (tagNames) {
				var tags = tagNames.split(',');
				for (var i = 0; i < tags.length; i++) {
					addTag(tags[i]);
				}
			}
		});
	};
}(jQuery, window));

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.

Back to top button like Facebook app

2017-09-15T12:00:00+10:00

The Facebook app on Windows phone has a nice and unobtrusive back to top button that only appears once you scroll past a certain point, and only when you start scrolling up the page.

The following code offers similar functionality using jQuery.

HTML

First you need to add the back to top button itself. In this example it's just the text "TOP", but you can replace this with an image or icon font symbol or whatever you want.

This element should be placed just before the closing "body" tag, and not inside any element with "position: relative", unless you want to change how it is positioned.

<a id="scroll-top" href="#" style="display:none;">TOP</a>

Note the href attribute is set to "#". The script below uses jQuery to animate scrolling to the top of the page, but you may wish to use an anchor reference instead here.

CSS

To give the button fixed positioning and place it near the top right corner, you will need some styling. You can change the position if you like.

I've also set the font size to 34 pixels in this example.

#scroll-top {
	position: fixed;
	top: 10px;
	right: 10px;
	font-size: 34px
}

JavaScript

Here's the JavaScript (using jQuery) that shows and hides the button as needed.

I use setInterval so I can track when the user is scrolling up.

Where you see the number "100", this is the number of pixels down from, the top that the button will be displayed after. That way it won't be shown over your header and if the user is near the top of the page they don't really need a back to top button then anyway.

$(function() {
	var lastPos = $(this).scrollTop();

	setInterval(function() {
		var thisPos = $(this).scrollTop();
		if ($(this).scrollTop() > 100 && thisPos < lastPos) {
			$("#scroll-top").show();
		} else {
			if ($(this).scrollTop() <= 100 || thisPos > lastPos) {
				$("#scroll-top").hide();
			}
		}
		lastPos = thisPos;
	}, 150);

	$("#scroll-top").click(function() {
		$("html, body").animate({
			scrollTop: 0
		}, 500);
		return false;
	});
});

Example

Want to see it in action?

Example on JSFiddle

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;

Simple jQuery script for EU cookie law using jQuery and Bootstrap

2015-08-11T12:00:00+10:00

I recently needed to display an implied consent EU cookie law message on a website which uses Bootstrap 3.x and jQuery.

With a little inspiration from another post, Create a simple 'Implied Consent' EU Cookie Law Banner with JavaScript, I modified this to simplify it and adapt it for Bootstrap and jQuery.

var cookiePromptTest = false; //change this to true to test the message

$(function () {
	if (cookiePromptTest || checkCookie("cookiePrompt") != "on") {
		//header is the id of the element the message will appear before
		$("#header").before('<div id="cookie-prompt" class="alert alert-danger"><button type="button" class="close" aria-label="Close" onclick="closeCookiePrompt()"><span aria-hidden="true">×</span></button>This website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our <a href="/cookies-policy/" class="alert-link" rel="nofollow" title="Cookies Policy">cookies policy</a>.</div>');
	}
});

function closeCookiePrompt() {
	if (!cookiePromptTest) {
		createCookie("cookiePrompt", "on", 30); //don't show message for 30 days once closed (change if required)
	}
	$("#cookie-prompt").remove();
}

function createCookie(name, value, days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		var expires = "; expires=" + date.toGMTString();
	}
	else var expires = "";
	document.cookie = name + "=" + value + expires + "; path=/";
}

function checkCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name, "", -1);
}

See this script in action on this website.

Navigate away protection for ASP.NET Web Forms

2015-05-20T12:00:00+10:00

I have wanted to add protection from vavigating away from some of my web forms but most of the solutions I have seen do not work well with ASP.NET with it's many possible ways of posting back and AJAX using Update Panels.

For my situation I wanted to protect against the user navigating away using the website's main navigation, closing the browser, clicking back or forward or even going to a favourite website. I did not want to protect against the user clicking any Button, Link Button or any control with AutoPostBack enabled within my form.

After a Stack Overflow question and investigation of many possible solutions I have created the following JavaScript/jQuery code that does this better than anything I found.

Please note that this code does not check whether any changes were made to the values in the form, although this functionality could be added easily. In my situation I wanted to protect against navigating away because my system had a form of record locking in place that required the user to exit correctly (or wait for lock to timeout).

var navigateAway = function (e) {
	e = e || window.event;

	//This is the message that is shown when navigating away improperly
	var message = "Exiting the form this way will result in this record being locked to you. Use cancel changes instead to exit correctly";

	if (e) {
		e.returnValue = message;
	}

	return message;
}

function EnableUnloadEvent() {
	window.onbeforeunload = navigateAway;
}

$(function () {
	$("#myform select").change(function () {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	$("#myform").click(function (e) {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	EnableUnloadEvent();
});

#myform refers to the ID of the container (eg. DIV) that contains all of your form elements that can be clicked or changed without triggering the unload message. Anything outside of this container will trigger the message.

Should you want to only show the message if one or more of the form elements anywhere on the page have been changed, you could add functionality to store the initial values, then compare these in the unload event (some code sourced from Code Project). Note that if you have anything on your page that causes a full PostBack (rather than a partial PostBack) it will set and compare the initial values from the most recent PostBack, so won't be accurate.

var initialValue = "";

var navigateAway = function (e) {

	if (initialValue != GetFormValues()) {

		e = e || window.event;

		var message = "Exiting the form this way will result in this record being locked to you. Use cancel changes instead to exit correctly";

		if (e) {
			e.returnValue = message;
		}

		return message;
	}
}

function EnableUnloadEvent() {
	window.onbeforeunload = navigateAway;
}

function GetFormValues() {
	var formValues = "";
	$.each($("form").serializeArray(), function (i, field) {
		if (field.name != "__EVENTVALIDATION"
		&& field.name != "__EVENTTARGET"
		&& field.name != "__EVENTARGUMENT"
		&& field.name != "__VIEWSTATE"
		&& field.name != "__VIEWSTATEENCRYPTED") {

			var inputField = $("[name=" + field.name + "]");
			var displayProperty = $(inputField).css("display");

			if (displayProperty != "none") {
				formValues = formValues + "-" + field.name + ":" + field.value;
			}
		}
	});

	$(":checkbox").each(function () {
		formValues = formValues + "-" + $(this).attr("checked");
	});

	$(":radio").each(function () {
		formValues = formValues + "-" + $(this).attr("checked");
	});

	$(":file").each(function () {
		formValues = formValues + "-" + $(this).val();
	});
	return formValues;
}

$(function () {

	initialValue = GetFormValues();

	$("#form select").change(function () {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	$("#form").click(function (e) {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	EnableUnloadEvent();
});

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>

Jquery/Javascript plugin to truncate text to fit container height and width

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

I recently needed a Javascript function to truncate text to fit a container such as a DIV, not just in width but in height. I found plenty of functions that truncate to width but couldn't find anything by height so I created this Jquery plugin that does the job. Please note that it does not handle HTML so if HTML content is truncated it may truncate mid-tag and break the display.

To use the function use one the the following syntax:

$("#id").truncate();

Truncates to size of container and adds "..." if the text requires truncation.

$("#id").truncate(" <a href='#'>read more</a>");

Truncates to size of container and adds specified text (in this example a read more link) if the text requires truncation.

Click here for an example

Your container should have a fixed height and overflow set to hidden. You will obviously also need to include the jQuery library.

(function ($) {
       $.fn.truncate = function (options) {
              if (!options) options = "...";
              return this.each(function (num) {
                     var height = parseInt($(this).css("height"));
                     var content = $(this).html();
                     while (this.scrollHeight > height) {
                           content = content.replace(/s+S*$/, "");
                           $(this).html(content + options.more);
                     }
              })
       }
})(jQuery);

If you only want to truncate a string to a single line, and want a server-side solution, then I recommend you read the Code Project article Truncating a text string in ASP.NET to fit within a given pixel width.