Daily Archives: February 18, 2014

Blocked out pages and the footer

Based on template and the designs we started to block out the pages with the elements to start to build up the website. All the content is dummy content which will need to be filled in later but the website is starting to take shape. All the navigation links through to every other page as well so there is no need to append the url manually when trying to see another page.

It’s really nice to see Cell take shape and have something tangible to look at. It also gives us an idea of how much text will be needed in each section and a really good feel about how the site will look when we have finished.

The footer has also been implemented along with the social buttons that will link off to Facebook and Twitter. There is also a placeholder for the simplified cell logo which will be faded in the center of the footer and or the header.

Parallax Headers

We all thought it would look really good if the headers were all Parallax so that when scrolling the content passes above the headers. To do this I added a new Id and applied it to the headers in which we wished to have the parallax effect. I applied position fixed and sorted the z-index so the Id of parallax-headers had a lower z-index than the content.

I also had to move the headers out of the main body tag and place them between the header and the main body tag for this to work.

example2

example1

Full Height Homepage

On the homepage of Cell we thought it would be a nice touch if first first initial screen filled exactly the entire screen so it felt more like a welcome page. There would then be arrows underneath the logo that the user would then click (or just scroll manually) to move the page down to the content on the homepage.

How I achieved this effect was by first making the div full width and then writing a JavaScript function that identified how large the browser’s inner height was and then applying that to the div. I also wrapped it around a window.resize function so that even if the user resided their browser the function would compensate and keep the div at the full height of the screen.

var primaryHeader = document.getElementById('primary-header');
primaryHeader.style.height = (window.innerHeight || document.documentElement.clientHeight) - 40 + 'px';

window.onresize = function() {
primaryHeader.style.height = (window.innerHeight || document.documentElement.clientHeight) - 40 + 'px';
};

primary-header is the div which we want to make full width. I then style it’s height based on the browsers inner height and then I minus off 40px as that is the height of our top navigation bar. The navigation bar remains 40px regardless of the screen size so I can hard code that in. I have to write out the function twice as it needs to run once on page load and then every time the user re sizes their browser.

example1

example2

example3