Community Help

lilianedias · ‎10-10-2018

Guys, I'm trying to create a circular menu similar to the one below in Canvas, but the limitations of HTML are not allowing me. Has anyone tried to do something like this?

Stef_retired · ‎10-10-2018

@lilianedias ‌, we've moved your question out of Cold Storage (which is where archived ideas are retained but largely hidden from view) to the Instructional Designers‌ group to attract the attention of people who are most familiar with this kind of challenge.

lilianedias · ‎10-10-2018

tanks

robotcars · ‎10-10-2018

So I found a solution but it oddly used checkbox input, and that gets stripped out of Canvas.

Then I found this one Items on circle,

and adapted it Circular Nav Canvas

First Draft.

I uploaded the CSS to Canvas Themes and it worked... I had to add some empty paragraphs above the list to give it space to show up. It can all be copied inline in the RCE, shown here. You can create variable number of links, keeping track of degree rotation. The inner circle will take some more time. I'm running out of time for this at the moment, but might try a bit later. You'll have better performance with CSS file, because you can add :hover selectors on the links.

No JavaScript.

A
B
C
D
E
F
G
H

robotcars · ‎10-10-2018

This is too much fun...

Seriously though, no more time for this today, and it's lunch time.

:smileygrin:

Current progress Circular Nav Canvas +

robotcars · ‎10-11-2018

I was was concerned about the user experience of how a designer might order the positioning of items in orbit and how that might affect the user experience of the end user, a student.

Default	Undesirable Fix	Best	Corrected Positions
	Center A : C B : D C : E D : F E : G F : H G : A the issue H : B	Center A B C D E F G H

In most cases, that seems funky to me, in that if the CSS doesn't render or is made responsive, the user would see a list that has no proper order for table of contents.

Trying to keep some basic standards of navigation like:

The first item in the list, is typically the starting point.
- The caveat here is that the center item is the first item in the list.
Then, the second item in the list (A) would be next, but it's position is at 3 O'Clock
Making the last item in the list at 1:30

Depending on the images or text used this could create confusion.

Therefore, I made some adjustments to the rotation of the orbiting items to get them in the correct position, or at least show an example of what that might look like.

Circular Nav Canvas + Position

Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

bryanjos · ‎10-11-2018

Very pretty! I like the CodePen example!

robotcars · ‎10-11-2018

Thanks @bryanjos

I like codepen, it allows sharing and a sandbox in one place. For this one, a user can customize it, and copy the relevant CSS into the proper HTML elements and get a copy/paste RCE version without having to upload anything to CSS as I showed above.

bryanjos · ‎10-11-2018

Nice, that's awesome!

themidiman · ‎10-10-2018

If using the Canvas RCE and having this in a Canvas page is your goal, this likely cannot be accomplished without making use of your Canvas instance's CSS override file and quite possibly your JS override file. There are lots of online examples

Here's one that does a little slide-out when the center circle when clicked expands into other options:

https://www.cssscript.com/demo/radial-circle-popup-menu-css

You'd have to strip out the transitions if you want it to be a static circular menu.

Bobby2 · ‎10-10-2018

Is this sort of thing any help?

Customise your home page

I'm most impressed by what @jacobtowne7 has come up with.

jacobtowne7 · ‎10-10-2018

@liliane_d ‌ Happy to help if (as @Bobby2 ‌ mentioned) you like the clickable page i created
Feel free to reach out

lilianedias · ‎10-11-2018

Thank you for your support. I was very happy with everyone's response and I will test them.

mbreger1 · ‎10-12-2018

Hi all,

FWIW, Articulate Storyline has a nice template that I've used that does just this. Can easily be brought into Canvas from Articulate 360

robotcars · ‎10-12-2018

Hi Maria,

Have you figured out how to get Articulate into Canvas Pages, not just Assignments?

mbreger1 · ‎10-12-2018

Hi Rob,

I take the Share URL from Articulate 360 and convert to an iFrame, then I insert the iFrame (HTML mode) on the page.

robotcars · ‎10-12-2018

I'll share that with the team. Do you know how that looks on mobile devices?

mbreger1 · ‎10-12-2018

Hmmmm,,,, haven't tried it yet but I will!

venitk · ‎10-15-2018

We've had mixed results with storyline in the mobile app. Sometimes it fits within the space (with large gray areas above and below the storyline), and sometimes it doesn't fit horizontally, causing the user to have to scroll back and forth horizontally. The code and settings for the files are the same, so I have no idea where the discrepancy is coming from. It's possible I'm missing some minuscule code that's out of place with the one that doesn't work.

jean_meyer · ‎10-12-2018

Create the image and map it using DreamWeaver Then embed in an iFrame.

lilianedias · ‎11-23-2018

I used this solution. Thank you!
I created the image and mapped the links. Then I inserted the html in the page through the IFRAME. The disadvantage is that the links need to open in a new tab. I hosted the html page and the image on the server, because hosted on the canvas, the iframe does not open on the mobile. Does anyone have a solution for this?

jean_meyer · ‎11-25-2018

Have you tried to first create the mapping which loads to --> target="_parent"? For example:

Then the iFrame tag:

lilianedias · ‎11-26-2018

Thanks. It worked to open the link on the same page, but I still have the problem of not displaying the image in the canvas application. Does anyone know why this happens?

jean_meyer · ‎11-26-2018

Hi Liliane,

You will need to:

1. Upload the image in Canvas first

2. Copy the URL link from the 'Files' section, remove /download

3. Go back to the mapping html document and then relink the image by pasting the URL

4. Upload the mapping html document (preferably on the same directory)

If this doesn't work, would you mind sending me your mapping html document codes?

lilianedias · ‎11-27-2018

Hi Jean! Did not work.
I created a folder in files (in Canvas) where are the image and the html file.
In the html file replaces the url of the image with the url of the image and even then it does not open in the canvas application. In the application, when I go to Files, I can open the image, but when clicking on the HTML file it does not open.

Ps: It seems that the application renames the files. For example, image-2 was renamed to image-2_1699171730 and the initial_page HTML file was renamed to initial_page-601671359.

-------------------------------------------------------------------------------------------------------------------------------------------------------
Here is the code for the HTML file:

----------------------------------------------------------------------------------------------------------------------------------------------

Iframe code:

jean_meyer · ‎11-27-2018

Hi Liliane,

I noticed that your code for the image source is:

I hope this works

lilianedias · ‎11-28-2018

Hi Jean! I can not see your complete message. Could you please forward it?Thank's.

jean_meyer · ‎11-28-2018

Hi Liliane,

That is so weird. I don't know why it removed?? Let's try again. As I was saying, your image source is:

<img src="https://pucminas.instructure.com/files/209527/download?download_frd=1" alt="" width="611" height="611" usemap="#Map"/>.

It didn't have the course URL which is so obvious in your mapping href="https://pucminas.instructure.com/courses/1405/pages/ciencia-e-conhecimento" target="_parent">.

Try changing your your image source to --> <img src="https://pucminas.instructure.com/courses/1405/files/209527/preview" alt="" width="611" height="611" usemap="#Map"/>. You will need to add courses/1405 and then remove download and change it to preview. Try that.

Hope this time you can see my response

lilianedias · ‎11-29-2018

Hi Jean!
Did not work. I have tried the image link in many ways, with no success in the app.

Do you have any other suggestions? Thank you for your support.

Stay on the mobile:

jean_meyer · ‎11-29-2018

OK. I just tried it by recreating your Round menu. First thing I did was create the image and called it Menu.jpg:

Please note that I only mapped Menu item 1 and nothing else.

Then I created HTML Document. The tags below sits between <body> </body>tags:

I called the HTML file RoundMenu.html

Then I uploaded the files HTML and image in Canvas under subdirectory called "0_Roundmenu". Once I uploaded these files, I right click the the image file Menu.jpg and copied its link address.

Go back to the HTML editor on your PC and open up the RoundMenu.html and change the link of the image file. NOTE: DO NOT AMEND THE HTML FILE FROM CANVAS. Go back to the original HTML document you saved on your hard drive. The HTML code now, looks like this:

Save the HTML document again and REUPLOAD back in Canvas in the same directory. This will replace the existing HTML document.

Then from Files in Canvas right click the RoundMenu.html and copy its link address.

Then paste the RoundMenu.html link address on the iFrame tag below:

Just place the above tag somewhere in Notepad or Word for the moment.

Now create a NEW page in Canvas. Paste the above iFrame tag on your page (through HTML editor).

This time, I hope it works.

lilianedias · ‎11-30-2018

Hello, Jean!
I did exactly as you said and it does not work on the phone.
On the desktop it works normally, but on the mobile the image is not displayed.

The problem is in the Canvas application that can not load the image.

In the application when I go to Files and click on the image, it opens. But when you click on the html page it can not load the image. Only one blank page appears.

Pagina_inicial.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página inicial</title>
</head>
<body>
<div style="text-align: center">
<img src="https://pucminas.instructure.com/files/209527/download?download_frd=1" alt="" width="611" height="611" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="251,44,362,89" href="https://pucminas.instructure.com/courses/1405/pages/ciencia-e-conhecimento" target="_parent">
<area shape="rect" coords="380,76,479,125" href="https://pucminas.instructure.com/courses/1405/pages/demarcacao-cientifica-2" target="_parent">
<area shape="rect" coords="461,164,568,208" href="https://pucminas.instructure.com/courses/1405/pages/tipos-de-conhecimento-2" target="_parent">
<area shape="rect" coords="494,271,593,344" href="https://pucminas.instructure.com/courses/1405/pages/objetos-de-pesquisa-em-psicologia" target="_parent">
<area shape="rect" coords="463,394,562,462" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-qualitativa-e-seus-tipos" target="_parent">
<area shape="rect" coords="377,488,473,536" href="https://pucminas.instructure.com/courses/1405/pages/etica-na-pesquisa" target="_parent">
<area shape="rect" coords="250,514,358,577" href="https://pucminas.instructure.com/courses/1405/pages/a-construcao-de-projetos-de-pesquisa-e-seus-comp..." target="_parent">
<area shape="rect" coords="134,476,232,546" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-bibliografica-e-referencial-teorico" target="_parent">
<area shape="rect" coords="50,396,142,459" href="https://pucminas.instructure.com/courses/1405/pages/estrategias-de-coleta-de-dados" target="_parent">
<area shape="rect" coords="7,268,119,348" href="https://pucminas.instructure.com/courses/1405/pages/metodos-de-analise-definicao-e-uso-de-categorias..." target="_parent">
<area shape="rect" coords="48,166,146,216" href="https://pucminas.instructure.com/courses/1405/pages/analise-de-conteudo" target="_parent">
<area shape="rect" coords="133,72,242,126" href="https://pucminas.instructure.com/courses/1405/pages/relatorios-e-publicacoes" target="_parent">
</map>
</div>
</body>
</html>

Página

jean_meyer · ‎12-02-2018

Hi Liliane,

You still don't have the course number in your img src tag:

Change it to:

lilianedias · ‎12-03-2018

Hi Jean!
It still does not work.
I've tested everything. I do not know what else to do.
I repeated exactly what you did and it did not work.

jean_meyer · ‎12-03-2018

Your map name doesn't have an ID. Try this. And please make sure that you log on using Google Chrome on both your computer and phone.

First and foremost, clear your CACHE/History in Google Chrome

1. Save the image I have attached here as Menu.jpg:

2. Go to your HTML editor and paste this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

</body>
</html>

3. Save this HTML as RoundMenu.html

4. Log into Canvas

5. Go to Files

6. Create a folder called 0_RoundMenu

7. Upload both the files --> Menu.jpg and RoundMenu.html

8. Once uploaded, RIGHT click the file called Menu.jpg

9. This will give you a drop down menu and then click on "Copy link address"

10. Go back to your HTML editor, open up the RoundMenu.html

11. Select what is highlighted in red from the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

</body>
</html>

12. Once selected, paste the link that you have copied from your Canvas site. It will be very different on mine because we don't share files and folders, but it should look relatively like this:

_______________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

</body>
</html>

_________________

Please do not change anything else. What we are doing here is recoding so that the image relinks back to where you have saved this file in Canvas and not from your computer hard drive because no one has access to your hard drive. We are recoding to redirect the image source.

13. Save the RoundMenu.html file

14. Go back to your Canvas site and go to the folder you have created in Step 6 above "0_RoundMenu"

15. REUPLOAD the file called RoundMenu.html which should replace the previously uploaded file.

16. Once you have uploaded this file, RIGHT click RoundMenu.html from Canvas and select "open link in new tab"

17. If you can see the image and the mapping works, then the next step is to place in an iFrame.

Let me know if you can see the image and mapping.

Again, please make sure you logged in using Google Chrome on all devices.

lilianedias · ‎12-04-2018

Hi Jean!
You were right.
It was the ID that was missing.
Thank you for your support!

@jean_meyer ‌

Bobby2 · ‎12-04-2018

Looks fab. Good on you for persevering @liliane_d .

lilianedias · ‎12-04-2018

Thank you @Bobby2 !

I thank you immensely for friend @jean_meyer .

[ARCHIVED] [ARCHIVED] How to create a circular menu?

Archived

Questions

You're signed out

[ARCHIVED] [ARCHIVED] How to create a circular menu?

Archived

Questions

Community Help

View our top guides and resources: