Tuesday, December 07, 2004

Using Web Author to Insert Internal Bookmarks

Internal bookmarks let you jump to specific sections of a page. They are typically used when you need to:

  • Jump from one end of the page to another. You see this as "Back To Top" links within long pages.
  • Link to a specific location on another page. For example, you may wish to bring the visitor directly to the Discounts section located somewhere in the middle of the product's Pricing page.

Let's see how bookmarks are managed from the HTML Placeholder Control using MCMS' Web Author. Take for example, the case where you need to implement a "Back To Top" link.

Defining the Bookmark

First, we will define the bookmark (sometimes called the internal anchor point). In our example, that will be the top of the page. Somewhere at top of the page, we will specify the the spot that the visitor is brought to when he clicks on the "Back To Top" link. To specify this area in Web Author, simply highlight a space at the top of the page and click on the Insert HyperLink button on the Authoring Toolbar.

Web Author requires you to select something (even if its just a space) before the Insert HyperLink dialog appears. Otherwise, you will get a "There is no selected text or object for hyperlinking" alert.

In the Web Page dialog, enter the name of the bookmark in the Define As Internal Anchor Point section. Here, we name the bookmark "Top".

Inserting the "Back To Top" Hyperlink

Next, enter the words "Back To Top" somewhere at the bottom of the page. Highlight the text and click on the Insert Hyperlink button of the Authoring toolbar again.

This time, in the Hyperlink Address field, enter "#" followed by the name of the bookmark defined earlier. e.g. #Top

To point to a bookmark that sits on another page, simply enter the URL of the page, followed by the bookmark. e.g. http://www.mysite.com/myOtherPage.htm#Top

And you're done!

Linking to Bookmarks on Framed Pages

Most of the time, this technique will work. It may not work when hyperlinking to a bookmark on another page that is framed. The hyperlink will lead the visitor to the framed page, but not to the specific bookmark. That's because the information about the bookmark does not propagate to the child pages within the frameset.

To get around this, use a javascript! The script will:

1. look at the URL of the browser's address bar
2. detect if it contains a link to a bookmark
3. if there is a bookmark, it jumps to it.

The following script is embedded within the [head] tags of the template file containing the page/posting (not the frameset) and called from the javascript OnLoad() event of the page.

function CheckForBookmarks()

{
//check for bookmarks
var bookmark = '';
var url;
var arrUrl;
url = window.top.document.location.href;
arrUrl = url.split('#');
if(arrUrl.length>1)
{
bookmark = arrUrl[1];
}

//jump to the bookmark
location.href='#' + bookmark;
}
This workaround ensures that bookmarks work even for framed pages where outerscript files are applied.

Happy Bookmarking!

2 Comments:

At 8:51 PM, Anonymous Anonymous said...

I have a problem with bookmarks, i have one page which contain hyperlinks with bookmarks to a second page. When i click on any link it takes me to the correct bookmark.

But the problem is since all the points are pointing to the same html (with different bookmarks) all the links appear as purple and the user cannot figure out which link he clicked.

I hope you got my point.

Regards,
Nadir

 
At 2:05 PM, Blogger Mei Ying said...

In order for the links to be colored differently, the URLs have to be different. I onced worked around this by adding a querystring to the URL just to differentiate them. Let me know if this works.

 

Post a Comment

<< Home