Tabulate Modify Profile

[Bones]

Browsers tested: IE, Firefox
Placement: main footer

this code utilizes window.onload in order to run after codes that add sections to the modify profile page since it is possible such codes may live in the global footer

This was a request on PBS.

Here's a code that tabulates the modify profile page. It uses the same classes as Todge's tabulated main page code so if you already have that then you already have the CSS portion, if not then grab the CSS portion from that code.

<script type="text/javascript">
window[window.attachEvent?'attachEvent':'addEventListener']((window.attachEvent?'onload':'load'),function(){
/* Tabulate Modify Profile Page (main footer)*/
var mf=document.modifyForm,hr,gtn='getElementsByTagName',a,b,ie
if("modifyprofile" == pb_action && mf){
hr=mf[gtn]('hr');
function tabswitch(index,target){
var tpt=tabswitch.prototype.tables,tabs=hr[0].previousSibling[gtn]('b');
for(var i=0; i<tpt.length;i++){tpt[i].style.display="none";tabs[i].className="tab";}
tpt[index].style.display="";target.className="tabselect";
}
tabswitch.prototype.tables=[];
for(a=0;a<hr.length;a++){
if((b=hr[a].previousSibling)){
ie=(b.nodeName && b.nodeName=="B");
if(ie){
b=[b];
if(a==0){
hr[0].parentNode.insertBefore(document.createElement('font'),hr[0]).appendChild(b[0]);
hr[0].previousSibling.size=2;hr[0].previousSibling.style.lineHeight="200%";}
}else{b.style.lineHeight="200%"; b=b[gtn]('b');}
if(a){
b=hr[0].previousSibling.appendChild(b[b.length-1]);
hr[a].previousSibling.style.display="none";
}else b=hr[0].previousSibling[gtn]('b')[0];
hr[0].previousSibling.appendChild(document.createTextNode(' '));
b.innerHTML ="["+b.innerHTML.replace(/\s/g,'\xa0')+"]"; b.className="tab"+ (a==0?"select":"");
b.style.cssText="cursor:pointer; cursor:hand;";
b.onmouseover=function(){this.className=this.className.split(/\W/)[0]+' tabhovver';}
b.onmouseout=function(){this.className=this.className.split(/\W/)[0];}
if(a)hr[a].style.display=hr[a].nextSibling.style.display="none";
tabswitch.prototype.tables.push(hr[a].nextSibling);
b.onclick = function(){tabswitch(arguments.callee.prototype.index,this);}
b.onclick.prototype.index=tabswitch.prototype.tables.length-1;
}
}
}
},false);
</script>

Attachments:

[wildgoosespeeder]

This code checks out OK with my social network code and Wormo's skin preview code.

[wildgoosespeeder]

Just to make the tabs more like ProBoards links:

b.onmouseover=function(){this.style.textDecoration="underline overline";this.className=this.className.split(/\W/)[0]+' tabhovver';} b.onmouseout=function(){this.style.textDecoration="";this.className=this.className.split(/\W/)[0];}

[Bones]

That's what the CSS is for, why hard code it and take away the option from the user? If the user wants it to look like links instead of tabs then they should edit the CSS to get that effect. By hard coding you remove that flexibility. The dual class is added in the mouseovers for just that reason so make use of it

edit:

---

I prefer my tabs to look like tabs so I would use the following CSS

<style type="text/css">
.tab { background-color: #AAAAAA; border: 1px solid white; border-bottom-width:0px;padding-bottom:11px;}
.tabhovver { background-color: #123456; }
.tabselect { background-color: #111111; border: 1px solid white; border-bottom-width:0px;padding-bottom:12px;}
</style>

to get it looking like this

[wildgoosespeeder]

Nice one! I like it that way too!