As with most websites or articles the most important thing is content, This posed me a particular problem with this project because just how much did I want people to know? certainly nothing about my dress, well at least not until the big day. So I decided to start of with a few details and then build it up from there. So now i have my content the next big question was the design, I wanted something different, simple but snazzy, so I came up with a book type layout that later I could add some code to turn the pages
I now have my design and a plan for the content so the next stage in development was adding the content to the page in a clean and neat manor.
For the book type design I would need some nice page indicators, after playing around with Paint shop pro and came up with the following
Once I had the page corners done I could then set to work on styling the rest of the page
To get the effects that I want to use presents me with some problems:
Not really a biggie, as I designed the page consentrating on content first, if JavaScript is not available then all of the content will be displayed on the screen.
This is a tricky problem, there are several solutions out there on how to do this but I have not yet decided which is the best way to go, also the solution I require needs to be done while the page is loading and be supported across the different browsers. Some articles that I have read:
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
At first reading this seemed to be exaclty what i was looking for although further down the page it states that the solution provided is not supported within IE on a Macintosh so i decided to keep looking to see if i could find a better solution
http://www.thefutureoftheweb.com/blog/adddomloadevent
Again really good solution although reading further down the page I did get confused and was worried about the memory leak being discussed, so I am still in the dark about how my problem should be handled.
Ok its time to return back to the drawing board and start of getting things done step by step, so whats the first goal I want to achieve? well my first goal here is to hide the content from all of the pages apart from page 1, to do this unobtrusively I will need to add some action listeners to the page. looking at the article on A list part I got a clear picture of what needed to be added to the page. so using their example I wrote the code needed to hide pages 2 an 3 (only 3 pages at the time of writing this)
function prepareWeddingBook(){ if( document.getElementById && document.getElementsByTagName ){ if( document.getElementById( 'weddingBook' ) ){ var gallery = document.getElementById( 'weddingBook' ); var pages = gallery.getElementsByTagName( 'li' ); for( var i=0; i < pages.length; i++ ){ if(i>0){pages[i].className='offscreen';} } } } }
So the next step after this is to add the action listeners to the code so that my function is called at page loading time, I used the site 2tbsp.com to help me out with is so my code now looks like this:
function prepareWeddingBook(){
if( document.getElementById && document.getElementsByTagName ){
if( document.getElementById( 'weddingBook' ) ){
var gallery = document.getElementById( 'weddingBook' );
var pages = gallery.getElementsByTagName( 'li' );
for( var i=0; i < pages.length; i++ ){
if(i>0){pages[i].className='offscreen';}
}
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {oldonload();}
func();
}
}
}
addLoadEvent(prepareWeddingBook);
One slight problem with the above code, it causes all of the list items to disappear in order to skip the nested lists the following needs to be added into the if condition that sets the class
pages[i].parentNode.id=='weddingBook'
With the content of the other pages nicely hidden away, now to add the code to jump to the next page.
Singling out the links that would control the next and previous page actions was not as straight forward as it first seemed. But after a couple of loops and a couple of if statements the issue was solved.
Tricky issue that I have uncounted while trying to add the event listener, if i added the event listener but placing it in the following section of code it was added correctly however when it came to capturing it it was somehow using the incorrect value for J which meant that the item it was referencing within the array was out of bounds and had not data. I got round this by removing the add action listener to its own method and passing the method the value of the a href.
// loop throught the links and add the events for the next and previous Page
for( var j=0; j < pageLinks.length; j++ ){
if(pageLinks[j].className == 'nextPage'){
createEventListener(pageLinks[j]);
}
if(pageLinks[j].className == 'previousPage'){
pageLinks[j].addEventListener('click', function(){return previousPage(pageLinks[j].href);}, false);
}
}