Develop Reference

Animate sideways via jQuery

I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.
These are the menus:
Normal
Remote
Tools
Register
Log in
Donate
Contact
Terms of use
Now I need to control and show different divs based on which menu entry I click.
I need help in two occasions:
Creating the animation (see the jsfiddle below)
Handling the transitions between the divs efficiently without lots of code rewriting.
Occasion 1:
When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).
So basically, I'm wanting to make the slideDown and slideUp horizontal.
This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/
This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.
Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?
Occasion 2:
As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:
$('#remote').click(function()
{
$('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
$('#tools-page').animate({marginLeft: '100%'}, 'fast'); // here
});
Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?
This is all I want to know.
Thanks

You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind.
http://jsfiddle.net/UtH4m/9/
Final version: http://jsfiddle.net/UtH4m/13/

I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle

Drag and drop sidebars

I'm working on a new project and I have sidebars I want the user to move around and order them as they want.
Like clicking the header of the box and move it to the top will result the box at the top.
How do I do that?

jsBin demo
$('.sidebar').draggable();
http://jqueryui.com/demos/draggable/
Take a look a jQuery UI draggable functionality.

Hide & Show Right Sidebar

So, I'm trying to create a javascript or query to hide a right sidebar div. Proving to be a lot harder than I anticipated but I'm close.
I've created a hide/show right sidebar that slides out when clicked and then slides back to full width when the button is clicked again.
Problem:
When clicked "Hide":
Sidebar slide out to be 'width:10px;' and the content to be margin-right:10px;
When clicked "SHow":
Sidebar slide in to be 'width:200px;' and the content to slide back to 'margin-right:200px;
I've created a JS Fiddle to show:
http://jsfiddle.net/6uVvF/
I am trying to accomplish an animated version of face books right sidebar.
Here's also another example: http://www.sidlee.com/
Thanks.

So I was able to create a sliding and fading effect on the sidebar.
It allows me to hide a sidebar. I am having the Javascript animate each item to 0 though. But it works well.
See the working version here:
http://jsfiddle.net/glepage/6uVvF/

Carousel with left en right button. Check on left and right button

I have a problem with my carousel. I've searched for similar questions. But found nothing.
I have make a carousel with three sections and a big image. And the carousel have a right and left navigate button. In the beginning, the first section is show. With a right carousel button. The left button is hidden. Because you can not click on the left. When you click to the other slide. The next section is show and the background image is animate 1000 pixels to the right.
You can see here the example: Example on jsfiddle
But now the problem. When i am on the first section. I have a right navigate button. The left button is hidden, because you can not click on it. When you are on the last section. The left button is show and the right button is hide.
But the problem is the middle section. When you are on the middle section. You have a navigatie button to the right. But not a navigate button to the left. And when I'm in the middle. I also left. And not just to the right.
How can i fix this in my script. Thanks for help.
You can change the code and see the code on jsfiddle.
Here you can see the code and example

I've made an example of my idea here: http://jsfiddle.net/upyZH/5/ , but the problem is still there. Firebug keeps telling me that the image sprite.png was not found. Perhaps that is your problem? And what are all those random charcaters in the css?
EDIT: Here you go: http://jsfiddle.net/upyZH/8/ , works like a charm :)

Have a look at my fiddle here: http://jsbin.com/abape3/14 It has the left and right buttons and works like what you've described.

dropdown menu stops working after page jump

My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.

The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.

It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.

Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!