WiscWeb CMS - Linking to Anchor Tags on Other Pages

This document shows how to use Linking to Anchor Tags on Other Pages on your web.

WiscWeb CMS - Linking to Anchor Tags on Other Pages

Linking to Anchor Tags/Jump Marks on Other Pages

When you want the CMS system to create a link from the Text Area of one page (the Source page) to a specific point in the Text Area of another page of your site (the Destination page), you use what the CMS calls Jump Marks (called Anchors in many other systems). This is different than just telling the CMS to create a link from one page on your site to another page or to create a JumpMark from one spot on a page to another spot on the same page. What we will show you in this KB document is how to get the link to go to a specific spot on a different page.

NOTE: These steps require that you have a good understanding of HTML so that you can read the raw HTML to find the link you must modify (in section 3 below). Some CMS editors may not have authorization to use the Source Code mode of the Text Editor. These instructions will not work without access to Source Code mode.

There are three parts of the process:

  1. Put a JumpMark in a Text Area on the page to which you want the link to go, that is, on the Destination page.
  2. Put a Link in a Text Area on the Source page.
  3. Modify the Link to include the JumpMark to get to the specific target location on the Destination you want.

1. Create the JumpMark on the Destination page first

There are several things to remember from this section that will be used in the next two sections:

  1. The link text you select for the link itself. You will be looking for this text in the raw HTML in section three below.
  2. The Text Area content class ID number -- You will perform a Search for this ID number in the second section below to create the Link. Easiest way to find it is to hover your mouse cursor over the open/close Reddot. The Info popup will show the Text Area ID number. The advantage of using the ID number is that you may have similar content text or headline text and a search for them may have multiple results. ID numbers, however, are unique--there will never be duplicate ID numbers, so you can be confident that an ID match is exactly the content area you want.
    Linking anchor finding text area id
  3. The name of the JumpMark you enter -- You will use the name in the last section below when you modify the Link.

In the examples below we show only those screen shots that are relevant to Links and JumpMarks and searching for them. If you need some help with working with Text Areas, please see this KB document:
Using the Text Editor.

Create the JumpMark
  1. Open the Destination page.
  2. Open the Text Area that contains the text you want to mark. Note now the content class ID number.
  3. In the Text Editor window that opens, select the text at the spot where a browser should go when a visitor clicks on the source page link.
  4. Click on the Define Jump Mark icon on the Text Editor toolbar.
    linking anchor text editor jump mark icon
  5. Type in the name for the JumpMark. Note now the name you type.
    linking anchor define jump mark
  6. Click OK.
  7. Close this page.

2. Create the Link on the Source page

  1. Open the Source page.
  2. Open the Text Area that contains the text you want to mark.
  3. In the Text Editor, select the text you want to Link to the JumpMark. Note now this text.
  4. Click on the Link icon on the Text Editor toolbar.
    linking anchor text editor toolbar link icon
  5. On the resulting Insert or Edit Link window, click on the Select button.
    linking anchor insert edit link window
  6. Search for the Text Area with the JumpMark in it you created in the first section above. You add a search criteria for Page ID, which adds a new search field.
    linking anchor search add content id search field
  7. Enter the Page ID in this field and click on Start
    linking anchor search content id
  8. Select the result by clicking on its name in the Search Result window
    linking anchor search content id result
  9. You'll return to the Insert or Edit Link window. Click OK to complete the linking process.
    linking anchor selected search result
  10. Remain in the TextEditor!

3. Modify the Link to include the JumpMark

To review, since you will need to edit a link in raw HTML, links are in this format:

<a href="url">linkname</a>.

Adding what HTML calls an anchor (JumpMark in the CMS) results in this format:

<a href="url#anchor">linkname</a>.

The CMS system will create in section two above everything but the "#anchor" part in the Link. The "url" part will be mostly gobbledy-gook to you. Here you modify the Link to add the "#anchor" part after the gobbledy-gook.

  1. Click on the Source Code button at the bottom of the Text Editor window.
    linking anchor text editor source code mode
  2. Locate the link you need to edit in the raw HTML code. You want to look for the "linkname" that matches the text you selected as the Link text.
    linking anchor source code edit
  3. Add the anchor tag (the JumpMark name from section one above) to the end of the link for the page. It will look like this:
    <a href="[ioID]55A81BA9FC9D4AF5A2D82E42AB1C85E2#Contacting">WiscWeb CMS</a>
    In the example "#Contacting" is the anchor tag/JumpMark name and "WiscWeb CMS" is the text that is linking to the JumpMark (i.e., is the text in the Text Area on the Source page you selected before creating the Link).
  4. Be very cautious here! While writing this KB the author lost content in a Text Area because the CMS system treated the text entered while in Source Code mode as if it was in Design mode and all of the HTML coding was converted from HTML to a format for displaying in a web browser. A word to the wise!
  5. Click OK to Save and Return to the page.

You should, of course, test and confirm that the link works as you expect it to. Be wary of typos--the Anchor/JumpMark will not work if one character is incorrect.




Keywords:wiscweb cms templates content classes anchor tag jumpmark jump mark link page site web   Doc ID:26395
Owner:Ryan H.Group:WiscWeb CMS
Created:2012-09-10 10:14 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0