Animate the content of pages in and out of the window based on their position in the navigation. [Violin inside]
I am currently trying to implement "flow" on my site. What I'm trying to achieve is animate and remove the page content based on the buttons clicked in the navigation menu. The navigation menu is the only consistent item. The menu has 3 buttons Phone, Home and Mail. For now, the starter content is the phone page, but eventually I will need to switch it to home. Now the goal is to animate the content container of the current "page" and click the "page" navigation button.
The hard part is this. When I start on the Phone page and press the Home button, the Phone Page container hides to the left and Home goes to the right. This is the desired effect since the phone is to the left of Home. This also works as expected when switching from Home to Mail. But when I want to go from Mail to Home, I need the phone content to slide to the right and the Home content to come from the left. Also, going from the 1 far end to the opposite, I want to slide past the content in between.
UPDATE 2
So the fix for "I don't know what is causing this" is to simply move this line currBoxX = destBoxX;
out of the comparison after. I was so stupid that I didn't notice. I have achieved almost the functionality I need, but I still don't know how to display content inbetween when navigating from one page to another between them. It doesn't matter anymore, because Rick Hitchk showed me how all this can be done much more efficiently. So check his answer if you're interested.
----
Now this works in the first run, and also only if I go from one menu button to the very next one. The problem is that in the second round it starts moving containers from the wrong place and I don't know what is causing this one . To see this in action, go to the violin and first press Home, then Mail, then Home, then Phone. So far, this has been exactly how I want it. Now press "Home" and it will come in from the wrong side. Any ideas?
What I did was store the value of the current content container and compare it with the value of the destination container. The container value starts at 1 for the leftmost and highest 3 for the rightmost. So when I go from phone (1) to house (2), the destination value is greater than the current one, so I know the button is to the right of the original and I call the slide-left animation.
Calling functions with the value of the current container in the argument
<div class="nav_btn" onclick="goToBox(1,'#phone_box')">
Phone</div>
<div class="nav_btn" onclick="goToBox(2,'#home_box')">
Home</div>
<div class="nav_btn" onclick="goToBox(3,'#mail_box')">
Mail</div>
comparing the value of the current and target container
if (destBoxX > currBoxX) {
currBoxX = destBoxX;
slideLeft();
}
else {
slideRight();
}
End of update
I'm not that skilled and I'm really trying my best here, but I'm really getting lost in animation. I know the problem is that I adore everything through the property on the left, but unfortunately I don't know how to approach this in order to achieve the functionality I want.
Therefore, I would like to hear tips and advice on how to do this. Also, do you even think that I can do it with a simple and general function like the current one, or what I want is too complex and maybe I can just create more functions?
Looking forward to your answers.
Here the function
function goToBox(boxid){
$(".currentBox").animate({
left: '-50%'
}, 500, function() {
$(".currentBox").css('left', '150%');
$(".currentBox").appendTo('#container');
});
$(".currentBox").removeClass("currentBox");
$(boxid).addClass( "currentBox" );
$(boxid).animate({
left: '50%'
}, 500);
};
and so i call it
<nav>
<div id="naw_wrap">
<div class="nav_btn" onclick="goToBox('#phone_box')">Phone</div>
<div class="nav_btn" onclick="goToBox('#home_box')">Home</div>
<div class="nav_btn" onclick="goToBox('#mail_box')">Mail</div>
</div>
</nav>
source to share
Instead of keeping track of the selected field, you can loop through it directly, for example:
function goToBox(boxid){
$('body').animate({
scrollLeft: $(boxid).offset().left
}, 500);
};
You need to make some changes to your CSS.
This removes the scrollbars from the window:
body {
...
overflow: hidden;
}
You have 3 boxes, all of which are 100%. So your container should be 300%. Since it overflow: hidden
was added to the body, it is no longer needed in the container:
#container {
...
width: 300%;
}
Your squares are 1/3 wide container
, so they need 1/3 wide. They no longer need absolute positioning, but rather float: left
makes them appear side by side:
.box {
...
width: 33.33%;
height: 100%;
float: left;
}
Finally, naw_wrap
fixed positioning is required, so it remains visible while the body is scrolling:
#naw_wrap{
...
position: fixed;
}
Fiddle
source to share