cancel
Showing results for 
Search instead for 
Did you mean: 

Freeze top, left, and side banners of Canvas.

Freeze top, left, and side banners of Canvas.

(2)

I have suggested this in the past but it didn't seem to gain traction so I thought that I would bring the idea up again.  It is just a very annoying feature that could be correct rather easily I would imagine.  It would be nice if Canvas froze everything but the interior page.  In other words, let's say you are in the "Modules" page. When you scroll down, the way it is now everything scrolls and you lose site of your courses, grades, calendar, etc. as well as all of your global settings.  Depending on how long your "Modules" page is, for example, you even lose sight of the left hand navigation tabs as well (Home, Assignments, etc.)  I think that those should be stationary, just as if you were to lock columns or rows in Excel.

Please also refer to this closely related idea: https://community.canvaslms.com/ideas/6112-make-course-menu-sticky

91 Comments
apetersen
Community Member

Becky: My Microsoft mouse has a control panel setting for the scroll wheel but that says "Change direction". Unfortunately what that actually means is if you scroll up the page goes down OR if you scroll down the page scrolls up. Whoops, this isn't what I thought it meant. It doesn't go sideways.

I have seen this "Change direction" setting in the past and always thought it was Up/Down OR Left/Right. Sorry for the poor information.

However, when I researched it, I found some scripts that could be used to modify the mouse to scroll sideways. Just google "scroll mouse sideways".

James R Henson seems to have working solution with the MX Mouse.

apetersen
Community Member

Stephanie

My Microsoft mouse has a control panel setting for the scroll wheel but that says "Change direction". Unfortunately what that actually means is if you scroll up the page goes down OR if you scroll down the page scrolls up. Whoops, this isn't what I thought it meant. It doesn't go sideways.

I have seen this "Change direction" setting in the past and always thought it was Up/Down OR Left/Right. Sorry for the poor information.

However, when I researched it, I found some scripts that could be used to modify the mouse to scroll sideways. Just google "scroll mouse sideways".

James R Henson seems to have working solution with the MX Mouse.

Stefanie
Community Team
Community Team

 @apetersen , as it happens, I use the wired version of the mouse hensonj​ is using. It definitely gets the job done. MX™518 Gaming-Grade Optical Mouse - Logitech Support

don_bryn
Surveyor

If not fixed menus, how about "back to top" buttons?

Stefanie
Community Team
Community Team

 @don_bryn ​, have you voted?

ronmarx
Community Member

This "always-accessible" tool pane feature is needed, not only for Help, and for frequently used navigation buttons that's the subject of this idea, but also for Canvas developers saving after changes in the editing window. Vote for that feature here: Add and/or Move Save Button for Developers

Thanx,  @ronmarx ​

P.S. While the Canvas programmer geniuses are making this change, adding HTML code commenting to the HTML editor would also be nice! HTML Code Commenting – Include It!

GideonWilliams
Adventurer II

cgaudreau​ This might be what you are looking for?

biray
Community Member

195688_pastedImage_6.pngWe appreciate you, and the submission of your idea. Your dialogue helps our product teams prioritize feature development. Unfortunately, this idea has been archived because it did not meet the 100-vote threshold within the 3-month voting period. Learn more at: How does the voting process work for feature ideas?

Can archived ideas still become a feature?  Potentially, yes. Archived ideas can be resubmitted by Community members. As people’s needs change, previously submitted ideas may gain additional traction. Feature ideas are evaluated as a whole and influence product direction.

Shar
Navigator II

Hi hensonj​,

We added the css bits you suggested to our file, but still something is not quite right:

CourseNav-Scrollbar.pngWe're getting a scrollbar artifact (in Firefox) when there is nothing to scroll and the course nav is not snapping up to the top when scrolled.

I figure overflow-y: auto; will fix the scrollbar appearing issue.

But I don't see the ic-app-course-menu-fixed showing up at all when I do an inspect on the region:

icappcoursemenu.png

Any advice or recommendations?

Thanks in advance,
Cheers - Shar

hensonj
Community Member

I'll look at it again today and see what piece I missed. Thanks for the catch!

Renee_Carney
Community Team
Community Team

This idea is one of the lucky ones that was selected to get a little more time for voting as part of our evolution of the feature idea process.   It was selected because of it's vote count and/or comment thread.  

*Selection criteria: Most (not all) ideas that received 70+ votes in their initial voting round.

eabshire
Community Member

Excellent!  When does it go up for additional voting?

Renee_Carney
Community Team
Community Team
eabshire
Community Member

Thanks for the info.

Renee_Carney
Community Team
Community Team

 @eabshire ‌

I think I goofed and re-opened this idea when we have a similar one that is already on Product Radar.

Would you take a look at https://community.canvaslms.com/ideas/6112 and let me know if it meets your needs?

japarodi
Community Member

Yep. Basically the same thing.

eabshire
Community Member

It is similar, but mine seems to go a step further.  I would like not only the left menu frozen, but the top global and right side course menu as well.  They should all stay in sight at all times.

hensonj
Community Member

There is a small bit of js that I left out. I can get that to you today, sorry for the delay. Smiley Happy

hensonj
Community Member

///////// BEGIN JavaScript ///////////

$(function() {
var header = $(".ic-app-course-menu");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 63) {
header.removeClass('ic-app-course-menu').addClass("ic-app-course-menu-fixed");
} else {
header.removeClass("ic-app-course-menu-fixed").addClass('ic-app-course-menu');
}
});
});

///////// END JavaScript ///////////

///////// BEGIN CSS ///////////

/*makes left menu sticky*/
.ic-app-course-menu {
position: fixed !important;
top: 70px;
left: 84px;
overflow-y: scroll;
height: 100%;
padding-bottom: 80px;
}
/*makes left menu snap to top of page when scrolled.*/
.ic-app-course-menu-fixed {
position: fixed !important;
top: 8px;
left: 107px;
overflow-y: scroll;
height: 100%;
width: 144px;
}

.primary-nav-transitions .ic-app-course-menu-fixed {
left: 78px;
}

/*makes left menu snap to top of page when scrolled.*/
.ic-app-course-menu-fixed {
position: fixed !important;
top: 8px;
left: 107px;
overflow-y: scroll;
height: 100%;
width: 144px;
}

/*Changes left menu z-index so that it is not invisible on top of student names in gradebook*/
.with-left-side #left-side {
z-index: 0;
}

///////// END CSS ///////////

Shar
Navigator II

Aha! Thank-you hensonj!

We kept running into problems with different page types (wiki, discussion, quiz, assignment) behaving differently with the CSS we were trying.

Cheers - Shar