Sunday, January 1, 2012


Make a jump break jump to where you want to

Jump breaks are great, but the jump target is not always what you want: exactly at the place where <!--more--> was. Maybe you'd like to show the whole post instead. Here is a simple tip to alter the target position. You have to use the html editing mode for these hacks to work.

Somewhere in post before the <!--more-->

Just put <a name="more"></a> where you want the jump target (before <!--more-->). It can be at the start of the post text, for example.

Start of post including title

Maybe you want to go higher than start of the post text. Put this at the start of the post, this one includes post title, too (and this post is a demonstration of this variation):

<a style="position:absolute;top:-4em;" name="more"></a>

Start of page

<a style="position:absolute;top:-99em;" name="more"></a>

Just play around with these a while, and I think you'll get the drift.

Strictly speaking, adding another #more target to the page produces invalid html: there's duplicate anchor name in page and html validators will complain about that. But it works: browsers just use the first anchor they find, no complaints. :)
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Cédric said... [reply]

I was looking fort that for a long time ! great !!! I will try today on my blog :

MS-potilas said... [reply]

@Cédric Hi, thanks. The "hacked" jump break on your blog's newest post works fine :)

Shelly said... [reply]

Hi, I know this post is old so hopefully you'll see my comment.
I'm trying to figure out if there's a way to add a jump break to one of my pages, like my "about" page. Or is a jump something that can only be done in regular posts? I'm hoping you might know some trick to make it work. :)

MS-potilas said... [reply]

@Shelly Hi,

page is opened with all text visible, you cannot open first only a part of the text and then click "read more" - if you are using just one page. You can do it with two pages, and you can set so called "named anchor" (for example <a name="more" />) in the second page, so you can make a link that positions the top of the window at that anchor.

Joan said... [reply]

Thanks, I've just started blogging and not only was your hack easy for me to understand, it worked wonderfully. :)

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: