Easy Access to the Participated Button

[Tumbleweed]

O.K. Vapers, I'm back and have read the back and forth between you and Kami and all I can say is ..."where were you Kami  from August 9th to August 21st when Vapers tagged me?"   You know Vapers, how I said this was a nightmare for me helping that other person. Well, I think I blocked some things from my mind.

First, doing this in a pixel width would of been a breeze because each pixel counts no matter what screen resolution you have. But like most people, we like the percentage because then the forum is always that percent of the screen no matter what screen resolution a person has but it also comes with some pains too.

Anyway, what my brain wasn't thinking of when I told you to change the padding in the menu was what Kami was saying and also I wasn't thinking about the role the jquery and the div we added plays. When we are scrolling, the browser uses the class navigation-menu and when the menu hits the position set in the jquery, it switches classes to  the f-nav1 (nav-1) class which is then in the fixed position. So me having you change the padding was wrong for the menu bar. (Oh gosh, I hope that makes sense as I'm in a hurry.)
What we should be changing is the width in this in our style sheet.

.f-nav1{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:88.88%;
padding: 0 8px;
}

Now for a few seconds before I came here I was playing with the css in there so mine is now different than what you gave me.

Now the control bar, try removing the border (the red) I added and play with the width in that.

.container>.control-bar {
top: 40px !important;width:99.9%;border-right:1px solid black;
}

Thanks for the screen shots. Again, I'm pressed for time and have to jump off the computer but when I come back later, I'll closely look at those screen shots and tell you if I"m seeing what your seeing.

[Vapers United]

Doing both with width:99.8% fixed the Menu Bar and the Control Bar when they are Stickied.  They both work perfectly now for me once they become stickied.

If I were to get ultra picky  (and please don't call me a ), I noticed one last thing that you probably will, too.

The Menu Bar gets narrowed by 1px as soon as I start scrolling down the page. When it passes over the Nav Tree, the last 1px of it (the black border of the Participated Button) is seen behind the Menu Bar while scrolling. Then, as the Menu Bar passes over the Title Bar, the last 1px of its border is seen as the Menu Bar passes over it. If the Title Bar could be narrowed by 1px permanently to match the width of the Control Bar above it, and the Nav Tree could be narrowed by 1px as soon as the Menu Bar is narrowed, I would have to say that you've achieved Perfection!

And calmed my OCD at the same time!   My Prayer would be that this would work equally well in all browsers!!!

To be graphic about it, in case I have used a wrong name for something...

Whaddaya think?

And in case you are wondering how I was able to get the top and bottom border lines to show on the Control Bar, I used this support.proboards.com/post/6028744/thread. I had both the top and bottom selected (as can be seen above), but I changed that to only the bottom one today. I think it looks better now because it matches they way it looks when it becomes Stickied with you new code.

[Vapers United]

Sorry for a double post, but guess what? I was looking for a way to use width:99.9% and found something kind of cool. If I make a change to the first part...

.f-nav1{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:89.00%; <---- 89.00% up from 88.88%
padding: 0 8px;
}

with width:99.9%

...the 89.00% width prevents having to the narrow the widths of the Nav Tree and Title Bar as the Menu Bar passes over them. The Menu Bar passes over them perfectly. However, with width:99.9%, the Control Bar is still missing the closing border at the far right until it gets stickied below the Menu Bar, but that's the only thing wrong. This brings me back to finding a padding (or anything) that would allow the complete width of the Control Bar to fit within a setting of width:99.9% before it gets stickied. So I'll ask about this line again...

/*Participate button in control panel*/
#part{display: inline-block;position: relative; float: left;font-size:100%;border-width: 1px; .rounded-corners(3px);padding: 4px 6px 6px 6px; color:#000000; background-color: #ffffff;
}

...and the padding: 4px 6px 6px 6px; section.

I'll also say that there may be a setting in the Control Bar code itself which might be able to help here. That is, the area of the Control Bar settings that this new code works with and/or alters to make it sticky - if that makes sense.  Trying to explain again, the Control Bar code that makes it what it is before it becomes sticky with your code. Just throwing findings and thoughts out there.

Making changes to the 8px part of padding: 0 8px; did nothing that I could see.

[Tumbleweed]

I think we coming down to screen resolutions and any pixels we are changing. I have a screen resolution of 1366 x 768.
Viewing your site right now, all 4 browsers show the menu bar is not wide enough and thus everything that passes under it shows from 1 to maybe 3 pixels. The control bar is fine(other than showing under the menu)on all other browsers except edge. Edge is the only browser both before and now that is missing the right black border. I never saw it missing the border in IE11((ll.540.something something) on your site.

On my site, I currently have everything perfect except the control bar viewing in Edge. (if I set it to 88.8 it's fine in edge and not o.k. in other browsers.)

I have line 278 in my style sheet back to what it originally was: #navigation-menu { padding: 0 8px;

I have this:

.f-nav1{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:88.9%;
padding: 0 8px;
}
and this:


.container>.control-bar {
top: 40px !important;
width:99.9%;
border-right:1px solid black;
}

If it is looking screwed up on my test site then we know it has to be screen resolutions causing issues and some pixels messing things up. And I don't know a fix for that other than going for a straight pixel width instead of percentages.

[Vapers United]

My screen resolution is 1920x1080 from a gaming video card and a 24" wide screen monitor.

My line 278:
#navigation-menu { padding: 0 5px; background: johnnynav_bar_background; border: johnnynav_bar_border; .rounded-corners(johnnynav_bar_border_radius); }

I have this now (following yours):

.f-nav1{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:88.90%;
padding: 0 8px;
}

and this:

.container>.control-bar {
top: 40px !important;
width:99.9%;
border-right:1px solid black;
}

Since we are down to screen resolution with its multitude of potential variations, I'm wondering what to do from here. I hate it that you've spent so much time with me only to find that you'd have to start over with a straight pixel width. How much trouble would that be and how likely is it for us to run into spending a similar amount of time to get it right?

[Tumbleweed]

Aug 27, 2017 7:55:53 GMT -8 Vapers United said:

My screen resolution is 1920x1080 from a gaming video card and a 24" wide screen monitor.

My line 278:
#navigation-menu { padding: 0 5px; background: johnnynav_bar_background; border: johnnynav_bar_border; .rounded-corners(johnnynav_bar_border_radius); }

I have this now (following yours):

.f-nav1{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:88.90%;
padding: 0 8px;
}

and this:

.container>.control-bar {
top: 40px !important;
width:99.9%;
border-right:1px solid black;
}

Since we are down to screen resolution with its multitude of potential variations, I'm wondering what to do from here. I hate it that you've spent so much time with me only to find that you'd have to start over with a straight pixel width. How much trouble would that be and how likely is it for us to run into spending a similar amount of time to get it right?

Easy to do pixels. I put it on my test site. You'd have to go into your visual editor and set the width to pixels there. I set mine forum width to be 1200px and this is the css that goes with it.


/*Participate button in control panel*/
#part{display: inline-block;position: relative; float: left;font-size:100%;border-width: 1px; .rounded-corners(3px);padding: 4px 6px 6px 6px; color:#000000; background-color: #ffffff;
}  
/*adjust the nav bubbles*/
#navigation-menu div.tip-holder {
position: absolute;
top: 0px;
right: -6px;
display: inline-block;
}
#welcome{margin-top:6px;position:relative;margin-right:16px;
}
#navigation-menu{margin-right:0px;}
#navigation-menu a { position: relative; }
#navigation-menu ul, #navigation-menu ul li { float: left;
}
#navigation-menu ul li a { display: inline-block; padding: .60em .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 24px!important;
}
#navigation-menu ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 24px!important;height:24px;
}
#navigation-menu ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 24px !important; }  
/*scroll and the fixed menu bar*/
.f-nav1{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:1184px!important;
padding: 0 8px;
}
/*Needs to be about 10px more than your menu height due to the bubble*/
.container>.control-bar {
top: 40px !important;
width:1198px;
}

Check it out and let's see if it looks o.k. on your screen.

[Vapers United]

Glad to know it would be easier. But does it have to be 1200px? Is it the 1200px width that makes it easier?

[Tumbleweed]

Aug 27, 2017 17:50:26 GMT -8 Vapers United said:

Glad to know it would be easier. But does it have to be 1200px? Is it the 1200px width that makes it easier?

No, doesn't have to be 1200 but you do want to keep in mind not everyone has super sized screen resolutions. I think a share of people keep it at 1280 to cover the most popular sizes but you also need to know who your members are. Are they all tech savvy and probably have the latest of everything including massive screens, for example.
You would have to play with the pixels in f-nav1 and the control css to get it the way you want it and that's easy and it should look the same to everyone, cross browser and screen res. 

I am hoping though, in the next day to put a divide around the whole nav tree, forum, etc. and set it just a tiny bit less than the menu bar, sort of how here on ProBoards, for me at least, their menu bar is like 2 pixels wider on the right side than the banner. But I want to see if I can get the menu to have like two pixels on either side so it looks balanced and was meant to be that way and that way it covers those bits from the nav tree sticking out and that is using percentages.

[Vapers United]

Never mind about the 1200px thing. I'm working with that. There is only one thing to report and I'm making an image of that so you can see it as it happens.

Before you work on the divide around the "whole nav tree, forum, etc.", you'll want to see the image in my report. For myself, I'd rather not have anything sticking out by 2px on both sides. You'll see why in the image. The only real concern about being 1200px would be if anyone had an old laptop with 1024x768 or 1152x862 resolution.

I'll edit it the report in to this post.

[Kami]

For your consideration: resolution statistics.

www.w3schools.com/browsers/browsers_display.asp

gs.statcounter.com/screen-resolution-stats

[Vapers United]

Aug 27, 2017 20:19:07 GMT -8 Kami said:

For your consideration: resolution statistics.

www.w3schools.com/browsers/browsers_display.asp

gs.statcounter.com/screen-resolution-stats

Thanks. There is only one person that I know of who might have a laptop with 1024x768 resolution.

[Tumbleweed]

Alrighty, Vapers United, I won't bother with the forum resize thing.

And keep in mind, the links Kami posted are statistics from people who would be visiting those sites, so they would likely be in some aspect of web design or programming. So that is why you need to know your customer or a rough idea who your member base will be. And that's the downfall of using pixel widths.

[Vapers United]

Aug 27, 2017 20:38:05 GMT -8 Tumbleweed said:

Alrighty, Vapers United , I won't bother with the forum resize thing.

And keep in mind, the links Kami posted are statistics from people who would be visiting those sites, so they would likely be in some aspect of web design or programming. So that is why you need to know your customer or a rough idea who your member base will be. And that's the downfall of using pixel widths.

Considering the data that has been presented, what would you and Kami suggest? 1200px or less? Someone would have to own a pretty old computer to have a resolution less than 1280 x anything. If I read the chart correctly, only 3% of people have 1024x768. As long as they have 1280x720, they should be OK.

[Kami]

Personally, I go with an even thousand if I'm using a fixed width. 1200 would likely be pushing it, for my tastes. But that's personal preference -- remember the lower the resolution the bigger the forum will appear.


Though I must clarify Tumbleweed, the second link is to statcounter statistics -- a lot of forums that aren't technical use stat counter, and is still even a commonly suggested solution if one cannot afford google analytics for site traffic. It probably represents a broader spectrum of internet users.

[Vapers United]

Aug 27, 2017 20:57:59 GMT -8 Kami said:

Personally, I go with an even thousand if I'm using a fixed width. 1200 would likely be pushing it, for my tastes. But that's personal preference -- remember the lower the resolution the bigger the forum will appear.


Though I must clarify Tumbleweed , the second link is to statcounter statistics -- a lot of forums that aren't technical use stat counter, and is still even a commonly suggested solution if one cannot afford google analytics for site traffic. It probably represents a broader spectrum of internet users.

I was thinking 1052 when this started. I'd be good with 1000, 1020, 1024, or whatever is best.

EDIT:
I guess I could take a poll.