I started to read more and more on my laptop, but was annoyed by the constant scrolling with my clumsy touchpad, to awkwardly aim at the next unread paragraph. By the time I was done with that I oftentimes forgot half of what I just read and had to scroll back up.

So I wanted to have a way to simplify and speed up the reading flow of a story. This script allows you to just click on any paragraph and the page will smoothly scroll down to that one, conveniently aligning the clicked paragraph to the top of the page. I can't speak for everyone of course, but this definitely improved my reading experience a lot.

▶ Video Demonstration (a bit outdated, but the idea remains unchanged)

(Note: This may not look pretty on all themes; in particular, it's only really suitable for dark themes without some manual adjustments.)

5069583 Very interesting. Nicely done on that.

Hrm. Neat. I may have to try and find a way to install userscripts on mobile and see how it works there…

I'm not seeing the hover color on Chrome, by the way, but I honestly think it's better that way.

Nice. Simple and does the job.

I wouldn't recommend using the filter css property too much though. It looks like it's experimental, and for non-firefox browsers you'll have to add -webkit-filter.

5069623 At first I actually simply had it turn to red altogether, but that looked like total garbage on some themes. In the end I picked invert because it was the most feasible one to work with most skins without too much dedicated coding.

It's just a silly little cosmetic effect anyway that ironically takes up twice as many lines as the core functionality.

To avoid the whole webkit stuff altogether, got any ideas how to make it universally functioning without breaking conventions?

5069641
You could just fiddle the opacity.

#chapter_container p {
transition: opacity 200ms ease, text-shadow 200ms ease;
}
#chapter_container p:hover {
opacity: 0.6;
text-shadow: 0 0 2px #fff;
}

Also the text-shadow wasn't necessary but I thought it looked nice.

5069668 Huh. That was surprisingly simple. Sometimes, thinking inside the box is suffice

Updated. I did leave out the text-shadow though, as it uses a fixed color, and I'd like to have a solution that works equally fine for all themes. Therefore the opacity thing seems like an ideal solution.

5069706
It's a shadow, so the end result is actually mostly transparent and very subtle, on all themes. But fair enough, you do what you prefer.

Edit: Also I have a challenge for you. Can you get the script to fit into 15 lines (excluding the meta block)?

5069714 I can get you one line. :V

var paragraphs = $("#chapter_container p"); $(paragraphs).click( function(){ $('html,body').animate({ scrollTop: ($(this).offset().top) - 20 }, 500); } ); $(paragraphs).hover( function(){ $(this).css({ cursor : "pointer", "-webkit-transition" : "all 200ms ease", "-moz-transition" : "all 200ms ease", "-o-transition" : "all 200ms ease", "transition" : "all 200ms ease", "opacity" : "0.5" } ); } , function(){ $(this).css({ "opacity" : "1.0" }); } );

Unless I'm missing the point here. I did try to spread the real version out a little to get the structure visible. My old scripts are hardly maintainable because of the way I wrote them back in the days.

5069796 XD
Technically not cheating!

I guess I should have phrased it '15 lines and still readable'.

Here's what I had in mind:

(function(MARGIN_TOP, SCROLL_SPEED) {
$(document).on('click', '#chapter_container p', function() {
$('html').animate({scrollTop: $(this).offset().top - MARGIN_TOP}, SCROLL_SPEED);
});
$('head').append('<style type="text/css">\
#chapter_container p {\
cursor: pointer;\
transition: opacity 200ms ease, text-shadow 200ms ease;}\
#chapter_container p:hover {\
opacity: 0.6;\
text-shadow: 0 0 2px #fff;}</script>');
})(20, 500);

It's meant to be an exercise to improve your coding abilities.

5069824 I thought it's bad convention to use direct .append() when .css() exists. But the way you bypass the const arguments is kinda clever. Never thought of it that way. Thanks!

5069861
What .css() does and what I'm doing here is very different. .css() attaches the values directly to each element in the collection (inline styles - which are discourage in websites by the way), meaning if more are added you'd have to parse them all again, and in your case you have to reset every value to get back.

What I'm doing is just adding the styles in a new stylesheet once, and then letting the browser do the all hard work. Every element that matches will automatically get the styles applied as long as they continue to match.

It's a bit more performant than having to do it with javascripts and cuts out a lot of the overhead of having to subscribe events to all your elements.

And yeah, it's a convention to wrap your script in an anonymous function, because then you don't leave your variables on the global scope where other code might mess with them, or they might mess with other's code. As a side effect you have this handly way of passing variables to it your script.

5069910 I've actually given up a long time ago on trying to append stylesheets to a site. Every time I searched for it, StackOverflow users just pointed at Stylish. Didn't think it was actually that simple.

No idea what overhead is. I've heard that word a lot of times before, and that it's usually connected with something bad, but that's about it.

5069951
Overhead is generally a bunch of stuff that has to run or that you have to worry about on top of the basic functionality. wiki

i.e Jquery has overhead in that the browser has to download and run it before getting to your code where you might use it.

It's not inherently bad, just something programmers try to minimise for performance reasons.

Thank you.

Fixed!

...after four years. I started reading more fics myself again so this fix was spawned out of personal interest more than anything, but I figured I'd publish it anyway. Scrolling through stories just seems infinitely less convenient than basically simulating turning the page of a book, ready to have the next paragraph at the very top.

As for the fix itself, should anyone care, everything jQuery is removed, now proudly using a very handy function from Fimfic's own fQuery that made this fix only take a couple of minutes.

Since I'm not a designer I still have to warn you: This will look horrible on non-dark themes (text turns white while hovering over a paragraph). Also, to access the bookmark / text-to-speech box you have to click on a paragraph twice.