Help- Making the page jump to the comic

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

Moderator: Help Desk Team

Help- Making the page jump to the comic

Postby Zarzaliel » October 27th, 2018, 6:26 am

Hi,
I am making a comic and I have absolutely no idea of how coding works, which isn't a significant problem because default layouts, however because of how my comic is layed out it becomes really annoying to have to scroll down, so I was wondering if there is a way to make the page automatically jump to center the image.
To clarify, the comic is made of individual panels in the 16:9 ratio, so when the image is centered it takes the whole screen. But you have to scroll down.

It shouldn't be very hard, I hope.

Thanks in advance.


Here's the link to the comic: http://nil-canticumbellum.smackjeeves.c ... -0-page-1/
User avatar
Zarzaliel
 
Posts: 3
Joined: October 13th, 2018, 1:21 pm

Re: Help- Making the page jump to the comic

Postby eishiya » October 27th, 2018, 11:25 am

The easiest way is to have all your nav buttons link to #comic_area, the container of the comic page image. That way, people entering the site for the first time will have to scroll down (which is good since they can see your navigation, so they can get to the archive, etc easily if they want), but when they're binge-reading the comic, they'll skip past the header right to the page.

To do that, just add #comic_area to all of your {NAV_NEXT}, {NAV_PREV}, {NAV_FIRST} and {NAV_LAST} links, e.g. this bit
Code: Select all
<a href="{NAV_FIRST}"><img src="http://www.smackjeeves.com/templates/modern/images/nav_first.png" alt="<< First" /></a>

would become
Code: Select all
<a href="{NAV_FIRST}#comic_area"><img src="http://www.smackjeeves.com/templates/modern/images/nav_first.png" alt="<< First" /></a>


You could also add the same code to your archive links if you wanted to, but I don't think that's necessary, since scrolling is usually only a bother while binge-reading via the next/prev buttons.

This method can't be used with the jumpbox, but as with the archive, it's not necessary there.

A big problem with this method is that if you use the default keyboard navigation option, it won't work with this. To get around that, you'd need to disable keyboard navigation on your comic, and use custom keyboard navigation code (here's code you can copy+paste), and add #comic_area to the {NAV_NEXT} and {NAV_PREV} in that code.
Image
User avatar
eishiya
 
Posts: 9665
Joined: December 5th, 2009, 11:17 am


Return to Template Development & Support

Who is online

Users browsing this forum: Baidu [Spider], Bing [Bot] and 4 guests