How to? Dynamic Div Scrollbar after DIV display property changed (block vs hidden)

[mith36]

Given:
[div #core]
[div #id1 display=none]dynamic hidden content[/div] (using function below==> [div #id1 display=block]dynamic displayed content[/div]
[div #id2 display=none]dynamic hidden content[/div] ...
[div #id3 display=none]dynamic hidden content[/div] ...
...
[/div]

AND

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';

}

How can I make the scroll bar from the main div (#core) scale to the content within it? The scrollbar doesn't change in size regardless of the number of divs within in it that have had their display property changed from none to block.

See: http://www.artfuladvection.com/?category_name=music , then click "Show Discussion", the form is half hidden.

i've tried all sorts of core.style.overflow-y settings, but none seem to be the winning ticket. This page shows it can be done...http://www.dyn-web.com/code/scroll/refresh.php

Thanks!

[ElvisMac]

I'm not sure if that is your actual code or an example, but you need to change the id from '#core, #id1' etc to the following: '<div id="core"></div>' etc. As far as the CSS side of things, the core div should be given a defined height/width etc and the CSS properties should be set to 'overflow : auto;'. This will allow for you to have the scrolling div with divs inside.

[haulin]

I believe it's because of the mCustomScrollbar div, which is parent of #core. It calculates the content height only once on plugin load. But after that, you make another block part visible, which causes it to resize, but the mCustomScrollbar doesn't know about it. There is an advanced option,

advanced: { updateOnContentResize : true }

which could check for the content resize dynamically, but the authors don't recommend it, probably for performance reasons. Maybe you can add another callback for the "Show Discussion" click, which would call

$(".core").mCustomScrollbar("update");

[haulin]

mCustomScrollbar page - scroll down for Configuration and Plugin methods

[mith36]

Thanks haulin!

Adding
$('#core').mCustomScrollbar('update');
to my onclick function did the trick.

ie:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
$('#core').mCustomScrollbar('update');
}
//-->
</script>

[haulin]

You're welcome. I used the mCustomScrollbar in some project recently and encountered a similar problem. However I went with the "updateOnContentResize" approach and nothing terrible happened.

Mark this as Resolved!