Migrating away from Mapbox Studio Classic Styles

If you’re using Mapbox static or interactive maps you might still be using the old method for pulling in a style.

Recognise either of these?

L.mapbox.map('map-id', 'account.styleID')

https://api.tiles.mapbox.com/v4/mapbox.style/

Well there are newer ways to do things now, and in the near future these will stop working for you.

First step is to update the version of the javascript library you’re using (if you are) to at least v2.4.0. So any direct links to mapbox javascript files or you might have it referenced in your composer or npm package list.

Continue reading “Migrating away from Mapbox Studio Classic Styles”

Add global Twitter Bootstrap modal listeners

If you’re ever browsed the Twitter Bootstrap javascript documentation then you’ll know that the modal parts of the Bootstrap library require some javascript to show and hide them.

Part of the javascript is related to events which you can attach listeners to so you know when your modal shown and hidden.

What they don’t tell you is that you can add a single global (or semi global if you want) listener to all modal events which will fire when any modal is shown or hidden.

$('body').on('shown', '.modal', function () {

	console.log('we have shown a modal');

});

For example the above will console log “we have shown a modal” when any modal is shown. You can switch the shown event to be show, shown, hide or hidden.

Hide the Fancy Force Login Prompt

It really annoys me that Fancy force you to login before you can see that page you’ve click the link to view.

Here is a bookmarklet you can drag to your bookmarks bar. Then when they try to force you to log in, click it to hide the login prompt and view the page as normal.

Drag the following to your bookmark bar:

Extending jQuery selectors and understanding the options

There are tons of posts around which bang on about how to extend jQuery to include your own selectors, but to find one that actually explains your options is a pain, hence this post.

jQuery has an extend function baked in which looks something like $.extend(target, object1, object2); and will extend target (which should be an object) with the properties and methods of object1 and object2. You can add as many additional objects (think object3, object4 and object5) to the end as you like.

What we want to do it extend a very specific part of jQuery itself. The $.expr[‘:’] object which stores the built in selectors and any we add.

Indeed when you console.log($.expre[‘:’]) you see a full list of the selectors available in the version of jQuery you are using:

animated
button
checkbox
checked
data
disabled
empty
enabled
file
focus
focusable
has
header
hidden
image
input
onbranch
parent
password
radio
reset
selected
submit
tabbable
text
visible

NB: I’ve removed the ui- selectors to avoid confusion.

So now you know what not to call your selector (unless you want to replace a built in one), we can define our own…

$.extend($.expr[':'],{
	block: function(e,i,m,s) {
		return $(e).css('display') === 'block';
	}
});

The first thing you will notice about the above is that the selector function takes up to (although may need fewer) four argument; e, i, m and s.

e is the element currently being checked.
i is the index of that elements within all elements being checked (starts at zero)
m stands for match and is additional information that we can use in our function.
s stands for stack and is all elements in the current selection or stack

so $(e) makes the current element e into a jQuery object
i allows us to check for the 3rd, 6th, 23rd thing
m contains the following:

[0] is the actual selector called. For example :anyof(“div,4,hr,10″)
[1] is just the selector name. For example: anyof
[2] is the type of quotes used (if any) in the selector. So ” would be returned for :anyof(“div,4,hr,10”)
[3] is any parameters used in the form of a string so “div,4,hr,10” from above

and s contains an array of one or more html elements.

So now we know what is actually returned we can write a cleverer selector…

$.extend($.expr[':'],{
	anyof: function(e,i,m,s) {
		if(m[3].length)
		{
			$(m[3].split(',')).each(function(i2,e2)
			{
				if(parseInt(e2))
				{
					// correct index?
					if(parseInt(e2) == i)
					{
						return true;
					}
				}
				else
				{
					// match selector
					if($(e).is(e2))
					{
						return true;
					}
				}
			});
			return false;
		}
		else
		{
			return false;
		}
	}
});

or if we wanted to check for the unique items in the stack:

$.extend($.expr[':'],{
	isunique: function(e,i,m,s) {
		
		$(s).each(function(i2,e2)
		{
			if($(e2).prop('tagName') == $(e).prop('tagName'))
			{
				return false;
			}
		});

		return true;
	}
});

NB: Since jQuery 1.6 you should use .prop() for tagName not attr()

The above selector will check all other elements in the stack and return only those with a unique tag. We could expand it to check other things about the element to see if it is truly unique such as it’s classes or styles.

NB: I haven’t checked all the code above and certainly haven’t optimised it, but it is likely to work as is or with a small number of fixes.

jQuery ajax – headers are better than the success callback

If you’ve used jQuery for even a short period of time you will have probably come across the $.ajax method and several of it’s shortcut methods like $.getJSON or $.load

Within these methods there is usually a ‘success’ callback which fires when a 200 response is received from the server. 400 and 500 responses tend to trigger the ‘error’ callback.

So success and error are pretty generic all encompassing monsters who work for many tasks, but sometimes you need to be a little bit more clever about it.

Continue reading “jQuery ajax – headers are better than the success callback”