Optimus Pete » javascript

JS: Execute JavaScript on Page Load

Pete — Mon, 14 May 2007 10:47:11 +0000

Recently I’ve been making an effort to improve my JavaScript skills, I’m not a JavaScript-Jedi yet but I have been picking up a few, tips, tricks and techniques.

One thing that I find extremely useful is using an init function to call other functions when the page has loaded. I have been using the nifty function below:

PLAIN TEXT

JAVASCRIPT:

function WindowOnload(f)
{
var prev=window.onload;
window.onload=function(){ if(prev)prev(); f(); }
}

I save this function in a file called init.js which is then included in my HTML pages using:

PLAIN TEXT

HTML:

xsrc="/js/init.js" type="text/javascript">

Functions can then be initialised by including the following in the HTML:

PLAIN TEXT

JAVASCRIPT:

The above code is inline JavaScript which is often seen as being naughty, obviously you can save the same code to a separate file and include that instead.

I originally saw this technique here. Alternative JS initialisation scripts are available but so far this one has worked well for me, so I’ll be sticking with it.

# Pete Graham

JS: Unobtrusive Select All Checkboxes

Pete — Mon, 26 Mar 2007 10:03:47 +0000

I wrote last week about how I’m trying to improve my JavaScript skills. As a small exercise I have written this function for unobtrusively selecting/deselecting checkboxes in a form.

PLAIN TEXT

JAVASCRIPT:

function selectAll(box)
{
// get the elements name
var id = box.id;
var name = /^([a-z]+)(_select_all)$/i.exec(id);
name = name[1];
re = new RegExp('^'+name+'_[0-9]+$');
// get the elements stauts
var state = box.checked;
// get the form element, search "up"
var form = box.parentNode;
while(form.nodeName.toLowerCase() != "form")
{
if(!form.parentNode) break;
form = form.parentNode;
}
// search through forms children for email_ checkboxes
for (i=0;ielements.length;i++)
{
if (form.elements[i].type=='checkbox')
{
// Find checkbox for each member of the group:
if (re.test(form.elements[i].name))
{
form.elements[i].checked = state;
}
}
}
}
// onload stuff
window.onload = function()
{
var email = document.getElementById('email_select_all');
email.onclick = function(){
return selectAll(email);
};
}

The Javascript will work on a HTML form like this

PLAIN TEXT

HTML:

method="post">
id="email_select_all" type="checkbox" />
type="checkbox" name="email_1" value="1" />
type="checkbox" name="email_2" value="1" />
type="checkbox" name="email_3" value="1" />
type="checkbox" name="email_4" value="1" />
type="submit" value="Send Message" />

As long at the select all checkbox has an id of "something_select_all" and the checkboxes have id's of "something_"followed by a number then this will work. No inline Javascript is required all the JS can be put in a separate file.

Note: If any Javascript Gurus are reading that have pointers about how I could improve this function then please put your suggestions in the comments.

# Pete Graham

My volatile relationship with Javascript

Pete — Tue, 20 Mar 2007 17:55:00 +0000

I started work in web development in 2004 at this point in time JavaScript was hugely unpopular in terms of web trends, this is probably because it was mostly used for annoying pop-ups, animations and whole list of other horrendous Internet crimes. I can recall having a King Herod style culling of all JavaScript from the TCAT website, my first main project.

Recently due to the popularity of AJAX web applications JavaScript’s popularity seems to have exploded again! I’ve had to brush up on my JavaScript skills for some of the User Interface work on phuser.com. Whenever I do JavaScript development I never feel as comfortable as I do with PHP or CSS. It’s definitely the weakest weapon in my web-dev arsenal.

I think it’s time to put my JavaScript prejudices behind me and get my hands dirty with some serious JS development. Now I’m not a JavaScript novice, I’ve got a few DHTML tricks up my sleeve I learnt back in the day. However I rarely write my own JavaScript, if I need a function I’ll look for one someone else has written.

When I’ve needed to learn about Javascript in the past I’ve always find it surprisingly hard to find good quality decent resources (compared to other Web technologies). I shall be posting links to any JavaScript articles/tutorials that I find particularly useful on this blog.

Articles

Using JavaScript for good, not evil: Good short intro to unobtrusive JavaScript
Behavoiral Separation: Covers the gallery example of the previous article but more indept code explaination
DOM nodes and tree: Unsurprisingly this provides a good introduction to the DOM (Document Object Model)

# Pete Graham

CSS tips and articles

Pete — Thu, 01 Feb 2007 18:08:17 +0000

I began teaching myself Cascading Style Sheets (CSS) in 2004 when I graduated from University and started work in website development. At the time it was difficult to find well written resources that thoroughly explained how various CSS techniques worked.

In the past few years, CSS adoption has increased dramatically. These days most high profile websites use CSS rather than tables for their design. Although amazon.co.uk and bbc news still have partially table based layouts, naughty!

Thankfully they are now many excellent articles available on CSS. Yesterday while working my way though some bug fixes on phuser.com I stumbled upon some brilliant ones that I hadn’t read before.

Emil Stenstrom has written an excellent article on how to Cross-browser CSS for your site. One tip I picked up is to start your CSS files with:

PLAIN TEXT

CSS:

* { margin: 0; padding: 0; }

This will remove all default element stylings which can be a right pain in the @r$e when trying to get your site to render consistently cross browser. A clever little hack he suggests is the "star html" hack:

PLAIN TEXT

CSS:

* html #element { code; }

This is valid CSS but only IE will apply "code" to "#element". I think its much cleaner than other browser hacks I’ve seen. Many of his articles are well worth a read but I would especially recommend his guide on structuring large CSS files . Real hackers don't use css is more amusing than useful but still interesting.

For people wanting to learn more about CSS and web design techniques in general A List Apart is well worth checking out. Also worth a mention is this fix for the two columns with equal height layout, it uses Javascript instead of the normal background image fix.
/* Pete Graham */

Curse you Internet Explorer!

Pete — Sat, 27 Jan 2007 17:36:42 +0000

I was pretty pleased with the code syntax highlighting plugin I installed yesterday, just before I was about to finish work I got the Blog up in IE6 Arrrggghhh! IE6 redenders the width of the main content column smaller than Firefox and IE7, this causes the main content to be displayed below the content in the right sidebar, not good.

I think the fix is going to be fairly easy, I'll upload it here when I get it sorted.

I also installed the live calendar plugin on my Peteamania blog, unfortunatley I've noticed that this plugin doesn't work correctly in IE7 (the hyperlinks never load). I don't think I can be bothered to fix this bug, although its a nifty little AJAX plugin it doesn't offer much improved functionality over the bog standard wordpress calendar.

# Pete Graham