jscrollpane plugin seems to remove DIV from the DOM.

Question

I've seen this same issue posted in this forum as well as others ... unfortunately none of the responses in those places has helped me. So I broach the subject yet again ...

On my test site hompepage (http://www.crucean.com/testSite/index.html), I have a DIV with the ID #bodyText ... when jscrollpane is called on this DIV, it has an effect that looks as if that DIV is now completely removed from the DOM and placed, or even offset, to a new location determined by what I can only guess is conflicting CSS as there are several linked CSS files on this page alone. I've tried many different things in the .jScrollPaneContainer rule ... removing position: relative; and overflow: hidden ... as well as several other things all to no avail.

I was hoping someone, smarter than I, can have a look with Firebug and offer a suggestion.

One other issue that may or may not be related is ... there is also a weird display anomaly with that same #bodyText DIV that causes several of the paragraphs of text to appear in a weird way when the site is viewed in a non-live setting in Dreamweaver. It's weird because it displays fine in a live setting. The only way to understand this is to have a look at this screenshot of my Dreamweaver workspace (http://www.crucean.com/testSite/img/bodyTextAnomaly.jpg). I just wondered if all these issues may be related to some boneheaded thing I did with the coding for that DIV.

Thanks in advance for any help. | scott

Answer 1

You are using a very old version of jScrollPane. The first thing that I would suggest is updating to the latest version available from:

http://jscrollpane.kelvinluck.com/

The problem you are seeing is unavoidable in version 1 because the element you apply jScrollPane to is wrapped in a new element. So if you have positional styling on the element you apply it to then this styling will be lost. jScrollPane 2 works differently and doesn't suffer from this problem.

If you want to stick with version 1 then you could try a HTML structure like this:

<div id="bodyText">
    <div id="scrollPane">
        ...
    </div>
</div>

And in the CSS:

#bodyText
{
    float:right;
    height:400px;
    margin-left:0;
    margin-right:20px;
    margin-top:20px;
    width:622px;
}

#scrollPane
{
    overflow:auto;
    width:622px;
    height:400px;
}

Hope it helps!