Using jQuery without Custom Javascript

jperkins
Instructure
Instructure
115
51362

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

No idea! I'm just pretending to be a programmer. You've caught me in my sham...

stephanie_pope
Community Champion

Thanks for sharing! This looks great!

Stephanie

MattHanes
Community Champion

So I looked into it a bit more. It appears that the header for the normal accordion inherits some padding in the CSS definition but the mini-accordion does not inherit that same padding. The ".ui-accordion.ui-accordion--mini .ui-accordion-header" CSS class defines the padding at zero. The regular according header defines the padding at 12px. So that's why you didn't need it for the big accordions.

jordan
Instructure Alumni
Instructure Alumni

I haven't seen anyone chime in about resizing the popout windows. I wonder if  @kenneth_larsen ​ has any insight on this or if he could tell us conclusively that there's no way to resize this box.

kenneth_larsen
Community Champion

I am not aware of any ways to adjust the width for a modal dialog without using JavaScript. The width for a modal dialog is one of the JavaScript parameters that you use when creating the dialog.

     $(".selector").dialog({

       width: 500

     });

If no width is set, it will take the default which is 300px (see https://api.jqueryui.com/dialog/#option-width​). The referenced link also explains how that size can be changed after the fact, but it also requires using JavaScript.

cfinke
Community Novice

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

jonathan_carlyo
Community Novice

Jeremy. Thanks for sharing this video. I love the idea of taking a screen shot as the submission. Do you have students turn it in via an assignment link?

jonathan_carlyo
Community Novice

Dear All,

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

jonathan_carlyo
Community Novice

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)

cholling
Community Champion

 @jazemlya ​ -- did you get a satisfactory response to this. I love the increased interactivity possibilities, but am hesitant after reading your note.

ted_curran
Community Novice

HI Jonathan--

That's a nice example, and a pretty good workflow overall, assuming students can figure out how to screenshot and submit their work. I didn't know this was possible -- I thought the Canvas text editor scrubbed stray javascript out of the code.

Are you familiar with the h5p project? There is a drag and drop activity that can be used with Canvas.  I have been meaning to explore this more. I think these assignments can be wrapped in SCORM wrappers so they can send back grade data directly into your gradebook.

jonathan_carlyo
Community Novice

Hi Ted!

Thanks! This is great to know. Thanks for the links to  @GideonWilliams ​

cholling
Community Champion

On a Windows machine, I always encourage both faculty and students to become familiar with the Snipping Tool (part of the default install). I use it so often it's permanently on my taskbar. So easy to use and will even grab the cursor's position. Only thing I can't get it to do is to capture sub menus that "shut off" when you click off them -- they won't stay open when I click the snipper. But for most things, this would be perfect for screen captures.

jonathan_carlyo
Community Novice

Hi Cynthia! For capturing the sub-menus that shut off, I have used Microsoft Onenote's capture tool, shortcut keys "Window + S". This tends to work for me. The screen shots are saved to one note, then I have to right click and save them as png files. It's not great, but works for these cases.

MattHanes
Community Champion

If you are on Windows 8.1 or above, the shortcut is now "Windows + Shift + S" for the capture tool. The first time you use it, you can click the option at the bottom of the screen to "Don't ask me again and always do the following" and then click "Copy to Clipboard". That way, everytime you use the tool it will just copy the shot to your clipboard and you can press "ctrl + v" to paste it wherever you are. Saves you from having to open OneNote completely.

onenote.png

cgaudreau
Community Contributor

I'm not a Windows user, but just heard about Greenshot​, which is pretty awesome and open source. Especially if you are looking for keyboard shortcuts or using a third-party keyboard with an alternate key layout.

There is also the Awesome Screenshot Chrome extension, which helps capture overly long web content.

Greenshot - a free and open source screenshot tool for productivity

Awesome Screenshot: Screen capture, Annotate - Chrome Web Store

jonathan_carlyo
Community Novice

Hi Matt,

This tip has been great. And I just realized Snagit lets me import from the clipboard, so now, I don't even need to open OneNote: just Windows S, copy to clipboard, then "New from Clipboard" (in Snagit).

Have a great summer!

cgaudreau
Community Contributor

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

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

Double post FTW.

:smileyplain:

ronmarx
Community Contributor

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

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

kroeninm
Community Champion

I love a challenge but am not a coding guru so curious to see who solves this Smiley Happy  I'm close but don't know/see the styles I want to have the borders in a way that makes sense.  Maybe I can overlay a style that would be no-border of some kind but I'm sure someone is quicker than me at this so I'll wait.  I remember tabs weren't ideal but were still accessible on mobile in the past so definitely check all devices when making a design decision.

<div class="enhanceable_content tabs">

<div id="fragment-1">

<p>This is Tab 1 Content.</p>

</div>

<div id="fragment-2">

<p>Tab 2 Content</p>

</div>

<ul>

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

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

</ul>

</div>

Screen Shot 2016-07-12 at 10.02.03 AM.png

cgaudreau
Community Contributor

 @kroeninm ​, formatting aside, it is exactly what I am looking for. Thank you!

PS - It looks great on mobile Smiley Happy

File_000.jpg

jal18
Community Novice

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

cgaudreau
Community Contributor

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.

kenneth_larsen
Community Champion

cgaudreau, I have not played with this, but you could use the global JavaScript file to accomplish this but you would most likely need a database and server side code housed outside of Canvas to track and return any voting that takes place.

ted_curran
Community Novice

Yes, whenever you see upvote/downvote buttons on the web, there is always

some kind of back end, server-side code powering them. This means it's

probably not something you can do within Canvas with front-end design tools

alone.

Here's an alternative idea:

If the readings you're trying to share were housed in a 3rd party tool that

had its own up/down voting system -- like an external blog, wiki, or

library catalog system -- then you could embed that system within Canvas

and let people vote from within the LMS (via an iFrame window or LTI

integration).

For example, my old university had Learning Objects CampusPack wikis, and

those allowed you to have a separate wiki page for each votable item (like

a reading), and you could just add an up/downvote tool on there as a

"widget".

I know it's not quite what you were asking for, but it would do what you

want.

On Wed, Aug 3, 2016 at 2:49 PM, stefanievsanders@gmail.com <

Stef_retired
Instructure Alumni
Instructure Alumni

I can't believe I'm wading into this conversation, cgaudreau--please don't ask me about custom CSS!--but  @ted_curran ​'s suggestion reminded me that either Piazza​ or Prulu might work for your described purpose.

cgaudreau
Community Contributor

 @kenneth_larsen ​,  @ted_curran ​ and stefaniesanders​ - thank you all so much for your suggestions. Time to start playing in the sandbox!

kroeninm
Community Champion

Hmm it almost sounds like you are looking for feedback on a list of weekly readings within a course?  I'm not sure I'm imagining the design correctly.  Piazza does have some unique features but it's an external discussion Q&A style board, it is free and does LTI which makes it easy to use.  To throw a few more ideas out there, you could embed a poll at the end of each module if you are having them rate readings, use a survey like a Google embedded survey, or you might play with Tricider, it has some unique features that sometimes fits the situation exactly.

- Melanie

tmp06a
Community Novice

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

Tina

tina.powers@hsutx.edu

siouxgeonz
Community Contributor

Me too?   

jperkins
Instructure
Instructure

Tina,

I'm sorry that these courses aren't live anymore! The course is marked as public, but something must have happened that broke that. I'll look into fixing it, but in the mean time, anyone can enroll with the following URL into the course.

Enroll in Jeremy's Community Resources

Shar
Community Champion

oh no  @jperkins ​,

This is the message I get when clicking on your link: Enrollment is closed for Jeremy's Community Resources.

Smiley Sad Shar

jperkins
Instructure
Instructure

It should work now... I accidentally changed a setting while trying to fix the public course problem... Smiley Happy

ronmarx
Community Contributor

Thank you, Jeremy, for reanimating this course and showing us these resources! The examples, in and of themselves are interesting, but there's a few I'm having trouble conceptualizing how they'd be applied. Could you offer some suggestions?

Draggable Content

Resizable Content

Sortable Content

Do you have any examples, Jeremy? Thanks again for providing access...very interesting!

cgaudreau
Community Contributor

Does anyone know if there is a way to auto-collapse the accordions when first visiting a content page? It isn't a crucial thing, but this community page might be a good place to ask for support!

jperkins
Instructure
Instructure

I don't believe that you'll be able to it without custom javascript. Smiley Sad

cgaudreau
Community Contributor

While the answer I expected, not the one I hoped for. Thank you,  @jperkins ​

:smileyplain:

RobDitto
Community Champion

In the Canvas Developers group, a discussion was just opened which may be of interest:

jnickerson1
Community Novice

The short answer is yes you can, we are doing it, but you will need access to your Canvas theming (you'll need to have administrative privileges).

Then add this to your custom.js file:

$(".collapsed").accordion({active: 'none'});

and then add the "collapsed" class to your accordion. Then it will be collapsed on page load.

e.g. per the style guide located at: h t t p s : / /<your_institution>.instructure.com/styleguide#accordion

<div class="accordion collapsed" id="styleguide_demo_accordion1">

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

  <div>

    <div class="styleguide-section__accordion-demo-element">

      Content for Section 1

    </div>

  </div>

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

  <div>

    <div class="styleguide-section__accordion-demo-element">

      Content for Section 2

    </div>

  </div>

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

  <div>

    <div class="styleguide-section__accordion-demo-element">

      Content for Section 3

    </div>

  </div>

</div>

In order for this to work you may also need to make the accordion itself collapsible - so you can have all of the sections closed at the same time whereas default behavior forces one of the sections to be in the "open" state at any given time, hence the name accordion - by also adding this to your custom.js file:

$(".accordion").accordion({collapsible: true});

jnickerson1
Community Novice

Thanks Rob.

laurakgibbs
Community Champion

I'm about to embark on learning about these nifty scripts, although I am wondering about the question that  @RobDitto ‌ asked back in December re: an unanswered question here:

https://community.canvaslms.com/thread/14503-deprecated-use-of-magic-jqueryui-widget 

I'm pinging  @kona ‌ and ishar-uw‌ in case they have any insight into deprecated or not. 🙂

laurakgibbs
Community Champion

Thanks to  @jperkins ‌ and to the various people who had referred me to this post and the tab/accordion options. It worked like a charm! I'm building a new Canvas resource site, and having this as a design option will be very helpful. THANK YOU! 🙂

https://community.canvaslms.com/people/laurakgibbs/blog/2017/03/26/having-fun-with 

jquery cats

siouxgeonz
Community Contributor

I'm just tempted to follow right behind you...   well, I'll definitely follow progress you post Smiley Happy   First have to get the instructional video part of my lessons done...

laurakgibbs
Community Champion

It was so easy!!! I'm not really up on CSS at all, but I just used the template up at the top, and it worked perfectly. I didn't even have to troubleshoot. I'm still not really keen on using Canvas as a space in which to develop content, but I can sure make good use of these tabs to provide a better way to navigate the external content I am bringing in to the Canvas space. 🙂

I really liked how the accordion looked, but since the content I am using has some funky height issues (because of the iframes) that was not something I was able to make sure of. But I hope I can find an excuse to use that option also at some point. It looked really nice!

Shar
Community Champion

Great work laurakgibbsin incorporating the enhanceable_content and I love what you've done with the cats.

I've not run into anything in particular with the jQueryUI being deprecated. I like you just use the enhanceable_content that's already compatible with Canvas.

One thing I added to my tabs is a bit of background color so that it's obvious those are tabs along the top.

colored tabs on top

I've also added a bit for mobile users because the tabs will appear as a list of links like a Table of Contents:

<h2 class="hidden-desktop">Contents</h2>
<div class="enhanceable_content tabs">
<ul class="enhanceable_content sortable">
<li style="background-color: #e1e1e1;"><a href="#overview">Overview</a></li>
<li style="background-color: #e2e2e2;"><a href="#part1">Part 1</a></li>
<li style="background-color: #e3e3e3;"><a href="#part2">Part 2</a></li>
<li style="background-color: #e4e4e4;"><a href="#part3">Part 3</a></li>
<li style="background-color: #e5e5e5;"><a href="#part4">Project Example</a></li>
</ul>

tabs from mobile view

Cheers - Shar

laurakgibbs
Community Champion

Oh, that is great, ishar-uw‌ : thank you! I had seen someone else who had the colored tabs, and that definitely is attention-getting. When I get back to the cats next weekend, I will do that. Perfect! 🙂

DrNufer
Community Coach
Community Coach

You and those internet cats...  Smiley Wink