Start a new topic

Implementing Hidden Gems

Cidi Labs has developed incredible Hidden Gems.  Can someone demonstrate how to implement them within a page in Canvas?  I am specifically interested in hiding the Next and Previous buttons from specific pages, but having them everywhere else.


1 person has this question

Each of the Hidden Gems is a little different but they typically involve adding HTML and/or CSS classes. Using the Hide Next/Previous as an example:

  1. Open the HTML Attributes tool
  2. Choose an element you know you aren't going to delete. A fairly safe one is the title block
  3. Paste the desired class(es) In the class field:
    1. kl_hide_next to hide the next button
    2. kl_hide_previous to hide the previous button
    3. kl_hide_next kl_hide_previous to hide both
  4. Save the page

It is worth noting that many of these features only work when the content is viewed in the browser and will not work in the mobile app. Typically they will have a note telling you that but I just noticed that the Hide Next/Previous was missing that note.







Thank you, unfortunately adding the hide next and hide previous classes did not change anything on the page, once saved.  


image



Is there a way of troubleshooting these types of issues?


Hmm... I just verified that it is still working. One thing to keep in mind is that this relies on custom JavaScript to hide those buttons and Canvas does not load that JavaScript until the page content has finished loading. If you have a lot of content on the page, there can be a delay before the buttons are hidden. I also had to get creative because Canvas will occasionally rebuild the next/previous buttons once the page has loaded as well but that should all be factored in.


Will you send the HTML of the page you are working on to support@cidilabs.com and I will take a look and see if I can see anything that might be an issue?

Is there a solution to this?


I have used this successfully in the past but am now having the same experience as Tim, above. In fact, the class text (kl_hide_next kl_hide_previous) literally disappears the second I click on a different place on the page or try to save it. I actually had to take a second screenshot of the HTML attributes because clicking on the Snagit "Capture" button was enough to make the entry disappear from that field the first time.


image


Because I clicked in this post to comment, the class information has again disappeared form the field, even though I saved it.


This is how it looks now.

image


I've attached a .txt file of the HTML and a screenshot of the display.


I could use some advice! Thank you.

txt

That is strange. When you type into that class field, it is setting that attribute as you type with no need to save or apply. When you click on a different place on the page, that field will change because your cursor is in a different element. But returning to the element where you added the class should show that class. Here is an animated GIF that illustrates this (it does loop so :


What browser and operating system are you using?

Hello!


Thank you so much for the video!  I really appreciate you looking into this.


I am using Chrome

Windows 10 Education

Version 20H2

OS build 19042.1165


I do not understand what is going on when I attempt this, so I am providing a link to a video I made which shows the screen.


I did achieve hiding the next button when I added the class kl_hide_next directly to the HTML editor, but not through the Cidi Labs DesignPLUS interface.


Because the original video page I shared with you is now hiding the next button as I intended, the demo in the following video shows work on a different page, though it does exactly replicate my experience on other pages. 


At least I have a workable solution for these pages given my course is due in a few days.


I really appreciate you looking into this.


Link to Video


Thanks again,

Sue

I'm curious why on the DesignPLUS Hidden Gems page at https://cidilabs.instructure.com/courses/102/pages/hidden-gems?module_item_id=75169, for the "Hide Prev/Next Button," it says "Browser Only Feature. Is that because it will not work through the app? Thanks in advance for any explanation. 

Browsers have built in functionality that can let us look at the HTML structure of the Canvas interface so that we can programmatically identify the prev/next buttons but trying to reverse engineer a mobile application is a far more complex problem. Add to that the fact that the iOS app and the Android app have different development teams, structural differences, different release schedules, etc. Trying to manipulate the interface of the mobile app is a very challenging and daunting process.

Login or Signup to post a comment