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

Can a custom help menu item display within the Canvas frame (not in a popup)

Jump to solution

I see that custom help menu items open in a new tab. Is there a way to have them display in the regular Canvas frame instead? (as any LTI tool would). Ideally, this would not require any custom javascript. Thanks in advance for any information or suggestions. 

Tags (1)
1 Solution

Accepted Solutions
robotcars
Community Champion

Ideally, this would not require any custom javascript

Bad news... I'm providing JavaScript because I believe it's the only way.  :smileygrin:

Warning:

Because of mixed content warnings, the only links you would be able to load externally would require HTTPS. Just be weary about opening external links inside Canvas, unless you know what scripts and actions those pages are going to execute. I think the best and safest usability for this would be to have a very concise web document (hosted by your institution), with no further external links, that can open and be displayed cleanly inside the frame... Don't just open random web pages, applications etc, you will have frustrating and mixed results.

With that said, the very basic example below, will append an iframe to the Help Tray, and load the Help Tray Link into the iframe, with a simple easing/slide out effect. 

This is in no way a finished idea, just a proof, and borrowing an example from the following post by Deactivated user, https://community.canvaslms.com/thread/23003-custom-javascriptcss-changes#comment-101354 

$(document).ready(function() {

     function load_help_window(url) {
    
          if($('#help_window').length > 0) $('#help_window').remove()
    
          var help_window = $('<iframe>', {
               id          : 'help_window',
               style     : 'position: absolute; left: -100px; top: -10px; border: 2px solid #ccc; border-left: 0; overflow: scroll;',
               width     : $(window).width() * .75,
               height     : $(window).height(),
               frameborder: 0,
               src          : url
          });
          // append after help tray, so its not constrained to the help tray properties
          $('#help_tray').parents('span._3Cm5YxM').after(help_window)
         
          // if the help window isn't loaded, slide it out
          $('#help_window').animate({left: '400px'}, 300, 'linear')

     }

     $(document.body).on('click', '#help_tray a[href="https://ccsd.net/aup"]', function(e) {
          e.preventDefault()
          load_help_window($(this).attr('href'))
     })
})
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

273772_Screen Shot 2018-04-25 at 12.38.36 PM.png

I keep doing these nav hacks because they solve some ideas I have for future projects.

View solution in original post

7 Replies
kona
Community Coach
Community Coach

pgo586, sorry that your question has sat here for so long without a response. Were you ever able to figure this out? 

This goes beyond my area of expertise, but I just shared this with the https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=ef429a28-38dc-464c-9a54-...‌ group in the Community to see if they can help!

Kona

robotcars
Community Champion

Ideally, this would not require any custom javascript

Bad news... I'm providing JavaScript because I believe it's the only way.  :smileygrin:

Warning:

Because of mixed content warnings, the only links you would be able to load externally would require HTTPS. Just be weary about opening external links inside Canvas, unless you know what scripts and actions those pages are going to execute. I think the best and safest usability for this would be to have a very concise web document (hosted by your institution), with no further external links, that can open and be displayed cleanly inside the frame... Don't just open random web pages, applications etc, you will have frustrating and mixed results.

With that said, the very basic example below, will append an iframe to the Help Tray, and load the Help Tray Link into the iframe, with a simple easing/slide out effect. 

This is in no way a finished idea, just a proof, and borrowing an example from the following post by Deactivated user, https://community.canvaslms.com/thread/23003-custom-javascriptcss-changes#comment-101354 

$(document).ready(function() {

     function load_help_window(url) {
    
          if($('#help_window').length > 0) $('#help_window').remove()
    
          var help_window = $('<iframe>', {
               id          : 'help_window',
               style     : 'position: absolute; left: -100px; top: -10px; border: 2px solid #ccc; border-left: 0; overflow: scroll;',
               width     : $(window).width() * .75,
               height     : $(window).height(),
               frameborder: 0,
               src          : url
          });
          // append after help tray, so its not constrained to the help tray properties
          $('#help_tray').parents('span._3Cm5YxM').after(help_window)
         
          // if the help window isn't loaded, slide it out
          $('#help_window').animate({left: '400px'}, 300, 'linear')

     }

     $(document.body).on('click', '#help_tray a[href="https://ccsd.net/aup"]', function(e) {
          e.preventDefault()
          load_help_window($(this).attr('href'))
     })
})
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

273772_Screen Shot 2018-04-25 at 12.38.36 PM.png

I keep doing these nav hacks because they solve some ideas I have for future projects.

stuart_ryan
Community Coach
Community Coach

Hi pgo586,

I wanted to check in and see if Robert's answer pointed you in the right direction. Indeed he is correct that this is not achievable without javascript (at this time).

You may want to consider logging a feature request over in the CanvasLIVE space if you think this is something that might be useful for yourself and others in future.

Cheers,
Stuart

thebert
Community Contributor

I like that the items from the Help menu open a new browser tab.

The student or instructor can go to the new tab, get their help, then close the tab without leaving whatever they were doing in Canvas.

I tested all items on our Help menu, which is highly customizable. I liked the way each opened and didn't disturb the current Canvas location.

I guess that's just me. I came here to see if we were missing something. I like different ideas to solve Canvas issues. 🙂 This idea sounded promising. Perhaps I haven't considered why a Canvas frame would look better than a new browser tab. Please educate me. 🙂

dave_perry
Community Participant

A half way house would be better - give admins the choice, we know our users! A dropdown menu offering 'open within canvas' or 'open in new tab' options. Probably the easiest thing I've seen to fix in terms of coding.

We have a password help page which is modelled on our SSO login page style sheet, so want that to load in a new tab always.
Equally we have a 'I need help with' course which has a load of information, and we'd consider that staying in a canvas frame to be better.

pgo586
Community Participant

Sorry for the lack of responses. Looks like my notification preferences for the community were set incorrectly, and I never found out about these responses :-(. In any case, I decided to go for opening in a new tab. However, I like Dave Perry's suggestion that this should be decided by the admin. Since this is already an option for regular content links, it should be an easy feature for Instructure to implement. 

pgo586
Community Participant

Thanks for the reply Stuart (and also Robert). I don't have a strong need for this feature right now, but would definitely vote for it if somebody brought it up. Thanks again!