cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
nschwiet
Community Participant

HTML Button toggle content

I am trying to make some interactive content in a page. Ideally, there would be a button that upon being pressed would yield some further information sort of analogous to the javascript alert method, except without the popup box and javascript. Instead, the content would appear within the content page.

The closest I have come to this functionality is by using the element toggler found on the styleguide. However this solution has two issues: first, the toggle is by default on, eliminating the need for interaction; and second, the text for the toggle is not clearly clickable (it does not have the appearance of a button).

Does anyone have any suggestions or examples of this in a Canvas content page?

Tags (3)
38 Replies

Hey 60980756,  Is there something like the <div class="hidden-desktop"> that you can do to hide this sort of "browser only" code from view on the mobile apps? I'm thinking this could be used to create a page with content that works for both environments.

60980756
Community Participant

Theoretically yes, but in actuality, no. The classes hidden-desktop, hidden-tablet, hidden-phone, visible-desktop, visible-tablet, and visible-phone are all defined in the Canvas CSS. Here's a table of what those classes do. Note that the CSS doesn't actually know what kind of device you're really using -- the settings are based on the width in pixels of the browser window you're using.

Unfortunately, because the mobile app doesn't load that CSS (or any CSS), you can't just define an element to be "hidden-phone" to hide it on a phone, because (if you're using the app and not a mobile browser), the app won't load that CSS in order to hide the element. Instead, you have to be tricky about it: Hide it by default with "display:none", which is an actual inline style, not an invocation of Canvas CSS... then override that style on your desktop with the "visible-desktop" class, because your desktop browser does load that CSS.

60980756
Community Participant

Incidaentally, I did actually put in a request to have the mobile app at least load the properties of the above-mentioned classes, even if the app still wouldn't load any of the other CSS. My rationale: We should at least have the easy ability to hide elements that we've designed to look pretty on the desktop, but which look ugly and confusing on mobile where the CSS doesn't work. They even put it up for voting from August-October... but it only got three votes. I guess my grassroots organizing skills need more work than my html skills.  😕

Would you mind tossing in an example here of how that would work for us ameteurs?

60980756
Community Participant

Sure! In several of my courses, I put a set of navigation buttons at the top of each page to help navigate a module. For a module with many pages, it's a big improvement over just "Next" and "Previous" or going back to the module page each time. In this example, the first button represents the current page. The button is disabled and larger than the others to distinguish it.

But the div at the beginning is what works the magic: The "display: none;" style hides the button set by default, but "visible-desktop" and "visible-tablet" override that style and show the button set on larger screens. If you plug this in to a canvas page, you can actuall reduce the width of your browser window by hand, and watch the buttons disappear when the window gets very small.

<div class="visible-desktop visible-tablet" style="text-align: center; display: none;">

<a class="btn disabled btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Introductory Video" href="#"><i class="icon-filmstrip"></i> Intro Video</a>

<a class="btn btn-small btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Reading List" href="#"><i class="icon-document"></i> Reading List</a>

<a class="btn btn-small btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Your First Quiz" href="#"><i class="icon-quiz"></i> Short Quiz </a>

<a class="btn btn-small btn-primary" style="margin:2px; display: inline-block; width: 84px; height:36px; text-align: center; line-height: 150%;word-wrap:break-word; white-space:normal;" title="Module Checklist" href="#"><i class="icon-check"></i> Checklist</a>

</div>

You're awesome! Thanks!

I've watered it down to a very basic example for my reference later. In case it helps anyone here it is:

<div class="visible-desktop visible-tablet" style="text-align: left; display: none;">

  Here is some fancy desktop stuff.

</div>

<div class="hidden-desktop">

  Here is some simple mobile stuff.

</div>

nschwiet
Community Participant

Hey Ethan,

This is exactly what I was looking for! For some reason aria-expanded="false" wasn't hiding my content by default in my HTML, but copying yours this works great. This is an elegant solution.

Thanks!

Nick

I love this, 60980756​!

I pasted your code into a test page, and notice that in the Rich Content Editor view, I don't see a preview, so I am doing all of my editing in the HTML Editor view. With that in mind, I have a question about the part of the code where you have a # placeholder for the href=. How would you insert a relative link in there, say to a quiz, so that the link doesn't break upon course copy? In other words, I'd like to be able to use the Insert Content into the Page panel to insert the quiz link instead of pasting the direct URL to the quiz. When I tried that just by brute force (clicking on the # and using the Insert Content panel), it broke the buttons. Do you have a quick way of inserting the relative links without having to go back and clean up the HTML?

60980756
Community Participant

stefaniesanders​, yes, for whatever reason, the Rich Content Editor View doesn't load or apply CSS either, which makes it behave similarly to the mobile app. I do most of my editing either in HTML view, or in an external editor like Dreamweaver, and then paste back into Canvas. Canvas is (fortunately) fairly smart about auto-modifying URLs during rollovers. But I also know a little trick that helps, too.

You might notice that many of your individual page URLs look something like this (not a real URL):

https://canvas.harvard.edu/courses/12345/pages/introduction-to-this-course

If you have tried to link to a page like this by copying and pasting the URL, you know that your link will break if you change the name of that page. You might also notice that even if that page is in a module, you might not see the "Next" and "Previous" buttons at the bottom of the page, because you linked directly to the standalone page, not the page as a module item. However, if you're using Modules, you can harvest a link to that page if you (1) go to your Modules page (2) find the page you want to link to, and then (3) left-click on the link to that page and choose "copy link location" or whatever equivalent your browser uses. If you do that, you get something that looks like this:

https://canvas.harvard.edu/courses/12345/modules/items/105458

This is a link to that same page, as it is situated within the module. This also works for quizzes, assignments, etc.... anything that can be an item in a module. This link will not change even if you change the page title or even if you move it around within the module (though it will break if you move the page to a different module). It also helps Canvas convert the page during a rollover. If you paste that link into Canvas HTML viewer, you'll see that after you save the page, Canvas will automatically truncate the link to

"/courses/12345/modules/items/105458"

...storing it relative to your Canvas instance's domain. When you copy a course over, Canvas audits and adjusts these URLs for the new course. So when you import this page to a new course, it may be converted to something like

"/courses/54321/modules/items/20986​"

... but the page it links to will be the correct page in your new course!

Two big caveats to this process:

1) This mass conversion of pages and links only works if you do a single import of everything that cross-links into the new course, all at once. If you import the linking-out page today and the linked-to page tomorrow, that link won't work anymore in the new course.

2) If you use any LTI tools or plugins, they don't necessarily roll over. In fact, I had a problem with one LTI tool linking back to the old course, and I didn't realize it until students tried to follow it and got an error message.

Hope this is helpful!