Suggestions on modifying Anchor

HTML & CSS
1

Beneath each of my Articles, I have a Comments section for Members to leave their thoughts.

I have added an HTML Anchor to the top of the Comments section, so that when a Member logs in, or clicks on the “Leave a Comment” link, he/she is taken directly to the Comments section instead of having to possibly scroll down several pages.

This is working okay, but I could use some advice to make it better.

The problem is that the Anchor scrolls in such a way that the user can’t see any of the Article, and I think this could be confusing because the user might think they went to another page or somewhere that they don’t want to be.

Here is a screenshot of what I mean…

I think it would better if part of the last paragraph was also displayed to give the user some degree of “orientation” so they know they can leave a Comment, but that they are still on the Article Page, if you follow me?!

Here is what I think looks better…

So on to my question…

What would be the most practical way to mark up my Articles so that I can get the effect I just described above?

All of my Articles are stored in my database, but include all of the HTML along with the Content. So this is really just a question of what is the best and most consistent way to apply the Anchor to the end of my Article instead of here…


	<!-- ****************************-->
	<!-- Attempt to Display Comments.	*-->
	<!-- ****************************-->
	<div id="boxComments">

Hope all of this makes sense?! :-/

Thanks,

Debbie

2

Perhaps you should use something like jQuery ScrollTo, which will mean the page will scroll down to the anchor, making it clear that this is part of the same page. (It’s a nice effect. Here’s an [URL=“http://grigorlawyers.com.au/”]example.)

Or these might give you some ideas:

http://leaverou.me/2011/05/change-url-hash-without-page-jump/

3

Thanks, but I don’t do JavaScript. :wink:

Or these might give you some ideas:

http://leaverou.me/2011/05/change-url-hash-without-page-jump/

Except they all seem to have limited browser support… :frowning:

I know this is crude, but as a test I just added a hook on my last paragraph like this…

<p id=“here”>In scelerisque turpis vitae velit vehicula tristique. Nunc convallis, lacus id pellentesque venenatis, massa lectus dapibus libero, ut condimentum justo dolor eu quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas in odio felis, ut pharetra risus. Praesent vitae magna quis dolor porta luctus. Donec dictum gravida odio, id volutpat nunc tempus in. Nunc vehicula scelerisque consectetur. Aenean at massa erat. Aliquam gravida neque in metus mattis at interdum arcu aliquet. Vivamus a ligula nec leo tincidunt euismod in eget arcu. Maecenas neque tellus, consectetur vitae semper et, suscipit et felis. Nulla facilisi. Quisque cursus nunc non est viverra posuere.</p>

I really try hard to support all browsers, because it is lame when you have to say “This website does not work with <browser><version>”

Sure seems like there should be an easier solution out there using pure HTML and/or CSS…

Debbie

4

I guess my idea above isn’t a good one, because sometimes Articles have a “Reference” and "End Notes section.

If either of those exist then I would want the last section immediately above the Comments section to be partially shown, so that once again, the user can see that they are still on the Article page, but just down in the Comments section.

I guess I need to put some spacing between this…


	<div id="boxComments">
	<h3>What Do You Think?</h3>

…and the top of the View Port.

Debbie

5

Then you’re options are very limited. I would do it using javascript and scrollIntoView()

Pretty simple and straight forward.

6

Yes, not a useful attitude, really. It’s easy to add to a site to provide enhanced behavior for most users, and solves a lot of issues that CSS can’t handle.

7

There is life beyond JavaScript…

As far as “things CSS can’t handle”…

In “article.php” I have added one new line of HTML (first line below)…


	<div id="here"></div>
	<div id="boxComments">

And then I added this one style…


/*******************/
/* COMMENTS Styles */
/*******************/
#here{
	margin: -200px 0 0 0;
	height: 200px;
}

And my problem is fixed using JUST HTML and CSS… :wink:

Now when a user clicks on the “Add a Comment” link at the page top, they are taken to the “Add a Comment” section but will also - on average - see either the a.) Last Paragraph, or b.) Footnotes Section so it is self-evident that they are still on the same page.

Proving once again that you do not need JavaScript to have a usable and aesthetically-pleasing website, but to each his/her own…

Thanks,

Debbie

8

But now you have changed the functionality you described in your 1st post. In your 1st post you said the anchor scrolls to a location in your page. With your solution you are now jumping to a location in the page. There is a big difference between jumping and scrolling to a location in a page.

If you want scrolling then you need javascript. If you are happy with jumping, then you don’t need javascript :slight_smile:

This is just another example of where you mean one thing and you post something else :wink:

9

Well, you’ve now given focus to a useless, empty div. Usable? :stuck_out_tongue:

10

Life is about making decisions and compromises.

And for what it is worth…

  1. My solution isn’t any more “funky” than the solutions in the links you provided

  2. My solution is supported by all browsers

  3. My solution works with JavaScript turned off

  4. My solution isn’t that bad semantically, because I DO want my Anchor to be BETWEEN the Last Paragraph/Foot-Notes and the Comments Section.

Not saying the links your provided don’t have merit, but in the end, my solution was SIMPLER and BETTER SUPPORTED and any downsides are really negligible in my opinion.

Besides, it gives you something to give me a hard time on… :wink:

Debbie

11

I don’t see how you can say your solution is better because your solution still doesn’t do what you asked for in your 1st post. You have changed the functionality from scrolling to jumping. You are comparing apples with oranges.

If you originally posted what you really wanted you might have got a solution much quicker. As posted earlier, if you want scrolling, as you originally posted, then you need javascript. If you are happy with jumping, like you have now changed to, then you don’t need javascript. It really can’t be simpler than that.

In the future, consider posting what you really want in your 1st post instead of making things up or changing things as you go along :slight_smile: