Support Site design

[h0mer]

Hey guys, just a question. Is it possible to make this bar:

stay visible while scrolling down like this one:

It will be great to see messages and alerts while having scrolled down on a page.
Cheers

 

[Ageless_ZA]

@ViVception Can have a look for us.

 

[ViVceptioN]

@ViVception Can have a look for us.

Not sure how possible this is as the logo will interfere with this

 

[h0mer]

Aah yes, Understood. That will be too much screen purchase gone....mmmmmm...perhaps you could move the tab below the Logo tab? Or integrate the Inbox and alerts in the bar:

Sorry, I don't mean to make this a mission 🙈 as I might be the only one that find this a bit of a las to scroll up every time to see notifications and inbox.

 

[noa]

A shitty violentmonkey, greasemonkey, *monkey script

// ==UserScript==
// @name Carbonite headerstickyshit
// @namespace CarboniteShite
// @match https://carbonite.co.za/*
// @grant GM_addStyle
// ==/UserScript==

GM_addStyle ( `
    .p-navSticky {

        position: -webkit-sticky;
        position: sticky;
        top: 44px;

    }
    .p-staffBar {

        font-size: 13px;
        color: rgba(255,255,255,0.7);
        background: #494c62;
        border-bottom: 1px solid rgba(235,236,239,0.1);
        position: sticky;
        z-index: 400;
        top: 0;
    }
` );

 

[Cheetahs]

Above looks good, works the same way the navbar persists through scrolling, the style that allows it to be persistent through scrolling is putting this <position: sticky;> in the .p-staffBar class

But there is a problem - the nav-bar is already persistent through scrolling, so the staff-bar will not be visible as they will not be stacked properly - and doing JUST this will effectively render it useless but ( and I'm starting to guess here) the the z-index of the staff-bar should be 1 less than that of the nav-bar, so if it's 400, make staff-bar 399 , although I added this and it didn't seem to matter when testing, could be due to the bruce-force way I'm using top overriding it. try it out anyway.

adding <top:0> to the staff-bar seems to be essential, makes sense.

This does not solve the problem yet, as they are not stacked properly - we need to add a top value to the nav-bar to have it give some space for the staff-bar, this may not be the best way to do it as it's kind of brute-forcy, but anyway, so - The problem with a static top value is the size of the elements might change based on screen-size, or more specifically browser window size, which is especially important if you're on your phone or tablet etc.

Best would be to add a top value equivalent to the height of the staffBar to the nav-bar - this cannot be achieved by css, but it should be very easy with js or so, see example below:

// If the heights of the staff-bar or nav-bar do not change in relation to the browser window size then this should not be necessary at all, and Noah's solution should do.

I tried in console, seemed to work - should at least help.

code:

// check if the .is-sticky class is applied, so it happens only when scrolled down. (the class applies when the nav-bar becomes sticky, i.e when you've scrolled far down enough that the top of your
// browser window has gone over the navbar element

const staffBarHeight = document.getElementsByClassName('p-staffBar')[0].offsetHeight
// You can make the above change dynamically without a refresh, not going to get into it though. add an event listener for window resizing

// check if the .is-sticky class is applied, so it happens only when scrolled down. (the class applies when the nav-bar becomes sticky, i.e when you've scrolled far down enough that the top of your
// browser window has gone over the navbar element


const staffBarHeight = document.getElementsByClassName('p-staffBar')[0].offsetHeight

// You can make the above change dynamically without a refresh, not going to get into it though. add an event listener for window resizing

window.onscroll = function () {
if (document.querySelector('.p-navSticky.is-sticky') !== null ) {
document.getElementsByClassName('p-staffBar')[0].style.top = 0
document.getElementsByClassName('p-staffBar')[0].style.zIndex = 399;
document.querySelector('.p-staffBar').style.position = 'sticky';
document.getElementsByClassName('p-navSticky')[0].style.top = staffBarHeight + 'px';
}
}

this doesn't look great but not the worst ever, I'd consider reducing the size of the nav-bar element if a change like this is considered to be pushed to live

 

[ViVceptioN]

Above looks good, works the same way the navbar persists through scrolling, the style that allows it to be persistent through scrolling is putting this <position: sticky;> in the .p-staffBar class

But there is a problem - the nav-bar is already persistent through scrolling, so the staff-bar will not be visible as they will not be stacked properly - and doing JUST this will effectively render it useless but ( and I'm starting to guess here) the the z-index of the staff-bar should be 1 less than that of the nav-bar, so if it's 400, make staff-bar 399 , although I added this and it didn't seem to matter when testing, could be due to the bruce-force way I'm using top overriding it. try it out anyway.

adding <top:0> to the staff-bar seems to be essential, makes sense.

This does not solve the problem yet, as they are not stacked properly - we need to add a top value to the nav-bar to have it give some space for the staff-bar, this may not be the best way to do it as it's kind of brute-forcy, but anyway, so - The problem with a static top value is the size of the elements might change based on screen-size, or more specifically browser window size, which is especially important if you're on your phone or tablet etc.

Best would be to add a top value equivalent to the height of the staffBar to the nav-bar - this cannot be achieved by css, but it should be very easy with js or so, see example below:

// If the heights of the staff-bar or nav-bar do not change in relation to the browser window size then this should not be necessary at all, and Noah's solution should do.

I tried in console, seemed to work - should at least help.

code:

// check if the .is-sticky class is applied, so it happens only when scrolled down. (the class applies when the nav-bar becomes sticky, i.e when you've scrolled far down enough that the top of your
// browser window has gone over the navbar element

const staffBarHeight = document.getElementsByClassName('p-staffBar')[0].offsetHeight
// You can make the above change dynamically without a refresh, not going to get into it though. add an event listener for window resizing

// check if the .is-sticky class is applied, so it happens only when scrolled down. (the class applies when the nav-bar becomes sticky, i.e when you've scrolled far down enough that the top of your
// browser window has gone over the navbar element


const staffBarHeight = document.getElementsByClassName('p-staffBar')[0].offsetHeight

// You can make the above change dynamically without a refresh, not going to get into it though. add an event listener for window resizing

window.onscroll = function () {
if (document.querySelector('.p-navSticky.is-sticky') !== null ) {
document.getElementsByClassName('p-staffBar')[0].style.top = 0
document.getElementsByClassName('p-staffBar')[0].style.zIndex = 399;
document.querySelector('.p-staffBar').style.position = 'sticky';
document.getElementsByClassName('p-navSticky')[0].style.top = staffBarHeight + 'px';
}
}

this doesn't look great but not the worst ever, I'd consider reducing the size of the nav-bar element if a change like this is considered to be pushed to live

Forum is not js based, the themes use style parameters, I need to get the parameter for staffbar height (to use as the top value) to achieve it. I'm not placing a static top in the css file, getting that parameter is the fun part since they don't look to be documented that well.
But I'm on leave for a few days so will have a proper look at it next week when back.

 

[SILTECH786]

And this is why I did not complete my MSCD qualifications years ago learning to code was just not in my blood , even though I really wanted to be a programmer

 

[XtaCy696 | CGSATech]

And this is why I did not complete my MSCD qualifications years ago learning to code was just not in my blood , even though I really wanted to be a programmer

Same boat as me @SILTECH786

 

[valiente]

Aah yes, Understood. That will be too much screen purchase gone....mmmmmm...perhaps you could move the tab below the Logo tab? Or integrate the Inbox and alerts in the bar: View attachment 49811
Sorry, I don't mean to make this a mission 🙈 as I might be the only one that find this a bit of a las to scroll up every time to see notifications and inbox.

When the new site was just launched, I asked for the Profile, Alert, Inbox & Search buttons to be incorporated into this bar above but right aligned. Still looking into it?

 

[ViVceptioN]

When the new site was just launched, I asked for the Profile, Alert, Inbox & Search buttons to be incorporated into this bar above but right aligned. Still looking into it?

Def not going to move them into the same bar, we have reasons for that, one of which is if you are not a normal user you have way more items in the staffbar (it's called staffbar for a reason), if we move those things what do we do with the other items. Honestly it will be a mess imo. Best we can do is make them stick together when scrolling.

 

[h0mer]

Thank you for all the input from everyone! Amazing to see the forum support!
@ViVception enjoy your leave and it is much appreciated that you are willing to look into this.

Cheers all...have a brilliant one!!!
🖖
(gonna use this emoticon all the time)

 

[ViVceptioN]

Have not forgot about this, just did not have time just yet

 

[h0mer]

Have not forgot about this, just did not have time just yet

No worries, totally understand.

 

[ViVceptioN]

Hey guys, just a question. Is it possible to make this bar:View attachment 49798stay visible while scrolling down like this one:View attachment 49799
It will be great to see messages and alerts while having scrolled down on a page.
Cheers

Finally tracked down the damn height of that top bar.

This is done for the Light theme, I will need to adjust the background for the top bar in the dark theme before implementing this on the dark theme.

 

[ViVceptioN]

Stayed after work to finish the dark one as well

Both themes should have this change

 

[h0mer]

Finally tracked down the damn height of that top bar.

This is done for the Light theme, I will need to adjust the background for the top bar in the dark theme before implementing this on the dark theme.

Great stuff man...glad to see you are making progress
Thanks again for the thought going into this!!!
Cheers

 

[h0mer]

almost there...except for the white line in between the top and second bars. you can actually see the background in the white line while scrolling. Also, the size is not exactly the same between the second bar and the main window.
But great job dude...i have no idea how to do this...so kudos!!! And thanks for the commitment. 🙌

 

[Off-The-Chart]

But great job dude...

@ViVception there should be a ban in there somewhere

 

[noa]

Just reduce the top px by 1 to get rid of the line.

.p-navSticky {
    top: 43px;
}

 

[valiente]

Great stuff man...

@ViVception there should be a ban in there somewhere

Even the previous post was Ban worthy...

 

[valiente]

Just reduce the top px by 1 to get rid of the line.

.p-navSticky {
    top: 43px;
}

Mine I had to reduce to 42px to get rid of it completely.

Thanks @ViVception it looks much better

 

[ViVceptioN]

Mine I had to reduce to 42px to get rid of it completely.

Thanks @ViVception it looks much better

I will have a look later cause on my side it looks fine as well as with @Ageless_ZA. But a work colleague tested it on their side and I saw the problem.
The px is calculated with the height, padding and border parameters, I'm not manually changing values cause that will cause issues further down the line.

Anyway will work on this later, we are quite busy

 

[Skiddz]

The notification and search bar does not move with on my mobile so it looks weird now...#fyi

 

[ViVceptioN]

The notification and search bar does not move with on my mobile so it looks weird now...#fyi

Okay I know why this is happening, in that case, I'm reverting the changes. As I thought this is not a quick fix, will have to spend some more time over the weekend (not familiar with how the mobile site changes so will have to go knees deep ).

 

[Ageless_ZA]

will have to go knees deep ).

Balls deep is better..... Remind me and I'll come assist.

xD

 

[Air]

Good idea/question this.

Not sure how possible this is as the logo will interfere with this

You all think to difficult of making both bars stay on scrolling, There is space on the bar that stays when scrolling to merge the two.

It will work if you remove the top bar altogether and add the interface elements to the right of the bar that stays when scrolling. Issue solved. (I did a quick paint mockup and colors dont match but you get the idea.)

 

[ViVceptioN]

Good idea/question this.




You all think to difficult of making both bars stay on scrolling, There is space on the bar that stays when scrolling to merge the two.

View attachment 57976

It will work if you remove the top bar altogether and add the interface elements to the right of the bar that stays when scrolling. Issue solved. (I did a quick paint mockup and colors dont match but you get the idea.)

View attachment 57977

It's not that simple, I cannot just remove the top bar, staff members NEED that bar, it's our entry point for certain actions. I cannot just cater for one set of user and his/her needs. I need to keep all in mind.

 

[Air]

It's not that simple, I cannot just remove the top bar, staff members NEED that bar, it's our entry point for certain actions. I cannot just cater for one set of user and his/her needs. I need to keep all in mind.

Ah, it gives extra functionality for some admins? What if you move that functionality then somewhere else? Like bottom of page. You have mixed admin interface with user in 1 place as Homer has a point in what he is asking.

 

[h0mer]

Balls deep is better..... Remind me and I'll come assist.

xD

Not so sure balls deep is better than knees deep...but if it gets er done...then either will do [emoji28]

Sent from my SM-N910H using Tapatalk