Using jQuery without Custom Javascript

[jperkins]

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>

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

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