|
Post by Wormopolis on Dec 19, 2008 15:19:17 GMT -8
Browser tested: IE and FF placement: Div goes wherever you want it, main code goes in Global footer.
Moves the navigation bar above the boards to anywhere you want them to be in a new "ladder style" format.
Put a DIV tag anywhere you want the navbar to end up:
<div id="nvtree"></div>
if you want it to FLOAT like what you see to the left, then put THIS code in your global header:
<style type="text/css"> #floatNav {top: expression( ( ignoreMe = document.body.scrollTop +20 ) + 'px' ); z-index: 50;} </style> <div width="10%" id="floatNav"> <table cellspacing="1" cellpadding="0" border="0" align="left" valign="top" width="120" bgcolor="0066FF" class="bordercolor"> <tr><td> <table border="0" width="100%" cellpadding="2" cellspacing="0"> <tr> <td align="left" valign="top" class="welcomebg" bgcolor="000000"> <div valign="top" id="nvtree"></div> </td> </tr> </table> </td></tr></table></div>
<script type="text/javascript"> <!-- function floatNav() { nv=document.getElementById('floatNav'); nv.style.position=(document.all ? 'absolute' : 'fixed'); nv.style.top=document.body.scrollTop +20; document.body.insertBefore(nv, document.body.firstChild); } floatNav(); --> </script>
This part goes in Global Footer:
<script type="text/javascript"> <!-- // Move nav tree to anywhere // by Wormopolis wormocodes.proboards.com // Do not repost - keep header intact // version 3.011
var horizSpace="-"; var endSpace=">"; var vertSpace="|";
var displayType=1; // 1=normal, 2=Kamistyle (non-ladder), 3=vBulletin style
var direction="left"; //choose left or right, vBulletin style requires left vBullIconTop="http://i36.tinypic.com/334qcf7.gif"; vBullIconBottom="http://i37.tinypic.com/2v3jzgx.gif";
// insert a DIV tag with id="nvtree" where you want tree to be
if (!location.href.match(/noNav/)) {
iTd=document.getElementsByTagName('td'); for (i=0; i<iTd.length; i++) { if (iTd[i].width=="100%" && iTd[i].getElementsByTagName('a')[0] && iTd[i].getElementsByTagName('a')[0].className=="nav") { sts=iTd[i].getElementsByTagName('a')[0]; workwith=sts.parentNode; if (location.href.match(/navdebug/)) alert(workwith.innerHTML); breakoff_a=workwith.innerHTML.split(/<table/i)[0]; if (breakoff_a.match(/<font/i)) breakoff_a=breakoff_a.split(/<font/i)[0]; breakoff_a=" "+breakoff_a; if (location.href.match(/navdebug/)) alert(breakoff_a); breakoff_b = (document.all ? breakoff_a.split(/<br(.*?)>/i)[1] : breakoff_a.split(/<br(.*?)>/i)[2]); asd=0; jm=0; if (location.href.match(/navdebug/)) alert(breakoff_b); while (!workwith.childNodes[jm].nodeName.match(/(table|form)/i)){ if (workwith.childNodes[jm].nodeType==3) { workwith.childNodes[jm].nodeValue= ""; } else { if (!workwith.childNodes[jm].nodeName.match(/(div|br)/i)) workwith.childNodes[jm].style.display="none"; } jm++; } breakoff_b = " " + breakoff_b; nav_list=breakoff_b.split("::"); deep=nav_list.length; for (j=(displayType==3 ? 1 : 0);j<deep-1;j++) { nav_list[j]=(direction=='left' ? endSpace+nav_list[j]+(displayType==3 ? "" : "<br>") : nav_list[j]+endSpace); } nav_list[deep-1]=(direction=='left' ? (displayType==3 ? '<img src="'+vBullIconBottom+'" border="0"><b><font size="2">' : endSpace)+nav_list[deep-1]+(displayType==3 ? "</font></b>" : "" ) + "<br>" : nav_list[deep-1]+endSpace); nav_post_final=(displayType==3 ? '<img src="'+vBullIconTop+'" border="0">' : ""); for (k=0;k<deep-1;k++) { if (direction=='left') { if (displayType!=3) { for (sp=0; sp<k; sp++) nav_post_final+=horizSpace; } nav_post_final+=nav_list[k]; } else { nav_post_final+=nav_list[k]; if (displayType!=3) { for (sp=0; sp<k; sp++) nav_post_final+=horizSpace; nav_post_final+="<br>"; } } if (displayType!=3) nav_post_final+=vertSpace+"<br>"; } if (displayType!=3) { if (direction=='left') { for (sp=0; sp<k; sp++) nav_post_final+=horizSpace; nav_post_final+=nav_list[deep-1]+"<br>"; } else { nav_post_final+=nav_list[deep-1]; for (sp=0; sp<k; sp++) nav_post_final+=horizSpace; nav_post_final+="<br>"; } } else { if (direction=='left') { nav_post_final+="<br>"; nav_post_final+=nav_list[deep-1]+"<br>"; } else { nav_post_final+="<br>"; nav_post_final+=nav_list[deep-1]; nav_post_final+="<br>"; } } and_finally=document.getElementById('nvtree'); and_finally.align=direction; and_finally.vAlign="middle"; and_finally.innerHTML=(displayType==2 ? breakoff_b : nav_post_final); break; } } } // --> </script>
Preview: look to your left
|
|
|
Post by Wormopolis on Feb 24, 2009 13:33:34 GMT -8
update: added in customizable symbols for horizontal spacers and vert spacer.
|
|
|
Post by Wormopolis on Mar 31, 2009 18:33:23 GMT -8
updated to handle category splitters better
|
|
|
Post by Wormopolis on May 20, 2009 22:21:26 GMT -8
updated to have a smoother scroll, courtesy of something I saw in a script from Cyborg!
|
|
|
Post by eveready on Oct 21, 2009 9:08:06 GMT -8
Could you edit this code so that the symbols are on the right side rather than the left? In my situation, the tree would be aligned to the right.
|
|
|
Post by Wormopolis on Oct 21, 2009 17:22:32 GMT -8
interesting...
|
|
|
Post by Wormopolis on Oct 24, 2009 22:19:28 GMT -8
version update: added a direction variable that lets you choose left or right orientation.
|
|
|
Post by eveready on Oct 28, 2009 10:24:52 GMT -8
Thanks for doing that for me.
1 more question about css. I have this ...
.nav, .nav:link, .nav:visited, .nav:hover { text-decoration:none; font-size:1.4em; font-weight:bold;}
and it works for all the links, but the final part of the tree is not a link, and this part isn't affected by the above line of css. How do I change the size of the text part in the tree?
|
|
|
Post by Wormopolis on Oct 28, 2009 11:48:10 GMT -8
since you happen to have it inside a div with the name "nvtree" you can just add #nvtree into the CSS handlers.
#nvtree, .nav, .nav:link etc...
|
|
|
Post by eveready on Oct 28, 2009 18:53:47 GMT -8
Thanks again.
|
|
|
Post by Wormopolis on Nov 7, 2009 6:33:11 GMT -8
updated floating script incorporating static Div instead of moving one on window.onscroll
|
|
|
Post by Wormopolis on Nov 16, 2009 19:32:42 GMT -8
version 3.0: 3 different styles, including vBulletin style direction symbols
enjoy!
|
|
associus
Not New Member
Posts: 2
associus said 0 great things
|
Post by associus on Dec 20, 2009 3:40:45 GMT -8
I tried implementing this code on my test site and the table is not "floating". It stays fixed in one location in the page such that when I scroll the window, the table scrolls with it, unlike your table that floats above the scrollable window and remains fixed within the window space. My test site URL is ssclanproboardscom.proboards.com
|
|
|
Post by Wormopolis on Dec 20, 2009 8:49:09 GMT -8
this code:
<!-- begin move welcome table under advert -->
is removing the nav from the floating div. move that code above the floatnav code.
|
|
associus
Not New Member
Posts: 2
associus said 0 great things
|
Post by associus on Dec 20, 2009 23:23:02 GMT -8
Thanks,
That solved the non floating problem. Now that it is working I've got other formatting / conflict issues to work on to fully implement it.
You designed a very nice feature!
Thanks.
|
|