Does jScrollPane lock the parent div dimensions?

67 views
Skip to first unread message

Big Head

unread,
Feb 19, 2012, 12:54:44 PM2/19/12
to jscrollpane
Back again with another question. While I was able to figure out that
the .destroy() and initalise functions are actually working, I've come
across a related problem.

To recap: The layout has 3 main content sections. The size of these
sections is determined by the size of the viewport and the available
width. I have a function that will change these dimensions after every
resize of the window and the layout compensates by moving some content
elements around.

With jScrollPane "turned off", I can see the width and height style
tags updating (in Firebug console) as I resize.

With jScollPane "turned on", these dimensions do not change at all.

In my script, I destroy the jScrollPanes primarily to ensure that the
jSP dimensions do not interfere with my setDimensions function. When
the sizing is complete, jSP is initialised again. I am not using the
API reinitialise function as I want it to load fresh, also why I
destroy. I don't want jSP to have any interaction with the page until
I call it.

It seems that something in the plugin is locking these dimensions, but
I can't figure out where or why.

If anyone wants to take a look at it with Firebug, I have posted 2
versions:

jScrollPane turned off (you can see the proper sizing on the
#searchWrap, #productsWrap and #projectsWrap divs under #page):
http://mgh.bigheadservices.com/sweets/v4/jsp-off.html

jScrollPane turned on (note that the same dimensions are stuck):
http://mgh.bigheadservices.com/sweets/v4/jsp-on.html

I did make some changes to jscrollpane.js to allow for an innerArrow
setting (to move the arrows inside the jspDrag bar), but the sizing
error occurs in an un-molested version of jscrollpane as well.

Big Head

unread,
Feb 19, 2012, 2:00:12 PM2/19/12
to jscrollpane
SOLVED: Using the known issues link on Kelvin's jScrollPane page, I
found that the jQuery-set widths were being overwritten by
jScrollPane.In order to fix this issue, I needed to insert a secondary
div within my primary div. I still apply the px width/height values to
the primary div as before. The inner div has a width of 100% and the
jScrollPane is applied to the new inner div. Works like a champ.

One thing I did discover is that my revised destroy method (pushing
data('data.jsp') to apis and this.jsp.destroy() to destroy) only works
in Firefox (using 10.0.2). The recommended method of data('jsp') and
this.destroy() works everywhere else. No idea why Firefox requires the
extra 'data', but it does.

http://mgh.bigheadservices.com/sweets/v4/index-test-2.html
Reply all
Reply to author
Forward
0 new messages