How to reinitialize jscrollpane on the entire browser for ajax content

Question

Ok so I'm using jScrollPane to replace the default scroll bar for Browsers(the main one). I use this function to do it taken from the link provided above.

// Set jscroll for window
$(function()
{
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                var container = $('#grid');
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows': false,
                        'verticalGutter': 10
                    }
                );
            }
        }
    ).trigger('resize');

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if ($('#grid').width() != win.width()) {
        win.trigger('resize');
    }
});

Now my problem is that I use masonry and ajax page loading with the imagesloaded plugin to wait until the images have loaded to apply masonry. I use this method to trigger masonry with images loaded.

$(document).ready(function() {
  var $container = $('#boxes');
  // var settings = {
    // 'showArrows': false,
    // 'verticalGutter': 10
  // };
  // var pane = $('#grid')
  // pane.jScrollPane(settings);
  // var api = pane.data('jsp');
  $container.imagesLoaded(function(){
    $('#boxes').fadeIn('fast');
    $('#boxes').masonry({
      itemSelector: '.box',
      columnWidth: 234,
      gutterWidth: 12,
      isFitWidth: true,
      isResizable: true
    });
    // api.reinitialise();
  });
});

Now using this method the scroll bars won't show until the browser is resized. I tried using api.reinitialise() but it doesn't size the content correctly and will overlap the scrollbar over the content until window resize.

Now I also need to reinitialize jscrollpane when a new page is loaded with ajax. I'm using this method on my wordpress site to load to new content.

//Ajax page loading!!
$(document).ready(function($) {
    var $mainContent = $("#grid"),
        siteUrl = "http://" + top.location.host.toString(),
        url = '',
        type = '',
        contentType = ''; 
    $(document).on("click", "a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", function() {
        type = $(this).data("type");
        location.hash = this.pathname;
        return false;
    });
    $("#searchform").submit(function(e) {
        location.hash = '?s=' + $("#s").val();
        e.preventDefault();
    }); 
    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 
        if (!url) {
            return;
        } 
        contentType = $("#sector").data("type");
        url = url + " #sector"; 
        $mainContent.animate({opacity: "0.1"}).html('&lt;p&gt;Please wait...&lt;/&gt;').load(url, function() {
            $mainContent.animate({opacity: "1"});
            if (type === "masonry" || contentType === "masonry") {
              var $container = $('#boxes');
              $container.imagesLoaded(function(){
                $('#boxes').fadeIn('fast');
                $('#boxes').masonry({
                  itemSelector: '.box',
                  columnWidth: 234,
                  gutterWidth: 12,
                  isFitWidth: true,
                  isResizable: true
                });         
              });
            }           
        });
    });
    $(window).trigger('hashchange');
});

So given that some of my pages have masonry and some don't, I need a method to set jscroll on page load and reinitialize it for masonry and ajax loaded pages. What's the method here?

score 0 · Accepted Answer · answered Jan 12 '13 at 12:17

0

You have to use this :

var data = 'blah blah';
var pane = $('#scroll-pane')
var api = pane.data('jsp');
api.getContentPane().append(data);
api.reinitialise();

answered Jan 12 '13 at 12:17

Libert Piou Piou

540
5
22

whats "data" supposed to be? – Pollux Khafra Jan 12 '13 at 12:18
the data you want to add to your scrollpane – Libert Piou Piou Jan 12 '13 at 12:19
Can you change your answer to show how I use this with the second function that triggers the masonry? – Pollux Khafra Jan 12 '13 at 12:21
When I'm just loading a page with masonry I don't have a reason to append anything so this is confusing. – Pollux Khafra Jan 12 '13 at 12:40
I don't know, but this may help you : http://stackoverflow.com/questions/14078587/issue-with-full-page-horizontal-scroll – Libert Piou Piou Jan 12 '13 at 12:43

How to reinitialize jscrollpane on the entire browser for ajax content

1 Answers1