Paula Davies Web Development Me on a star wars speeder

Our Wedding Project Notes

Step 1: Content and Design

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

Step 2: Creating the Content and basic Design

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

Wedding book page design

Step 3: Adding Functionality

To get the effects that I want to use presents me with some problems:

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);         
         }

      }