I'm looking for a sliding div and page content script

[IC619]

Hi everyone.
I'm looking for a script that will slide a div down from the top of the page, but also slide down all other content on the page at the same time. Similar to the following site:

http://www.flairpair.com/blog/web-development/jquery-simple-menu-with-slide-in-effect

Any help is much appreciated.
Dan

[Snookerman]

Why not just use the one from that site?

[Medyman]

Your description is kind of vague but is this (http://james.padolsey.com/javascript/new-jquery-plugin-fly-off-page/) what you're looking for?

[IC619]

Snookerman - I tried following their instructions but couldnt get it to work.

Medyman - Thats a great script, but not currently what i'm looking for. Any ideas of what that particular script could be useful for?

Basically. I'd like the same effect that happens when the 'popular tags' tab on the site I posted is clicked. Hopefully thats a little clearer

Thanks,
Dan

[Snookerman]

Could you please post a link to your site or the code you tried to use so we can take a look and help you out?

[IC619]

Could you please post a link to your site or the code you tried to use so we can take a look and help you out?

I found a different script at http://ifohdesigns.com/blog/tutorials/unobtrusive-jquery-slide-toggle-with-cookies which i've used. However, I'm having a couple of problems with it:

1. The slide effect is not smooth on my page (although it is on their demo), it jumps.
2. I can't seem to remove the 'toggle header' link.
3. I can't seem to center align the page content.

My test page:
http://homepage.ntlworld.com/r.hartlett/test/personalcollection_copy.htm

Does anyone have any suggestions of how to fix these problems?

Thanks,
Dan

[Snookerman]

#2 Find and remove this piece of code in your jquery-slider.js file:

var a = $("<a>toggle header</a>").attr('href','#').addClass("btn-slide");
$('#wrapper').before(a);

#3 Add this to your css code:

#main {
margin: 0 auto;
}

#1 I'm not sure about yet, I'll post if I come up with something.

[Snookerman]

#1 That is because of the padding you added here:

#panel {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0;
background-color: #333;
}
Remove that and add this instead:

#panel h2 {
padding: 10px;
}

Good luck!

[IC619]

Thats perfect Snookerman! thanks alot :)

I'll be sure to post a link to my entire site when I finally get it all sorted haha

Thanks,
Dan

[Snookerman]

You're welcome, happy to help! You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

Good luck with your site!