PDA

View Full Version : Vertical javascript tabs



jcdesigns
11-10-2010, 02:05 PM
I need to know how do you create a vertical javacscript tabs placed on the right side. Click on the link below to see an example. Look at the middle of the page where you see web design, yahoo store, etc. Is there a tutorial or template somewhere online I can use to create this? I need this to build my website portfolio. Thanks

http://web.iovista.com/

vwphillips
11-11-2010, 10:37 AM
<!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[*/
#parent {
position:relative;left:100px;width:500px;height:300px;border:solid black 1px;
}

.pages {
position:absolute;left:0px;top:0px;width:350px;
}

.page {
left:0px;top:0px;width:350px;height:300px;background-Color:#FFFFCC;
}

.tabs {
position:absolute;left:350px;top:0px;width:150px;height:300px;
}

.tab {
left:0px;top:0px;width:150px;height:50px;border-Bottom:solid black 1px;background-Color:#FFCC66;
}

.tabactive {
background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype={

animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},

cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},

apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>


</head>

<body>
<div id="parent" >
<div class="pages" >
<div class="page" >Page 1</div>
<div class="page" >Page 2</div>
<div class="page" >Page 3</div>
<div class="page" >Page 4</div>
<div class="page" >Page 5</div>
<div class="page" >Page 6</div>
</div>
<div class="tabs" >
<div class="tab" >Tab 1</div>
<div class="tab" >Tab 2</div>
<div class="tab" >Tab 3</div>
<div class="tab" >Tab 4</div>
<div class="tab" >Tab 5</div>
<div class="tab" >Tab 6</div>
</div>
</div>

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

function Tabs(o){
var p=document.getElementById(o.ID);
p.style.overflow='hidden';
this.pages=this.bycls(o.PageClassName,p);
this.slide=new zxcAnimate('top',this.pages[0].parentNode,0);
this.tabclass=[o.TabClassName,o.TabClassName+' '+(o.TabActiveClassName||'')];
this.tabs=this.bycls(o.TabClassName,p);
for (var z0=0;z0<this.tabs.length;z0++){
if (this.pages[z0]){
this.tabs[z0].className=this.tabclass[z0>0?0:1];
this.addevt(this.tabs[z0],'mouseup','goto',z0);
}
}
this.ms=o.Duration||1000;
this.lst=this.tabs[0];
}

Tabs.prototype={

goto:function(nu){
this.lst.className=this.tabclass[0];
this.lst=this.tabs[nu];
this.lst.className=this.tabclass[1];
this.slide.animate(this.slide.data[0],-this.pages[nu].offsetTop,this.ms);
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
},

bycls:function(nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}



}

new Tabs({
ID:'parent',
PageClassName:'page',
TabClassName:'tab',
TabActiveClassName:'tabactive',
Duration:1000
});
/*]]>*/
</script>
</body>

</html>

jcdesigns
11-12-2010, 02:43 AM
Vic,

Thank you very much. This will really help me. God loves you too.

jcdesigns
11-12-2010, 04:56 PM
Thanks again Vic. The scrolling feature of the content is nice however if I wanted to remove the scrolling/animation feature after clicking on each tab, how is that possible? Is there javascript code that can be removed or altered? Thanks

vwphillips
11-13-2010, 11:38 AM
you could change the duration


new Tabs({
ID:'parent',
PageClassName:'page',
TabClassName:'tab',
TabActiveClassName:'tabactive',
Duration:10
});


or


<!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[*/
#parent {
position:relative;left:100px;width:500px;height:300px;border:solid black 1px;
}

.pages {
position:absolute;left:0px;top:0px;width:350px;
}

.page {
left:0px;top:0px;width:350px;height:300px;background-Color:#FFFFCC;
}

.tabs {
position:absolute;left:350px;top:0px;width:150px;height:300px;
}

.tab {
left:0px;top:0px;width:150px;height:50px;border-Bottom:solid black 1px;background-Color:#FFCC66;
}

.tabactive {
background-Color:#FFFFCC;
}

/*]]>*/
</style>
</head>

<body>
<div id="parent" >
<div class="pages" >
<div class="page" >Page 1</div>
<div class="page" >Page 2</div>
<div class="page" >Page 3</div>
<div class="page" >Page 4</div>
<div class="page" >Page 5</div>
<div class="page" >Page 6</div>
</div>
<div class="tabs" >
<div class="tab" >Tab 1</div>
<div class="tab" >Tab 2</div>
<div class="tab" >Tab 3</div>
<div class="tab" >Tab 4</div>
<div class="tab" >Tab 5</div>
<div class="tab" >Tab 6</div>
</div>
</div>

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

function Tabs(o){
var p=document.getElementById(o.ID);
p.style.overflow='hidden';
this.pages=this.bycls(o.PageClassName,p);
this.slide=this.pages[0].parentNode;
this.tabclass=[o.TabClassName,o.TabClassName+' '+(o.TabActiveClassName||'')];
this.tabs=this.bycls(o.TabClassName,p);
for (var z0=0;z0<this.tabs.length;z0++){
if (this.pages[z0]){
this.tabs[z0].className=this.tabclass[z0>0?0:1];
this.addevt(this.tabs[z0],'mouseup','goto',z0);
}
}
this.lst=this.tabs[0];
}

Tabs.prototype={

goto:function(nu){
this.lst.className=this.tabclass[0];
this.lst=this.tabs[nu];
this.lst.className=this.tabclass[1];
this.slide.style.top=-this.pages[nu].offsetTop+'px';
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
},

bycls:function(nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}



}

new Tabs({
ID:'parent',
PageClassName:'page',
TabClassName:'tab',
TabActiveClassName:'tabactive'
});
/*]]>*/
</script>
</body>

</html>

jcdesigns
11-14-2010, 03:52 AM
Thanks Vic. You're the man. Have a blessed day.