Jquery – jScrollPane 2.0 height problem in chrome

google-chromeheightjqueryjscrollpane

I am using a div with class scroll-pane (height 100%) within an absolute positioned div. The scroll-pane div contains some text first, followed by an image and followed by some text again. The image height is set to 200px.
Problem is! If I view the scrollpane in Chrome (latest Version) I sometimes can scroll the complete content and sometimes, after refreshing the site in the browser, not. Not does mean that I can only see a part of the second text and not more. So the actual scrolling height shrinks. If I refresh again I might be able to see it all complete again and so on. It changes every time I refresh the browser. It only happens in Chrome.

Any idea what I can do to avoid that behavior? Thanks…..

UPDATE
It really got something to do with how the imports (js and css) are lined up in the header. You are right, the css got to be imported before the jscrollPane js but that also means that the image height need to come from one of the css stylesheets. You can not define the height right within the image tag in your markup. My solution was to create a class, for i.e. img200 (representing a height of 200px) in my stylesheet and that made the trick.
So here again what need to be done to make it work in Chrome or better webkit Browsers in general:
Set up a image height class in your stylesheet for images that are used within a scrollPane.
Include your stylesheet before!!!!! the javascript for jScrollPane.
Add the special height class to all pictures you include to a jScrollPane
That was it. Thanks again for your fast answer. Very cool.

FINAL SOLUTION UPDATE!!!!!!!!!
If you have pictures within a jScrollPane area you have to make sure the following in order to have it all displayed well in webkit browser, like Chrome or Safari. Otherwise it will cause height problems and only a part of your content will be visible.
This is what you have to do:
Make sure the line up of your css stylesheets and the jScrollPane javascript file is correct. The jScrollPane javascript file need to follow your css stylesheets and not the other way around! Also you have to add a height to each image that is included in the jScrollPane area. You can do this either by creating a css class or you can add the dimension as an attribute directly to the img in your html markup.
If you keep that in mind it will do the trick.

Best Answer

Did you also test in Safari? This sounds like an issue that occurs in Webkit when the javascript is included before the CSS in the head of the document: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

If that isn't the cause then it might be something related to the fact that you have an image in your scrollpane. You need to either include the width and height of the image (see http://jscrollpane.kelvinluck.com/image2.html) or autoReinitialise the pane (see http://jscrollpane.kelvinluck.com/image.html).

Hope it helps :)

Viewport-Percentage (or Viewport-Relative) Lengths

What are Viewport-Percentage Lengths?

From the linked W3 Candidate Recommendation above:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How can this be used to make a divider fill the height of the browser?

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

What browsers support these new units?

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

How can this be used with multiple columns?

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

How is `100vh` different from `100%`?

Take this layout for example:

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying JSFiddle to easily see the difference!

Javascript – Disable same origin policy in Chrome

Close chrome (or chromium) and restart with the --disable-web-security argument. I just tested this and verified that I can access the contents of an iframe with src="http://google.com" embedded in a page served from "localhost" (tested under chromium 5 / ubuntu). For me the exact command was:

Note : Kill all chrome instances before running command

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

The browser will warn you that "you are using an unsupported command line" when it first opens, which you can ignore.

From the chromium source:

// Don't enforce the same-origin policy. (Used by people testing their sites.)
const wchar_t kDisableWebSecurity[] = L"disable-web-security";

Before Chrome 48, you could just use:

chromium-browser --disable-web-security

Best Answer

Related Solutions

Html – How to make a div 100% height of the browser window