How to use Named Anchors for within the page navigation?

[lynnephelps]

It would be really nice on long pages, particularly FAQ pages, to be able to use named anchors (#) to move to locations on the current page.

I get a forbidden error when I have tried to do this, and it resolves to a URL like this: www.domain-name.com/mm5/#B

Are named anchors supported in Miva?

If they are, how do I code it to look for the anchor on the current page?

If they are not supported, are there any tricks to use as a work around to be able to have navigation links to move up and down the current page?

Many thanks,
Lynne

[alphabet]

Re: How to use Named Anchors for within the page navigation?

You may need to add the file path to the page before the hash.

For example, www.alphabetsigns.com/s/FAQ/#quest11

If this doesn't work, check if your mod/rewrite is causing any errors.

[Meander]

Re: How to use Named Anchors for within the page navigation?

Lynne,

Yes, named anchors are permitted and yes, I've done exactly the same thing for the FAQ pages on my site (www.premierpersonalization.com). Look under "Customer Service" and then "Frequently Asked Questions".

I created a new page template to be used for just FAQs and then created several "products" for each of the FAQ categories I wanted (account FAQ, Design FAQ, product FAQ, etc). In my navbar, I manually adjusted the page displayed to my FAQ page template rather than the standard PROD template.

In my FAQ template, I have a standard top anchor:

<a name="Top">

In each of my FAQ "products" I have the following to go back to that anchor:

<a href="merchant.mvc?Screen=FAQ&Product_Code=FAQ-PhotoDesign#Top">

(note that the product code in red changes for each FAQ "product")

[Kent Multer]

Re: How to use Named Anchors for within the page navigation?

I ran into this problem just a week or two ago. The problem with including a complete URL in the link is that it makes the browser redraw the entire page. Normal in-page links, such as

<a href="#Top">

, don't work when there's a BASE tag on the page, which there normally is in Merchant.

I did a quick Google search, and found a solution using JavaScript. Try this:

<a href="javascript:window.location.hash = 'Top';">Top of page</a>

[Korey]

Re: How to use Named Anchors for within the page navigation?

I ran into this problem just a week or two ago. The problem with including a complete URL in the link is that it makes the browser redraw the entire page. Normal in-page links, such as

<a href="#Top">

, don't work when there's a BASE tag on the page, which there normally is in Merchant.

I did a quick Google search, and found a solution using JavaScript. Try this:

<a href="javascript:window.location.hash = 'Top';">Top of page</a>

Tried this but it opened a blank page with the word "Top" printed in the upper left hand.

Anyone else found a solution without having to reload the entire page?

[Meander]

Re: How to use Named Anchors for within the page navigation?

The solution I posted back on the 22nd does not reload the page (that I can see).

I have the #Top anchor in the PAGE template for my FAQ pages and then the calling href in the body of my "product" descriptions.

The href's go from the questions listed at the top of the page to the specific answer below. The return to top goes back to the top anchor as defined on the page template.

[Korey]

Re: How to use Named Anchors for within the page navigation?

The solution I posted back on the 22nd does not reload the page (that I can see).

I have the #Top anchor in the PAGE template for my FAQ pages and then the calling href in the body of my "product" descriptions.

The href's go from the questions listed at the top of the page to the specific answer below. The return to top goes back to the top anchor as defined on the page template.

Looks like it's reloading the whole page. Here's the link on your FAQ's:

premierpersonalization.com/mm5/merchant.mvc?Screen=FAQ&Product_Code=FAQ-Account#Why

[Meander]

Re: How to use Named Anchors for within the page navigation?

Well then, it must be loading pretty quick!

I waited until I knew I was in the middle of my flash movie at the top of the screen and then scrolled down and clicked on one of the "Return to top" links. Page went back to the top and the flash movie did not restart from the beginning. So that's why I said it didn't look like the whole page was reloading.

[Bruce - PhosphorMedia]

Re: How to use Named Anchors for within the page navigation?

It loads quickly because most of the page content is already cached on your local machine.

[Korey]

Re: How to use Named Anchors for within the page navigation?

I think part of the problem is the basehref being on every CTGY page

<base href="&mvt:global:basehref;">

There doesn't appear to be a way to override the basehref on a per category basis?

[Bruce - PhosphorMedia]

Re: How to use Named Anchors for within the page navigation?

Even if you could, you would probably break something else such as image paths which might be relieing on the base ref.

If page reloading is really an issue, a better idea would be to use CSS show/hide features. Essentially, you would LOAD all content, and just expose certain parts based on CSS rules.

[kayakbabe]

Re: How to use Named Anchors for within the page navigation?

Bruce,
what a great idea, it would look really 'sexy' too!

[Korey]

Re: How to use Named Anchors for within the page navigation?

For some reason when I put in the entire URL it doesn't reload the page. After all that...

[RayYates]

Re: How to use Named Anchors for within the page navigation?

There are some limitations to the way browsers use anchors that especially impact dynamic pages. The browser keeps track of the page url; any url that is not an exact match causes a refresh.

<form> and <base> are contain partial urls and do not contain the complete long version of the URL needed to generate the page.

You must use a complete url with all the parameters passed after merchant.mvc. If you use #anchor with any url other than the long version, you will get a page refresh or the wrong page.

This is why you can not normally use anchors on pages that result from a form post/get. (e.g. the url does not contain all the parimeters needed to generate the page.)

The only way I found to reliable get anchors to work in those conditions is to set a javascript variable

<javascript>
var pagetop = '(the complete url needed to display the dynamic page with all paramiters)';

then force a page refresh during an initilization function.

function init() {
window.location = pagetop;
}

Then when each #anchor is clicked, it does NOT get redirected to <base href="some path"> or <form action="some path">

[srmb]

Re: How to use Named Anchors for within the page navigation?

I just figured this one out for a new FAQ page that I created. Replace names in all caps with your information:

&mvt:global:sessionurl;Store_Code=STORECODE&Screen =SCREENNAME#ANCHORLINKNAME