Web Design Forums

Matt T · 16-12-2007, 07:07

I'm trying to incorporate a sliding animation between DIVs for a site I'm working on, but I'm confused over what to do. I know virtually nothing about JavaScript (planning on buying a book on it soon, so please don't tell me to "just learn it") and I can't find any decent solution through Google.

Examples of what I'm trying to achieve are on Panic's Coda site (panic.com/coda) and the iMac section at Apple.com (apple.com/imac - the "why you'll love a Mac" box).

Any help?

emil · 16-12-2007, 07:34

have a look at jquery, pretty designer-friendly.

And this plugin might be what you're looking for:
jCarousel - Riding carousels with jQuery

Hunch · 16-12-2007, 09:05

From a quick look, I couldn't find any sliding stuff on either of the sites you mentioned. The Coda site had some nice pop-up pseudo-windows, and the apple page just seemed to load a new page every time for me. No effects at all.

But regardless, I've been using a lot of mootools lately. I particularly like the way they've made everything into components so you can keep your code as lightweight as possible.

The sliding divs implementation is here:

mootools demos - Fx.Slide Demo

Matt T · 16-12-2007, 20:55

On the Coda site, use the buttons on the "toolbar" (sites, files, ect.) and on the iMac page, click the blue arrows in the "why you'll love a Mac" box.

Hunch · 16-12-2007, 22:24

I see the Coda one - the iMac page still just reloads every time, no sliding in site. Browser sniffing perhaps? Apple certainly uses prototype and scriptaculous - they're well known for it.

Matt T · 17-12-2007, 06:01

What browser are you using? It works perfectly for me with Safari and Firefox.

forbes · 17-12-2007, 07:01

here is what your after:

glider.js Example

funkyprem · 17-12-2007, 08:04

there's a sliding div example on the jquery homepage!

Matt T · 17-12-2007, 09:24

Guys, I can't get this working at all. I've spent hours trying to use each of the things you've suggested but I haven't gotten anywhere. What am I missing?

Maybe I should explain my situation a bit more. I have three divs (each 300x200px) in a row next to each other. These divs are inside another 300x200 div which hides the overflow. I want to be able to click a link in div2 and have div1 slide into view, hiding div2 and div3. Does that make sense?

emil · 17-12-2007, 10:48

This is what I am using:
Slider

zip's here
http://maqina.ro/c/slider/slider.zip

pasky · 17-12-2007, 13:15

nice ... I like that effect

16-12-2007, 07:07	#1 (permalink)
Matt T Registered User Join Date: Dec 2007 Location: Australia Posts: 22	Javascript for sliding DIVs I'm trying to incorporate a sliding animation between DIVs for a site I'm working on, but I'm confused over what to do. I know virtually nothing about JavaScript (planning on buying a book on it soon, so please don't tell me to "just learn it") and I can't find any decent solution through Google. Examples of what I'm trying to achieve are on Panic's Coda site (panic.com/coda) and the iMac section at Apple.com (apple.com/imac - the "why you'll love a Mac" box). Any help?

16-12-2007, 07:34	#2 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,769	have a look at jquery, pretty designer-friendly. And this plugin might be what you're looking for: jCarousel - Riding carousels with jQuery __________________ ABSTRACT Q X R

17-12-2007, 08:04	#8 (permalink)
funkyprem For all your goober needs Join Date: Dec 2004 Location: Coventry, UK Posts: 1,456	there's a sliding div example on the jquery homepage! __________________ Time is really the only capital that any human being has, and the one thing that he can’t afford to lose. - Thomas Edison prem ghinde

17-12-2007, 10:48	#10 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,769	This is what I am using: Slider zip's here http://maqina.ro/c/slider/slider.zip __________________ ABSTRACT Q X R

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

16-12-2007, 09:05	#3 (permalink)
Hunch Grumpy old man Join Date: Oct 2007 Location: North Japan Posts: 1,601	From a quick look, I couldn't find any sliding stuff on either of the sites you mentioned. The Coda site had some nice pop-up pseudo-windows, and the apple page just seemed to load a new page every time for me. No effects at all. But regardless, I've been using a lot of mootools lately. I particularly like the way they've made everything into components so you can keep your code as lightweight as possible. The sliding divs implementation is here: mootools demos - Fx.Slide Demo

16-12-2007, 20:55	#4 (permalink)
Matt T Registered User Join Date: Dec 2007 Location: Australia Posts: 22	On the Coda site, use the buttons on the "toolbar" (sites, files, ect.) and on the iMac page, click the blue arrows in the "why you'll love a Mac" box.

16-12-2007, 22:24	#5 (permalink)
Hunch Grumpy old man Join Date: Oct 2007 Location: North Japan Posts: 1,601	I see the Coda one - the iMac page still just reloads every time, no sliding in site. Browser sniffing perhaps? Apple certainly uses prototype and scriptaculous - they're well known for it.

17-12-2007, 06:01	#6 (permalink)
Matt T Registered User Join Date: Dec 2007 Location: Australia Posts: 22	What browser are you using? It works perfectly for me with Safari and Firefox.

17-12-2007, 07:01	#7 (permalink)
forbes Senior Member Join Date: Aug 2006 Location: Belfast Posts: 766	here is what your after: glider.js Example

17-12-2007, 09:24	#9 (permalink)
Matt T Registered User Join Date: Dec 2007 Location: Australia Posts: 22	Guys, I can't get this working at all. I've spent hours trying to use each of the things you've suggested but I haven't gotten anywhere. What am I missing? Maybe I should explain my situation a bit more. I have three divs (each 300x200px) in a row next to each other. These divs are inside another 300x200 div which hides the overflow. I want to be able to click a link in div2 and have div1 slide into view, hiding div2 and div3. Does that make sense?

17-12-2007, 13:15	#11 (permalink)
pasky bubbles bubbles Join Date: Nov 2007 Location: Toronto Posts: 137	nice ... I like that effect

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)