jscroll
jscroll copied to clipboard
added getNextHref, getInsertionPoint, dataFilter
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:
- options.getNextHref() - optionally replaces internal $next.find(nextSelector) code
- options.getInsertPoint() - optional filter for existing $inner.find(...) code
- 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');
}
});
Like it - exactly what I needed. Dealing with complex html is a pain with this lib. These changes certainly help!