read-more tag, show some content above

site?

…this is my site; a page with several ‘read/see more’ tags…

https://www.juliansimmons.com/category/film-release/

The issue is now compounded by introducing a fixed menu. The top of read-more content becomes hidden under the fixed menu; so I’ve started an additional question on page positioning in relation to fixed-menus, here https://www.ads-software.com/support/topic/move-content-to-start-below-a-fixed-menu-header?

sorry but i really cannot understand what the problem is now that i see the site.
when i click on ‘&rarr&rarr READ MORE &rarr&rarr’ it just takes me to the individual post page. no jumping up/down whatever.
did you check with other browsers? maybe a different PC?

..many thanks for checking, all browsers have the same effect, I know the problem is with my wordpress CSS – and that I don’t know how to solve the issue.

For example in the second post down on the page, ‘REALIDAD”, the last line before ‘SEE MORE’ is:

“Tit-Teddy is essential – he makes you feel so good, after this everyone will want Tit-Teddy!”, Sarah Lucas.

when you click on ‘SEE MORE’, 3 lines of the following text are then hidden by the fixed menu (before I used a fixed menu 1 line would be missing).

Is there any CSS I can use (such as when I style the read-more tag with a colour) that when I click on the read-more tag along with showing everything after it, will also show 3 lines above the read-more tag (or 50px)?

Alternatively as I’ve asked in a Q I raised here: https://www.ads-software.com/support/topic/move-content-to-start-below-a-fixed-menu-header?
how can I set the top of all posts to appear lower down on the screen directly below the fixed menu, so that the fixed menu does not hide the top of posts. At present I’m padding the top of posts, which works until I click on a read-more tag and then following material in a post is underneath the fixed menu.

..hope I’ve been clear, it’s not always easy to explain what the issue is!

aah.. i see now what you are saying. sorry missed it last time.
well there is a problem with your PHP code.
ideal scenario is that when you click on READ MORE, it should take you to say:
1. https://www.juliansimmons.com/realidad/
and NOT:
2. https://www.juliansimmons.com/realidad/#more-3508.
^ this one (2), which is what you have right now, is supposed to behave so. now if you want to stick to that then we might need to use Javascript to scroll page to top after pageload.

but the proper fix is to fix the php loop. since this is the category page (https://www.juliansimmons.com/category/film-release/), sharing the loop code within category.php would help to solve.

as for fixed headers, just change position: fixed; to position: relative; and it wont stick to top.

sorry again.. its 2am here and i guess my brains shutdown. ??

my above comment applies to the_excerpt(), but since you are using <–more–> the implementation is fine. you dont need to share category.php code.

check this link: Customize Read More.

under section, ‘Prevent Page Scroll When Clicking the More Link’:

function remove_more_link_scroll( $link ) {
	$link = preg_replace( '|#more-[0-9]+|', '', $link );
	return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

^ place this code in functions.php and you are good to go.

am guessing this will fix it.
pls close thread and mark solved once done.
lemme know in case of issues.
cheers..

…as I said in my original Q…

‘I know I can ‘disable’ the read-more action of jumping up within the post completely, but I don’t want this’

– the answer you gave of remove more link / remove more link scroll would take the user to the whole post – starting from the top.

I want to retain the default action of clicking on read-more to scroll up to what’s below it, but instead of only showing what below the read more tag, can I show a few lines above the more-tag as well?

ok. problem is that its a new pageload. so i dont know how the properties will hold. here are 2 options:

1. CSS
span[id^='more-'], span[id*='more-'] { padding: 100px; margin: -100px; }
this should work on span elements with more-* ID’s (which is how your page renders when i checked). place it in your main stylesheet, ideally style.css.

2. JQuery
check this Fiddle: JS FIDDLE
those scripts should work with any jquery library.
problem is, the jump action will work on all #hash anchor tags on your site, but once.

lemme know..

…great, CSS option 1 is mostly working!

This cut-down version has the same effect as yours, do I need the extra code you used?…
span[id*='more-'] {padding: 100px;}

The only issue now is every time I click ‘reload’ in the browser, the page moves down again, and again, each time I click ‘reload’.

So many thanks! – wondering whether to mark this Q as resolved – because of the browser ‘reload’ issue.

the css selector is supposed to work with “^”. Read this.
as for the remaining code, its technically supposed to be padding-top: 100px; margin-top: -100px;. this way, you add the extra padding and get the space, but the negative margins will prevent from any whitespaces being displayed if the more tag becomes visible somewhere.
anyways lets rely on arbitrary implementation of whatever works. try with jquery otherwise.

again, i cant replicate the reload bug on my PC. ??

another hack is for the link to jump to post instead of more. say jump to https://www.juliansimmons.com/realidad/#post-3508
instead of https://www.juliansimmons.com/realidad/#more-3508.
for this, add this code to functions.php towards te end:

function change_more_link__to_postscroll( $link ) {
	$link = str_replace("more", "post", $link);
	return $link;
}
add_filter('the_content_more_link', 'change_more_link__to_postscroll');

another option is to scroll down page by x pixels (on URL without anchors).

<?php if (is_singular('post')) {
	echo '<script type="text/javascript">';
	echo 'window.onload = setTimeout("window.scrollBy(0,500);",2000);';
	echo '</script>';
} ?>

add that code to your footer.php right before calling wp_footer().
what the function does is, if its a single post, it scrolls the page 500 pixels down after 2 seconds.

if you reverse the pixels then it scrolls back:

<?php if (is_singular('post')) {
	echo '<script type="text/javascript">';
	echo 'window.onload = setTimeout("window.scrollBy(0,-200);",1000);';
	echo '</script>';
} ?>

that scrolls it up by 200 pixels after 1 second on pageload. ofcourse we are talking bout #more-* and not #post-*.

another alternative is to throw away all this and implement smooth scrolling jquery to READ MORE tag. so that gives the user a feeling of how read reached that line.

…the CSS span solution I’d tried in Firefox, and as I said was mostly working
span[id^=’more-‘], span[id*=’more-‘] {padding: 100px;}

but it doesn’t work at all in Chrome or Safari! ??

There must be many people using a fixed-position menu, and require the -more- tag when clicked on to scroll the post up not to the very top of the browser (as then some of the page content below the -more- tag is hidden by the fixed menu), but for the post content below the -more- tag to appear lower down on the screen – directly below the fixed menu – so all content below the -more- tag is visible.

Not sure your last solutions are what I’m after. I might just have to disable the more- scroll up, and just show the whole post from the top.

isnt this is direct plug-and-play solution? :

<?php if (is_singular('post')) {
	echo '<script type="text/javascript">';
	echo 'if ((window.location.hash.indexOf("more")) != -1) { window.onload = setTimeout("window.scrollBy(0,-200);",1000); }';
	echo '</script>';
} ?>

put it in footer.php, right before calling wp_footer().
but did you even try testing this code once?
i feel bad that i tookup this thread now. anyways..

…hey that’s brilliant, you’re a genius!

many thanks shadez

Cool.. glad to know its fixed.
cheers.. ??