dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jul 2008
    Posts
    92

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

    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!
    Last edited by mith36; 02-05-2013 at 01:01 AM.

  2. #2
    Join Date
    Jan 2013
    Posts
    7
    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.

  3. #3
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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");

  4. #4
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180

    Arrow

    mCustomScrollbar page - scroll down for Configuration and Plugin methods
    Last edited by haulin; 02-05-2013 at 07:28 AM.

  5. #5
    Join Date
    Jul 2008
    Posts
    92
    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>
    Last edited by mith36; 02-05-2013 at 11:37 AM.

  6. #6
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles