php projects, javascript, and… stuff.
A while ago I wrote a post on how to use the Prototype js library to make elements on your page have the same height.
For those too lazy to read that post, it can be summarised something like this:
Continue reading ‘Same height for elements – now with jQuery goodness!’
On creating a rather large form recently, I was in the need to have some kind of hint to the user about what format the content should take on several input boxes. I could have done this with a description under the form element, but a more accepted way to do this, it seems, is to have a ‘hint’ in the element itself. You know the kind of thing I mean; a value, usually quite a light grey colour, that is present until you click in to the form element and then is disappears. I also wanted to do this as a jQuery plug-in because, well, why not? 
I came across a jQuery plug-in the other day to sort tables, and it works great and is exceptionally simple to implement (and as anyone who’s flicked through this blog knows, I like the simple things in life… Don’t need any more gray hairs popping up, you know!).
The plug-in is called tablesorter (found at tablesorter.com), by Christian Bach.
Continue reading ‘Easy table sorting with jQuery’
A little while ago I posted a quick jQuery plug-in that allows you to easily indicate an external link. Then I posted an updated version that had a few optimizations. Well, it turns out that I had missed out a rather important portion of the code when I posted it up. D’oh! So here’s the full and working version.
Somethings it’s the simple things in life that make you really happy. For me yesterday, that was thanks to jQuery. Have you ever wanted to have a check box that, when the user checks it it also checks a lot of other checkboxes? Yeah, of course you have! I wanted to do that yesterday. Now, it’s not the first time I’ve had to do that kind of functionality, but it always came with a bunch of javascript that seemed over the top for what was wanted. With jQuery it just took a line or two of code!
$(document).ready(function() {
$('#selectall').click(function() {
$(":checkbox", $('#checkboxlist')).attr('checked', $(this).is(':checked'));
});
});
And with that, on and off go the other checkboxes.
Marvelous!
I’m pretty new to the whole jQuery game, having really only started to look at in a number of weeks ago. Until then I have been happily using Prototype and Scriptaculous, and as I knew them I didn’t see a point to move to another library. However, the more examples I saw of jQuery the more elegant I thought it was, and so now am in the process of learning it more, converting some code over and trying my hand at plug-ins. So here’s introducing my first jQuery plug-in!
This plug-in allows you to automatically append a class and title to any external resources. You can pass in multiple domains that are thought of as ‘local’, and anything else with a protocol that doesn’t belong on the passed local domains will be flagged as external. If no domains are passed then the current domain in the url will be used as-is (with the www., etc., if present).
That probably doesn’t make much sense, but I’m sure it will when using it…
So here’s the code:
Continue reading ‘jQuery plug-in – highlight external links’
Building a set of select lists that are dependant of each other can be a daunting task, but for a simple two-level list – in that what you select from one drop-down will changing what’s displayed in one or more other drop-downs – is actually quite easy thanks to Zend Frameworks and Prototype, both of which support Json.
Continue reading ‘Easy chained select lists using Zend Framework and Prototype’
Following on from the previous post, I thought it’d be nice to have the handle move on a mouse wheel. Looking around for mouse wheel integration, it seems that it’s only a short amount of code to update Prototype to use the mouse wheel. Why it’s not in the core code I don’t know, as it seems rather handy. The mouse wheel code is listed at the Prototype Event Extension article over at Ajaxian.
Yesterday I was looking at the Scriptaculous library, in particular the slider bar. I had used it once before with some success, using a graphic for the track and gripper. But that’s was boring! What I wanted was to see the bar fill up with colour when it was slid. Something like this:
I hadn’t seen anything like this around (not saying it hasn’t been done, just that I hadn’t seen it!), so after a bit of playing I found out it was actually very easy to create. And this is how I did it…
Here’s a nice, clean, and simply way to swap an image on a click of a link. You might use this if you have one large image a series of thumbnails, and when you click on the thumbnail you want to swap the large image.
This javascript will do that and you don’t even need any additional libraries!
Save $20 when signing up!
Use promo code amnuts20
Recent Comments