[Pro] Anchors?

Can someone explain anchors to me?
The concept seems quite straightforward, but I just can’t get them to work.
As an example, in Softpress’ Esperanto template, the anchors mostly make the page jump so that the heading is on top of the navigation bar.
If you have that template, only the home button on the navigation bar works. The other four buttons, e.g. About Us, show what I mean.
Even if I just start a blank document with a simple navigation bar at the top and 3 html boxes as 3 anchors, then hyperlink the 3 items in the nav bar to the anchors, it just doesn’t work. The positioning is almost random.
What am I doing wrong here?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Perhaps I should clarify a bit more.
When I do the blank page with 3 anchors, it works in that when I click on the item in the navy bar, it’ll go to the anchor point. BUT, the nav bar doesn’t show and scrolling up is then necessary to get back to it.
What I want, is the anchor points to work, but to show below the nav bar which should always be visible.
an example of what I want is here
http://template.softpress.com/esperanto/?_ga=1.81255199.967297030.1370774831


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, I think I have solved my problem. Didn’t notice that the Smoothscroll action was out of date, so I updated to the latest version and that now works.
Also, l didn’t notice the ‘Fixed in Windows’ option in Layers, so now I have the nav bar always on top.
All’s well that ends well.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

But to answer your original question, Anchors* are a nickname for a “fragment URL” (thats my made-up term for the thing, nothing official). Most URLs refer to a page (or a folder, which is actually the same thing under the hood). When you tack a #someID to the end of that URL, it extends the URL to refer to a specific element within the page.

All browsers have the following behavior when they follow such a URL: if the element is found in the page, then the window will scroll until that element is visible (if necessary), and if the element is not found, then the window will scroll to the top. That’s why you will see the window snap to the top if you click a URL that contains just a # at the end.

Often, especially in a very tall page, or a page with many important sub-topics, anchors are used for in-page navigation, zipping you from one spot to another within the same page. (See “back to top” links almost anywhere, for example.) Technically, these in-page links take the form of just #someFragmentName in the HTML, but the browser always expands a URL based on the current page’s base URL, so it really means http://example.com/some-page.html#someFragmentName once that expansion takes place. The browser just realizes that the link is to the same page, so it doesn’t refresh the entire window before zipping to that spot.

Another use for this technique is to actually link to a portion of a tall page from another page. In this case, the browser will load the tall page (since it’s not the current page) and then zip down to the fragment specified in the anchor.

Many of the Freeway templates use the CSS Menu Action, and that Action has the following behavior – if an option within the menu is not linked to any page, then a fake link to # will be added to it so the styling works out and the menu looks correct. This will cause the browser to snap back to the top of the page, since the anchor is not valid. It is popular to use # or #top (where there is no actual element with the ID top on the page) to get the back-to-top behavior to happen. It is popular, but invalid and a bad idea. Better technique is to find the ID of an element that exists at or near the top, and anchor up to that actual element instead. If your navigation bar is at the top of the screen, then linking to #yourNavBarId instead is correct and semantic.

Walter

*Technically, any hyperlink is an anchor – that’s what the ‘a’ in <a href="whatever"> stands for.

On Jun 10, 2014, at 5:38 AM, Iain Mackenzie wrote:

Sorry, I think I have solved my problem. Didn’t notice that the Smoothscroll action was out of date, so I updated to the latest version and that now works.
Also, l didn’t notice the ‘Fixed in Windows’ option in Layers, so now I have the nav bar always on top.
All’s well that ends well.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks a lot, Walter. I understood some of that!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

While we’re on this subject, in the popup links section at the bottom of the FWP desktop, I noticed that I have two anchor options that are named exactly the same for the same page. I checked the page and there is only one anchor visible.

At one point during the page construction I deleted the anchor and then added it back. Is this simply a bug? How do I get rid of the second anchor?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that shouldn’t be possible at all. Is your page HTML5 or XHTML? No two things on any page can have the same ID, and anchors (on anything above HTML4) are id-based, so this shouldn’t be possible.

Walter

On Jun 10, 2014, at 2:04 PM, RavenManiac wrote:

While we’re on this subject, in the popup links section at the bottom of the FWP desktop, I noticed that I have two anchor options that are named exactly the same for the same page. I checked the page and there is only one anchor visible.

At one point during the page construction I deleted the anchor and then added it back. Is this simply a bug? How do I get rid of the second anchor?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, HTML5. I’ll email you a screen shot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options