Tabbed navigation (no page reload)

**Anexx** · 08-05-2009, 10:17 PM

Hey so I'm wondering how to make a tabbed navigation like on:
http://www.vicsjavascripts.org.uk/El...MoveExpand.htm

I want to use it for: http://voigrafic.deviantart.com/art/...esig-131631120

I don't want anything reloading at all, anyone know how to do this? Thanks in advance vic LOL

**vwphillips** · 08-06-2009, 12:25 PM

this was never intended for publication but

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.tabpanel {
 position:absolute;left:50px;top:20px;width:800px;height:500px;
}

.tab {
 position:absolute;z-Index:0;left:50px;top:0px;width:100px;height:30px;
 background-Color:#FFCC66;-moz-border-radius:5px;border:solid black 1px;border-Bottom-Width:0px;
 font-Size:14px;text-Align:center;
}

.tabpanel INPUT {
 position:absolute;z-Index:101;top:460px;left:350px;width:70px;font-Size:12px;background-Color:#FFCC66;

}

.tabitem {
 position:absolute;z-Index:0;left:0px;top:30px;width:800px;height:450px;background-Color:#FFCC66;border:solid black 1px;
}

.tabitem DIV{
 position:absolute;left:20px;top:20px;width:760px;height:410px;background-Color:#FFFFCC;text-Align:left;
}

.tabta {
 position:absolute;left:20px;top:20px;width:740px;height:400px;font-Size:12px;
}

.tabtxt {
 position:absolute;left:0px;top:8px;height:20px;text-Align:center;
}

.tabactive {
 font-Weight:bold;
}


/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function siteTabsInit(e,args){
 var oop=new siteTabs(args);
}

function siteTabs(args){
 var oop=this;
 this.mse=[args[1],args[1]+' '+args[4]];
 this.obj=document.getElementById(args[0]);
 this.tabs=zxcByClassName(args[1],this.obj,'DIV');
 this.items=zxcByClassName(args[2],this.obj,'DIV');
 this.nu=args[3]||0;
 this.nu=0;
 for (var z0=0;z0<this.tabs.length;z0++){
  zxcES(this.tabs[z0],{zIndex:(z0!=this.nu?'0':'2')});
  zxcES(this.items[z0],{zIndex:(z0!=this.nu?'0':'1')});
  this.tabs[z0].onclick=function(){ oop.cng(this); }
  this.tabs[z0].onmouseover=function(){ this.className=oop.mse[1]; }
  this.tabs[z0].onmouseout=function(){ if (this!=oop.lst){ this.className=oop.mse[0]; } }
  var txt=zxcES('DIV',{marginLeft:'10px'},this.tabs[z0],args[5][z0]);
  txt.className=args[3];
 }
 this.lst=this.tabs[this.nu];
 this.lst.className=this.mse[1];
 this.lstitem=this.items[this.nu];
 this.obj.getElementsByTagName('INPUT')[0].onclick=function(){
  var ta=oop.lstitem.getElementsByTagName('TEXTAREA')[0];
  if (ta) ta.select();
 }
 this.but=this.obj.getElementsByTagName('INPUT')[0];
 this.cng(this.lst);
}

siteTabs.prototype.cng=function(tab){
 this.lst.className=this.mse[0];
 zxcES(this.lst,{zIndex:'0'});
 zxcES(this.lstitem,{zIndex:'0'});
 for (var z0=0;z0<this.tabs.length;z0++){
  if (this.tabs[z0]==tab){
   this.lst=this.tabs[z0];
   this.lstitem=this.items[z0];
   break;
  }
 }
 zxcES(this.lst,{zIndex:'2'});
 zxcES(this.lstitem,{zIndex:'1'});
 zxcES(this.but,{visibility:(this.lstitem.getElementsByTagName('TEXTAREA')[0]?'visible':'hidden')});
 this.lst.className=this.mse[1];
}


function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

function zxcEventAdd(o,f,e,p) {
 if ( o.addEventListener ){ o.addEventListener(e,function(ev){ return o[f](ev,p);}, false); }
 else if ( o.attachEvent ){ o.attachEvent('on'+e,function(ev){ return o[f](ev,p); }); }
 else {
  var prev=o['on'+e];
  if (prev){ o['on'+e]=function(ev){ prev(ev); o[f](ev,p); }; }
  else { o['on'+e]=o[f]; }
 }
}

function zxcAddEvt(obj,fun,ev,p){
 if (obj['zxc'+fun+ev]) return;
 obj['zxc'+fun+ev]=window[fun];
 zxcEventAdd(obj,'zxc'+fun+ev,ev,p);
}


function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}


zxcAddEvt(window,'siteTabsInit','load',['tab1','tab','tabitem','tabtxt','tabactive',['Comments','Code','CSS','HTML']]);

/*]]>*/
</script>

</head>

<body>
 <div id="tab1" class="tabpanel" >
  <div class="tab" style="z-Index:1;" ></div>
  <div class="tab" style="left:155px;" ></div>
  <div class="tab" style="left:260px;" ></div>
  <div class="tab" style="left:365px;" ></div>
  <div class="tabitem" >
   <div >
   <div style="position:absolute;left:20px;top:20px;width:720px;height:380px;" >
   </div>
   </div>
  </div>
  <div class="tabitem" >
   <textarea name="scripttab" class="tabta" rows="1" cols="1" >
   </textarea>
  </div>

  <div class="tabitem" style="z-Index:1;" >
   <textarea name="scripttab" class="tabta" rows="1" cols="1" >
   </textarea>
  </div>
  <div class="tabitem" >
   <textarea name="scripttab" class="tabta" rows="1" cols="1" >
   </textarea>
  </div>
  <input type="button" name="e" value="Select All" />
 </div>

</div>

</body>

</html>

Thread: Tabbed navigation (no page reload)

Thread Tools

Search Thread

Tabbed navigation (no page reload)

Bookmarks

Bookmarks

Posting Permissions