jQuery Scrollable just doesn't work

[wwwfilmfilercom]

Hi I'm having some trouble setting up my test webpage to work with jQuery jScrollPane and jQuery Scrollable. I can get them both working independently on their own webpages, but when I try to use them on the same page it just doesn't happen. I think the problem may be to do with the css positioning.

Anyway, I'm tearing my hair out and I just can't seem to get the panels on my page to scroll/slide... I've attached my source file.. can someone please take a look and explain where I'm going wrong!

Thanks,

[SambaNeko]

Changes made to your test.css file that made it work:

/* Reset */
body, ul, ol,li, h1,h2,h3,h4,h5,h6,form,p,a,img{
	margin:0;
	padding:0;
	border:0;
}

#wrap {
	background: #fcf;
}

#navigation {
	background: #333;
	height: 70px;
	clear: both;
}

#container {
	background: #71e;
	height: 600px;
	clear: both;
}

.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 450px;
	height:600px;
	float: left;
	z-index: 5;
}

.scrollable .items {
	/* this cannot be too large */
	width:200em;
	position:absolute;
}
  
.items > div {
	 float:left;
}

.items div .panel {
	background: #0bb;
	height: 600px;
}

.items div .lp {
	width: 400px;
	margin-left: 10%;
}

.items div .rp {
	width: 400px;
	margin-left: 50%;
}

.items div .fp {
	width: 800px;
	margin-left: 10%;
}

.items div .content {
	background: #1e1;
	width: 80%;	
	height: 90%;
	overflow: auto;
	margin: 30px auto;
}

#image {
	background: #555;
	height: 600px;
	width: 900px;
	margin: 0 auto;
}

#footer {
	background: #11c;
	height: 60px;
	clear: both;
}

You can use a comparison program to point out the differences (WinMerge is good, if you're on Windows and if you don't already have one), but the concept is that you made the "panel" divs positioned absolutely: this is not compatible with the way Scrollable works. They need to float in order to sit side-by-side and scroll into view.

In one change, I used a direct-child selector (".items>div"), which doesn't work in old versions of IE (6 and lower, I think...); so if you care about that audience, replace that rule with a class.

[wwwfilmfilercom]

Brilliant - I struggled with this but thanks for your explanation!

One thing I've noticed is the panels are not the correct size (for instance class .lp is meant to be 400px, but .fp is supposed to be a wider one).

What I did was change .scrollable { width to 900px }

However, an interesting side-effect of this is that the 2 panels sit side by side... I want only 1 panel to display within the 'scrollable' region of 900px regardless of it's own size.

How do I achieve this? An explanation would be helpful,

[SambaNeko]

The idea behind Scrollable is that you have several same-width divs sitting horizontally side-by-side (the divs inside of .items), which are contained by another div (.scrollable) whose width is equal to one of the inner divs, and its overflow value is set to hidden, so that only one of the inner divs is visible at a time. When the "scrolling" is done, it's done by offsetting the relative position of the inner divs by an amount equal to their individual width.

So, the default functionality of the plugin is dependent on the inner divs being equivalent widths; ie, you can't have .lp and .fp be different sizes, or it will break the effect.

It's possible that you could do some fancy scripting to adjust the width of .scrollable on the fly, but you'd need to dig in and mod Scrollable's code for that.

[wwwfilmfilercom]

I understand what you mean. However, my thinking was that the inner divs would of the same width (same as .scrollable as you say). However, within each of those inner divs there would be another div (such as .lp or .rp) which would resize content and so on. I seem to get an effect where these inner-inner divs have their properties over-ruled by the inner divs and so on.

Does that sound possible?

[SambaNeko]

However, my thinking was that the inner divs would of the same width (same as .scrollable as you say). However, within each of those inner divs there would be another div (such as .lp or .rp) which would resize content and so on.

You cannot have a child div that is wider than its parent without either forcing the parent to expand, or having the parent crop the child. Unless you were expecting jScrollPane to make the child div horizontally scrollable - is that the case?

[wwwfilmfilercom]

I don't intend to allow horizontal scrolling with jScrollPane.

What I mean is that .scrollable and the inner div will have a width of 900px.

Within innerdiv there will be another div (which will hold .content) and .lp or .rp will have widths of 400px, .fp will have width of 800px. So at no time will they be above the size of the parent div.

Is that possible?

[SambaNeko]

Alright, yeah, that sounds possible, but you should either add some width, padding or margin to .lp and/or .rp so that their summed width is equal to the width of .scrollable (900px); if their total width is 800px, then there will be 100px of another inner div exposed.