Notes from a wireframe world

I’ve been looking how to use Javascript to move HTML elements around a page, just as iGoogle does with the applet boxes.

I’ve found some intresting stuff at walterzorn.com and if there is an save or load button the layout could be saved/loaded from a MySQL database (or anyother database) with some ease.

This would allow the user to design there screen the way they wanted based on a template which is set-up when the user signs up.

To my webdesign blog, really ths blog is just a place for me to keep notes and ideas about webdesign, a sort of memory hole for my thorghts.

That said hopefuly there will be the odd gem that others may find useful.

So now the introductions are over with I guess I better post something useful to get the ball rolling, so with out here it is, my first crack at a WordPress template. I’m planning a fuller course on how to write wordpress templates but till then here’s the template you see around this site.

The interesting and I think novel thing about it is the way it replaces the first letter of the post with a larger version of that letter.

Normal image replacement is done for whole words, and has some issues as far as accessibility is conserned. However SFLIR (Scott’s First Letter Image Replacement) works a little differently.

Code

function SFLIR(id_tag){
var divs=document.getElementsByTagName('div')
for (var i=0;i
/images/lettersets/'+bg_letter+'.gif" style="float:left;" alt="Large, fancy Letter '+bg_letter+'"/>

';
            inht = divs[i].innerHTML;
            inht2 = inht.substring(4);
            divs[i].innerHTML = img_insert+inht2;
            }
        }
}

OK line by line…

Code

function SFLIR(id_tag){

This is simply the name of the function and as you can see it takes one input var, called id_tag. this is the string of the id of the div tags you want to replace the first letter of.

Code

var divs=document.getElementsByTagName('div')
for (var i=0;i

This forms an array of the div tags within the document. and scrolls thru them one at a time.

Code

if (divs[i].id == id_tag) {

This just checks the id of the current div tag to see if it’s the same as the one we are looking to replace the inital letter of.

Code

bg_letter = divs[i].innerHTML.charAt(3);
bg_letter = bg_letter.toLowerCase();

This then store a copy of the first letter.
N.B. Since this javascript was written for this WordPress template it doesn’t look at the first character, but the fourth, this is because the first, second and third characters are an opening paragraph tag i.e.<p> and the first letter is really at position 4.

Code

img_insert = ‘/images/lettersets/’+bg_letter+’.gif” style=”float:left;” alt=”Large, fancy Letter ‘+bg_letter+’”/>

’;

This may look at little complex, especially to throes who don’t know how wordpress words. all it’s doing is using a wordpress php function to make a string that would display an image from the /images/lettersets directory in the current WordPress theme folder. It also writes an alt tag for this image so if a screen reader does process the javascript and replace the image, it will still be ok (ish…)

Code

inht = divs[i].innerHTML;
inht2 = inht.substring(4);

This code removes the character we have just replaced by copying the text from the fifth character on (i.e. the rest of the div tag).

Code

divs[i].innerHTML = img_insert+inht2;
}}}

Finally the image and the rest of the div tag is written back to the screen and the user gets a nice capitalized first letter.

As this is Javascript, the image replacement code will not be ran on a screen reader and so the user will get the normal text, however should for some reason the code be ran on a screen reader, then the image replacement script will at least give the user an alt tag describing what should be there.