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.
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:
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.
Is there a way of troubleshooting these types of issues?
Will you send the HTML of the page you are working on to email@example.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.
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.
I've attached a .txt file of the HTML and a screenshot of the display.
I could use some advice! Thank you.
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?
Thank you so much for the video! I really appreciate you looking into this.
I am using Chrome
Windows 10 Education
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.
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.