Question

I am looking to use jScrollPane on my new website and am having some troubleshooting problems with it. Searched up and down for answers but couldn’t find any.

Please take a look at the website here: http://www.giamarescotti.com/v2

Instead of specifying a definite width to .scroll-pane, I would like it to expand according to the content because it’s impossible for me to keep recalculating the width as I update my website regularly.

*Due to being a new user, I am unable to post images and codes. Please view the source file at the website.

Any help is appreciated. Thank you very much!

Regards,
Dave

Answer 1

I think this could be what you are looking for. The demo here shows you how to autoReinitialise the width of a container if the content inside of it changes.

http://jscrollpane.kelvinluck.com/dynamic_content.html

Or if you are setting the width of the container as a percentage, take a look at this demo

http://jscrollpane.kelvinluck.com/dynamic_width.html

Try replacing your current jScrollPane JS with the code below

$('.scroll-pane').jScrollPane({
    showArrows: true,
    autoReinitialise: true
});

Hope that helps

UPDATE:

Hmmmmm I don’t have much time right now, but you could do a really simple bit of jQuery to calculate the width for you…

Then remove the p tag from around your images and replace it with a div tag that has an ID that refers back to the above JS. (By the way a p tag is a Paragraph tag, for text!)

Lastly set a fall back width in your CSS so that people without JS don’t see loads of images going down the page.

A better fix that uses only CSS should really be found, I’ll look into later if I get time!

2nd UPDATE

Right, lets sort that 1-3% of final details out 🙂

The margin of 5 was just a rough guide as the browsers themselves are adding a margin/padding to your images. Let’s add a fixed 5px margin to each image apart from the last one.

Your JS would be mostly the same, except that you will need to -5 from the calculated total width because we will be removing the 5px margin from the last image.

var totalImages = $("#images img").length;
var imgWidth = 452 + 5; //width of an image plus the margin
$("#imagesContainer").css("width",totalImages*imgWidth - 5);

$('.scroll-pane').jScrollPane({
    showArrows: true,
    autoReinitialise: true
});

Next we will give a class to your last image in the list called lastImage like so

<div id="imagesContainer">
    <img src="images/food.jpg" />
    <img src="images/food.jpg" />
    <img src="images/food.jpg" />
    <img src="images/food.jpg" />
    <img class="lastImage" src="images/food.jpg" />
</div>

Now the CSS

#imagesContainer {
width:5000px; /*fallback width*/
overflow:hidden;
}

#imagesContainer img {
display:block;
margin:0 5px 0 0; /*adding a 5px margin to the right*/
padding:0;
float:left;
}

.lastImage {
margin-right:0 !important; /*removing the margin right from the last img*/
}

Now each image has a 5px space between it. IF you wanted no margin then just change margin:0 5px 0 0; to margin:0;, remove the lastImage class and CSS and remove the +5 and -5 from the JS!

Hope that helps!