throwing-myself-into-the-world:

In 2003 my friend Alex (that’s her there in the pink) went to an Anti-Iraq-War rally in Sydney along with thousands of other people. Midway through, she and her friends set up a picnic in the middle of the street and snapped a photo.

15 months later, she met a lovely boy named Tony at work and they started dating.

6 months after that, they moved in together.

3 years later they were engaged.

On Saturday, they were married.

But remember that photo up there? Well, one day Alex was looking through her old photos and came across this one and, as she showed it to Tony, they both suddenly pointed in awe at the left corner of the screen.

The guy walking past with the skateboard is Tony. Of all the protesters, commuters and passersby rampaging through the city that day, he was captured in that exact instant they took a photo. 5 seconds beforehand it would have been some other random, 5 seconds later he would have been gone.

I heart fate.

Variables are a bit like algebra. Identifying a variable allows

If you set a variable to a value you are using an operator (=).

something I didn’t get was functions. I don’t know why but I thought everything in Javascript was a function. It turns out that functions are the parts of script that you don’t want to load until someone does something on the page.

Numbers and strings (text)

In really basic Javascript if you set a variable equal to a number, you need to make sure the number is not inside brackets (” “).

This could cause the following problem:

x=5+5;

x=”5”+”5”

If you gave the order to:  document.write(x); in the first example it would equal 10 in the second it would equal 55.

There’s actually a rule here if you add a number to a string the result will always be a string. so:

5 + “5” will equal 55 as well.

I have joked before that a lot can ride on a missing ” but I didn’t head my own warning.

I have been trying to get the form on my site to validate for days. Literally days. I have been pulling my hair out going over the code letter by letter, I tried several different types of Javascript codes - and all the time I secretly wondered:

Is it possible to validate a form with Javascript and then send it to be processed by PHP?

I began to think not. No matter how much I tried I could just not get my form to use javascript and PHP at the same time.

Then  I discovered the culprit. A missing “.

So in case you were wondering it is possible. And having scoured the internet and tested almost every script - I can say I found one of the easiest ones:

This little script will test if you have empty space in a form:

function validate_form ( )
{
valid = true;

if ( document.NAMEOFFORM.NAMEOFINPUT.value == “” )
{
alert ( “Please fill in the your first name” );
valid = false;
}

Then all you need to is reference it in your form like thus:

<form name=”NAMEOFFORM” method=”post” onsubmit=”return validate_form ( );” action=”YOURFILE.php”>

And REMEMBER that darned ” after your validate_form()

It hurts me to say this. But google is a liar.

It tells you to insert their maps in the tag <iframe>. I expect google to be compliant with strict XHTML (not that it says this anywhere)

But this is not the case - because the iframe is not XHTML compliant.

Instead what you need to do is use the <object> tag and replace src=”” with data=”“.

This works fine on Firefox but then you have another problem -  It doesn’t work in ie6.

Internet explorer 6 has this funny little quirk where it recognizes an object tag as an active-x object.

The only solution appears to be wrap everything into a flash file and make your google map appear to ie6 like it is an active-x object

http://www.webmasterworld.com/forum21/10605.htm

One of the weirder errors I got when I tried to validate my pages was for using the target”_blank” on my links.

What am I supposed to do? Just send people away from my site everytime there is a link!?

As it turns out the target attribute is not XHTML compliant. You just can’t use it.

So how do you get around it?

A little bit of Javascript helps.

First remove all those pesky targets from your links and replace them with rel=”external”

then create a new javascript page with this code:

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(“a”);
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute(“href”) &&
anchor.getAttribute(“rel”) == “external”)
anchor.target = “_blank”;
}
}
window.onload = externalLinks;

And finally you just need to link to this in the head of your document.

using:

<script type=”text/javascript” src=”external.js”></script>

Now all your links with the rel external will open in new windows.

Thanks to these guys :

http://www.sitepoint.com/article/standards-compliant-world/

I know marsha you already blogged about this (thanks Marsha),

but I have to get this out there again because it is so damn good.

the info comes from this site:

basically it makes embedding movies into your site a whole lot easier. It is a downloadable javascript file that you can forget about adding to the head of your html and just link to it and add it to your resources.

Once you link to it in the head all you need to do is add this code at the place in your html where you want the movie to go:

QT_WriteOBJECT_XHTML('MyMovie.mov' , '100%', '95%', '', 'SCALE', 'aspect', 'obj#ID', 'movieOBJ', 'emb#ID', 'movieEMBED') ;

and the javascript file creates the necessary html object and embed tags for you.

A couple of things it took me a little bit to understand:

firstly those things inside the brackets are parameters (or attributes) for the movie - the first being the filename, the 2nd and 3rd being the size of the browser you want to take up, and the fourth being the unmovable empty one. (don’t delete this! it warns it has something to do with identifying the code needed to load the movie player)

But there on you’re just adding other parameters that don’t necessarily need to be specified. And they work in a funny way. Unlike the first 4 brackets, from here on you are specfiying a parameter in one bracket and defining its value in the next. So ‘Scale’ is the parameter and ‘aspect’ is the value. (which by the by is a very useful parameter to set - because it basically means that no matter what size you have your movie it will always be full size)

Incidently - what is an object tag anyway?

Well it turns out the object tag is used for things like movies but it can be used for images too - although you can still keep going on and using the img tag if you like.

Back to SCALE and aspect- there are several options for scale: the default is ‘1’ which means that it takes the size it actually has. Aspect means it fits into your box while still maintaining the integrity of its original ratio and ‘tofit’ means it takes on whatever dimensions you want to give it.

Another important thing you may want to add is ‘Autoplay’ which decides whether the movie will start up automatically when you open the page. If you don’t want this to happen you need to set this to ‘false’.

There are heaps more useful syle options here

I validated my first page last night and it was epic.

I thought to myself there can’t be many errors, but boy was I wrong.

34 errors.

It took me almost an hour to comb through make changes and upload each page hoping I wouldn’t make more. I did.

Some things I learnt in my travels:

1. the <label> tag doesn’t exist in XHTML
2. names on images - they’re not in. Alts are.
3. there is something wrong with this code but I haven’t figured it out yet:
4. function swap(){
   if (document.images){
   for (var x=0;
   x<swap.arguments.length;
   x+=2) {
   document[swap.arguments[x]].src = eval(swap.arguments[x+1] + “.src”); {I’ll post when I do}

For my troubles I received this gold star:

That is only 1 page down though. 4 to go!

rather than just list the photos floated down the page and have tex alongside - I thought about some sort of gallery. the next thing I knew I was knee deep in creating a new CSS file.

Here’s how it works.

We are effectively changing an unordered list. So we need to set that up first. We put our photos (12 in this case) into a list in the html - assigning each with a unique slide class and a common class. We also must place each image in between span tags. (this becomes important)

Now we turn to the CSS.

Here is the tricky part. We place all the photos within the span inside a 5px x 5px dot in the top left corner of the page. This means that without any hover, the photos will remain inside this dot.

Then we setup the thumbnail gallery.

The gallery places 12 thumbnail pictures in  5 rows down one side of the page. There are 2 thumbnails for portrait pictures and 3 for horizontal.They are placed inside a block display as background images for each photo.

We connect the thumbnails to the photos through giving them the same class.i.e. the first thumbnail is called class side a - and inside the html the first photo is given class slide a.

Now we give the gallery span a hover attribute - in this case its normal size 372px x 372px. this means that when we hover over a particular thumbnail its corresponding photo will cease being restricted to within a dot and will now take up a 372px x 372px space and be revealed in all its glory.  So the hover over the thumbnail activates the photo - taking it out of its hiding place within the dot.

Here is the finished product - the photos aren’t the ones I plan to use but you get the point.   http://www-student.it.uts.edu.au/~awall/wedding/gallery.html

I have to thank stu nicholls for this at http://www.webreference.com/programming/css_gallery

the chew