Add a navigation bar between last post and QR on threads

[RichardInTN]

Ain't autocorrect great? LOL

[?adwoman?]

Tumbleweed can you put space between pagination and navigation as they scroll down together? it seems they overlapped each other. Thank

[Tumbleweed]

Jan 8, 2017 21:27:30 GMT -8 ?adwoman? said:

Tumbleweed can you put space between pagination and navigation as they scroll down together? it seems they overlapped each other. Thank

Adwoman, are you talking about Brian's code posted in this thread or what I'm doing on my test site? If on my test site, I haven't done anything with it since my last post and as I said in that post, it is far from working properly. I just haven't been in the frame of mind to mess with it but hopefully will in the next day or so. 

[?adwoman?]

Jan 8, 2017 21:37:00 GMT -8 Tumbleweed said:

Jan 8, 2017 21:27:30 GMT -8 ?adwoman? said:

Tumbleweed can you put space between pagination and navigation as they scroll down together? it seems they overlapped each other. Thank

Adwoman, are you talking about Brian's code posted in this thread or what I'm doing on my test site? If on my test site, I haven't done anything with it since my last post and as I said in that post, it is far from working properly. I just haven't been in the frame of mind to mess with it but hopefully will in the next day or so. 

on your test site and there is no hurry

[Tumbleweed]

I just wanted to let you two know I haven't forgot about this. I have just been too busy to allot enough time to really look at where my fixes need to be on the code. ((A dear friend is just having a heck of a time getting people to show up to work (It's a Subway) and I've been helping out by not only working in the restaurant part but I've been interviewing potential hires, someone that will actually show up when scheduled. ))

I'm really sorry you've had to wait so long. (Anyone else is welcome to jump on this if they want.)

[RichardInTN]

No rush. You are a saint for volunteering your time to do it! (thanks for the update though, so we know it's still a box on your "to do" list! LOL)

[RichardInTN]

Jan 12, 2017 23:55:51 GMT -8 Tumbleweed said:

I just wanted to let you two know I haven't forgot about this. I have just been too busy to allot enough time to really look at where my fixes need to be on the code. ((A dear friend is just having a heck of a time getting people to show up to work (It's a Subway) and I've been helping out by not only working in the restaurant part but I've been interviewing potential hires, someone that will actually show up when scheduled. ))

I'm really sorry you've had to wait so long. (Anyone else is welcome to jump on this if they want.)

So you're looking for a time traveler, from 30-50 years ago, then... (this ain't the place or time for a long conversation on it, but I'm amazed at the caliber of new hires in this area too {and not just here, at my work, but everywhere around here!} It's almost like they expect the employer to apologize for interrupting their day... when they actually show up!)

[Tumbleweed]

RichardInTN, You are so right about finding good people. But finally, I now have my evenings off as I seem to have set up my friend with some good hires and some in reserve, so now I can get at that code tomorrow, if I feel rested, although it may be the next day. I just may want to be lazy tomorrow evening plus catch up on housework/laundry & stuff.

I am so sorry this is taking so long and this friend in need thing came up. 

[RichardInTN]

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)

[Tumbleweed]

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. 

[RichardInTN]

I know this is going to sound like a stupid question... but... "wrapper template"? what "wrapper template"? Are you referring to this needing to be done for each Theme, separately? and if so, does it go in "Forum wrapper"?

Also, does the amount of indent matter? Do they have to match?

[Tumbleweed]

Jan 29, 2017 3:30:35 GMT -8 RichardInTN said:

I know this is going to sound like a stupid question... but... "wrapper template"? what "wrapper template"? Are you referring to this needing to be done for each Theme, separately? and if so, does it go in "Forum wrapper"?

Also, does the amount of indent matter? Do they have to match?

By wrapper template I mean go to: Admin > Themes> Layout Templates>Forum Wrapper ....and yes, unfortunately this would have to be added to every theme template if you wanted it on all themes.

Not sure what you mean about the indent.

[Lynx]

Tumbleweed,

I would guess that RichardInTN is asking about if he needs to line up the code with indentation. If this is what you are asking, RichardInTN, then the answer would be "no" as it is considered white-space which is ignored. Indenting code is more for humans simply to make it more readable. The browser doesn't care if it looks like this:


<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>



or if it looks like this:


<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>


It'll run it the same way.

[RichardInTN]

Yes, that's what I was referring to (although those both look the same to me!)

[Lynx]

Here's an image to show that the bottom code is indented: