Skip to content

Conversation

@sfinktah
Copy link

Hi, I needed to do deep insertion, that is to say: I had a nested DOM heirachy and jScroll wasn't up to it.

So I added 3 new options (delegate functions) that allowed me to accomplish what I needed, and thought I would offer them.

They are:

  1. options.getNextHref() - optionally replaces internal $next.find(nextSelector) code
  2. options.getInsertPoint() - optional filter for existing $inner.find(...) code
  3. options.dataFilter(html) - called from $.ajax's dataFilter method to allow alteration of inbound HTML

I had to replace the $.load() method you used in order to use the additional features of jQuery's raw ajax(), but no functionality has been lost.

Here are the github/markdown friendly examples from the source, and there is a live test site here.

Your callback function was not changed.

options = {
    callback: function() {
        var $child, $internalRefsToTagName, $jscrollInner, $newSection, tagName;
        $marker.remove();
        $jscrollInner = $('.jscroll-inner');
        $newSection = $(this);
        $newSection.before($newSection.children('section'));
        while (($child = $newSection.children().first()).length) {
            tagName = $child[0].tagName;
            $internalRefsToTagName = $newSection.find(tagName);
            $jscrollInner
            .find(tagName)
            .not($internalRefsToTagName)
            .last()
            .after($child);
        }
        $('.jscroll-added').not($newSection).remove();
    },
    getNextHref: function() {
        var $next, $nextHref;
        $next = $('#page-nav a[href]').first();
        $nextHref = $next.attr('href');
        $next.attr('href', null);
        return $nextHref;
    },
    dataFilter: function(data, dataType) {
        var $data;
        data += '<div id="m4rk3r">';
        $data = processDocxAttributes($('<div>').html(data));
        return $data.html();
    }
};
    // getInsertPoint: fn($inner) returns $(element) 

    Allow user defined function to determine insert
    point of new parts, part will be inserted
    **before** returned point.  This allows for
    inserts to take place within complex HTML
    structures, eg:
    <section id="initial part">
      <div>
        <p>
          <ol>
            <li>
              <!-- new parts insert here -->
              <div id="insert-point" />
     jscroll({
       getInsertPoint: function($inner) {
           return $marker = $inner.find('#m4rk3r');
       }
     });

@Jetski5822
Copy link

Like it - exactly what I needed. Dealing with complex html is a pain with this lib. These changes certainly help!

@pklauzinski pklauzinski self-assigned this Feb 7, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants