Post by SubDevo on Jun 23, 2009 0:49:07 GMT -8
Nav Tree Ultimate Customize Combo by SubDevo
Tested in IE, FF, Opera, Safari and Chrome
Preview (animated gif) Live preview at either forum in my signature.
What can you do with this code?
Give your nav tree a background image or color with borders.
Custom divider (text or image)
Replace forum name with whatever you wish.
Option to Remove nav tree from main page. (or all, but why do that? lol)
Option to clone nav tree and put a copy under the forum jump.
Doubles as a PM bar with Quick links to: Inbox, Outbox, PM preferences, Modify Profile, Bookmarks and most Recent forum posts.
You choose the text (with color option) or image to be displayed when you get a new PM.
Hover over "Inbox" or "New Message" gives you a tooltip with number of old and new messages.
To the far right of the nav tree, you have options to display the time/date, text or an image. This is a link to toggle the nav tree to see the Quick Links at any time in any thread.
Any image used in this code can be transparent and/or animated!
This code is compatible with Smangii Side Table Code!
There is also a CSS portion for this code.
This is explained below, AFTER the variable descriptions.
Enjoy!!!
SubDevo
Variable Descriptions:
var remNav=0; // 0=Don't Remove, 1=Remove from Main Page, 2=Remove from all pages
Options to display Nav Tree on all pages (PB default), Remove from the Main Page only or completely remove Nav Tree.(why?)
var divider="►"; // Your desired nav tree separator. ( - / > | » • → ● ○ ► ◊ ║ ▪ )
This can be any text character(s) or a URL to an image.
If using an image, bottom of text lines up with image bottom.
Best results are obtained if divider image height is less than or equal to font height.
(8px height is a good starting point for default Nav Tree font size).
var fName="Home"; // Replaces your Forum Name with this Name.
If you wish to keep your original forum name here, replace "Home" with "".
var fjClone=0; // Place a copy of Nav Tree under Forum Jump? 1=Yes, 0=No
Option to give you a second Nav Tree under your Forum Jump at the bottom of your forum.
var showTime=1; // Display Date-Time in Nav Tree? 1=Yes, 0=No
Option to display the time and date to the far right of Nav Tree. This doubles as a Nav/Quick Links toggle link.
var swapNav="◄►"; // If showTime=0, this is used to toggle Nav/Quick Links
If showTime=0, this is used for the Nav/Quick Links toggle link. This can be text or a URL to an image.
var memLinks=1; // Display Quick Links on Main Page? (Only works if remNav="0")
This displays some handy links on the main page instead of the "normal" Nav Tree.
New PM's or No New PM's, Outbox, PM preferences, Modify Profile, Bookmarks and most Recent forum posts.
If you are a guest, this is replaced by "Welcome Guest! Please Login or Register" links.
var newMess="NEW MESSAGE!"; // New Message text or image URL.
Enter Text or a URL to image to be used for new message alert.
var newMessColor="E00000"; // New Message text color.
If newMess is text, it will be this color. Ignored if newMess is an image.
var indent=6; // Number of Pixels to Indent.
Indent text inside Nav Tree from the left (and right) by this amount. Also shifts "Nav/Quick Links toggle link", by this amount, from the right.
var imgSrc="URL to Background Image";
Enter full URL to a background image if desired. Transparent images are supported.
Nav Tree will be transparent without it.(unless you set a backcolor in navcombo CSS)
var bgRepeat=0; // Repeat background image? 1=Yes, 0=No
Set this to "1" if you are using a repeating gradient for your background image.
var navWidth=777; // (px) Desired Width of Nav Tree.
If this is less than your forum width, it will be centered on your forum.
var navHeight=18; // (px) Desired Nav Tree Height.
Normally this is set to your background image height. But, you may enter any height.
var oRide=0; // Show Quick Links on Every Page? 1=Yes, 0=No
This forces Quick Links to be displayed on every page, instead of the normal nav tree. Members will have to click the toggle link to see the nav tree.
CSS Instructions:
This CSS MUST be above the script.
You may also place it with the rest of your forum global CSS.
<style type="text/css">
<!--
.navcombo {color: #000000; position: relative; text-align: left; padding-top: 2px; top: -5px; border: 0px solid #000000;}
-->
</style>
color: #000000;
Color of all text that are NOT links. This includes the divider if it is text.
top: -5px;
Adjust vertical position of nav tree. Negative moves up, positive moves down.
In this case nav tree is moved up 5px.
border: 0px solid #000000;
Border width and color. Keep at "0px" to remove border.
If you do not use a nav tree background image, the nav tree will be transparent unless you put this in your navcombo CSS:
background-color: #D9D941;
Do NOT put this in CSS if you are using a transparent background image. This color will show through it.
Location: Global Footer (near top)
<script type="text/javascript">
/* Nav Tree Ultimate Customize Combo by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var remNav=0; // 0=Don't Remove, 1=Remove from Main Page, 2=Remove from all pages
var divider="►"; // Your desired nav tree separator. ( - / > | » • → ● ○ ► ◊ ║ ▪ )
var fName="Home"; // Replaces your Forum Name with this Name.
var fjClone=0; // Place a copy of Nav Tree under Forum Jump? 1=Yes, 0=No
var showTime=1; // Display Date-Time in Nav Tree? 1=Yes, 0=No
var swapNav="◄►"; // If showTime=0, this is used to toggle Nav/Quick Links
var memLinks=1; // Display Quick Links on Main Page? (Only works if remNav="0")
var newMess="NEW MESSAGE!"; // New Message text or image URL.
var newMessColor="E00000"; // New Message text color.
var indent=7; // Number of Pixels from Left to Indent
var imgSrc="URL TO IMAGE"; // Nav tree background image.
var bgRepeat=0; // Repeat background image? 1=Yes, 0=No
var navWidth=777; // (px) Desired Width of Nav Tree.
var navHeight=18; // (px) Desired Nav Tree Height.
var oRide=0; // Show Quick Links on Every Page? 1=Yes, 0=No
// DO NOT EDIT BELOW
var backImg=new Image(); backImg.src=imgSrc;
var n=document.getElementsByTagName("font"); var x=0; var n_C="navcombo";
while(!(n[x].parentNode.nodeName.match(/p/i)&&n[x].innerHTML.match(/Hey,\s|Welcome\s/))&&x<n.length){x++;}
welMess=n[x].innerHTML; n=document.links; x=0;
while(n[x].className!="nav"&&x<n.length){x++;}
if(fName){n[x].innerHTML=fName;}
var timeDiv=document.createElement("div"); var td=n[x].parentNode;
with(welMess){
if(pb_username!="Guest"){var pMs=slice(indexOf('pm">')+4,match(/(is|are)\snew/i).index).replace(/<\/a>\,/i," |")+"new";}
divider=" "+cImg(divider,0)+" "; swapNav=cImg(swapNav,0); newMess=cImg(newMess,1);
var datetime=(showTime)?slice(match(/<br>/i).index+4):swapNav;
} var navDiv=timeDiv.cloneNode(false);
with(timeDiv.style){ styleFloat="right"; cssFloat="right"; marginRight=indent+"px"; marginTop="1px";}
with(timeDiv){innerHTML="<a href='javascript:swapIt()' class='nav'>"+datetime+"<\/a>";}
with(navDiv.style){ backgroundImage=(imgSrc.match(/^http:\/\//i))?"url("+imgSrc+")":"none";
width=navWidth+"px"; height=navHeight+"px"; paddingLeft=indent+"px";
if(!bgRepeat){backgroundRepeat="no-repeat";}}
with(navDiv){ id=n_C; className=id;
for(x=0;x<td.childNodes.length;x++){ var nc=td.childNodes[x];
if((nc.nodeType==3&&nc.data.match(/(:
\s)/))||nc.nodeName.match(/^(font|a)$/i)){
appendChild(nc); x--;
}else if(nc.nodeName.match(/table|form|script/i)){break;}
} var y=x;
var iH=innerHTML; iH=iH.replace(/^\W+(?=<)|&(?=nbsp;)|nbsp;/gi,"").replace(/::/g,divider);
var st='<a href="/index.cgi?action='; var sx='" class="nav">'; var sm=divider+st;
var iM="Welcome Guest!"+divider+"Please "+st+'login'+sx+'Login<\/a> or '+st+'register'+sx+'Register<\/a>.';
if(pb_username!="Guest"){
iM="Hi "+pb_displayname+"!"+sm+'pm"'+' title="'+pMs+sx;
iM+=(welMess.match(/,\s0\sar/i))?"Inbox":newMess;
iM+="<\/a>"+sm+'pm&view=2'+sx+'Outbox<\/a>'+sm+'pmprefs'+sx+'PM Prefs<\/a>';
iM+=sm+'modifyprofile&user='+pb_username+sx+'Modify Profile<\/a>';
iM+=sm+'bookmarks'+sx+'Bookmarks<\/a>'+sm+'recent'+sx+'Recent<\/a>';
} innerHTML=(oRide||(memLinks&& !remNav&&pb_action=="home"))?iM:iH;
insertBefore(timeDiv,childNodes[0]); var cd=document.createElement("center");
td.insertBefore(cd,td.childNodes[y]); cd.appendChild(navDiv);
style.width=navWidth-(offsetWidth-navWidth)+"px";
} var ts=((remNav==1&& !location.href.match(/\?/))|remNav==2)?0:1;
if(ts&&fjClone){ var nFj=cd.cloneNode(true);
with(nFj.firstChild){id=n_C+"2"; className=n_C; style.top="0px";}
td.appendChild(document.createElement("br")); td.appendChild(nFj);
} if(!ts){cd.style.display="none";}
function cImg(sT,nM){
if(sT.match(/^http:\/\//i)){ sT='<img style="border: none;"'+' src="'+sT+'" alt="'+pMs+'" \/>';
}else if(nM){sT="<font color='#"+newMessColor+"'>"+sT+"<\/font>";} return sT;
}
function swapIt(){ x=0; var nPr=/PM\sPrefs/;
while(x<fjClone+1){ var pB=document.getElementById((x)?n_C+"2":n_C); x++;
with(pB.innerHTML){pB.innerHTML=slice(0,(match(/v\>/i).index)+2)+(((match(nPr))?0 :1)?iM:iH)}
}
}
</script>
NOTE: This code has been updated.
In previous code, when fjClone=1 (second nav tree under forum jump), the bottom nav tree would not switch to the pm bar.
This is now fixed. Also the CSS name has been changed from #navcombo to .navcombo.
And an extra variable has been added for user selectable background image repeat for use with repeating gradients. Enjoy!!!
Tested in IE, FF, Opera, Safari and Chrome
Preview (animated gif) Live preview at either forum in my signature.
What can you do with this code?
Give your nav tree a background image or color with borders.
Custom divider (text or image)
Replace forum name with whatever you wish.
Option to Remove nav tree from main page. (or all, but why do that? lol)
Option to clone nav tree and put a copy under the forum jump.
Doubles as a PM bar with Quick links to: Inbox, Outbox, PM preferences, Modify Profile, Bookmarks and most Recent forum posts.
You choose the text (with color option) or image to be displayed when you get a new PM.
Hover over "Inbox" or "New Message" gives you a tooltip with number of old and new messages.
To the far right of the nav tree, you have options to display the time/date, text or an image. This is a link to toggle the nav tree to see the Quick Links at any time in any thread.
Any image used in this code can be transparent and/or animated!
This code is compatible with Smangii Side Table Code!
There is also a CSS portion for this code.
This is explained below, AFTER the variable descriptions.
Enjoy!!!
SubDevo
Variable Descriptions:
var remNav=0; // 0=Don't Remove, 1=Remove from Main Page, 2=Remove from all pages
Options to display Nav Tree on all pages (PB default), Remove from the Main Page only or completely remove Nav Tree.(why?)
var divider="►"; // Your desired nav tree separator. ( - / > | » • → ● ○ ► ◊ ║ ▪ )
This can be any text character(s) or a URL to an image.
If using an image, bottom of text lines up with image bottom.
Best results are obtained if divider image height is less than or equal to font height.
(8px height is a good starting point for default Nav Tree font size).
var fName="Home"; // Replaces your Forum Name with this Name.
If you wish to keep your original forum name here, replace "Home" with "".
var fjClone=0; // Place a copy of Nav Tree under Forum Jump? 1=Yes, 0=No
Option to give you a second Nav Tree under your Forum Jump at the bottom of your forum.
var showTime=1; // Display Date-Time in Nav Tree? 1=Yes, 0=No
Option to display the time and date to the far right of Nav Tree. This doubles as a Nav/Quick Links toggle link.
var swapNav="◄►"; // If showTime=0, this is used to toggle Nav/Quick Links
If showTime=0, this is used for the Nav/Quick Links toggle link. This can be text or a URL to an image.
var memLinks=1; // Display Quick Links on Main Page? (Only works if remNav="0")
This displays some handy links on the main page instead of the "normal" Nav Tree.
New PM's or No New PM's, Outbox, PM preferences, Modify Profile, Bookmarks and most Recent forum posts.
If you are a guest, this is replaced by "Welcome Guest! Please Login or Register" links.
var newMess="NEW MESSAGE!"; // New Message text or image URL.
Enter Text or a URL to image to be used for new message alert.
var newMessColor="E00000"; // New Message text color.
If newMess is text, it will be this color. Ignored if newMess is an image.
var indent=6; // Number of Pixels to Indent.
Indent text inside Nav Tree from the left (and right) by this amount. Also shifts "Nav/Quick Links toggle link", by this amount, from the right.
var imgSrc="URL to Background Image";
Enter full URL to a background image if desired. Transparent images are supported.
Nav Tree will be transparent without it.(unless you set a backcolor in navcombo CSS)
var bgRepeat=0; // Repeat background image? 1=Yes, 0=No
Set this to "1" if you are using a repeating gradient for your background image.
var navWidth=777; // (px) Desired Width of Nav Tree.
If this is less than your forum width, it will be centered on your forum.
var navHeight=18; // (px) Desired Nav Tree Height.
Normally this is set to your background image height. But, you may enter any height.
var oRide=0; // Show Quick Links on Every Page? 1=Yes, 0=No
This forces Quick Links to be displayed on every page, instead of the normal nav tree. Members will have to click the toggle link to see the nav tree.
CSS Instructions:
This CSS MUST be above the script.
You may also place it with the rest of your forum global CSS.
<style type="text/css">
<!--
.navcombo {color: #000000; position: relative; text-align: left; padding-top: 2px; top: -5px; border: 0px solid #000000;}
-->
</style>
color: #000000;
Color of all text that are NOT links. This includes the divider if it is text.
top: -5px;
Adjust vertical position of nav tree. Negative moves up, positive moves down.
In this case nav tree is moved up 5px.
border: 0px solid #000000;
Border width and color. Keep at "0px" to remove border.
If you do not use a nav tree background image, the nav tree will be transparent unless you put this in your navcombo CSS:
background-color: #D9D941;
Do NOT put this in CSS if you are using a transparent background image. This color will show through it.
Location: Global Footer (near top)
<script type="text/javascript">
/* Nav Tree Ultimate Customize Combo by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var remNav=0; // 0=Don't Remove, 1=Remove from Main Page, 2=Remove from all pages
var divider="►"; // Your desired nav tree separator. ( - / > | » • → ● ○ ► ◊ ║ ▪ )
var fName="Home"; // Replaces your Forum Name with this Name.
var fjClone=0; // Place a copy of Nav Tree under Forum Jump? 1=Yes, 0=No
var showTime=1; // Display Date-Time in Nav Tree? 1=Yes, 0=No
var swapNav="◄►"; // If showTime=0, this is used to toggle Nav/Quick Links
var memLinks=1; // Display Quick Links on Main Page? (Only works if remNav="0")
var newMess="NEW MESSAGE!"; // New Message text or image URL.
var newMessColor="E00000"; // New Message text color.
var indent=7; // Number of Pixels from Left to Indent
var imgSrc="URL TO IMAGE"; // Nav tree background image.
var bgRepeat=0; // Repeat background image? 1=Yes, 0=No
var navWidth=777; // (px) Desired Width of Nav Tree.
var navHeight=18; // (px) Desired Nav Tree Height.
var oRide=0; // Show Quick Links on Every Page? 1=Yes, 0=No
// DO NOT EDIT BELOW
var backImg=new Image(); backImg.src=imgSrc;
var n=document.getElementsByTagName("font"); var x=0; var n_C="navcombo";
while(!(n[x].parentNode.nodeName.match(/p/i)&&n[x].innerHTML.match(/Hey,\s|Welcome\s/))&&x<n.length){x++;}
welMess=n[x].innerHTML; n=document.links; x=0;
while(n[x].className!="nav"&&x<n.length){x++;}
if(fName){n[x].innerHTML=fName;}
var timeDiv=document.createElement("div"); var td=n[x].parentNode;
with(welMess){
if(pb_username!="Guest"){var pMs=slice(indexOf('pm">')+4,match(/(is|are)\snew/i).index).replace(/<\/a>\,/i," |")+"new";}
divider=" "+cImg(divider,0)+" "; swapNav=cImg(swapNav,0); newMess=cImg(newMess,1);
var datetime=(showTime)?slice(match(/<br>/i).index+4):swapNav;
} var navDiv=timeDiv.cloneNode(false);
with(timeDiv.style){ styleFloat="right"; cssFloat="right"; marginRight=indent+"px"; marginTop="1px";}
with(timeDiv){innerHTML="<a href='javascript:swapIt()' class='nav'>"+datetime+"<\/a>";}
with(navDiv.style){ backgroundImage=(imgSrc.match(/^http:\/\//i))?"url("+imgSrc+")":"none";
width=navWidth+"px"; height=navHeight+"px"; paddingLeft=indent+"px";
if(!bgRepeat){backgroundRepeat="no-repeat";}}
with(navDiv){ id=n_C; className=id;
for(x=0;x<td.childNodes.length;x++){ var nc=td.childNodes[x];
if((nc.nodeType==3&&nc.data.match(/(:
\s)/))||nc.nodeName.match(/^(font|a)$/i)){ appendChild(nc); x--;
}else if(nc.nodeName.match(/table|form|script/i)){break;}
} var y=x;
var iH=innerHTML; iH=iH.replace(/^\W+(?=<)|&(?=nbsp;)|nbsp;/gi,"").replace(/::/g,divider);
var st='<a href="/index.cgi?action='; var sx='" class="nav">'; var sm=divider+st;
var iM="Welcome Guest!"+divider+"Please "+st+'login'+sx+'Login<\/a> or '+st+'register'+sx+'Register<\/a>.';
if(pb_username!="Guest"){
iM="Hi "+pb_displayname+"!"+sm+'pm"'+' title="'+pMs+sx;
iM+=(welMess.match(/,\s0\sar/i))?"Inbox":newMess;
iM+="<\/a>"+sm+'pm&view=2'+sx+'Outbox<\/a>'+sm+'pmprefs'+sx+'PM Prefs<\/a>';
iM+=sm+'modifyprofile&user='+pb_username+sx+'Modify Profile<\/a>';
iM+=sm+'bookmarks'+sx+'Bookmarks<\/a>'+sm+'recent'+sx+'Recent<\/a>';
} innerHTML=(oRide||(memLinks&& !remNav&&pb_action=="home"))?iM:iH;
insertBefore(timeDiv,childNodes[0]); var cd=document.createElement("center");
td.insertBefore(cd,td.childNodes[y]); cd.appendChild(navDiv);
style.width=navWidth-(offsetWidth-navWidth)+"px";
} var ts=((remNav==1&& !location.href.match(/\?/))|remNav==2)?0:1;
if(ts&&fjClone){ var nFj=cd.cloneNode(true);
with(nFj.firstChild){id=n_C+"2"; className=n_C; style.top="0px";}
td.appendChild(document.createElement("br")); td.appendChild(nFj);
} if(!ts){cd.style.display="none";}
function cImg(sT,nM){
if(sT.match(/^http:\/\//i)){ sT='<img style="border: none;"'+' src="'+sT+'" alt="'+pMs+'" \/>';
}else if(nM){sT="<font color='#"+newMessColor+"'>"+sT+"<\/font>";} return sT;
}
function swapIt(){ x=0; var nPr=/PM\sPrefs/;
while(x<fjClone+1){ var pB=document.getElementById((x)?n_C+"2":n_C); x++;
with(pB.innerHTML){pB.innerHTML=slice(0,(match(/v\>/i).index)+2)+(((match(nPr))?0 :1)?iM:iH)}
}
}
</script>
NOTE: This code has been updated.
In previous code, when fjClone=1 (second nav tree under forum jump), the bottom nav tree would not switch to the pm bar.
This is now fixed. Also the CSS name has been changed from #navcombo to .navcombo.
And an extra variable has been added for user selectable background image repeat for use with repeating gradients. Enjoy!!!