Someone asked in jQuery plugin jk navigation about how to use jknav for dynamic contents:
Im trying to combine it with an infinite page scroll for a blog, but Im having a little trouble. []
Do you know of any way to combine the two scripts, at all? No worries if you cant help. Thank you.
I thought I had to modify jknav, but it turns out no need, I had almost forgotten how I wrote it. The items of navigation are stored after call $('selector').jknav(), you can add more items later, just call it again.
If your content is loaded using AJAX, then you can
$(function() { $.jknav.init({ up: 'u', down: 'd', name: 'dynamic content', reevaluate: true }); add_new_content(); }); function add_new_content() { $('h4:not(.jknav)').jknav(null, 'dynamic content').addClass('jknav'); window.setTimeout(add_new_content, 1000); }
add_new_content() will run every second to find new <h4> which is without CSS class jknav, once those new content added, they will be tagged with jknav class. If you dont specify name when initialization $.jknav.init(), then it will just be $('h4:not(.jknav)').jknav().addClass('jknav'); if you do specify, make sure the names are matched.
Using setTimeout should be generally working for most of all since you dont need to cooperate with dynamic loading functions. But if you know that part very well, say a callback function you can use to be notified about new content has been loaded, then you simply hook add_new_content with the callback hook and remove setTimeout because you wont need to manually check once a while.
The following demonstration is similar to the code above, except its not AJAX. Use j and k to navigate, and click on the button to add more.
Oh, thank you so much, this is absolutely perfect! It works beautifully.
ReplyDeleteIve implemented it over here: http://andbamnan.tumblr.com/