[Userscript]: WaniKani Ultimate Timeline


I can’t seem to find a fork button (which is weird since the site is called GreasyFork), but could you add something like this

    // Handler for resizing the timeline when the browser window resizes.
    var last_timeline_width = 0;
    function update_timeline_width() {
        var new_width = graph.elem.width();
        if (new_width != last_timeline_width) {
            last_timeline_width = new_width;

and then a handler like $(window).resize(update_timeline_width); to the setup code so the graph properly resizes when you change the browser width?


:point_right: [ v7.0.4 ] - Resize timeline when window size changes.


Thanks for all the hard work if I haven’t said it already, rfindley. :heart:

But the timeline still isn’t resizing. :confused:


Let me guess… Firefox?

Edit: nope… Both Chrome and Firefox work for me. :thinking:


Just wanted to say THANK YOU!!!

This script is SO AWESOME! It really, really helps me to work with WK, it makes things much more well-arranged.
And everytime I think: “This could also become handy.” The topic is already discussed in this post and two days later implemented :slight_smile:

~T :lion:


Nope, I’m on Chrome.


So, when you say it’s not resizing, what exactly are you doing, and what are you not seeing that you’re expecting?

I’m assuming you’re talking about making your browser window wider or narrower, and the timeline isn’t reacting accordingly? (i.e. adjusting itself to match the rest of the WK content width)



Just to check, I already disabled all other scripts and still get this behavior.


And you’re running script version 7.0.4?


Yes. I manually installed the update as soon as you released it.


I’m wondering if some antivirus or anti-adware is placing the window contents inside a sub-object :thinking:
The ‘resize’ even should be firing on the ‘window’ object.

Could you try pasting the following in the Javascript console (and press enter), then resize the window and see if it says “resize detected” in the console?

$(window).on('resize',function(){console.log('resize detected');});




What does your Elements tab look like?
(Mainly, I’m wondering if something is wrapping the whole document)



Try disabling tampermonkey, then repeat the ‘resize detected’ test above. Make sure there are no errors in the console before resizing, then see if the errors appear upon resizing.

I’m trying to see if the errors are unrelated to scripts in general.


This would seem to be the case.

Without Tampermonkey, I have two GET errors which are caused by a DNS-based ad blocker I’m running. Disabling the ad-block resolves those, but I’m still getting errors in console with window resizing.

The only anti-virus I’m running is MBAM and Windows Defender. I don’t have any browser extensions installed that would seem to be injecting code into the page or performing any kind of sandboxing (that I’m aware of).

Edit: That said, my thoughts would be this is a problem specific to my installation? It doesn’t even personally affect me since I always use WK with the browser maximized anyhow.


Yeah, it does seem to be installation-specific. Still, I hate unsolved problems.
Do you mind trying one more test?

Refresh the window, then repeat the ‘resize detected’ test with the following code instead of the jQuery-based code from before.

window.addEventListener('resize',function(){console.log('resize detected');});


lmao I suppose you could call this a result.

o.O Why is that image so large…


I’m guessing you had TamperMonkey turned back on, which is why it’s still getting the offset error.
Nonetheless, the test was successful.

In the Timeline code on line 330, replace this line:

   $(window).on('resize', window_resized);

with this:

   window.addEventListener('resize', window_resized);

I think that will fix it. If it works, I’ll release the change.


This was not the case. Tampermonkey was still disabled.

That code change does, however, fix the issue. :slight_smile: