Joomla Extensions Club 20,483 posts

[subfighter Friend subfighterJoin date: February 2007Posts: 86Downloads:0Uploads:1 Thanks: 7 Thanked: 1 times in 1 posts]

#130811

how can you set the options to display the the content so that it is not fixed??

how can you have it so the content height auto sizes??

var JATabs = new Class({
initialize: function(element, options) {
this.options = Object.extend({
position: 'top',
width: '100%',
height: 'auto',
skipAnim: false,
animType: 'animMoveHor',
mouseType: 'mouseover',
changeTransition: Fx.Transitions.Pow.easeIn,
duration: 1000,
mouseOverClass: 'hover',
activateOnLoad: 'first',
useAjax: false,
ajaxUrl: '',
ajaxOptions: 'get',
ajaxLoadingText: 'Loading...',
fixheight : 1,
fixwidth : 1
}, options || {});

this.el = $(element);
this.elid = element;

this._W = this.el.offsetWidth.toInt();

if(this.options.height=='auto'){
this.options.fixheight = 0;
}

this._H = this.el.offsetHeight.toInt();

this.panels = $$('#' + this.elid + ' .ja-tab-content');
this.panelwrap = $E('.ja-tab-panels-'+this.options.position, this.el);

this.divtitles = $$('#' + this.elid + ' .ja-tabs-title-'+this.options.position);

this.titles = $$('#' + this.elid + ' div.ja-tabs-title-'+this.options.position+' ul li');

//add
if (this.panels.length <= 1)
{
return;
}

this.titles.each(function(item) {
item.addEvent(this.options.mouseType, function(){
if (item.className.indexOf('active') != -1) return;

item.removeClass(this.options.mouseOverClass);
this.activate(item, this.options.skipAnim);
}.bind(this)
);

item.addEvent('mouseover', function() {
if(item != this.activeTitle)
{
item.addClass(this.options.mouseOverClass);
}
}.bind(this));

item.addEvent('mouseout', function() {
if(item != this.activeTitle)
{
item.removeClass(this.options.mouseOverClass);

}
}.bind(this));
}.bind(this));

this.titles[0].className = 'first';
this.titles.className = 'last';
this.titles[0].addClass ('active');

//height of title (for left, right, bottom)
this.tabHeight = $E('.ja-tabs-title-'+this.options.position, this.el);

//Panel contents
this.minHeight = 0;
if((this.options.position=='left') || (this.options.position=='right')){
this.minHeight = this.tabHeight.offsetHeight;
if (!this.options.fixheight ){
this.divtitles.setStyle ('height', this.minHeight);
}
}

/* Set height for DIV tabswrap and position Top*/
if (!this.options.fixheight )
{
this.panelwrap.setStyle ('height', this.minHeight+10);
}
else{
this.panelwrap.setStyle ('height', this._H - this.titles[0].offsetHeight.toInt());
}

/* Set set width for left/right tabs*/
if((this.options.position=='left') || (this.options.position=='right')){
var maxw = eval(this._W - this.divtitles[0].offsetWidth.toInt() -10);
this.panelwrap.setStyle ('width', maxw);
}

this.titles.each(function(el,i){
el.panel = this.panels;
el.panel._idx = i;
},this);

if (this.options.skipAnim) this.options.animType = 'animNone';

//Set default type for animation if needed
if ((eval('typeof '+this.options.animType) == 'undefined') || (eval('$type ('+this.options.animType+')') != 'class')){
this.options.animType = 'animFade';
}

//Create animation object
this.anim = eval ('new '+this.options.animType + '(this)');

if(this.options.activateOnLoad != 'none')
{
if(this.options.activateOnLoad == 'first')
{
this.activate(this.titles[0], true);
}
else
{
this.activate(this.options.activateOnLoad, true);
}
}
},

activate: function(tab, skipAnim){
if (this.options.useAjax) this.cancelAjax();

if (this.options.useAjax && !tab.loaded) {
this._getContent(tab);
return;
}

if(! $defined(skipAnim))
{
skipAnim = false;
}
if($type(tab) == 'string')
{
myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
tab = myTab;
}

if($type(tab) == 'element')
{
//add 5
var newTab = tab.panel;
var curTab = this.activePanel;
this.activePanel = newTab;

this.anim.move (curTab, newTab, skipAnim);

this.titles.removeClass('active');

if (this.activeTitle ){
this.activeTitle.className = this.activeTitle.className.replace(new RegExp("active"), "");
}
tab.className = tab.className.replace(new RegExp(this.options.mouseOverClass), "");

tab.className += 'active';

this.activeTitle = tab;

if (!this.options.fixheight) {
new Fx.Style(this.panelwrap, 'height',{duration:this.options.duration}).start(this.panelwrap.offsetHeight, Math.max(this.minHeight,this.activeTitle.panel.offsetHeight+10));

if((this.options.position=='left') || (this.options.position=='right')){
new Fx.Style(this.tabHeight, 'height',{duration:this.options.duration}).start(this.tabHeight.offsetHeight, Math.max(this.minHeight,this.activeTitle.panel.offsetHeight+10));
}
}

}

},
cancelAjax: function() {
if (this.loadingTab) {
this.tabRequest.cancel();
this.loadingTab.imgLoading.remove();
this.tabRequest = null;
this.loadingTab = null;
}
},

_getContent: function(tab){

this.loadingTab = tab;

var tabh3 = $(this.loadingTab.getElementsByTagName('tabH3')[0]);
var imgloading = new Element('img', {'src': 'plugins/content/ja_tabs/loading.gif','width': 13});
if (this.options.position=='right') imgloading.inject(tabh3,'top');
else imgloading.inject(tabh3);
this.loadingTab.imgLoading = imgloading;
this.tabRequest = new Ajax(this.options.ajaxUrl+ '&tab=' + this.loadingTab.getProperty('title'), {method:this.options.ajaxOptions,onComplete:this.update.bind(this)});
this.tabRequest.request();

},
update: function (text) {
this.loadingTab.loaded = true;
this.loadingTab.panel.subpanel = $E('.ja-tab-subcontent', this.loadingTab.panel);
this.loadingTab.panel.subpanel.innerHTML = text;
this.loadingTab.imgLoading.remove();
var tab = this.loadingTab;
this.tabRequest = null;
this.loadingTab = null;
this.anim.reposition();
this.activate (tab);
}
});
var animNone = new Class ({
initialize: function(tabwrap) {
this.options = tabwrap.options || {};
this.tabwrap = tabwrap;

this.tabwrap.panels.setStyle('position', 'absolute');
this.tabwrap.panels.setStyle('left', 0);
},

move: function (curTab, newTab, skipAnim) {
this.tabwrap.panels.setStyle('display', 'none');
newTab.setStyle('display', 'block');
}
});

var animFade = new Class ({
initialize: function(tabwrap) {
this.options = tabwrap.options || {};
this.tabwrap = tabwrap;

this.tabwrap.panels.setStyles({'opacity':0,'width':'100%'});
},

move: function (curTab, newTab, skipAnim) {
if(this.options.changeTransition != 'none' && skipAnim==false)
{
if (curTab)
{
curOpac = curTab.getStyle('opacity');
var changeEffect = new Fx.Style(curTab, 'opacity', {duration: this.options.duration, transition: this.options.changeTransition});
changeEffect.stop();
changeEffect.start(curOpac,0);
}
curOpac = newTab.getStyle('opacity');
var changeEffect = new Fx.Style(newTab, 'opacity', {duration: this.options.duration, transition: this.options.changeTransition});
changeEffect.stop();
changeEffect.start(curOpac,1);
} else {
if (curTab) curTab.setStyle('opacity', 0);
newTab.setStyle('opacity', 1);
}
}
});

var animMoveHor = new Class ({
initialize: function(tabwrap) {
this.options = tabwrap.options || {};
this.tabwrap = tabwrap;
this.changeEffect = new Fx.Elements(this.tabwrap.panels, {duration: this.options.duration});
var left = 0;
this.tabwrap.panels.each (function (panel) {
panel.setStyle('left', left);
left += panel.offsetWidth+10;
});
this.tabwrap.panels.setStyle('top', 0);
},

move: function (curTab, newTab, skipAnim) {
if(this.options.changeTransition != 'none' && skipAnim==false)
{
this.changeEffect.stop();
var obj = {};
var offset = newTab.offsetLeft.toInt();
i=0;

this.tabwrap.panels.each(function(panel) {
obj = {'left':[panel.offsetLeft.toInt(), panel.offsetLeft.toInt() - offset]};
});
this.changeEffect.start(obj);
}
},
reposition: function() {
if (this.tabwrap.activePanel) {
this.changeEffect.stop();
var left = this.tabwrap.activePanel.offsetLeft;
for (var i=this.tabwrap.activePanel._idx-1;i>=0;i--) {
left -= this.tabwrap.panels.offsetWidth;
this.tabwrap.panels.setStyle('left',left);
}
var left = this.tabwrap.activePanel.offsetLeft;
for (i=this.tabwrap.activePanel._idx+1;i<this.tabwrap.panels.length;i++) {
left += this.tabwrap.panels.offsetWidth;
this.tabwrap.panels.setStyle('left',left);
}
}
}
});

var animMoveVir = new Class ({
initialize: function(tabwrap) {
this.options = tabwrap.options || {};
this.tabwrap = tabwrap;
this.changeEffect = new Fx.Elements(this.tabwrap.panels, {duration: this.options.duration});

var top = 0;
this.tabwrap.panels.each (function (panel) {
panel.setStyle('top', top);

top += panel.offsetHeight+10;
});
this.tabwrap.panels.setStyle('left', 0);
},
move: function (curTab, newTab, skipAnim) {
if(this.options.changeTransition != 'none' && skipAnim==false)
{
//reposition newTab

this.changeEffect.stop();
var obj = {};
var offset = newTab.offsetTop.toInt();
i=0;
this.tabwrap.panels.each(function(panel) {
obj = {'top':[panel.offsetTop.toInt(), panel.offsetTop.toInt() - offset]};
});
this.changeEffect.start(obj);
}
},
reposition: function() {
if (this.tabwrap.activePanel) {
this.changeEffect.stop();
var top = this.tabwrap.activePanel.offsetTop;
for (var i=this.tabwrap.activePanel._idx-1;i>=0;i--) {
top -= this.tabwrap.panels.offsetHeight;
this.tabwrap.panels.setStyle('top',top-10);
}
var top = this.tabwrap.activePanel.offsetTop;
for (i=this.tabwrap.activePanel._idx+1;i<this.tabwrap.panels.length;i++) {
top += this.tabwrap.panels.offsetHeight+10;
this.tabwrap.panels.setStyle('top',top);
}
}
}
});

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#259538

Which JA Tabs is this?

[subfighter Friend subfighterJoin date: February 2007Posts: 86Downloads:0Uploads:1 Thanks: 7 Thanked: 1 times in 1 posts]

#259539

Announcement Popular JA Extensions – now open for free beta

the new one from above..

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#259541

I am moving this thread to the proper forum for help. 🙂

OOOPS! I don’t know where I’m at. :-[ You are already here.

[nchaleta Friend nchaletaJoin date: September 2006Posts: 34Downloads:0Uploads:3 Thanks: 6]

#261861

To use autosize for width and height just leave them empty or if in sintax pode, don’t use those propreties.

[Author]

Posts