Problem With The Navigation Tree.

[Former Member]

Forum URL: mentalhealthissues.boards.net/


I will try and explain the best I can.

I had the navigation tree upper and lower with these codes



Upper

Goes On The Bottom Of Style Sheet

johnnynav_tree_height: 55px;

#navigation-tree,

#nav-tree > li { height: johnnynav_tree_height; }

#nav-tree > li a,

#nav-tree > li:hover > div > a {

padding: 0 10px 0 10px;

line-height: johnnynav_tree_height;

}

#nav-tree > li a {

margin-left: johnnynav_tree_height / 2;

}



#nav-tree .menu_arrow {

top: 0;

right: -johnnynav_tree_height / 2;

}

#nav-tree .menu_arrow,

#nav-tree .menu_arrow span {

border-width: johnnynav_tree_height / 2;

border-right-width: 5px;

}

#nav-tree .menu_arrow span {

top: -johnnynav_tree_height / 2;

left: (-johnnynav_tree_height / 2) - johnnynav_tree_border_width;

}

Lower

template> forum wrapper> (below content)



{if $[navigation.tree]}

<div id="navigation-tree">

$[navigation.tree]

</div>

{/if}

Then I decided to have the navigation above quick reply with this code

insert In Templates.

Thread, Post List and Quick Reply.



Replace what is in “Thread” with this -

<div class="title-bar">

<ul class="controls">

{if $[reply_button]}

<li style="display: inline-block; padding-right: 8px;"><a class="to-bottom" onclick="scroll(0,document.body.scrollHeight);">To Bottom</a></li><li style="display: inline-block;">$[reply_button]</li>

{/if}

</ul>

<h1>$[thread.subject]</h1>

</div>

<div class="control-bar ui-helper-clearfix $[scroll_class]">

$[search]

<div class="controls">

$[action_menu]

</div>

<div class="float-left">$[thread.icons]</div>

$[pagination]

</div>

<div class="content cap-bottom">

$[thread.labels]

$[poll]

<table class="list" role="presentation">

<tbody class="$[list_class]">

$[post_list]

</tbody>

</table>



</div>

</div>

$[navigation.tree]

</div>

$[quick_reply]quote here

I knew you would need to add the above code to every theme, then someone suggested this code for all themes that goes in the Global header

<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');

$('#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>

My Co Admin noticed that the upper nav tree wasn't there after I inserted the last code, so we looked and no matter what we tried we can't seem to get the upper or lower code to work, we deleted all the codes,my co Admin tried the first three themes for the upper nav tree and it won't work.

We don't know what is wrong or what we're doing wrong.

Any help please?

[Brian]

Right now there's no navigation tree at all in your Forum Wrapper layout template so naturally it won't show at the moment.

Once you've put its HTML back in its original location back the last code in your post should work fine without any changes.

[Dazzal]

Brian thanks for replying.

I am Catsmother's Admin., she's in the UK. I am in the US.

We want to go back to the original codes that we used. I have the upper Nav. Tree at the bottom of the style sheet in the first theme.

mentalhealthissues.boards.net/admin/themes/65/css "Aloha Hawaii" and it's NOT WORKING? Something is conflicting with it?

But, the lower Nav. Tree is working in the forum wrapper.

[Brian]

The CSS you have in your style sheet only changes the appearance of the navigation tree. It has no bearing on where it's located on the page.

The global header code that moves the navigation tree around is dependent on the navigation tree being in its original location at the top of the page in order to work correctly.

[Dazzal]

I took the first code out of the bottom of the style sheet on the first 3 themes.

I inserted the Global Header code and it still did not work. I erased that Global Header code.

Catsmother can answer this in the morning. Thanks!

[Former Member]

Shaliza give this to me for my board it works hope it does for yours too Dazzal

This is the coding that you would add to The Global Header if you're interested in having that here:


<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');
               $('#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>

[Dazzal]

Marti, that's the same code above that Catsmother posted. Thanks anyway.

[Retread]

Mar 16, 2020 17:59:15 GMT -8 Dazzal said:

I inserted the Global Header code and it still did not work. I erased that Global Header code.

The script for the Global Header works exactly as-advertised:

Mar 14, 2020 20:46:21 GMT -8 Retread said:

This will move the Navigation Tree to before the Quick Reply after its original position has been scrolled off the screen.

Of course, this will only happen on pages which have a Quick Reply.

In other words, no Quick Reply, no placement of the Navigation Bar Tree at the bottom, after it scrolls off the top of the screen.

I accept partial responsibility for this misunderstanding for not putting a strong comment above the script. But seriously, folks. If you pass code around, be sure to explain what it does and add a link back to where it was posted.

I added something more to this script.  This should handle most of the longer pages.

<!-- Relocate Navigation Tree when scrolled off screen
     moves to before Quick Reply in threads.
     moves to after Stats on Home board list, and Board thread list.

     Note: this will NOT duplicate the Navigation Tree unless 
     the page has either a Quick Reply or a Stats container. -->

<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');                
                $('#navigation-tree').before('<div id="navigation-placeholder"></div>').insertAfter('.container.stats');
                $('#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>

[Former Member]

Mar 16, 2020 21:05:41 GMT -8 Retread said:

Mar 16, 2020 17:59:15 GMT -8 Dazzal said:

I inserted the Global Header code and it still did not work. I erased that Global Header code.

The script for the Global Header works exactly as-advertised:

Mar 14, 2020 20:46:21 GMT -8 Retread said:

This will move the Navigation Tree to before the Quick Reply after its original position has been scrolled off the screen.

Of course, this will only happen on pages which have a Quick Reply.

In other words, no Quick Reply, no placement of the Navigation Bar at the bottom, after it scrolls off the top of the screen.

I accept partial responsibility for this misunderstanding for not putting a strong comment above the script. But seriously, folks. If you pass code around, be sure to explain what it does and add a link back to where it was posted.

I added something more to this script.  This should handle most of the longer pages.

<!-- Relocate Navigation Bar when scrolled off screen
     moves to before Quick Reply in threads.
     moves to after Stats on Home board list, and Board thread list.

     Note: this will NOT duplicate the Navigation Bar unless 
     the page has either a Quick Reply or a Stats container. -->

<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');                
                $('#navigation-tree').before('<div id="navigation-placeholder"></div>').insertAfter('.container.stats');
                $('#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>

Hi Retread

This won't work, I don't think it has anything to do with this code though, we think something is preventing these codes from working but we don't know what.

[Retread]

Mar 17, 2020 5:53:40 GMT -8 @stormcloud70 said:

Hi Retread

This won't work, I don't think it has anything to do with this code though, we think something is preventing these codes from working but we don't know what.

What's preventing this from working is your Navigation Bar Tree isn't on the page to begin with. The script can only place it at the bottom by moving it from it's original location.

Please copy the contents of your Forum Wrapper for that theme, then paste it into a post on this thread. We can fix this.

[Dazzal]

Default Theme: Saint Patrick's Day. We took all codes out, because nothing was working.


<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
<meta name="google-site-verification" content="WH8S8w-G2O-7R7GmImVWtepDGM1_D6E3BVVpO4kUV4w" />
</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" style="cursor: pointer;" onclick="location.href='/';">
<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]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<script type="text/javascript">
document.write("<span>");
var day = new Date();
var hr = day.getHours();
if (hr == 1) {document.write("Do you ever sleep");}
if (hr == 2) {document.write("Do you ever sleep");}
if (hr == 3) {document.write("Are you a night owl");}
if (hr == 4) {document.write("You up early or late");}
if (hr == 5) {document.write("You know the sun ain't up yet");}
if (hr == 6) {document.write("What are you having for breakfast");}
if ((hr == 7) || (hr == 8) || (hr == 9)) {document.write("Good Morning!");}
if (hr == 10) {document.write("Time for a morning break");}
if (hr == 11) {document.write("Enjoy your day");}
if (hr == 12) {document.write("Don't forget to grab lunch");}
if (hr == 13) {document.write("Good afternoon");}
if (hr == 14) {document.write("Take a break and stretch");}
if ((hr == 15) || (hr == 16)) {document.write("Thank you for visiting!");}
if ((hr == 17) || (hr == 18) || (hr == 19) || (hr == 20) || (hr == 21) || (hr == 22)) {document.write("Good Evening");}
if (hr == 23) {document.write("Aren't you tired yet!");}
if (hr == 0) {document.write("It's past midnight");}
document.write("</span>");
</script><span> $[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}
{if $[route.name] == "home"}
$[shoutbox]
{/if}
$[content]


</div>

$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center mobile-view-prompt">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>

[Retread]

Here are the contents of that Forum Wrapper with the Navigation Bar Tree added back in at its original location. This should get you back to normal, then you can try the script for the Global Header.

<!DOCTYPE HTML>
	$[tag.html.open]
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>$[title] | $[forum.name]</title>
		$[head]
        <meta name="google-site-verification" content="WH8S8w-G2O-7R7GmImVWtepDGM1_D6E3BVVpO4kUV4w" />
	</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" style="cursor: pointer;" onclick="location.href='/';">
					<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]}
										<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
											<div class="tip-number">$[navigation.menu.notification.total]</div>
											<span class="tip"></span>
										</div>
									{/if}
								</a>
							</li>
						{/foreach}
					</ul>
					<p id="welcome">
						{if !$[current_user.is_member]}
							Welcome Guest.
							{if $[login_link] || $[register_link]}
								Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
							{/if}
						{else}
							<script type="text/javascript">
                                var day = new Date();
                                var hr = day.getHours();
                                if (hr == 1) {document.write("Do you ever sleep");}
                                if (hr == 2) {document.write("Do you ever sleep");}
                                if (hr == 3) {document.write("Are you a night owl");}
                                if (hr == 4) {document.write("You up early or late");}
                                if (hr == 5) {document.write("You know the sun ain't up yet");}
                                if (hr == 6) {document.write("What are you having for breakfast");}
                                if ((hr == 7) || (hr == 8) || (hr == 9)) {document.write("Good Morning!");}
                                if (hr == 10) {document.write("Time for a morning break");}
                                if (hr == 11) {document.write("Enjoy your day");}
                                if (hr == 12) {document.write("Don't forget to grab lunch");}
                                if (hr == 13) {document.write("Good afternoon");}
                                if (hr == 14) {document.write("Take a break and stretch");}
                                if ((hr == 17) || (hr == 18) || (hr == 19) || (hr == 20) || (hr == 21) || (hr == 22)) {document.write("Good Evening");}
                                if (hr == 23) {document.write("Aren't you tired yet!");}
                                if (hr == 0) {document.write("It's past midnight");}
                                document.write("</span>");
                        </script>
                        <span> $[current_user.name].</span>  $[logout_link]
                        {/if}
					</p>
				</div>
			</header>

			$[participated_threads_link]

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

			$[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}
               {if $[route.name] == "home"}
	                $[shoutbox]
                {/if}
                $[content]
            </div>

			$[footer]
        
        </div>
		{if $[is_mobile_browser]}
			<br /><p class="center mobile-view-prompt">Switch to the $[mobile_switch_link].</p>
		{/if}
	</body>
</html>

[Dazzal]

THANK YOU Retread Added to the forum wrapper. It looks good now.

How did it get out of whack?

[Retread]

I can't know how but I can tell you what.

There was nothing between
$[participated_threads_link]
and
$[header]

And that's where the html for the Navigation Bar Tree belongs.

[Dazzal]

Mar 17, 2020 7:35:04 GMT -8 Retread said:

I can't know how but I can tell you what.

There was nothing between
$[participated_threads_link]
and
$[header]

And that's where the html for the Navigation Bar belongs.

Thanks again Retread!