Archive for the ‘Web Development’ Category
jQuery Checkbox Replacement
Posted by: Steve Johnstone in Web Development on February 3rd, 2010
Ordinary checkboxes on the web are a bit boring. I’ve seen a few replacement scripts, but I thought that it would be pretty easy to write my own.
function replaceCheckbox(name, on, off) { $(name+':not(.checkbox-replaced)').each(function (){ var image = ($(this).is(':checked') ? on : off); var imageElement = $('<img style="cursor:pointer;" src="'+image +'" onclick="$(this).next().click();"/>'); $(this).before(imageElement).hide() .addClass('checkbox-replaced'); imageElement.click(function (){ $(this).attr('src',(this.src.indexOf(off) > 0 ? on : off)); }); }); }
It seems to do the job fairly nicely, so I’m quite happy. It does require the use of jQuery. To use it simply go:
replaceCheckbox('input[type=checkbox]:visible','check_on.png','check_off.png');
Where Did My Event Go?
Posted by: Steve Johnstone in Web Development on September 16th, 2009
For the past day I’ve been struggling with a bit of Javascript. Like most problems involving browsers, it worked perfectly in Firefox (Whoo!) but died a horrible and confusing death in Internet Explorer (Boo!).
The code was using jQuery to clone a selection of rows in a table and append them to the same table. This worked fine, but one of the rows had an autocompleting field, which refused to work the second time someone did a search. This only applied to the duplicated rows, and only on the second search. The first time worked perfectly, no matter how many rows had been duplicated.
The culpret turned out to be a div that was wrapped around the added rows, in order to manipulate the new rows as one jQuery object. It turns out that if the DOM is not perfectly formed in IE, any future manipulation of the DOM will result in events being stripped.
Increase JavaScript Responsiveness with setTimeout
Posted by: Steve Johnstone in Web Development on March 19th, 2009
My current project requires moving an item from one list to another, and then verifying the contents of the second list against the database. In order to do this, I used the jQuery append function, and then called another function which executed a getJSON request.
Because the speed of the request was so slow, it ended up delaying the move of the item. This made the UI feel unresponsive. In order to fix this, I changed the call to the function to a setTimeout with a delay of 0. This meant that the UI could go on and do what it wanted to, while the JSON request went off and did it’s thing.
Browser Caching
Posted by: Steve Johnstone in Web Development on March 19th, 2009
As any web developer will know, caching is something that is both extremly good, and annoying in equal amounts. It’s good because it reduces load on the server and speeds up response times, but bad when you want to see your changes in a timely manner. Fortunatly there are easy ways to get around the annoying cache while developing sites.
First of all, you can disable your cache completly. In Internet Explorer this is done through the options menu, and in Firefox it’s done through ‘about:config’. This is the most extreme method, and something I don’t really recommend.
My prefered method is to use the Web Development Toolbar in Firefox, that comes with it’s own disable cache mode. However, sometimes even that is a bit extreme. A much simpler method (and one that works in all browsers) is to open up your css or js file in another tab, and simply refresh that tab.
CSS Reset
Posted by: Steve Johnstone in Web Development on February 23rd, 2009
I’ve spent quite alot of time recently looking at best practices for designing on the web. One of those best practices, is the idea of having a CSS reset.
Because browsers have different ideas of what the default spacing, size and decoration elements should have, unstyled pages can look different on every browser. A CSS reset cleans out these defaults so that your page will look the same on all browsers. This is very handy, as it allows you to create your design without having to worry about different browsers, at least not as much as you would have to otherwise. Jacob Gube goes into more detail at Six Revisions.
Up until now I’ve been using the generic:
* { margin: 0; padding: 0; }
to start off any project, but I’ve found that increasingly annoying to use. Also, as well as being overly generic, the * syntax is also time consuming and so increases the page load time. Not by a huge amount, but still, every little helps. The annoying part of it’s use, is that zero is a very bad default for anything to do with text, and requires a bit of working before text is nicely laid out.
This realisation has lead me to check out some of the more popular CSS reset templates. The main two that have attracted my attention are Eric Mayer’s and Yahoo! UI’s which are both very similar. Yahoo’s allow you to hot link to their file, an option which may be nice, although I would probably integrate the reset into my work a bit more than a link would allow.
Below is the CSS reset from Yahoo! UI.
Below is my take on the CSS Reset idea. It’s more styled than the previously mentioned resets because I prefer it like that, not because the others are bad in any way. I’ve also added the font-size: 62.5% trick in, so that it’s easier to layout the page using em’s. This allows for better resizing when using the default font option in IE (including 8).
body { font-size: 62.5%; /* 1em = 10px */} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } cite { font-style: italic; } strong, em { font-weight: bold; } ol,ul,dl { list-style:none; margin: 0 0 0 2em; } dd { font-style: italic; margin-left: .5em; } caption,th { text-align:left; } /* Font Sizes */ h1 { font-size: 2.2em; } h2 { font-size: 2.1em; } h3 { font-size: 2.0em; } h4 { font-size: 1.9em; } h5 { font-size: 1.8em; } h6 { font-size: 1.7em; } p,li,dd,dt,th,td,label,legend,pre,address { font-size: 1.6em; } p>label,p>address { font-size: 1em; } h1,h2,h3,h4,h5,h6 { font-weight:bold; } h1,h2,h3,h4,h5,h6,p,table,label { padding: .5em; } th, td { padding: .5em; } p, li { line-height: 1.7em; } q:before,q:after { content:''; } abbr,acronym { border-bottom:1px dashed black; }
jScript AutoComplete and XML
Posted by: Steve Johnstone in Web Development on January 27th, 2009
Recently I’ve been getting really into using the jQuery library for all my javascript needs. When our project needed a way of populating a listbox, I turned to the AutoComplete plugin by Jörn Zaefferer. This plugin is pretty easy to use, and allows you to filter a javascript array using an input field, and displays the results as a nice list below the input. This seemed to be pretty ideal, but unfortunatly the documentation is rather sparse on a few key points. First of all, although the plugin accepts a URL, the documentation doesn’t tell you what to do if your URL is XML instead of the standard JSON.
After going through the code, I discovered an undocumented parse function, which allowed me to do exactly what I wanted. The XML that our CMS outputs is like this:
< ?xml version="1.0" encoding="utf-8"?> <drivers> <driver id="439516"> <name>Johnstone, Steve</name> </driver> <driver id="43423"> <name>Johnstone, Bob</name> </driver> </drivers>
And the code for the Parse function was:
$("#identifier").autocomplete( "http://www.yoururl.com/results.xml", { parse: function (data) { var parsed = []; $("Driver",data).each(function() { var row = [ $("Name", this).text(), $(this).attr("id") ]; parsed[parsed.length] = { data: row, value: row[0], result: row[0] }; }); return parsed; }, } );
Where, in the parsed array that you return, value: is the value that the data is being filtered on, result: is the value that is placed in the input box, and data: is an object that contains any additional information that you wish to get from the XML (in my case the ID of the Driver).
If you wish to use the additional data that you get back, then on the end of the plugin initilization add the following:
.result(function (event, item){ // Your code goes here. });
Where item is the array of data that you created in the parse function.