New Balance Project 365
Make a simple website. Done.
Make it fun and interactive. Sweet.
Make a website that people visit every day of the year? Easier said than done.
Exposing your brand is the easy part – but making it memorable is a task that corporations spend millions of dollars on. The beauty of the internet age is that we can build websites that visitors themselves make the content for. Think of the competitions where you win a holiday – ‘Just write in your craziest holiday story to enter’ – by doing so you are contributing, creating and remembering. Often it’s remembering the crazy story that you made up to try win a trip to Fiji, but maybe, just maybe, it was remembering the brand running the promotion.
New Balance 365 is a website essentially promoting, well, New Balance. There’s no fancy new product. No new ‘climate  change awareness’ message. Not even a sale. Just a brand and a concept. This website encourages users to submit a short film and the best of every day gets a spot on the New Balance 365 calendar. All the film needs to do is portray a sense of balance. There are some quite creative films, so be sure to check it out!
Click here to visit New Balance Project 365.
Using Javascript can be an awesome way to have user’s input alter the page content and style. For example a link could run a Javascript function to alter it’s class (with class styling via CSS):
<script type=”text/javascript” >
function changeMe(){
document.getElementById(“button”).setAttribute(“class”, “activated”);
}
</script>
<a href=”javascript:changeMe()” alt=”Change the class” id=”button” class=”notActivated” >Change the class</a>
This is all very well and said for Firefox, Safari or Opera users, but take a look on Internet Explorer 7 and you will have nothing happen! Luckily, this is very simple to fix. By adding a backup line of code into the Javascript function you can ensure IE knows what should happen:
document.getElementById(“button”).className = “activated”;
Click me to see a live example.
So in a recent web project I decided to incorporate some fancy Javascript form-verification code. Thinking it would be a breeze, I started with a link to submit the form and run the Javascript function:
<a href=”javascript:submitForm()”>Send form</a>
After I made the Javascript function work I then realised I had no idea how tell the page to submit the form. I discussed this problem with a colleague and he told me I was doing it all wrong. Best practice is to have a normal submit button and link the Javascript function at the bottom of the form. In my case I was using PHP which detected if the form was ready to send an email or not, so the form’s action was left empty (action=”").
In the Javascript I referenced the form with:
var f = document.getElementById(“contact-form”);
f.onsubmit = submitForm;
var f = document.getElementById(“contact-form”);
f.onsubmit = submitForm;
This code is vital to make this work as it links the HTML form and the Javascript function together. Once the submit button is pressed, the Javascript function runs (I called it submitForm) and if it encounters and error it returns false. This tells the HTML that the submission was unsuccessful.
Long story short, Javascript can be run between clicking Submit and the actual submit process to decide if the form is valid. From there you can run the appropriate error message or proceed to the submit script. Still don’t get what I mean? Check out a live test version at: http://www.jamesbarnsley.co.nz/mbv/dev.