HTML Coding for on Page Navigation

Hi all,

I have had a page working for some time now (well until today) where I could click on an image or button at the top of the page and it would go to a link on page. Admittedly, this link was through an accordion set up, but it worked.

Today, I have noticed that all the links are not working as they used to. From a quick CoPilot review it seems as though Canvas may not allow the linking in accordion menus anymore - even with the correct coding!

Has anyone else experienced this issue and how did you resolve it?

Thanks

Jen

Find more posts tagged with

Admin

Instructional Designer

Instructor

Accepted answers

All comments

JeffCampbell

Could you share a screenshot of the accordion menu you have, and possibly the HTML code as well? I've seen several different ways to set things up that mimic accordion style options. I would like to try and test what you are doing on my end to see if I am experiencing the same issue.

Is the link an internal or external link?

James

@oneilllj

Canvas announced the deprecation of jQuery UI accordions back in late 2016 / early 2017, so we don't know which method you're using. Given that it was working until recently, I would question the links more than the accordions themselves. That's where @JeffCampbell suggests seeing how you have it setup.

I would ask if you made any changes to the pages recently? This is especially the case if the accordion still works but certain links do not. For those, do the id's still exist. The id attribute cannot have spaces in them. For example, if you used to have an id="this link" (with a space), when you save the page, Canvas removes the space and it becomes id="thislink". However, if you had the href="#this link" with a space, it gets converted to href="#this%20link" (the %20 is an encoded space) and doesn't match the identifier, so it doesn't jump to that spot.

If that isn't the case, then another question would it works in some browsers but not others (Firefox vs Chrome, or Safari vs Chrome, but not Edge vs Chrome)?

oneilllj

Hi Jeff and James,

Thanks for your help. I have gone back to an older course where I had the same page set up and it isn't working any more either (just in case the recent changes I made to the current page were the cause).

Essentially, I used to be able to click on one of the images and it would open the on-page link within the accordion menu. Now, when I click on an image, it only opens to the main details accordion and not the correct link.

I am fairly confident I have all the href and id links correct (but please check in the code below as well), because I have a different but similar set up in another course where I have nav buttons with a href that link to a heading/section that contains the id.

I will also give the different browsers a go, I really only use Edge.

Any ideas or suggestions would be appreciated.

Thanks

Jen

HTML CODE - THE IMAGES WON'T WORK THOUGH

https://XXXX" alt="Canvas basics.png" width="100%" height="100%" data-api-endpoint="https://XXXX" data-api-returntype="File" />

CLICK ON THE BUTTONS BELOW FOR MORE INFORMATION

https://XXX" alt="Assignments.png" width="400" height="160" data-api-endpoint="XXX" data-api-returntype="File" />https://XXX" alt="Annotating and marking (1).png" width="400" height="160" data-api-endpoint="https://XXX" data-api-returntype="File" />https://XXX" alt="BluePrint Stds.png" width="400" height="160" data-api-endpoint="https://XXX" data-api-returntype="File" />https://XXX" alt="Canvas 101.png" width="400" height="160" data-api-endpoint="https://XXX" data-api-returntype="File" />

CANVAS BASICS INFORMATION

Assignments

Assignments outlines how to set up your courses including:

marking policy set up;
marking;
drafts;
downloading/uploading submissions

Jump to Top

Annotating and Marking

This video will provide information on the different options for annotating student work in Canvas, along with marking with rubrics.

Jump to Top

BluePrint Standards

BluePrint Standards provide a snapshot on the various standards the College has set for its course standards.

Jump to Top

Canvas 101

Canvas 101 will provide basic information about:

dashboard;
file uploads;
creating pages;
linking pages;
buttons

Jump to Top

Unanswered Questions

using Canvas to teach foreign languages that use accented letters and other special characters
I am currently teaching a high school Spanish course, and many of my assignments use the fill-in-the-blank question type in new quizzes. The problem that I'm encountering is when a question requires a special character, such as an accented vowel (examples include: á Ó or ü) or the special letter ñ (which is a different…
Course Analytics not currently reporting all data ?
Has anyone found gaps in their course analytics ? I'm currently seeing missing last view date, last participation date, and participations at overall course level, even though the same data is present at individual week and student level. Am also seeing truncated asset counts ie we are seeing only the global header counts,…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…
SMS - Ready Tech and aXcelerate
Hi everyone, We’d love to hear from anyone who has experience using ReadyTech or aXcelerate as their SMS integrated with Canvas. How was your experience, and what’s your feedback? We’re currently exploring which option to use and would appreciate your insights. Thanks in advance for your responses!
Issue: Google LTI 1.3 Assignments Not Saving When Edited
Problem Canvas is not persisting the Google LTI 1.3 connection when editing existing assignments. This issue has been confirmed across multiple users. Symptoms * Error message: "Page Error: Something broke unexpectedly. If you have a moment, click here to tell us what happened" * Some users may initially see: "Google…