/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Feb 05.2013

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: [url]http://www.artfuladvection.com/?category_name=music[/url] , 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…[url]http://www.dyn-web.com/code/scroll/refresh.php[/url]

Thanks!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ElvisMacFeb 05.2013 — 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.
Copy linkTweet thisAlerts:
@haulinFeb 05.2013 — 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");
Copy linkTweet thisAlerts:
@haulinFeb 05.2013 — mCustomScrollbar page - scroll down for Configuration and Plugin methods
Copy linkTweet thisAlerts:
@mith36authorFeb 05.2013 — 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>
Copy linkTweet thisAlerts:
@haulinFeb 05.2013 — 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! ?
×

Success!

Help @mith36 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...