(coda slider) a break in “sliding panel” issues

[threedash]

Hi There,

I am working on this site

http://threedash.com/test/

and as you can see when you click on “videos”
the panel doesn’t slide sideways, but it scrolls down.

please view site to understand.

this problems can be fixed here

.panel { border: 1px solid #000; padding: 20px; margin-right: 20px; height: 400px; width: 820px; background: url(img/darkbg.png) repeat; }

but i want the spacing on both sides.

help please.

_threedash

[pkbest]

your height needs to be less that 400px i think. when you are on home page, it should not be able to show the top of the video’s section. As for the panel not always sliding sideways, it depends on where you are in relation to the rest of the site. If i go to bio then videos, it slides sideways. However, if i am at portfolio, and go to videos, it goes down. It is all a matter of location.

That would be something that would have to be changed in jquery would it not?

[threedash]

this create more questions than it answers. Im still confused.

[threedash]

I found the problem….

[TheDoc]

Did you manage to solve it?

[noahgelman]

Looking at it, the slider javascript is giving the entire slider the width of 3448px. But since your 4 slides have a width of 820px, padding of 20px, and a margin-right of 20px, your sliders’ total width is 3520px, which is 72px too wide so your floated div is doing what all floated divs do when there’s not enough room, it’s kicking down under your other floated divs.

You need to adjust your margin or padding or widths, or find out why the java is giving the slider an incorrect width.

Really nice site btw.

[createe]

Hmmm. For some coda sliders you have to watch out for the combined width, especially with the extra padding added in, but may not be the case here.

Draw a border-top of 1px to see the widths and see if every panel fits within the wrapper. I’d take out the padding in the panels (the white) and work with a simple box and isolate the problem.

Take a look at our studio’s front page: http://www.ejaedesign.com/ – uses a modified Coda slider, and have several panels that fit the entire width.

Whenever I have an issue, I take out all the content and add piece by piece to pinpoint the offending lines.

[Author]

Posts