Fading Pages in Javascript
I am not a huge proponent of Javascript. However, I recognize that it is becoming more and more powerful and used, especially since AJAX has become more popular. With a new redesign of one of my sites, I wanted to do something different and cool- so I looked to 24 Ways. There I found a nice tutorial on using the effects from Script.aculo.us. Using that tutorial and some extra programming, I was able to create fading “pages”, which are actually divs we fade in and out.
First of all, you must follow the 24 Ways tutorial. I have made all of the javascript from that tutorial available in this post, and then my modified combo.js. All of my changes occur in that. Once you read that 24 Ways Tutorial, come back here.
So by now, you are familiar with all of the files, and the main functions provided in the combo.js. I took combo.js and modified it a little here:
Notice I added a few lines at the top of the function. On top of that I added this to my main page:
These codes create and check cookies, which is what I used to check what “pages” were open. When a page is open (when the page is first loaded, it is welcome), a cookie created with the name of that page. When a new page is clicked on, my code checks the cookie to see what is currently open, then closes it. After that, the cookie is rewritten with the new page open. The cookie functions are included in my combo.js. When it is all said and done, we have this. Later!