Anchoring to Specific Elements in Canvas
Author: Phil Chambers | Anchors Elements
In this tutorial we are going to address one of the most commonly used features of any website: linking. Instead of linking to external pages, we are going to set up a link within the page so we can quickly jump to that part with one click.
To do this, we are going to need to use one element and one attribute:
<a> and <id>.
Linking to an element from within a page
This works quite well when you have a lot of text and multiple headings so let’s link to one of the headings in this example.
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis commodo odio aenean sed adipiscing diam donec adipiscing. Ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Lectus mauris ultrices eros in cursus. Gravida neque convallis a cras semper auctor neque vitae. Amet cursus sit amet dictum. Nulla facilisi etiam dignissim diam quis enim lobortis. Tristique et egestas quis ipsum suspendisse. Nibh mauris cursus mattis molestie a iaculis. Malesuada fames ac turpis egestas sed. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Tincidunt eget nullam non nisi est sit. Viverra suspendisse potenti nullam ac tortor. Cras pulvinar mattis nunc sed blandit libero volutpat. Ornare aenean euismod elementum nisi quis eleifend. Lectus arcu bibendum at varius vel pharetra vel. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium.</p>
<h2>Second</h2>
<p>Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Id porta nibh venenatis cras sed felis eget. Habitasse platea dictumst vestibulum rhoncus est. Enim eu turpis egestas pretium aenean pharetra magna ac placerat. Tellus orci ac auctor augue mauris augue neque gravida. Vitae ultricies leo integer malesuada nunc vel. Faucibus turpis in eu mi bibendum. Fames ac turpis egestas maecenas. Ac odio tempor orci dapibus. Lectus nulla at volutpat diam ut venenatis. Enim sit amet venenatis urna. Lectus quam id leo in vitae turpis massa sed elementum. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Libero id faucibus nisl tincidunt eget nullam.</p>
<h2>Third</h2>
<p>Nulla aliquet enim tortor at. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Sapien pellentesque habitant morbi tristique senectus et. Tortor aliquam nulla facilisi cras fermentum odio. At lectus urna duis convallis convallis. Sem et tortor consequat id porta nibh. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Lorem sed risus ultricies tristique nulla aliquet. Tempor commodo ullamcorper a lacus. Turpis in eu mi bibendum neque egestas congue. Euismod quis viverra nibh cras pulvinar. Enim facilisis gravida neque convallis a cras semper. Egestas sed tempus urna et pharetra pharetra. Sapien eget mi proin sed libero enim sed faucibus turpis. Dui sapien eget mi proin sed libero. Pharetra convallis posuere morbi leo. Duis ut diam quam nulla porttitor massa id neque. Arcu dictum varius duis at. Proin sagittis nisl rhoncus mattis rhoncus. Viverra nibh cras pulvinar mattis nunc sed blandit.</p>
<h2>Fourth</h2>
<p>Nunc lobortis mattis aliquam faucibus purus in. Sociis natoque penatibus et magnis. Pellentesque elit eget gravida cum sociis natoque penatibus et. Amet luctus venenatis lectus magna fringilla urna porttitor. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Condimentum vitae sapien pellentesque habitant morbi. At risus viverra adipiscing at in tellus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. Lorem ipsum dolor sit amet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis.</p>
Above we have four headings and paragraphs. As an example, we can try adding an anchor to the fourth paragraph heading (<h2>Fourth</h2>). Here is how we would set that up:
Step One
Take the element you want to link - in this case, it’s the heading, and give it an id:
<h2 id="four">Fourth</h2>
Step Two
Once that has been achieved, we can set up a link somewhere on the page. Perhaps you might want to have this at the top so students can quickly jump down to that part of the page. Here is how you would do that:
Add a regular link as if you were going to link to an external page:
<a href=""></a>
Instead of putting the regular website within the href="" part, just insert a # followed by the id you gave to the element you want linked, and whatever you want the hyperlinked text to say:
<a href="#four">Jump to Paragraph Four</a>
And there you go! An extremely simple way to link to elements within a Canvas page.
Linking to an element from another page
If you want to link to that part of the page from another part of Canvas, just copy the page’s URL (address) and then add the #id to the end of it. Something like this:
https://canvas.YourUniversity.edu/courses/000000/ExamplePage#four
Place this in the anchor element, and give it some helpful text for the students:
<a href="https://canvas.YourUniversity.edu/courses/000000/ExamplePage#four">See Paragraph Four of last week's lesson.</a>
Creating a pseudo-navigation menu
One of the downsides to using Canvas is that Instructional Designers cannot generate a course specific stylesheet and rarely have access to the site-wide stylesheet. Instead, we have to get creative with what we can do with the pages.
So, presenting: the pseudo-navigation menu using Canvas Grid!
Setting up a grid
A word of warning: This may not look so hot on mobile devices, and some grid items might need to be hidden for screen readers - test it out first!
For a smaller navigation area to the left of the text, use the following to set up a Canvas Grid inside your page. Repeat the md-4 and md-8 grid items down the page for as many of these menus as you would want.
<div class="grid-row">
<div class="col-xs-12 col-md-4">
<a href="#one"><strong>Text Block 1</strong></a>
</div>
<div class="col-xs-12 col-md-8">
<h2 id="one">Text Block 1</h2>
<p>Text for text block 1.</p>
</div>
</div>
Repeating this two more times, changing the relative ids, will yield a layout similar to the following:
Remember that to mimic a ‘sticky’ navigation menu you will need to have the same links in all of the pseudo-navigation grid-items.