Add a navigation bar between last post and QR on threads

[Tumbleweed]

Thanks Lynx,  I really had no clue what he meant by indent (went right over my head, lol) so kudos for you knowing exactly what he meant.


RichardInTN,  the code will work fine with or without indents. Indents are mostly used so the coder knows they have everything in the right sequence, etc.

[RichardInTN]

Jan 28, 2017 23:33:33 GMT -8 Tumbleweed said:

Jan 21, 2017 21:21:02 GMT -8 RichardInTN said:

Friends in need come first in my book, only exception being if family is in need at the same time... then family first. (more of the old-fashioned thinking)

How odd you should say that about family. My older sister ended up in the hospital as her blood pressure was bouncing all over the place, she was getting dizzy, blurry eyed and since I'm the only sibling that lives near her, I felt I should be there in the evenings with her for support. She is out now and her blood pressure is somewhat stable.

Anyway, this is the first chance I've had to look at the coding since the last time I posted and I'm still having some difficulties with that nav tree sliding under the menu and then righting itself to the fixed correct position but just in case anyone wants to use it, I think I'll go ahead and post what I have since most people probably won't notice if they scroll fast and most do. (We'll notice though, lol)

First here is just the menu bar by itself: Go to your wrapper template and put the red right about above the first ul which on a default template is right around line 23.24.

<div id="navigation-menu" class="ui-helper-clearfix">
<div class="nav1">
<ul role="navigation">


Then scroll down and add the red right above the </header> like I have it below around line 52.

</p>
</div>
</div>
</header>
$[participated_threads_link]

Then add this jquery at the bottom of the wrapper template:


<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('#navigation-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 104) {
nav.addClass("f-nav1");
} else {
nav.removeClass("f-nav1");
}
});
});
</script>


The menu gets messed up with this for some reason so here is the css to fix it, which you can add to the bottom of your style sheet:


.f-nav1{
position: fixed;
top: 0;
margin:0 auto;
width:90%;
z-index: 9999;
}
/* this is changing the height of the menu so the bubbles show*/
.nav1 {height: 46px; width:100%;}
/*where the whole menu starts on the left*/
.nav1 ul { list-style: none; float:left;margin-right:0px;margin-left:4px;
}
/*space between menu links and positioning*/
.nav1 ul li{float: left;padding: 6px;position:relative;bottom:-14px;
}
/*.nav ul li a {margin-bottom:-8px!important;color:#ffffff!important;
}*/
#navigation-menu{padding:0px;}
/*adjustst the nav bubbles*/
#navigation-menu div.tip-holder {
position: absolute;
top: -18px;
right: 0px;
display: inline-block;
}
#welcome{margin-top:12px;position:relative;right:16px;
}
/* This number should be the height of your menu bar */
.container>.control-bar {
top: 46px !important;width:99.9%;border-right:1px solid black;
}





---

Now here is just the nav tree: (If you want both the menu bar and nav tree to scroll and then go in the fixed position, you can go ahead and add both sets of instructions but there are adjustments you'll need to make so you may want to wait for my instructions on doing both or you can fiddle with it yourself.) 

Again, in the wrapper template add the red: (around line 54-ish)

<div id="static_tree">
<div class="nav2">
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
</div>
</div>


And then add this to the bottom of the wrapper template: If doing the menu too, put it below the other jquery.


<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('#static_tree');
$(window).scroll(function () {
if ($(this).scrollTop() > 120) {
nav.addClass("f-nav2");
} else {
nav.removeClass("f-nav2");
}
});
});
</script>

And then the css:


.f-nav2{
z-index: 9999;
position: fixed;
top:5px;
margin:0 auto;
width:90%;
}
.nav2{height: 26px;}
#static_tree{height:26px;}
.container>.control-bar {
top: 28px!important;
width:99.9%;
border-right:1px solid black;
}
Now if you are doing the menu bar and the nav tree this part....

.container>.control-bar {
top: 28px!important;
width:99.9%;
border-right:1px solid black;
}
...you only need once so make sure you have it in the css only once. It is moving the action bar down so it doesn't hide under the menu/nav tree when they get stickied at the top,  so if you are doing both you'll probably need that... top: 28px!important; ... to be much larger like maybe 72px.

Anyway, I'm going to be looking into making this better and work so the nav tree and action bar don't slip under the menu and then snap into position. Meanwhile, whoever wants to try this is welcome to do your own fiddling. I'll post back if I find a solution. Meanwhile, if you have any questions, feel free to ask.

To onlookers, I know what I'm posting is a template modification and shouldn't be in plug in requests, but for the moment, will just keep it here in case someone does jump in with a plug in to do both menu/nav tree. 

The menu bar is "glitchy" so I took it back out (for now), but I was going to give the Nav Bar part a go... so I went to look for:

<div id="static_tree">
<div class="nav2">
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
</div>
</div>

the stuff in black so I could add the red appropriately... and apparently the theme I'm using for my testing does NOT have those 6 lines you have in black. Here's my test theme's "forum wrapper":
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
                   <ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  Please $[login_link] or $[register_link].
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</p>
</div>
           </header>
$[participated_threads_link]

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
There is a "$[participated_threads_link]", but that's the only line that matches. Is that going to cause any problems? Do I just wrap it around that one line?

[♥ ℒʊ√ ♥]

Dec 27, 2016 9:18:17 GMT -8 Brian said:

I personally use this to make the top one move to the bottom on longer pages once you've scrolled halfway down the page. I've adjusted it to move the navigation tree above the quick reply if it's present.

<script type="text/javascript">
    $(document).ready(function(){
        var navTreeTop = $('#navigation-tree').offset().top + $('#navigation-tree').height();
        $(window).scroll(function(){
            if($(window).scrollTop() > navTreeTop && !$('#navigation-placeholder').length){
                $('#navigation-tree').before('<div id="navigation-placeholder"></div>').insertBefore($('.container.quick-reply, footer').first());
                $('#navigation-placeholder').height($('#navigation-tree').height()).css('margin-bottom',$('#navigation-tree').css('margin-bottom'));
            } else if($(window).scrollTop() < navTreeTop && $('#navigation-placeholder').length) {
                $('#navigation-tree').insertAfter('#navigation-placeholder');
                $('#navigation-placeholder').remove();
            }
        });
    });
</script>

Brian , I love this! Works great on our forum ~ where pages consist of 30 posts ~ with many being quite lengthy!

[RichardInTN]

Bump because... well... bump. Tumbleweed

[Tumbleweed]

Feb 19, 2017 18:11:30 GMT -8 RichardInTN said:

Bump because... well... bump. Tumbleweed

Oh dang, Richard, how do I keep missing your post/tags?  So sorry.
I don't know why that part is missing. So you don't have the nav tree showing then and do you want it to show? I went back to through this thread and couldn't fine a link to your site so I could look, but might have missed it. 

Sorry, just a bit confused as I take it you must have the nav tree showing if you wanted to try to use this code but I have no clue where else it could be beside in your forum wrapper.

I guess I can tell you this. If you don't have the nav tree showing and you want it to show and try this code, then add all the parts you don't have. If you do have the nav tree showing and you want it to show, then we need to figure out where the heck it is. Putting that around the $[participated_threads_link] will only affect the participate button and that's it.

[?adwoman?]

milltown.proboards.com/forum

wrong bar is following me down the board so how do I get this bar follow me instead
Thanks

Attachments:

[RichardInTN]

Feb 19, 2017 23:07:57 GMT -8 Tumbleweed said:

Feb 19, 2017 18:11:30 GMT -8 RichardInTN said:

Bump because... well... bump. Tumbleweed

Oh dang, Richard, how do I keep missing your post/tags?  So sorry.
I don't know why that part is missing. So you don't have the nav tree showing then and do you want it to show? I went back to through this thread and couldn't fine a link to your site so I could look, but might have missed it. 

Sorry, just a bit confused as I take it you must have the nav tree showing if you wanted to try to use this code but I have no clue where else it could be beside in your forum wrapper.

I guess I can tell you this. If you don't have the nav tree showing and you want it to show and try this code, then add all the parts you don't have. If you do have the nav tree showing and you want it to show, then we need to figure out where the heck it is. Putting that around the $[participated_threads_link] will only affect the participate button and that's it.

I just realized that that theme indeed DOESN'T have a Nav Bar. That's just weird. Don't know how I missed that before.

So... if I put in the "other stuff" I should get a nav bar? Off to check now!

Oh, and I edited a link to my board into the OP, but here's a link as well: buildinggreatness.proboards.com/forum

ETA: Ok. So... adding in the stuff in black that I was missing gave me the Nav Bar. BUT, making the rest of the changes only locked the "Participated" link (and a "Today's Birthdays" link) to the top of the thread. The Nav Bar disappeared.

Could it be a conflict with Brian Ordonez's code that moves the bar once you get half way down the page?

[Tumbleweed]

Feb 20, 2017 18:57:02 GMT -8 RichardInTN said:

Feb 19, 2017 23:07:57 GMT -8 Tumbleweed said:

Oh dang, Richard, how do I keep missing your post/tags?  So sorry.
I don't know why that part is missing. So you don't have the nav tree showing then and do you want it to show? I went back to through this thread and couldn't fine a link to your site so I could look, but might have missed it. 

Sorry, just a bit confused as I take it you must have the nav tree showing if you wanted to try to use this code but I have no clue where else it could be beside in your forum wrapper.

I guess I can tell you this. If you don't have the nav tree showing and you want it to show and try this code, then add all the parts you don't have. If you do have the nav tree showing and you want it to show, then we need to figure out where the heck it is. Putting that around the $[participated_threads_link] will only affect the participate button and that's it.

I just realized that that theme indeed DOESN'T have a Nav Bar. That's just weird. Don't know how I missed that before.

So... if I put in the "other stuff" I should get a nav bar? Off to check now!

Oh, and I edited a link to my board into the OP, but here's a link as well: buildinggreatness.proboards.com/forum

ETA: Ok. So... adding in the stuff in black that I was missing gave me the Nav Bar. BUT, making the rest of the changes only locked the "Participated" link (and a "Today's Birthdays" link) to the top of the thread. The Nav Bar disappeared.

Could it be a conflict with Brian Ordonez's code that moves the bar once you get half way down the page?

More than likely since they are targeting the same thing. Remove it and see.

[RichardInTN]

I'll give it a try when I'm the only one on (and only one likely to be on for a while).

[RichardInTN]

Okay.

Got a chance to try it, Tumbleweed.

Looks like that was the problem causing that issue.

However, once I "Remarked" that HTML code out temporarily, Your fix did work, but had a couple of glitches that I captured here:

Before the bar locks in place everything looks fine, including the "Today's Birthdays" and "Participated" links, as shown here:


Once the bar jumps (and it is a jump, which can be a bit jarring if you watch it when it happens), two problems occur, both of which can be see here:


Problem 1: The "Today's Birthdays" and "Participated" links moved to the left significantly.

Item A: If you look closely, you can see that BEHIND the Nav Bar, in the background, you can clearly see the posts scrolling by. Going from the solid pagination bar back to visibility of the posts is just a bit weird looking.

[Tumbleweed]

Feb 21, 2017 2:06:39 GMT -8 RichardInTN said:

Okay.

Got a chance to try it, Tumbleweed .

Looks like that was the problem causing that issue.

However, once I "Remarked" that HTML code out temporarily, Your fix did work, but had a couple of glitches that I captured here:

Before the bar locks in place everything looks fine, including the "Today's Birthdays" and "Participated" links, as shown here:


Once the bar jumps (and it is a jump, which can be a bit jarring if you watch it when it happens), two problems occur, both of which can be see here:


Problem 1: The "Today's Birthdays" and "Participated" links moved to the left significantly.

Item A: If you look closely, you can see that BEHIND the Nav Bar, in the background, you can clearly see the posts scrolling by. Going from the solid pagination bar back to visibility of the posts is just a bit weird looking.

I can't believe this thread started in late December and the space between times of posting makes me forget what does what in the code. lol Really sorry this is taking so long.

1. What code are you using to put today's birthdays there because, by default, all that is normally there is the Participate button?
As far as seeing the post, you need to set the css top to 0px.

.f-nav2{
z-index: 9999;
position: fixed;
top:0px;
margin:0 auto;
width:90%;
}

You may also want to play around with the width in that to see if making it larger stops the birthdays/participated stop moving but if not, I'd like to set my test site up with that birthday code, whatever you are using.

To limit the jumping go to the jquery part and set the 120 to a higher number. I disabled my menu from being sticked so I could retry the nav tree alone and I found 140 seems to work well. I bolded that part below.

<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('#static_tree');
$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
nav.addClass("f-nav2");
} else {
nav.removeClass("f-nav2");
}
});
});
</script>

Try fiddling with those things and if you still have issues, let me know and that birthday code you are using.

[RichardInTN]

Here's the Birthday code, Tumbleweed :
<script>
$(function(){
var recent = $("a.recent-threads-button");
recent.clone().attr("href", "/members?view=birthdays").html("Today's Birthdays").insertBefore($("#navigation-tree"));
});
</script>
It's in the Global Header, and basically it gets all of it's styling by cloning the "Participated" link so I don't think it's interfering (I could totally be wrong though)

[♥ ℒʊ√ ♥]

If this helps, I have both the birthday button and Brian's code in my global header, and both play nice together.

[RichardInTN]

Feb 21, 2017 18:43:39 GMT -8 ♥ ℒʊ√ ♥ said:

If this helps, I have both the birthday button and Brian's code in my global header, and both play nice together.

Oh those two play great together. No problem with them what-so-ever. It's the floating Nav Bar one that's being a problem child and not wanting to play nice... LOL

[RichardInTN]

I've already made the two suggested changes, but I can't test them out until I'm alone on the board... so that'll be later.