Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Amanda_L_Albrig
Community Contributor

Is it possible to create javascript enabled page design within Canvas?

Jump to solution

I'd love to be able to use javascript to create collapsible content areas and other interactions within Canvas pages. Unfortunately, it seems that Canvas has limited the code types that can be used directly within a course page. Is it possible to create collapsible content areas and other interactions using javascript or do I still need to build my content outside of Canvas and link to it?

3 Solutions

Accepted Solutions
Amanda_L_Albrig
Community Contributor

Thanks Brandon. Not sure about being able to add the CSS to the branding file. I like the idea of Canvas allowing TinyMCE as well as the <details> and <summary> tags.

View solution in original post

0 Kudos
10650941
Community Member

We have had some success with the dialog, accordion and tabs code found here: Canvas html code

It's not much, but it is something.

View solution in original post

James_Kocher_UF
Community Champion

have you tried the style guides?

You can usually find them at http://canvas.instructure.com/styleguide   There are things you can do that will allow collapsible content windows

View solution in original post

37 Replies
bbelew
Community Contributor

If you can get some CSS added to your branding CSS file you could do simple collapsible lists with just html.

Pure CSS collapsible tree menu | The CSS Ninja - Web tech, front-end performance & silly ideas

If Instructure would allow TinyMCE to use and not strip the <details> and <summary> tags you could use them to do simple show/hides too.  Though they would only work with modern browsers supporting HTML5

The details and summary elements | HTML5 Doctor

Amanda_L_Albrig
Community Contributor

Thanks Brandon. Not sure about being able to add the CSS to the branding file. I like the idea of Canvas allowing TinyMCE as well as the <details> and <summary> tags.

0 Kudos
awilliams
Instructure
Instructure

While it's not possible to do this natively, there is a way! Check out my comment on this topic about embedding stuff from Google Drive into a Canvas page. HTML files with CSS and/or JS are possible.

10650941
Community Member

We have had some success with the dialog, accordion and tabs code found here: Canvas html code

It's not much, but it is something.

James_Kocher_UF
Community Champion

have you tried the style guides?

You can usually find them at http://canvas.instructure.com/styleguide   There are things you can do that will allow collapsible content windows

That's awesome, James. Thank you. I'll give that a try.

James,

Does the code snipped at the bottom of the html code in the styleguide need to go into the branding CSS page or is it default code already in the Canvas CSS?

If it is not already default code is it possible to add it instead of having everyone request CSS updates from their system admins?

Thanks,

Amanda

James_Kocher_UF
Community Champion

That can go straight in your wiki pages in the HTML editor!

bbelew
Community Contributor

How are you putting the jquery into the html editor?  It strips <script> tags out?