Using jQuery without Custom Javascript

jperkins
Instructure
Instructure
115
51375

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 <div> tags. Also, this looks very different in the Rich Content Editor than it does after it is saved.

<div class="enhanceable_content tabs">

    <ul>

        <li><a href="#fragment-1"><span>One</span></a>

        </li>

        <li><a href="#fragment-2"><span>Two</span></a>

        </li>

        <li><a href="#fragment-3"><span>Three</span></a>

        </li>

    </ul>

    <div id="fragment-1">

        <p>First tab is active by default: This is Tab 1 Content.</p>

    </div>

    <div id="fragment-2">

        <p>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.</p>

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

    </div>

    <div id="fragment-3">

        <p>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.</p>

    </div>

</div>

  • 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!

<div class="enhanceable_content accordion">

    <h3><a href="#">Section 1</a></h3>

    <div style="padding: 15px;">

        <p>Section 1 Content</p>

    </div>

    <h3><a href="#">Section 2</a></h3>

    <div style="padding: 15px;">

        <p>Section 2 Content</p>

    </div>

    <h3><a href="#">Section 3</a></h3>

    <div style="padding: 15px;">

        <p>Section 3 Content</p>

        <ul>

            <li>List item one</li>

            <li>List item two</li>

            <li>List item three</li>

        </ul>

    </div>

</div>

  • 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.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<a href="#dialog_for_link1" id="link1">link 1</a>

                <div class="enhanceable_content draggable" style="width: 100px;">draggable</div>

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

               <div class="enhanceable_content resizable" style="width: 100px;">resizable</div>

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

<ul class="enhanceable_content sortable" style="display: none;">

        <li>item 1</li>

        <li>item 2</li>

</ul>

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

115 Comments
DaleDrees
Community Champion

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

jordan
Instructure Alumni
Instructure Alumni

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!

abreitmeyer
Community Novice

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

Chris_Hofer
Community Coach
Community Coach

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.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<p><a id="link1" class="Button Button--secondary" style="width: 20%;" title="Click this button!" href="#dialog_for_link1">link 1</a></p>

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

jperkins
Instructure
Instructure

Chris, the code in my sample pages doesn't accurately reflect the code in the blog post. I tried to leave the code listed in the blog post as the most simple code necessary to get it to work. I've updated the sample pages to include the HTML used. But thanks for pointing out the ability to use classes to add buttons!

jmay
Instructure
Instructure

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!

jperkins
Instructure
Instructure

I'm glad that most of them work in the mobile browser. I'm pretty sure none of them will work on the mobile apps though... Smiley Sad

jmay
Instructure
Instructure

Yeah, it's a no go in the app... But that's ok!! Smiley Happy  They work great mobile browser and laptop/desktop Smiley Happy  Thanks again for all your work on this!

**NOTE: When you're using the draggable element if each item isn't separated, i.e. each in it's own cell of a table, the top item will drag all other items on the page!  So if you stack these elements each sub element will be controlled by the one directly above...

I.E.

1 - moves all elements

2 - moves 2, 3, & 4

3 - moves 3 & 4

4 - moves independently

Hope this helps if anyone wants to play with this tool Smiley Happy

dgrobani
Community Champion

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

mjennings
Community Contributor

Theses are great tips! Thanks!

kblack
Community Champion

Thank you so much for this!

rseilham
Community Champion

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
Community Champion

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:

<div class="enhanceable_content accordion">
      <h3 style="background-color: #ff6e77;"><a href="#">Section 1</a></h3>
      <div style="padding: 15px;">
            <p>Section 1 Content</p>
      </div>
      <h3 style="background-color: #ffb347;"><a href="#">Section 2</a></h3>
      <div style="padding: 15px;">
           <p>Section 2 Content</p>
      </div>
      <h3 style="background-color: #c3d85f;"><a href="#">Section 3</a></h3>
      <div style="padding: 15px;">
            <p>Section 3 Content</p>
            <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
            </ul>
      </div>
</div>
129713
Community Novice

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.

jordan
Instructure Alumni
Instructure Alumni

jmay​ you should attach a screencast to (with narrative) to illustrate what you mean. Jive allows you to upload your vid after recording, as well 😉

jmay
Instructure
Instructure

Hey Deactivated user​!  How's this?  Pretty rough, but hopefully it demonstrates a possible use for the Draggable Element Smiley Happy

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

mjennings
Community Contributor

This is ​amazing. Great work!

jmay
Instructure
Instructure

Thanks!

awilliams
Instructure Alumni
Instructure Alumni

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

mpoole
Community Explorer

SO excited about this!

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

oldsyllabus.jpg

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).

syllabus.jpg

kblack
Community Champion

Wow, very impressive  @mpoole !  Thanks for sharing.

Not to put cold water on this (though I tend to be good at that), just out curiosity does anyone know how ADA-friendly such a page would be?  Would a screen reading program, for example, be able to navigate the tabs okay?

stephanie_pope
Community Champion

Hey  @MattHanes ​

Thank you for providing the color code for the bar. I'm looking into adding a slight color for the tabs. They grey outline is almost too light to see. Hopefully I can figure it out based on your code above. Very helpful!!

Stephanie

MattHanes
Community Champion

Yes, you can add a style to each <li> tag in the tabs code to give each tab it's own color. However this overrides the "active" CSS which tells you which tab is the active tab. I'm not copying the whole tabs code from above, just the relevant parts.

Code looks like:

<ul>

<li style="background-color: #ff6e77;"><a href="#fragment-1"><span>One</span></a></li>

<li style="background-color: #ffb347;"><a href="#fragment-2"><span>Two</span></a></li>

<li style="background-color: #c3d85f;"><a href="#fragment-3"><span>Three</span></a></li>

</ul>

Which will make the tabs look like this:

tabs1.jpg

Or you can add a background color to the <ul> tag which will add a solid color in the background to contrast a white tab.

Code looks like:

<ul style="background-color: #ff6e77;">

<li><a href="#fragment-1"><span>One</span></a></li>

<li><a href="#fragment-2"><span>Two</span></a></li>

<li><a href="#fragment-3"><span>Three</span></a></li>

</ul>

Which will make the tabs look like this:

tabs2.jpg

Chris_Hofer
Community Coach
Community Coach

I was just wondering about how to color the tabs this morning.  Great timing!  As far as the "active" tabs, when I tried your code, the "active" tab displays black text (vs. blue on a "non-active" tab), and the tab wording is underlined (however, as soon as you click somewhere else on the screen, the underline goes away).

MattHanes
Community Champion

Oh yeah, I didn't notice that the text color was different until you pointed that out!

stephanie_pope
Community Champion

Hey  @MattHanes ​,

I really appreciate this! You just saved me a boat load of time. This is awesome!

Thanks,

Stephanie

colincriss
Community Novice

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
Community Explorer

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

jperkins
Instructure
Instructure

I've tried a couple of things, including redefining the class in the CSS override, but I didn't have any luck. I'd love to see someone figure this out!

jazemlya
Community Contributor

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. 

stephanie_pope
Community Champion

Hey  @MattHanes ​,

I'm trying to add an accordion onto the syllabus page of a course and it's not working correctly. I am able to use the same exact code on any other page in a course and it works perfect. I'm wondering if I'm missing something if I'm trying to add it to the "home" or syllabus page. Any ideas?

Thanks,

Stephanie

MattHanes
Community Champion

I don't think you're missing anything. It didn't work when I try it either. I noticed that the Syllabus page is not contained within a #wiki_page_show <div> like normal pages. Maybe that has something to do with it?

jperkins
Instructure
Instructure

I was able to get the accordion to show up in the syllabus page, but only by adding the following code around the existing <div> tags. It might be the terrible internet in my hotel, but does this seem to load slower than it should to anyone else?

<div id="wiki_page_show" class="show-content user_content clearfix enhanced">

     <div class="enhanceable_content accordion">

     <h3><a href="#">Section 1</a></h3>

     <div style="padding: 15px;">

     <p>Section 1 Content</p>

     </div>

     <h3><a href="#">Section 2</a></h3>

     <div style="padding: 15px;">

     <p>Section 2 Content</p>

     </div>

     <h3><a href="#">Section 3</a></h3>

     <div style="padding: 15px;">

     <p>Section 3 Content</p>

     <ul>

     <li>List item one</li>

     <li>List item two</li>

     <li>List item three</li>

     </ul>

     </div>

     </div>

</div>

Hope that helps you out  @stephanie_pope ​!

stephanie_pope
Community Champion

Thank you so much  @MattHanes ​ and  @jperkins ​ for you continued support with this!

Jeremy- I tried your code on the homepage and didn't have much luck. I really appreciate the help.

Thanks,

Stephanie

MattHanes
Community Champion

Oddly enough, the code (even without the extra wiki_page_show) started working today. Weird!

bdoran
Community Contributor

Hey Justin,

This type of inquiry might be better suited for the Prod Team to address, in regards to "exposed/native" API tags and support, so I am looping in Deactivated user​ to see if he has some insight for the community on this!!

berhtram
Community Explorer

 @jperkins ​ and anyone else who can help:

We're working on creating Canvas templates for my school, and the jQuery tabs are a must for our teaching staff. I wonder if you have any ideas for an app display problems work-around. The app seems to think the tab and accordion links should open files!

My current [clunky] solution is to add a link at the top redirecting app users to an app-friendly page. This, however, would require teaching staff to update the front page twice for every change. I wish Canvas allowed for multiple front page CSS, one for web viewing and one for the app, since it seems like making one thing look good and work well for both is hard once one ventures beyond a vanilla front page! Thanks for any ideas.

DrNufer
Community Coach
Community Coach

You inspired me to try and replicate your syllabus, and I think it actually turned out pretty well.  It helps to clean up a lot of clutter (which syllabi are notorious for)

syllabus.png

DrNufer
Community Coach
Community Coach

The tabbed interactions don't even render on the native canvas app.  My assumption is that this would not be ADA friendly.  However, you could put the content into a downloadable PDF as an option and put a link to it on the main page.

jamely
Community Champion

Thanks for the color on the accordion code, I though I was stuck with a lovely blue for all of them!

jamely
Community Champion

 @kblack ​ when using tabs and accordions, on the app it renders in a straight page with each section stacked vertically. It looks exactly the same as the rich content box before saving. In my experience, screen readers would read it as if it didn't render with all of the fancy tabs and boxes, meaning straight through all of the content.

jamely
Community Champion

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
Community Champion

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

jamely
Community Champion

I found that if added this in to the h3 style, it removed the thin blue border around the accordion top part:

<h3 style="border-style: none;"><a href="#"> Instructions</a></h3>

cgaudreau
Community Contributor

I love this page. So helpful.

:smileycool:

ephraimross1
Community Contributor

Is anyone able to get the mini accordions to work? 

MattHanes
Community Champion

I have, you just need to change the <div class="enhanceable_content accordion"> to this: <div class="enhanceable_content accordion ui-accordion--mini">

Chris_Hofer
Community Coach
Community Coach

MiniAccordion.jpgThis is cool,  @MattHanes ​.  However, I found that the accordion heading sits right on top of the arrow...

<div class="enhanceable_content accordion ui-accordion--mini">

   <div>Bacon Ipsum 1</div>

   <div style="padding: 10px;">

      <p>Bacon ipsum dolor amet brisket strip steak...</p>

   </div>

   <div>Bacon Ipsum 2</div>

   <div style="padding: 10px;">

      <p>Bacon ipsum dolor amet pastrami bacon...</p>

   </div>

   <div>Bacon Ipsum 3</div>

   <div style="padding: 10px;">

      <p>Bacon ipsum dolor amet frankfurter capicola...</p>

   </div>

</div>

To fix this, I added about five non-breaking spaces before the headings...like this:

nbsp.jpg

This will move the "Bacon Ipsum..." headings over a bit so they aren't over the black triangles.

MattHanes
Community Champion

I believe your code did that weird overlap because you didn't wrap the accordion titles in a <a href> tag like this:

<div class="enhanceable_content accordion ui-accordion--mini">

<h3><a href="#">Bacon Ipsum 1</a></h3>

<div style="padding: 10px;">

<p>Bacon ipsum dolor amet brisket strip steak...</p>

</div>

<h3><a href="#">Bacon Ipsum 2</a></h3>

<div style="padding: 10px;">

<p>Bacon ipsum dolor amet pastrami bacon...</p>

</div>

<h3><a href="#">Bacon Ipsum 3</a></h3>

<div style="padding: 10px;">

<p>Bacon ipsum dolor amet frankfurter capicola...</p>

</div>

</div>

Chris_Hofer
Community Coach
Community Coach

Interesting...thanks Matt.  I didn't have to wrap the accordion titles in that tag using the normal sized accordions.  Why would these be different?