Using jQuery without Custom Javascript

Please note that Instructure is no longer using jQuery in their designs or development. jQuery is presently part of Canvas and Instructure currently has no plans to change this. jQueryUI is a separate library that has historically been available in Canvas. This library's usage in Canvas is actively being deprecated, and institutions should not rely on its availability.

A couple of weeks ago, it came to my attention from Community Member awebster that we have code built into Canvas that allows for running some jQuery content like tabs and accordions. I was under the impression, even as a Canvas Trainer, that the only way to leverage these was to use custom Javascript. It turns out that I was wrong. I was digging around in Github and found a lot of awesome code related to this enhanceable_content. See the original file here. Be aware that at the time of this post these will not respond the same on mobile devices.

Also, be aware that you will probably need some HTML background to really leverage these tools. If you want a good tool to get some basics of HTML, I recommend this Codecademy Course. I've modified the tags slightly from the source file to include padding around elements for better aesthetics.

Note! - If the code is different in the sample page than the code listed below, I include the code on the sample page. The code on this page was kept basic to better illustrate how the code works, not to be an example of what you can do with the code.

Tabs - See this in action here. Be aware that you'll want to use paragraph and header tags for text inside of the content
tags. Also, this looks very different in the Rich Content Editor than it does after it is saved.

One


Two


Three




First tab is active by default: This is Tab 1 Content.



Tab 2 Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



Tab 3 Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Accordion - See this in action here. Notice that content areas will be as big as the largest content area in any section of the Accordion. This is because of the version of jQuery that Canvas is running. No easy way to fix it. If you find a way, let me know!

Section 1


Section 1 Content


Section 2


Section 2 Content


Section 3


Section 3 Content


List item one

List item two

List item three

Popup Dialog - See this in action here. Just FYI, the popup is defined as only being 300px wide. The class defining this width is ui-dialog. If you figure out how to adjust the width with or without additional Javascript/CSS I'd love to know! I have not tested this on Mobile. I do not know how this will appear to Students using the Canvas App.

dialog for link 1
link 1

Draggable Elements - See this in action here. This works, I don't know when I'd use it, but it is pretty cool.

draggable

Resizable Elements - See this in action here. This adds the lines in the bottom left corner of a
tag to adjust the size of an element.

resizable

Sortable Elements - See this in action here. This code allows for the drag and drop resorting of items, like in Modules, or Assignment Groups.

item 1

item 2

Just wanted to share with everyone! I figure this is easier to find as a blog post then being buried in a question discussion.

Find more posts tagged with

Instructional Designer

Comments

DaleDrees

Wow! They are all Awesome - Love the Draggable Elements and tabs!!!! Thanks for sharing

jordan

I am blown away, @jperkins ! Thank you so much for taking the time to clearly lay this out so anyone can start using these design elements, today!

I just love that you don't need to have access to the CSS or Javascript at the account level. Strong work!

unknown

Thank you so much for providing this code. I so appreciate this!

Chris_Hofer

Thanks again for your help last week, and thanks for posting this new entry! I was aware of many of these, but I'm going to add the pop-up dialog to our "Canvas Labs" course I've been working on for our faculty! Very cool!

EDIT: The code for the Popup Dialog wasn't working exactly when I copied and pasted to a page in Canvas (no button was showing), but I think I've modified it enough so that it would work now.

dialog for link 1

link 1

You can change the percentage to anything you want...and also the color of the button:

Button

Button--primary

Button--secondary

Button--success

Button--warning

Button--danger

JeremyMay1

Thanks for posting this @jperkins ! I was playing with this in Safari on my iPad and Chrome on my Android phone and everything works great except Resizable elements! This is incredible Smiley Happy

One thing I thought immediately of for Draggable Content is to insert a picture and have names of objects on the page for students to place over the image, take a screenshot, and submit for an assignment (sad example here). They could also be used as a quick Venn Diagramming activity or classification/sorting activity in individual or group activities.

Thanks for posting the update to the popup for buttons @Chris_Hofer

Super cool!

dgrobani

A slightly different set of these widgets is documented in the Canvas Style Guide.

MAJ18

Theses are great tips! Thanks!

kblack

Thank you so much for this!

rseilham

These are really awesome! Good work. I can confirm (as you said above) that each example doesn't work in the mobile apps. This is expected as the mobile app uses it's own styles. Maybe over time the mobile app can start to support more styles. Thanks again!

MattHanes

This is excellent! I just wanted to add that if you wanted to style things like the accordions, you don't need access to the global CSS either. You can add your styles with some HTML. For example, you can add some color to those accordions with this simple addition to the code:

      style="background-color: #ff6e77;">Section 1

            Section 1 Content

      style="background-color: #ffb347;">Section 2

           Section 2 Content

      style="background-color: #c3d85f;">Section 3

            Section 3 Content

            List item one
            List item two
            List item three

Example here: Accordion Test: Playing With Code

unknown

Thanks so much for posting this code.

I have been trying to create adaptive learning quizzes that help students review material after choosing an incorrect answer.

The pop-up windows let me do that perfectly.

This is a great discussion area.

Thanks again.

awilliams

Bah, you guys are really trying to break me of my "mobile first' design decision...

mpoole

SO excited about this!

Here's a pic of what my course syllabus looked like before:

And here's what it looks like now! THANKS for all the code! (and for those who are wondering, it renders out exactly the same on my iphone in browser, and still looks good in the app, just doesn't have tabs).

unknown

I'd love any ideas concerning how to widen the pop-up window without rewriting the CSS! I can't figure it out--maybe some code to make something wrap around an iframe? I'm trying to get the window to snug up around a video! Any ideas, please post them.

Thanks so much for this, Jeremy Perkins! Eye-opening code!

-Colin

MZelmanowicz

Wow! Thank you so much for this @jperkins ! This is a huge help!

jazemlya

Hello,

While i agree this is a great tool this leaves me with some questions. The biggest thing is that in the past I have been told that items that are from the Canvas Style guide are not officially supported by Canvas. So if something broke from a Canvas update there was no guarantee that the style would get fixed. This has left our university hesitant to use the Style Guide items as the greatest fear is something breaks for an instructor mid semester and there is no guarantee that it will get fixed since it is not officially supported.

Since this code is built into Canvas and would be hosted by Canvas, does this mean that Canvas is now committed to supporting this functionality going forward? Whether that is partially or as a whole?

My direct question would be: If an instructor was using the exposed and available canvas tags for an accordion and then an update broke that tag (exposed by instructure) would support/dev work to fix the functionality?

This knowledge would be key in determining if we would actually use this functionality at our university. My expectation is that if Instructure has allowed the Canvas system to exposes these tools my expectation is that Canvas will do what is needed to fix the issue.

jamely

I wanted to add, the tabs and accordion boxes can be layered. Meaning, I made a page with tabs, and one of the tabs is full of accordion boxes to minimize long content. Thanks for this guide!

kroeninm

Wow, thank you @jperkins_k12 , the popup code makes me so happy. I have figured several things out but this one stumped me :smileygrin:. I don't need it often but every now and then an option like this is a perfect fit for what I'm trying to accomplish!

- Melanie

cgaudreau

I love this page. So helpful.

:smileycool:

ephraimross1

Is anyone able to get the mini accordions to work?

unknown

Thank you for sharing! I have incorporated Tabs and Accordion into content pages in our courses. Works beautifully.

unknown

Dear All,

I have learned so much from all these great examples. Thanks for sharing and teaching and inspiring.

unknown

Dear All: Here is my use case. The video is hurried and I'm no expert in Camtasia; but I am interested in your thoughts about the design. Thanks, again, to @jperkins and Deactivated user

This video is currently being processed. Please try again in a few minutes.

(view in My Videos)

cgaudreau

In the interest of resource sharing: https://juxtapose.knightlab.com/

This is a comparison slider for images (think Buzzfeed Before/After...however, seriously...Buzzfeed as a reference point...sorry!) that can be embedded pretty easily.

cgaudreau

In the interest of resource sharing: https://juxtapose.knightlab.com/

This is a comparison slider for images (think Buzzfeed Before/After...however, seriously...Buzzfeed as a reference point...sorry!) that can be embedded pretty easily.

ronmarx

Jeremy,

We decided to purchase a subscriptions for Kennethware (CIDILabs Design Tools 1.0) due to the limitations of the current style guide and Javascript. The features it provides leapfrogs over what is the standard Canvas offering.

iRon_Mrx

cgaudreau

I'm seeking someone with awesome coding skills, or with better resources: Is there a way, via whitelisted code or embed, that I can create inverted tabs in my Pages?

Please see the screenshot for more of what I'm looking for, courtesy of Semantic UI. Screen Shot 2016-07-12 at 11.36.16 AM.png

unknown

Super helpful. Thank you. I have been using the accordion and tabs but love the ability to drag, resize and sort.

cgaudreau

Since this is such a wonderful repository of a thread, I have another question:

Does anyone have experience creating Up Vote/Like buttons in their courses? We are redesigning a course and want to include faculty input on the readings we are providing. Everything I've found is either CSS or un-whitelisted HTML, and I have yet to explore CSS (yet being the operative word).

Any guidance would be much appreciated.

unknown

Hi Jeremy. I would like to see these in action. Can you enroll me?

Tina

tina.powers@hsutx.edu