How do I get internal CANVAS links to work on mobile through an iframe?

[benjamin_bennet]

Hi all,

I've designed an image map for a course and have embedded it in an iframe. I wrote a handy piece of code to grab the user's course ID and alter the links so that the document can be synced from a blueprint and work in all subsequent classes. That's all working fine and it is perfect on a desktop browser.

The image map still works and is responsive to mobile when accessed through the CANVAS app. However, the links to other course pages within CANVAS are opening as an external tool, rather than natively through the app. This is where my problem lies. Although students can still access the content this is not ideal.

I have tried appending the code and adding data-api-endpoint and data-api-returntype values but this did not solve the problem.

I suspect the culprit is the iframe as the links need to have a _target of top or parent, otherwise they do not work at all in the app.

Any suggestions or ideas would be much appreciated!

#iframe‌ #mobile api‌ #app versus browser‌

[Shar]

Hi Benjamin Bennett,

Your question presents an interesting problem and my initial thought was just "don't use an image map" heh. But the image map is responsive in the mobile device and I bet it looks cool and all. (hint hint, post a pic please. )

But your question reminded me that I once stumbled upon some magic to have links on the embedded iframe open up on the parent. Embed another Canvas Page? --solution from Alex Karklins

You will probably want to read the whole thread, but it boils down to adding ?embedded=true at the end of the URL

Let us know how it turns out and show us that marvelous invention!
Stay home, stay healthy,
Cheers - Shar

[benjamin_bennet]

Hi Sharmaine,

Thanks for your reply. Unfortunately, that did not work.It leads to the content loading without the CANVAS framework or navigation. I've attached some images 😃

Working Image Map:

When ?embedded=true: (This is the entire window beneath the address bar)

Mobile - Responsive Image Map scaling to screen size:

'External Tool' even when an internal CANVAS link is selected:

Worst case scenario, it loads as an external tool. At least students can still access the content. I just wish it integrated with the mobile app perfectly. 

[Shar]

Hi Ben!

Great screenshots!! I wanna take your course

It's a pity the mobile version of the image map loads as external tool, but as you say students can still get to the content. What happens on a tablet? How do screen readers manage the image map?

The only other option would be to have a different mobile screen homepage that had the pure/natural links maybe with each signpost as a separate image arranged in a single div column so that they still stack on top of each other.

In the past, I've created mobile (and screen reader) friendly homepages by duplicating the homepage with minor differences letting the screen width determine what content is shown. I put the mobile code first on the page because it's also usually more screen reader/keyboard navigation friendly.

<div id="mobile-view" class="hidden-desktop">

{Stuff for the mobile view}

</div>

<div id="desktop-view" class="visible-desktop visible-tablet" style="display:none;">

{Regular image map navigation}

</div>

Check out RocketTheme - Documentation for more on the different screen-width classes. and by the way the screenreader-only class DOES display in mobile, so you could plop that in there as well.

    <p class="screenreader-only">This is the content that will only come up on a screen reader &amp; mobile</p>

Hope these ideas inspire some more ideas for you,
Stay home, stay healthy,
Cheers - Shar

p.s. I've been known to hide stuff on the desktop just for the mobile user to see - like instructions telling them to head to a browser to submit an essay or even a secret code word (in a sci-fi/fantasy course)