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.

Updating the cPanel webmail welcome screen

Something I’ve always wanted to do is update the screen users see when they visit /webmail and log in on a cPanel server.

Now I know you can choose which webmail clients are available using whm, but I actually wanted to remove, move and change the look of some elements.

First thing I must state is that you need root level access to every folder on the server. Once you’ve logged in the location of the index.html which I was looking for is…

/user/local/cpanel/base/webmail/[TEMPLATE NAME eg x3]

In there you want to edit the file index.html using something like the command line tool vi.

If you need to you can also edit the css and javascript for that page by having a poke around the files in there.

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

Grouping by time periods or timeslices in Mysql

Sometimes when you pull back a whole load of results from a database table and order them by their timestamps you might want to either sum any result which happened at a time close to each other or you might want to only bring back one type of something within a period of time to stop that item flooding your results.

I’ve used this technique a couple of time now. The first time was to make lots and lots or data fit onto a relatively small graph, so I needed some form of average. The second time was because if the same event happened in a set period of time I only wanted to know about it once.

The query looks something like this once we include our timeslices / time periods in our select and then follow it up by grouping by them.

SELECT name, 
type, 
value,
ROUND((CEILING(UNIX_TIMESTAMP(`timestamp`) / 600) * 600)) AS timeslice
FROM reading
GROUP BY timeslice

Here I have selected timeslices of 10 minutes (600 seconds) but you can group larger or shorter periods of time if you require them.

So there you have it, grouping by timeslices for summing readings or limiting duplicates in results.

My current local development setup

Thought it was worth sharing my current local development setup. I run on mac, currently Lion 10.7.4 and these are the pieces of software I used…

Terminal
Used to run Git version control commands. If you’re going to do it, do it properly.

Sublime Text 2
If you take handcoding seriously, ditch your coda, your skEdit, your text wrangler etc, take a weekend installing and tweaking Sublime Text 2 and never look back.
Plugins, amazing autocomplete, unlimited flexability from highlighting to layout, projects, global find, powerful search, need I go on. Beautiful.

Transmit
Superb FTP client from Panic. Don’t edit live code. Download it, run a local site, update it and then use a purpose build ftp client to get the update online. No stupid mistakes.

Sequel Pro
A powerful and free MySql tool. Lots of nice touches like edit in pop-up, tabbed browsing and nice export tools.

LiveReload
Update the preview in your browser without reloading it manually. Instant for css and js, and almost instant for html, php etc. Saves a lot of cmd-R ing.

Google Chrome
Still my the browser of choice after 2 years. Great for dev work with inspector (cmd-alt-i)

FirefoxNightly
Firefox is crap, but it’s new responsive design tools can come in handy for mobile web development. Development software, so use at your own risk.

Others worth a mention…

I also use skitch for screen capture, dropbox for file sharing, Parallels for those times when you have to test windows browsers.

Enjoy and let me know what you think in the comments…