jQuery div animation - Site areas

JoelC · 07-28-2009, 04:23 PM

This is my first time dabbling in javascript. Never touched it before, so I may be making terrible mistakes.

I have 4 pages on my site:

>Home
>About
>Portfolio
>Contact

Home, About and Contact are contained withing a 5em wide page-container div.
Portfolio's page-container div is set to 100% to create a different kind of layout that suits it better.

The thing is, jumping between contained and uncontained pages is very unpleasing to the eye.
This is why I'm trying to implement an animation that automatically widens the div from 50em to 100% when you enter the portfolio area. (I believe this would be more understandable if you take a look at my site).

I've managed to create the base of a jQuery animation that widens the page-container when the page is loaded. The problem with this, though, is that if you accidentally click the top "Portfolio" link again, it redoes the animation (jumps back to 50em and expands to 100%, though you were already at 100%). There is also still the issue of moving to a contained page without an animation for that.

What I'm trying to create is this:

2 areas within the website (1 area for Portfolio and 1 area for the rest). Let's call the uncontained Portfolio area A and the contained area B.
When I go from area B > area A, I want an expanding animation of the page-container from 50em to 100%.
When leave area A back to area B, I want an animation of the div getting smaller (from 100% to 50em).
When I go from an A page to another A page (even if I simply refresh, or go to sub-pages for each portfolio work) I don't want there to be an animation.
When I go from a B page to another B page (say, from the About page to the Contact page), I don't want there to be an animation.

Basically two segregated areas in the site with the event for the animation based on jumping between the areas and not simply loading a page.
I hope this makes sense to you guys and that it isn't too complicated.

This is the code I have so far for the basic animation (needs tweaking by me but that's not a problem):

Code:

<script type="text/javascript">
$(document).ready(function()
	{
	$("div#page-container").animate({
        width: "100%",
      }, 1500 );
	$("div#content").animate({
        width: "90%",
      }, 1500 );
	});
</script>

Just in case you missed the link to my site up there: http://www.joelfolio.com

Thanks so much for your time!
-Joel

JoelC · 07-29-2009, 03:30 AM

I've somehow managed to do this using a PHP session and conditionals to send the javascript out based on moving through areas.

I've hit a little roadblock, though. I won't bother explaining the specifics as there's just one thing I need to know.

I have a piece of CSS that I'm adding to the site's head area with the javascript. Without the javascript, this CSS kind of breaks all my pages. Is there any way I can insert the CSS code with javascript, so it won't be added if javascript is disabled? Either that or somehow add a condition to my PHP code for whether the user has javascript enabled.

Thanks again!
-Joel