JS: Auto-jump to comic page for fast-reading

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

JS: Auto-jump to comic page for fast-reading

Postby paragoned » August 22nd, 2010, 1:32 pm

This isn't for everyone.
And depending on the template layout or the comic, it may not even be useful. Like... at all. But here it is anyway.

Explanation/Rant:

Spoiler! :
With some webcomics I've been reading, I realized that a lot of the pacing between pages gets lost when I click "NEXT" and I have to scroll down through all of the website's ads, content and junk. By the time I get to the actual page, the mood/setting that was established in the last panel of the previous page has been diluted, or even disappeared.
First page: John's about to get stabbed! Oh noes!
Second page: Aw, Suzy looks so cute in that top banner. The Walking Dead? Ooh, maybe I'll read that next. Scroll down... Wait, what happened? John?
[I used to read my webcomics on a TabletPC in portrait mode, so I really wasn't used to this.]

Apart from my apparent ADD, I'm also using a layout with a fairly large top banner that I refuse to change for various reasons. But because I don't like having my reading interrupted by webpage junk, I'm assuming neither do other people. So I devised a way for visitors to skip all the webpage stuff when browsing through the comics (without a template overhaul - or downloading the archive).

In Comic Page Layout.
The anchor -- placed before the comic page, possibly somewhere near {COMIC_TITLE} :
Code: Select all
<a name="cpage"></a>

And AFTER the img tag for the comic page, or {comic_image.FORMATTED}:
Code: Select all
<script type="text/javascript">
if (document.referrer.search("{NAV_NEXT}") > -1 || document.referrer.search("{NAV_PREV}") > -1) location.href="#cpage";
</script>


The code is really simple. The script checks if you just came from the previous page or the one after. If either case is true, then it automatically scrolls down to where you put the anchor code (presumably at the start of the comic page), and bypasses the rest of the site before it. Essentially making it seem like you're reading through the comic pages themselves and not through a webpage with the comic on it.

A few notes though.
You probably won't want to use this if you rely on ads, links, or other non-comic-related stuff, since this will limit their exposure (by a negligible fraction) --- they'll still load normally, but chances are, people reading through your comic won't see them unless they decide to scroll past the comic, or finish going through all your pages.

I recommended places to put the code, but you can really put them anywhere on the page. You can put the anchor wherever you want the page to jump to. As for the javascript, I recommend putting it after the img tag because it won't work if put too early on the page (it will try to scroll where the page probably hasn't finished loading yet, and will do nothing) and putting it too late would give you a delay depending on how fast the page loads. That said, people with fairly slow connections may still experience a delay before it jumps (or it may not jump at all if they've started to scroll manually.)

Finally, you can change "cpage" to anything in case you're already using that name for something else (possibly in your stylesheet.) Just make sure to change both instances.
Image Image
User avatar
paragoned
 
Posts: 35
Joined: August 18th, 2006, 2:27 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » August 22nd, 2010, 1:42 pm

Wouldn't setting the Next link to "{NAV_NEXT}#cpage" also do this? No need to check referrers with JS then.
Image
User avatar
eishiya
 
Posts: 9921
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby paragoned » August 22nd, 2010, 2:20 pm

eishiya wrote:Wouldn't setting the Next link to "{NAV_NEXT}#cpage" also do this? No need to check referrers with JS then.

Yep. You're absolutely right.
This is more for people using the {comic_image.FORMATTED} code. (Or rather to make it ALSO work with the nav there.)
Been working on making my page iPhone-friendly and decided to remove the regular link nav (that, or make them huge), so I had to improvise. I admit I forgot that everyone else had that other option.

Oh well. I said it's not for everyone. ^_^
Image Image
User avatar
paragoned
 
Posts: 35
Joined: August 18th, 2006, 2:27 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » August 22nd, 2010, 2:51 pm

And I forgot that the {comic_image.FORMATTED} does the linking too, and most people aren't going to bother replacing it with <a href="{NAV_NEXT}#cpage">{comic_image.SRC}</a>, so we're even.

I think this is an awesome idea, though. Not something I'd use (I keep my headers small and prefer ads to be between the author's comments and the reader comments), but I can think of many cases where this would be useful.
Image
User avatar
eishiya
 
Posts: 9921
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby The_mad_one » May 7th, 2013, 4:44 pm

eishiya wrote:Wouldn't setting the Next link to "{NAV_NEXT}#cpage" also do this? No need to check referrers with JS then.

Hi, I was trying to achieve exactly this, and first tried to do what you're describing. But in the current day and age (I realise this is an old topic), there's a problem with this solution. Smack Jeeves has the option to hide comic navigation when you're on the first or last page (e.g. no next and latest button on the last page). Sadly, it tries to be too clever by checking for your exact reference path when it makes the decision.

So when you add #cpage behind {NAV_NEXT}, it no longer hides the navigation.


The script solution works absolutely brilliantly though! It's exactly what I was trying to accomplish, thanks!
Image
User avatar
The_mad_one
 
Posts: 52
Joined: September 5th, 2008, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » May 7th, 2013, 5:33 pm

The_mad_one wrote:
eishiya wrote:Wouldn't setting the Next link to "{NAV_NEXT}#cpage" also do this? No need to check referrers with JS then.

Hi, I was trying to achieve exactly this, and first tried to do what you're describing. But in the current day and age (I realise this is an old topic), there's a problem with this solution. Smack Jeeves has the option to hide comic navigation when you're on the first or last page (e.g. no next and latest button on the last page). Sadly, it tries to be too clever by checking for your exact reference path when it makes the decision.

So when you add #cpage behind {NAV_NEXT}, it no longer hides the navigation.

Huh, I didn't know that! Thanks, I'll keep it in mind. I've never played with auto-hidden navigation, so I never realized how picky it is.
Image
User avatar
eishiya
 
Posts: 9921
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby mitchellbravo » May 7th, 2013, 6:20 pm

I was just thinking about this the other day, didn't realize someone had already found a solution. Thanks for reviving the thread, T_m_o! Now I can implement this.

edit: Just tried it, and I think I actually have a small enough header that I can get by without it. But hopefully some other people will get some use out of the newly awoken thread anyway.
oly: we draw stories about imaginary people
Image
Do not feet infants to honey under one year of age.
me: Posh, Baby, Sporty, and Scary Ham
robybang: Together they're Spiced Ham
User avatar
mitchellbravo
 
Posts: 7134
Joined: October 11th, 2010, 1:31 pm
Location: too tired

Re: JS: Auto-jump to comic page for fast-reading

Postby The_mad_one » May 8th, 2013, 3:34 pm

Okay an addition to my fiddling:

It turns out the hidden navigation is even more aggressive than I thought. It removed the entire script on the first and last page, simply because the script merely contained the variables {NAV_PREV} and {NAV_NEXT}. The solution (Or at least a solution) to make it work on the first and last page is to seperate them into two scripts.

Spoiler! :
<script type="text/javascript">
if (document.referrer.search("{NAV_PREV}") > -1)
location.href="#skipbanners";
</script>
<script type="text/javascript">
if (document.referrer.search("{NAV_NEXT}") > -1)
location.href="#skipbanners";
</script>


This seems to work fine now. On the first page, it obliterates the upper script which has NAV_PREV in it, but that's okay because I only want it to check for NAV_NEXT on the first page. Same thing the other way round.
Image
User avatar
The_mad_one
 
Posts: 52
Joined: September 5th, 2008, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 4th, 2018, 4:36 pm

Hi!
I'm new to smackjeeves & only figured out how to implement a fan-made theme & edit simple stuff like nav stuff & add a jump to-box
I tried to do this but failed? xD I only know a (littlest of) little bit of coding so i hope i can find some help for an amateur like me xD

So what I did was
I put <a name="cpage"></a> after COMIC TITLE
and then put the javascript code after the comic image (to be exact, i tried after END comic_image and inbetween END comic_image & comic image. FORMATTED (well i had to try out things & hope for luck if i didn't have enough knowledge xD)

So can someone tell a stupid person like me how it works step by step? D: Would be very happy & grateful!
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 4th, 2018, 5:56 pm

chifayee wrote:Hi!
I'm new to smackjeeves & only figured out how to implement a fan-made theme & edit simple stuff like nav stuff & add a jump to-box
I tried to do this but failed? xD I only know a (littlest of) little bit of coding so i hope i can find some help for an amateur like me xD

So what I did was
I put <a name="cpage"></a> after COMIC TITLE
and then put the javascript code after the comic image (to be exact, i tried after END comic_image and inbetween END comic_image & comic image. FORMATTED (well i had to try out things & hope for luck if i didn't have enough knowledge xD)

So can someone tell a stupid person like me how it works step by step? D: Would be very happy & grateful!

It looks like the problem is that in the JavaScript code you have "skipbanners" as the name of the anchor to skip to, but your anchor has name="cpage". The two names have to match. The code is working in that it's trying to send the reader to the right place, but "skipbanners" doesn't exist so it does nothing.
Image
User avatar
eishiya
 
Posts: 9921
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 5th, 2018, 7:16 am

eishiya wrote:It looks like the problem is that in the JavaScript code you have "skipbanners" as the name of the anchor to skip to, but your anchor has name="cpage". The two names have to match. The code is working in that it's trying to send the reader to the right place, but "skipbanners" doesn't exist so it does nothing.


It's also not working. :/
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 5th, 2018, 12:23 pm

chifayee wrote:
eishiya wrote:It looks like the problem is that in the JavaScript code you have "skipbanners" as the name of the anchor to skip to, but your anchor has name="cpage". The two names have to match. The code is working in that it's trying to send the reader to the right place, but "skipbanners" doesn't exist so it does nothing.


It's also not working. :/

It's working for me, it skips past the header:
Image

What behaviour are you expecting, and what behaviour are you getting?
Image
User avatar
eishiya
 
Posts: 9921
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 6th, 2018, 12:49 pm

eishiya wrote:
chifayee wrote:
eishiya wrote:It looks like the problem is that in the JavaScript code you have "skipbanners" as the name of the anchor to skip to, but your anchor has name="cpage". The two names have to match. The code is working in that it's trying to send the reader to the right place, but "skipbanners" doesn't exist so it does nothing.


It's also not working. :/

It's working for me, it skips past the header:
Image

What behaviour are you expecting, and what behaviour are you getting?


I expect the jumping past the header by clicking the comic picture or the next page link but apparently both don't work on my side.. because of my browser?... i just tried it with firefox & edge, both don't work.. or did i miss some important java update?
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 6th, 2018, 1:08 pm

chifayee wrote:I expect the jumping past the header by clicking the comic picture or the next page link but apparently both don't work on my side.. because of my browser?... i just tried it with firefox & edge, both don't work.. or did i miss some important java update?

Works in Firefox for me.
Java is completely unrelated to JavaScript. JavaScript isn't something you need to update, the JavaScript engine is updated along with your browser. In any case, none of the features used by this script are very new, so you shouldn't need new browser versions for this script to work.

Can you check that JavaScript isn't disabled or blocked in your browsers? Since this code uses referrers to check whether to skip the headers, could it be that maybe your browsers are both set to not send that information? Have you ever tweaked the privacy settings or installed any privacy-protecting add-ons? Those might send empty referrer headers, which would prevent this script from working.

When you click, does "#cpage" show up at the end of the URL (perhaps after a small delay)? If it does, then the code is working, and something else is the problem. If it doesn't show up, that means the code isn't working. Knowing this should help narrow down the problem.
Image
User avatar
eishiya
 
Posts: 9921
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 6th, 2018, 1:30 pm

eishiya wrote:[
Works in Firefox for me.
Java is completely unrelated to JavaScript. JavaScript isn't something you need to update, the JavaScript engine is updated along with your browser. In any case, none of the features used by this script are very new, so you shouldn't need new browser versions for this script to work.

Can you check that JavaScript isn't disabled or blocked in your browsers? Since this code uses referrers to check whether to skip the headers, could it be that maybe your browsers are both set to not send that information? Have you ever tweaked the privacy settings or installed any privacy-protecting add-ons? Those might send empty referrer headers, which would prevent this script from working.

When you click, does "#cpage" show up at the end of the URL (perhaps after a small delay)? If it does, then the code is working, and something else is the problem. If it doesn't show up, that means the code isn't working. Knowing this should help narrow down the problem.



Well I have WebAfee Webadvisor & Malwarebytes on..
Can't find any settings with Javascript in the firefox browser where i could disable it so i guess i didn't disable it? I tried disabling Protection from Tracking-Scripts but it also doesn't work after it.
And nope, #cpage doesn't show up no matter how long I wait, even if I set the website as secure.
I asked other people to try it out and it also doesn't work for them. :/
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Next

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests