Question

I’ve got a question. I’ve been working on this site for a while, and I’ve hit a bit of a brick wall. I’ve thought this over a few times and I’m not sure how to go about this.

I’ve got 5 different configurations for content on a page, and I need to swap between them. What’s supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position (“Home” should always be on top, “About” should always be just beneath that, save for when it’s the current page).

My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I’d like to do this without completely rewriting my site, but if it’s the only way, I will.

Answer 1

Well, the first thing I’d like to point out is that you’re associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.

Secondly, you only move the current button and the pressed button. To achieve the affect you’re going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.

Moreover, you can’t just statically define moveUp function for the button pressed and nothing else. Because sometimes you’ll need to move the buttons between the button pressed and current button upwards.

As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.

I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really…

In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.