'Javascript Challenge: Make a fading, single page website'

This is the first of a new series, Javascript Challenges, where I try and complete set challenges in the shortest time possible.

The Challenge:

Single page.

Navigation done using Javascript. Not standard navigation.

To be made under 1 hour.

No Javascript library to be used.

Crisp design.

Unobtrusive Javascript.

Required use of Javascript, CSS3, HTML5.

Three pages. Two content pages, and one contact page.

So well, after getting this challenge, I had a brief idea in my mind on what to do. The site had to be simple, with a title, a small navigation menu underneath, mock content, and a brief footer. Along with that, there had to be a form. I chose a light blue color for emphasis, and an overall grey, clean, modern design.

Play around a bit. We'll create the above, in under an hour. Sounds fun?

Starting with HTML.

As any web project should be handled, I started writing HTML first.

The HTML was pretty basic. Wrapper, header, content, footer, all of the usual. The important part was that there was a navigation, with 3 links. Each had an ID, which was same as the page it was going to (Example: The about page had an id toAbout) I made three pages, about, motive (I know, makes no sense) and Contact.

Then, I started with the primary content. It was divided using three article tags, each corresponding to the page, and having the same ID (Example: The about page had an ID about)

At the start of the div was an H2 tag, having the name of the page (for separation purposes)

That was pretty much the HTML. I advise you to draft your own using the above information, but you can ‘cheat’ from here

Now, apart from the aesthetics, here are two things which are necessary for the working of Javascript.

One, in the main content section (which I call primary, inspired from WordPress) there has to be overflow:hidden; and position:relative; set. Secondly, all articles inside primary had to have transitions for opacity.

I then used closures for each page, aptly named onlyAbout, onlyMotive and onlyContact.

All of the above was wrapped in a window.onload call.

Now, here are the ‘two important functions’ in detail. They both were inside an object I named control. The one which was used to show only the required page was called rise and the one which hid the remaining pages called silence

Elaborating ‘rise’
The rise function took an argument, the page to show. It did three things. It brought the opacity up to 1, it changed position to static (instead of the previously set absolute) and it brought the z-index (or zIndex in Javascript) to 1.

Elaborating ‘silence’
Silence was the opposite of rise. It took two arguments, which were the pages to be hidden, and turned their opacity down to 0, set their position back to absolute, and brought the z-index to -2. It had two if statements, which checked if the opacity of the page to be hidden was zero. If it was, it did none of the above.

Bonus:

What we learnt

Using CSS and Javascript together

Manipulating DOM using Javascript

A few javascript tips.

Advanced typography tips.

usage of closures

Much, much more.

Your turn

This is pretty much how every challenge post is going to be. Got an idea, some feedback, or have a challenge for me?(Please give something easy! :P). Did you make something? Let me know how this is, and if you would like this to be continued in the comments below.