Floating Nav Tree

[♥ ℒʊ√ ♥]

Tumbleweed, No one has been able to get a functioning nav tree in my footer. A floating one would serve that purpose if it could be done with the Nav Tree. I see you're working on one for the Nav Bar. Is the Nav Tree possible? Any help would be greatly appreciated.  


I should note it would have to go into the Global Header or Footer given the number of themes I have. 

[Tumbleweed]

May 27, 2014 21:49:57 GMT -8 ♥ ℒʊ√ ♥ said:

Tumbleweed, No one has been able to get a functioning nav tree in my footer. A floating one would serve that purpose if it could be done with the Nav Tree. I see you're working on one for the Nav Bar. Is the Nav Tree possible? Any help would be greatly appreciated.  


I should note it would have to go into the Global Header or Footer given the number of themes I have. 

I'm glad you mentioned that about the Global Header because I'm not sure how I could do that since there are closing div's that I have no clue how to write a code that would insert them where they are supposed to be inserted in the template. I just know how to do simple stuff. I do have it working, though, with minor changes to menu code in that other thread. Just moving things a little and adjusting the css.

putteraroundiv.proboards.com/

The css and that javascript could be added in your Global header/footer but I'm afraid the html added to the template would have to go in each wrapper template. I wish I could do plug-ins but I'm just not good enough at javascript. Sorry ♥ ℒʊ√ ♥.

[♥ ℒʊ√ ♥]

Tumbleweed, there is nothing to be sorry about. It works. So if worse comes to worse, I can ask any member who wants this feature (and many do, my board misses the bottom jump to), I can add it to the themes those members are using. So all was not in vain. Where there's a will; there's a way. 

If you can give me the code, I'll put it on a theme and if works as yours done, I will be so grateful ~ as will my members.

[Tumbleweed]

O.K. In the wrapper template (Home> Themes> Layout Templates>Forum Wrapper) add the first bit of red:

<div id="wrapper">
<div class="spec_sroll_container">
<div class="test_content">
<header>

and then scroll down to the nav tree area and add this red: (Don't over look that closing div that is below the nav tree right above the &[header] bit)

</header>
</div>
</div>
<div class="scroller_anchor"></div>
<div class="scroller">

$[participated_threads_link]

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

$[header]


The css is just slightly adjusted from the menu scroll: (with out the style tags if in the stylesheet and with the style tags if global header)

<style>
.spec_scroll_container{margin:0 auto;width:900px;}
.test_content{margin:10px 0;}
.scroller_anchor{height:20px; margin:0; padding:0;
}
.scroller{
margin:0 0 10px;
z-index:10000;
height:18px;
width:900px;
margin-top:6px;
}
</style>

The bolded part might have to be adjusted if you have large text in the nav tree.

And this is the javascript: (Seems to work fine in the global header but if in the wrapper template, put at the bottom)

SPOILER: Click to show

<script>
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;

if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
{
$('.scroller').css({
'position': 'fixed',
'top': '0px'
});
$('.scroller_anchor').css('height', '20px');
}
else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
{

$('.scroller_anchor').css('height', '0px');

$('.scroller').css({
'position': 'relative'

});
}
});

</script>

[♥ ℒʊ√ ♥]

Thank you, sooooo much, Tumbleweed. I have one more option to try. A friend sent a code to me that worked for her, It placed two nav trees on her board. If I can find someone to tweak it and get a second nav tree under my Info center, that'll be great. If not, I'll use the floating code.

Wanna give her code a shot to see if you can manipulate a second nav tree under my Info center. If so, it's


<script>
$(document).ready(function() {

if (proboards.data('route').name == "home") {
$('#navigation-tree').insertBefore('.container.boards:first').css("margin-top", "10px");
} else {
$('#navigation-tree').insertBefore('#content');
}

var position = "top"
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2 && position == "top") {
$('#navigation-tree').insertBefore($('.container').eq(-2));
position = "bottom"
} else if ($(window).scrollTop() < $('body').height() / 2 && position == "bottom") {
if (proboards.data('route').name == "home") {
$('#navigation-tree').insertAfter('.container.v4news').css("margin-top", "10px");
position = "top";
} else {
$('#navigation-tree').insertBefore('#content');
position = "top";
};
};
});
});
</script>


This code puts a second tree above her Info Center. But she has padding between her categories. I do not. So that won't work for me.

But if we can just tweak this to get it below the Info Center, it might just be what I've been searching for. It goes in the Global Header.

[Tumbleweed]

I'll have to look at it tomorrow. My brain is fried. It looks like the code moves it from the top to the bottom when you scroll to the bottom and then back to the top when you scroll to the top. I can't get it to work for me, but I think it might be that I don't have enough boards on my test site to scroll far enough? Not sure.

[♥ ℒʊ√ ♥]

Not a problem, Tumbleweed. I'm in no hurry. Your willingness to help is enough. Sleep well.

[♥ ℒʊ√ ♥]

Hi, Tumbleweed ~ I hope your brain is fairing better today.

I wanted to try this on a theme, but wanted to clarify something.

This section in my forum wrapper has only these bits ~

<div id="navigation-tree">
$[navigation.tree]
</div>

But according to your directions, the only thing I should have to add is the closing </div> that you have highlighted in red. You don't have the opening and closing "if" statements highlighted in red.

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

Is that an error, or is there something wrong with my template? I checked and all of mine are how I posted above. And I don't import/export templates. In fact, I rarely make any changes to them.

I'm hoping it was just an oversight and you didn't highlight those additional bits in red and they shouldn't already be on my template. 

Thanks. 

[Forever Sunshine]

Hey, ♥ ℒʊ√ ♥, I have the same as yours in my forum wrapper for the nav tree . . .

<div id="navigation-tree">
$[navigation.tree]
</div>

[♥ ℒʊ√ ♥]

Thanks, Forever Sunshine! I appreciate the information.

[Tumbleweed]

How odd, All my test sites have the if statement around the nav tree. Regardless, that isn't something I added or you must add.  As long as you put all the other red parts where I indicated, the lack of if statement shouldn't make a difference. And that closing div right below the nav tree closing div.

<div id="navigation-tree">
$[navigation.tree]
</div>
</div>


I'm off to finally go add some more boards to a test site so I can see if that code you posted works for me. Need to see it work before I can figure anything out. BTW, ♥ ℒʊ√ ♥, do you know where your friend got that code. It would be better if we could tag that person, provided they are here on ProBoards.

I also wanted to add, the code I gave you and Tom (for the menu bar) both have the same issue of covering the control bar when in threads/posts. (I totally forgot about the control bar having the same function and only discovered this when trying to fix other issues with Tom's code.) The control bar is set to stay in the fixed position exactly where the menu bar is set to stay and I have a feeling I'm going to need a red name to help me target the right thing to get the control bar to stay in the fixed position 20 or so pixels sooner so it rides below the menu (or nav tree). I have been able to move the control bar but it goes all wonky on me so I'm failing on a solution so far.

[♥ ℒʊ√ ♥]

Wow, Tumbleweed, how odd that your forums have that "if" statement. I'm glad someone else verified what I see on mine. Otherwise, I'd wonder about myself. (Well, actually I still do wonder about myself! )

Oh, you're right about the control bar. There would be a conflict.


My members just so miss the "jump to" at the bottom of v4 forums.


And although David Clark was able to get a nav tree duplicated at the bottom, it didn't have the dropdown, so it really served no purpose.

I resorted to placing my own "Home", "Discussion Board" buttons in the footer so my members could easily get back to the two most important places from the bottom of the board.

I appreciate your efforts, but if it's too much work (and I do understand about the control bar) I completely understand.

[Tumbleweed]

I tried your code and although I added enough boards to make it move to the bottom, it never moved back to the top, once you scrolled up again so it just doesn't work for me.

On my code, I now have the control bar positioning itself below the nav tree (or menu bar) when you scroll down so that part is fixed but there is, of course an issue. I can't get it to not affect the home page. (I have a gap below the title bar now) I know how to make things show up on the main page only but I don't know how to make something NOT show up or execute on the main page. (I haven't given up.)

I did want to address what you did in the meanwhile. Would having those links you added manually be any better if you had a little menu fixed at the bottom of your page so it was there no matter where on the page you are? It would still be manually adding the links, but just a thought. For that matter, it could be a little drop down like I think the forum jump used to be.

[♥ ℒʊ√ ♥]

Tumbleweed, it did the same thing for me. Never moved back up. I'm glad I'm not imagining things.

Yes, yes, yes, if you can give me a "jump to" look, I would love that. It doesn't really have to be a nav tree. Just something at the bottom that my members could easily navigate on our board. It's a large board and it's a long board. And although we like all of the changes and upgrades of v5, we really do miss the "jump to" at the bottom.

So that option is more than acceptable to me ~ and them.

If you can, we would love it!

[Tumbleweed]

This is very basic and a quick one much like the old forum jump. You can't style it much:

Put in your global footers if you want it on all themes: (You can add as many options as you want, just copy the bolded line and paste directly below it.
Before you ask, I don't know how to get the blue hover color to change in the option links themselves but the css does allow you to do some styling to match your site.  If you want it on your right side maybe next to the switch accounts box change the left (in green) to about: right:90px; 


<style>
#bottom_menu_jump{position:fixed;left:6px;bottom:0px;}
#bottom_menu_jump select{width:160px;height:24px;font-size:12px;background-color:#777766;color:#ffffff;border:1px solid #ffffff;}
#bottom_menu_jump select:hover{ background-color:#667777;color:#ffffff;}
#bottom_menu_jump option{background-color:#888877;color:#ff0000;}
</style>



<div id="bottom_menu_jump">
<form name="menuform">
<select name="menu2"
onChange="top.location.href = this.form.menu2.options[this.form.menu2.selectedIndex].value;
return false;">
<option value="/index.html" selected>Home Page</option>
<option value="http://putteraround7.proboards.com/board/1/general-board">General Board</option>
<option value="http://putteraround7.proboards.com/board/2/sunny-days">Sunny Days</option>
</select>
</form>
</div>