This is not actually an addon but I didn't know where to post it.
This JavaScript code will dynamically load and display the contents when changing pages.
Here is a quick
demo: https://i.imgur.com/hj9Oet3.gifv
Code:// Current Version: 1.1
$(document).on('click', '.navPages', function(e){
var url = $(this).attr('href');
var page = (isNaN(parseInt($(this).text())) ? 0 : $(this).text());
// Do some visual stuff
var elSelector = ($('#forumposts').length) ? '#forumposts' : '#description_board, main';
$(elSelector).css({'opacity': '0.5', 'cursor': 'wait'});
// Scroll animation
$('html, body').animate({scrollTop: $('.pagesection').offset().top + $('.pagesection').outerHeight() - (($('.forum_category').length) ? $('.forum_category').height() + 5 : 0)});
// Fetch content
$.get(url).done(function(html){
// jQuery hates parsing body content. Surely there is a better way (eg regex)
body = html.split('<body')[1].split('>').slice(1).join('>').split('</body>')[0];
// Inject html!
$(document.body).html(body);
// Update browse history
history.pushState({}, "Page " + page, url);
}).fail(function(){
// Something's wrong :S
window.location = url;
});
// Don't navigate
e.preventDefault();
});
Just edit your
script_elk.js and insert this code.
Changelog: Current Version: 1.1
v1.1:
- Now it works for pages when browsing board topics too
- It also updates the url and the browse history
v1.0:
- Initial Release
Nice!
Very cool! It would be nice if all forum navigation behaved in a similar fashion so ya don't always feel like it's a complete page load.
Cool! 8)
More need to add the page load as you scroll.
@ahrasis what do you think?
Cool!
One thing: are the scripts in the page still working? (For example the likes and the quick edit.)
Yes they do work, I also made an update, so it also works when browsing board topics.
Probably I will make an update so all forum navigation behaves on a similar manner. (suggestion by
@badmonkey)
Super wow! Thanks for sharing this. Perhaps this should be part of the stock code? :D
I have just seen its demo. Great stuff I'd say. Thanks for sharing it.
Hello,
My English is very bad, sorry.
I have tried this great modification. Found a problem with latéral Top and Bottom buttons. Sometimes all work fine, bat I don't no why, sometimes the bottom button don't do anything.
Elkarte 1.09
Edit:
Il will remove this mod at the end of the week.
You can try:
Go https://forum.mpdb.tv/index.php/topic,35559.0.html
then go on page 2
Bottom button don't responde.
Unlikely: https://jsperf.com/regex-vs-split/2
I haven't tried this, but I would assume it's incompatible with the way I call my quick quote script https://github.com/Frenzie/elk-quick-quote/blob/da6090639d63ff1b51f67891723a85a28eab012e/quickQuote.js#L384
Off the top of my head I'm thinking something like
var dynamicLoadPagesEvent = document.createEvent('Event');
dynamicLoadPagesEvent.initEvent('dynamic-load-pages:load-next', true, true);
document.body.dispatchEvent(dynamicLoadPagesEvent);
Then we should be able to act on it like this:
document.body.addEventListener('dynamic-load-pages:load-next', initializeQuickQuote, false);
I can only see its working just fine
@shaitan. This addon target page changes by numbers or next button, not up and down arrow / button. I do however think it can be extended with some more modification to the original code. If you ask me, I like all button leading to another page or position to use the same effect. Better still, several options of it. But that's just me.
Hello Ahrasis,
I will try to explain better the problem I encounter.
The addon work like a charm. Dynamic effect when changing page, that's nice, all is OK.
BUT it broke the latéral button (action=.....#bot). Nothing happpens when I press on it.
If I remove the addon, the button work again well
I did go to the bottom just fine when I clicked bottom arrow button aka #bot. So, that doesn't seem broken to me.
The bottom arrow button work on some page.
Tried with différent Browsers, on Windows, Linux..
Where's the bottom arrow button? It works for me if I add #bot to the addressbar manually.
Here:
(https://static.forum.mpdb.tv/uploadimages/images/1486028423-bot.png)
Indeed that was the button I clicked. And it works all over the place. I am using Chrome (Version 55.0.2883.87 m (64-bit)) in Windows 10.
Do you have tried the two steps ?
1 Going a page, for exemple: https://forum.mpdb.tv/index.php/topic,35424.0.html
The button work fine
2 Clic Page 2
The button is broken (for me and others members who have tried).
That not appairs on every Topics.
It's not important for me. I Tried few mods and I make report.
Not sure if can help.
(https://static.forum.mpdb.tv/uploadimages/images/1486033261-bottomfail.png)
Ah! Unless you hover it looks like it's just a tab thingy. I'd forgotten all about its existence.
Anyway, seems to work for me. I clicked previous and next page a few times, tried up and down arrow a few times, all working. Same if I try clicking a page number specifically. Maybe the key is that I'm not logged in?
That's right !
I tried juste after read your message. Im disconnect, the bug disappear !
The animation is lost probably because of how it is attached to the buttons.
Try changing in theme.js this:
$("a[href=#top]").on("click", function(e) {
e.preventDefault();
$("html,body").animate({scrollTop: 0}, 1200);
});
// Smooth scroll to bottom.
$("a[href=#bot]").on("click", function(e) {
e.preventDefault();to this:
$(document).on('click', "a[href=#top]", function(e) {
e.preventDefault();
$("html,body").animate({scrollTop: 0}, 1200);
});
// Smooth scroll to bottom.
$(document).on('click', "a[href=#bot]", function(e) {
e.preventDefault();
Emanuelle,
In this order:
Code changed, empty cache, empty cache browser, empty my plate nuddle, disconnect, reconnect.
And... IT WORK
Edit, no, Sorry, the problem remain the same.
And today all work. Strange ! :o
Solved for me.
Many Thanks Emanuelle and all members who give help for this incredible Forum project.
Elkarte is Fantastic !
Probably just the browser cache not refreshed. :)
I pack this in a simple package for easy install and uninstall, put Dynamo as its author and name it as Dynamic Page Load (with hope in the future the author will cover all page load :D ) This package involve adding the code to the end of the mentioned file.
I think I somehow managed to make it work fully hook. I attached the new package. If this working with you too, in the future update, just insert the new code into Dynamo.js in default theme scripts Dynamo folder.
I wish all my elkarte pages to load using this style instead of just in message display page. I am not good in js / jquery etc, so can somebody help me on how to implement this?
All the pages may be a little tricky because of several reasons (even only because different pages may require different javascript files to be loaded).
I noted that it is tricky.
Should I start looking for each page code and where?
Or can it be done in such a way that all internal url is load with the same loading effect? I mean the code can look for it instead of various ids or classes, right?