jQuery

JQuery colour alternate table rows

Posted on: June 7th, 2013 by taff No Comments

 

Colouring alternate table rows increases readability, thus increasing usability. In particular long table rows with the same background colour being hard to read is a phenomenon that most of us know well from using MS Excel. The same goes for long tables in our browser where, in a worst case, we need to scroll the entire view.

Using jQuery to colour alternate table rows may sound strange when CSS now offers exactly that with the use of a pseudo selector.

Colour alternate table rows with CSS pseudo selector

tr:nth-child(even) {
background-color: #f8f8f8;
}

Unfortunately, and probably not that surprising for most of you, Internet Explorer 8 doesn't like the css solution. I am currently building an MIS for a large company and their browser of choice at the moment is, yes you guessed it, IE8 so I had to resort to a javascript solution. JQuery was already in use so I simply did the following

Colour alternate table rows with jQuery

$("tr:even").css("background-color", "#f8f8f8");

If I for whatver reason have no default background colour for my table rows I can use a short hand version of the if / else conditional like this

$("#idOgTable tbody tr").css("background-color", function(index) {
return index%2==0?"#f8f8f8":"#ffffff";
});

Due to my table setup using thead, tbody and tfoot tags I have the tbody in the selector. I needed this setup to allow me to use the amazing tablesorter plugin to exclude rows when sorting.

I hope you can use the above script to colour alternate table rows with jQuery.

jQuery Validation Plugin – Add custom method

Posted on: November 2nd, 2012 by taff No Comments

 

During my daily use of jQuery I find that I always seem to use the same plugins over and over again. One of these is the jQuery validate Plugin. Out of the box it offers just about everything you need to validate forms prior to submitting them to a database or passing them to a further script for processing.

If however you want to validate a field in a form that requires something out of the usual you can create further methods using the following technique. In this example I'm going to validate to (almost) ensure that a German telephone number is valid. I saw almost because you can't really allow for all eventualities but this is my shot. In my opinion it's better to let the odd wrong phone number through than not allow a real number because it is out of scope.

$(document).ready(function() {
jQuery.validator.addMethod("fonNummer", function(value, element) {
return this.optional(element) || /^([0-9\s\(\)\+\-\/]{9,30})*$/.test(value);
}, "Gültige Telefonnummer?");

//Add the rule to a field with our new method
$("#myform").validate({
rules: {
field: {
required: true,
fonNummer: true
}
}
});

});

You can now use the fonNummer rule in the same way you would any of the built in rules. A great resource for finding regular expressions such as one for validating US phone numbers where you quite often add the extension as either x123 or ext123.

I also use the jQuery validator for simulating a multipage form (why load a new page when only the form changes?). The rules are simply added when the user clicks next (if everything validates). I will go into this in further depth some time in the future.

Travel Cost Calculator

Posted on: November 1st, 2012 by taff

 

Piedmont trip calculatorI built this a few weeks back. It simply involves a little Maths and a bit of JavaScript to add and multiply fields, thus allowing the customer to see at a glance if they aren't better off using this airport by seeing how much it costs for parking, travelling and mileage. To save the user the hassle of repeatedly inputing things like the number of days they are away and their hourly rate, I added some automagical goodness to populate those fields once the equivalent first field had a value.

Everything went well thanks to a careful sprinkling of jQuery (mostly for the selectors). Due to the small amount of jquery required, this could have been the project where I could have finally give jquip (an unbloated jquery alternative)...but it wasn't