0

I am developing a Java Servlet which generates web pages with a div containing the results of a database search.

The height of this div is defined as a percentage (dynamic height) and the content has show/hide buttons (dynamic content). The show and hide functions are activated by the "onclick" attribute of the div element.

I first tried using the javascript from this page (JScrollPaneDynamicHeight) to achieve the dynamic height and this method:

function refreshNav() {  
var pane = $('YOUR SELECTOR');  
var api = pane.data('jsp');  
api.reinitialise();  
}

...called by the show/hide methods, to call the reinitialise() method and allow dynamic content.

It didn't work correctly - on some clicks it would work, on other clicks the scrollpane would disappear instead of reappear and vice versa.

I have also tried making the variable "api" global - same problem.

The latest thing I have tried using the js found here (only without appending paragraphs). There is a trade-off between quick response and CPU activity, so I added an if-statement which checks a boolean describing whether the content or height has changed. I have used "console.log()" to check that everything is working as it should (boolean value changing, if-statement being executed etc.).

It is...but I am still having the same problem with JScrollPane.

I read somewhere once that using the html "onclick" attribute is bad practice - could this be relevant?

I would be very grateful for any idea on what might be going wrong.

Cheers,

Scott

Scott
  • 101
  • 1
  • 1
  • Could you post a [self-contained example](http://sscce.org/)? Your ideas sound like they're valid, but it sounds like you are getting tripped up by the implementation. – RustyTheBoyRobot Jun 11 '12 at 18:38

2 Answers2

0

I have written an acceptable workaround thanks to an answer I found here.

The only downside is that it requires a little CPU work, but not so much as constantly reinitialising. I tried to use this resize plugin rather than putting everything on a timer but for some reason sometimes I would get it reinitialising twice, which meant halfway through a smooth jquery show animation it would stall for a bit while the scrollbar reinitialised.

Ah well. It works like this:

-every 75 milliseconds the window height and container height are checked to see if they have change -if so the scrollbar is set to reinitialise 100 milliseconds later -if the something continues to resize then the reinitialise command is reset to 100 again

$(document).ready(function(){

var windowHeight = $(window).height();
var containerHeight = $('#container').height();
var resized;

setInterval(function(){

    if(windowHeight!=$(window).height() || containerHeight!=$('#container').height())
    {
        clearTimeout(resized);
        resized = setTimeout(function(){api.reinitialise();}, 100);
    }

    windowHeight = $(window).height();
    containerHeight = $('#container').height();

},75);

});
Community
  • 1
  • 1
Scott
  • 101
  • 1
  • 1
0

I also used the script by Mark Coleman (thanks Mark!) and it works.

function resizedw() {
        $.each($('.scroll-pane'), function () {
            var api = $(this).data('jsp');
            api.reinitialise();
        });
}
var doit;
window.onresize = function () {
    clearTimeout(doit);
    doit = setTimeout(resizedw, 100);
};
extremeandy
  • 1