Width within Jquery jscrollpane to accomodate different width?

Ok so I had a spare 5 minutes and have hopefully done some CSS magic to fix this entire issue, because as I said in my last answer to your other question, a CSS only way is going to be the best way in your case :).

Ok so I had a spare 5 minutes and have hopefully done some CSS magic to fix this entire issue, because as I said in my last answer to your other question, a CSS only way is going to be the best way in your case :) This means you no longer need any JavaScript to calculate your width's which also means that if visitors have JavaScript disabled it will be a much better user experience for them and obviously you now don't need to worry about distorted images :) So first things first I'm afraid you will need to remove any JavaScript that calculates widths etc, you should be left with just this for your JavaScript (the jscrollpane code). $(function(){ $('. Scroll-pane').

JScrollPane({ showArrows: true, autoReinitialise: true }); }); Your HTML will need slightly changing, to this Please note that you need to set the height of the image (which should always be 440px as that is what you have it currently set to in your code). This is so that if an image is slow, of fails to load the scrolling area has something to work with! I have setup the CSS and scrolling area etc to take images with a height of 440px, but the width of your images does not matter, the CSS takes care of that!

:) Lastly you need to make some changes to your CSS, to look like this: #images { width: 100%; margin: 20px auto 40px auto; } #imagesContainer { list-style:none; display:inline-block; white-space: nowrap; height:auto; margin:0 5px 0 5px; padding:0 0 0 5px; zoom:1; /*required for IE 6 and 7*/ *display: inline; /*required for IE 6 and 7*/ } #imagesContainer li { height:440px; width:auto; margin:0 5px 0 0; padding:0; display:inline-block; zoom:1; /*required for IE 6 and 7*/ *display: inline; /*required for IE 6 and 7*/ } #imagesContainer li img { padding:0; margin:0; } . LastImage { margin-right:0! Important; /*removing the margin right from the last img*/ } .

Scroll-pane { width: 100%; height: auto; overflow: auto; } . Horizontal-only { height:470px; } EDIT: Browser tested in Safari, Chrome, Firefox, Opera, IE6+ (added in support for IE6 and IE7! ) Right, hopefully that should be it!

PERFECT! Instead of setting the height of 440 within the HTML, I hope it's okay to style it in the CSS like so: #imagesContainer li img { padding:0; margin:0; height: 440px; } You may view the result at: giamarescotti. Com/v2/index-css-only.

Html Can't thank you enough for this solution, it's really what I'm looking for =) – dave Jul 16 at 15:46 No prob, and yes that's fine to style it in the #imagesContainer li img (I forgot about that :p). All looks good to me! Nice website you have there by the way.

– Mac Jul 16 at 15:53.

Try this in #sourcecode: $(function(){ var totalLandscapeImages = $("#images img"). Length - $("img. Portrait").

Length; var totalPortraitImages = $("img. Portrait"). Length; var imgLandscapeWidth = 661+5; //width of a landscape image plus any margins or padding it might have var imgPortraitWidth = 293+5; //width of a portrait image plus any margins or padding it might have $("#imagesContainer").

Css("width",(totalLandscapeImages*imgLandscapeWidth) + (totalPortraitImages*imgPortraitWidth) - 5); $('. Scroll-pane'). JScrollPane({ showArrows: true, autoReinitialise: true }); }).

Your advice works perfectly! Thank you very much. You may see the result here: giamarescotti.Com/v2 Which now brings me to realize a problem that just resurface.

Since some images do not share the same proportion as those specified (portrait: width 293px height 440px; landscape: width 661px height 440px), they become distorted with the rules set above (see girl with towel giamarescotti. Com/v2/fashion_portrait. Html) Is there a way to state that all images be resized proportionally to specified height of 440px, regardless portrait/landscape?

Thank you once again – dave Jul 16 at 8:35 thank you for helping me out with your solution. Mac has provided me with the solution I'm looking for: less script and more CSS. Cheers!

– dave Jul 16 at 15:49.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.