jQuery Page Slider

Our goal is to get to the functionality of the Panic Coda web site.Panic Coda web site

We are going to start with this tutorialthis tutorial This will create the basic functionality of the page slider.

First thing I am going to do is link to the newer version of jQuery and the scrolling extension. Next I am going to move the script in the example file into its own linked file. Then pull out the CSS and put it in a linked file.

IMPORTANT: Before going on, test your file to make sure it works as expected. Next, I am going to put a background color in the body, just temporarily. I am going to remove the overflow:hidden; statement. If you view the page, you will notice that you do not see the blue. That is because of the crazy stuff in the wrapper rule. Next, I will alter the wrapper so that it is getting closer to the right size and shape. We can fix the margins to center the layout by adding text-align: center; to the body tag and the margin statement to the #wrapper rule.

Whip our content area into shape here. Next, to reach our goal, we need to move the menu out of the first item and into a over our scrolling area. This can be done by cutting and pasting it into a div with an ID of navigation.

Put it above the wrapper div. Then you just need to do some styling to get it to sit on top of it correctly. I also made the top margin on the wrapper div a little smaller. If you resize the window, you will see it gets a bit funky. Lets see if we can fix that.

if you look on your slider.js page you will see that there is a function that triggers when the window is resized. This was part of the original design for the tutorial. If you comment it out, you will see that it works fine without it. This means you can wipe out the whole resizePanel() function as well. Now the script is down to 15 lines.

The last thing to do for functionality is add the previous and next buttons. So I added a footer div under the wrapper div. Notice the links don't actually go anywhere. Then I gave it a little styling. The whole project can be styled better later. This will do for now

To get the next and previous links to work, we need to come up with a strategy. Think about how you think it should work. When I thought about it, I thought that we are going to have to somehow know where we are currently, then find a way to slide to the next or previous item, as necessary. I noticed this variable is being set in our script: current = $(this); This was left over from the window resize script, which we deleted. If I tell current to put a red two pixel border around it, and test it, this is what I get when I click on a page.

So, now I know where I am. How do I know where I am going? jQuery, as we know has a million ways of selecting stuff on the page. There must be one for selecting the next item or the previous item in the DOM. And of course there is! The next() and prev() functions will work nicely. Notice in the picture I am on item2, but the 3 in the navigation has the red border.

I am going to set up an event handler for when someone clicks on the link with an ID of #next. we can modify the statement in the other handler to match what we need for the next link.

When you test that, you will see that first you have to click a page, then you can click the next link and it will work once, but not after that. If we reassign the next element to current, it should work until you get to the last one. If we are on the last slide, we want to go back to the first slide. Sounds like an if statement! Ok, this looks a little weird, but this is how its done with jQuery. Basically, if the length of the next sibling element is zero (meaning it does not exist) we can send the user back to the beginning – we have to write that still. Else, just go to the next item.

Here it is. We can select the first child of our navigation div and scroll to it. One more thing. Assign our variable, current, to that first item. Our next link should be fully functional.

The function for the previous link, is really just a copy and paste of the one for the next link. Just change it to.prev in the appropriate places and set the a:last-child properly. That should be working perfectly. If you load the page from scratch you will notice that you have to click a menu button before clicking a next or previous button. That is because that current variable is being set for the first time after you click a button for a particular page. Lets fix that.

Right at the top of the page, I set current to the first item in the navigation. One minor detail, you might notice. When you click the item links, It goes to the item and makes that item bold in the menu. However, it does not do that when you click the next and previous links. The code responsible for doing that is on lines 7 & 8. We could add those two lines to our click handlers for previous and next as well.

By adding these two lines, and changing the second one to $current, this problem is solved. These two lines need to be added to each if and each else statement. One last thing that bugs me is the dotted border around the links. This can be removed with a simple CSS statement added to your style sheet.