[Scott]

trying to recreate this page slide effect:

Wolfmother

With code, jquery etc - just wondering if anybody has a good way of doing this, or what should I be looking into to pull off this effect.



cheers

[Shiro]

That's flash. Although I've seen a similar effect with jquery carousel

[finbarr]

as an example this should help (using mootools):

Hotel Oxford - Timisoara

[jg9]

I'm gonna being doing exactly the same on my site when I get 5 mins.

[fasterthanlight]

Originally Posted by Scott

trying to recreate this page slide effect:

Wolfmother

With code, jquery etc - just wondering if anybody has a good way of doing this, or what should I be looking into to pull off this effect.



cheers

I just did something similar,


indexing jQuery UI tabs


I used jQuery UI tabs,

UI/Tabs - jQuery JavaScript Library


Plus I wrote some jquery to animate left and right, let me know if you need any help

[fasterthanlight]

there is also this:

Coda Slider Effect | jQuery for Designers - Tutorials and screencasts

[Jayx]

Thanks fasterthanlight - I am also busy with a project that requires something similar. I'd normally just use CSS and anchors (iow no effects), but that stupid screen jump when the page content is higher than the browser window was starting to work on my nerves.

That link is the business

While I'm on the topic of a CSS-only method though ... anyone know of a workaround for the page jump issue?

[fasterthanlight]

Not sure exactly what you're after there jayx

heh, i'm going to re-do what i did using this coda slider, the effect i achieved is kind of noob, not as tight and awesome as that

[Jayx]

Basically the exact same thing, without the slide effect. IOW you have a nav that targets elements in another the div, which you place inside a div that hides the overflow. The problem is that the id that you're targeting will try to align with the top of the browser window, causing the page to jump upwards as it does so; unless the page content doesn't reach the bottom of the window and therefore doesn't need to scroll.

I have tried sticking everything inside an iframe (just in case), but it doesn't try to jump to the top of the iframe only, again it tries to align to the top of the browser window.

[fasterthanlight]

the only clean way to do that is with some sort of jquery tab system

you need to be able to switch to the new content without loading another page

UI/Tabs - jQuery JavaScript Library

iframes are a cop-out, just use jquery tabs -- they degrade nicely if JS is turned off

[Jayx]

I get what you're saying and thanks for the valuable resources that you linked/posted here ... I was just wondering if there is a CSS-only method.

[sagewho]

pretty sweet sliding effect