Forum d'entraide PHPFrance

Hello,

J'utilise un javascript qui fait ce genre de chose (tab) :

http://dhtmlkitchen.com/scripts/tabs/Ta ... ested.html

et j'aimerais savoir comment faire pour que les tab soie fixe et ne varie plus en fonction du texte affiché.

pouvez vous m'aider?

merci d'avance et a+

Voici le code :

Code : Tout sélectionner

/**
* Copyright©2001 Garrett Smith
* Web:http://dhtmlitchen.com/
*
* Last Modified:Sept 22, 2002.
*/
Browser={
isSupported:function(){
return(Boolean(document.getElementsByTagName)&&Boolean(document.getElementById));
},
id:new function(){
var ua=navigator.userAgent;
var OMNI=ua.indexOf("Omni")>0;
this.OPERA=ua.indexOf("Opera")>=0;
this.MAC=ua.indexOf("Mac")>0;
if(!this.OPERA&&!OMNI){
this.IE5=ua.indexOf("MSIE 5")>0;
this.IE5_0=ua.indexOf("MSIE 5.0")>0;
this.NS6=ua.indexOf("Gecko")>0;
this.MOZ=this.NS6&&ua.indexOf("Netscape")==-1;
this.MAC_IE5=this.MAC>0&&this.IE5;
this.IE6=ua.indexOf("MSIE 6")>0;
}}
};
var tabs, tabsClone, tabArray, activeTab, relatedTab=null;
TabParams={
useCloneOnBottom:false,
showRemoveLink:false, /* mettre à true pour afficher le bouton "Afficher tout". Modifié pour base Prestations BCVd*/
alwaysShowClone:false
};
function tabInit(){
if(window.tabInited)return;
if(!document.createElement||Browser.id.OPERA){
TabParams.useCloneOnBottom=false;
TabParams.alwaysShowClone=false;
TabParams.showRemoveLink=true;
}
tabs=document.getElementById('tabs');
tabs.getElementsWithClass=get_elements_with_class_from_classList;
if(Browser.id.OPERA&&!Browser.id.IE5){
tabArray=tabs.getElementsByTagName("span");
activeTab=tabArray[0];
}
else {
tabArray=tabs.getElementsWithClass("*", ["tab", "tabActive"]);
activeTab=tabs.getElementsWithClass("*", "tabActive")[0]||tabArray[0];
}
tabArray.isImg=tabArray[0].tagName.toLowerCase()=="img";
IE5_0noImg=(Browser.id.IE5_0&&!tabArray.isImg&&!Browser.id.MAC);
if(!Boolean(tabs.cloneNode)||!Boolean(tabs.cloneNode(true))||tabArray.isImg)TabParams.useCloneOnBottom=false;
if(TabParams.useCloneOnBottom){
tabsClone=document.body.appendChild(tabs.cloneNode(true));
tabsClone.className="tabsClone";
tabsClone.getElementsWithClass=get_elements_with_class_from_classList;
tabsCloneArray=tabsClone.getElementsWithClass("*", ["tab", "tabActive"]);
}
for(var i=0;i<tabArray.length; i++){
var _tab;
if(!Browser.id.OPERA){
_tab=tabArray[i];
_tab.content=document.getElementById("content"+(i+1));
}
else {
_tab=document.getElementById("tab"+(i+1));
_tab.num=i+1;
}
if(TabParams.useCloneOnBottom)tabsCloneArray[i].content=document.getElementById("content"+(i+1));
if(_tab.tagName.toLowerCase()=="img"){
_tab["normalsrc"]=new String(_tab.src);
_tab.hover=new Image();
_tab.hover.src=_tab.getAttribute("hoversrc");
_tab.active=new Image();
_tab.active.src=_tab.getAttribute("activesrc");
}
if(_tab.addEventListener){
_tab.addEventListener("mouseover", hoverTab ,false);
_tab.addEventListener("mouseout", hoverOff ,false);
_tab.addEventListener("mousedown", depressTab ,false);
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].addEventListener("mouseover", hoverTab ,false);
tabsCloneArray[i].addEventListener("mouseout", hoverOff ,false);
tabsCloneArray[i].addEventListener("mousedown", depressClonedTab ,false);
}}
else {
_tab.onmouseover=hoverTab;
_tab.onmouseout=hoverOff;
_tab.onmousedown=depressTab;
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].onmouseover=hoverTab;
tabsCloneArray[i].onmouseout=hoverOff;
tabsCloneArray[i].onmousedown=depressClonedTab;
}}
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].depressTab=depressClonedTab;
tabsCloneArray[i].controller=_tab;
_tab.bottomTab=tabsCloneArray[i];
}
_tab.depressTab=depressTab;
if(TabParams.showRemoveLink){
_tab.content.appendChild(document.createElement("br"));
removeTabLink=_tab.content.removeTabLink=_tab.content.appendChild(document.createElement("a"));
removeTabLink.id="removeTabLink"+(i+1);
removeTabLink.href="javascript:removeTabs("+(i+1)+")";
removeTabLink.appendChild(document.createTextNode("Afficher tout"));
removeTabLink.className="removeTab";
}
if(IE5_0noImg){
tabs.tabOffset=tabs.tabOffset?tabs.tabOffset:0;
var tabWidth=_tab.offsetWidth+18;
_tab.style.left=tabs.tabOffset+"px";
_tab.style.width=tabWidth+"px";
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].style.left=tabs.tabOffset+"px";
tabsCloneArray[i].style.width=tabWidth+"px";
}
_tab.style.display="block";
_tab.style.position="absolute";
_tab.style.whiteSpace="nowrap";
if(TabParams.useCloneOnBottom){
tabsCloneArray[i].style.display="block";
tabsCloneArray[i].style.position="absolute";
tabsCloneArray[i].style.whiteSpace="nowrap";
}
tabs.tabOffset+=parseInt(_tab.offsetWidth)+4;
}
if(Browser.id.MAC_IE5&&TabParams.useCloneOnBottom)tabsCloneArray[i].innerHTML=_tab.innerHTML;
}
tabs.onchange=new Function();
var q=String(window.location.search);
if(q&&q.indexOf("tab=")>0)switchTabs(q.substring(q.indexOf("tab=")+4,q.indexOf("tab=")+8));
else if(window.location.hash!=""){
var hash=window.location.hash;
var el=document.getElementById(hash.substring(1));
if(el==null)return;
var content=findAncestorWithClass(el, "content");
if(content!=null&&Boolean(content.id)&&content.id.indexOf("content")==0){
var num=content.id.substring("content".length);
switchTabs("tab"+num, null, hash);
el=content=num=null;
}}
if(tabArray.isImg)activeTab.src=activeTab.getAttribute("activesrc");
else{
activeTab.className="tab tabActive";
if(TabParams.useCloneOnBottom)activeTab.bottomTab.className=activeTab.className;
}
if(Browser.id.IE5_0&&!Browser.id.MAC&&!tabArray.isImg)window.defaultStatus="IE 5.0 does not support inline boxes. "+"Please upgrade to IE 5.5 or 6.0 for better performance.";
if(TabParams.useCloneOnBottom){
setTabsClonePosition();
tabsClone.style.height=(activeTab.offsetHeight+1)+"px";
showTabsCloneIfNecessary();
if(window.addEventListener)window.addEventListener("resize",updateTabsClonePosition, false);
else window.onresize=updateTabsClonePosition;
}
window.tabInited=true;
}
function updateTabsClonePosition(e){
if(activeTab!=null)setTimeout("setTabsClonePosition();",500);
}
function setTabsClonePosition(){
var adjustment=0;
if(Browser.id.MAC_IE5)adjustment=-1 *
parseInt(activeTab.content.currentStyle.paddingBottom);
else if(Browser.id.IE5_0)adjustment=0;
else adjustment=1;
tabsClone.style.top=(activeTab.content.offsetHeight+activeTab.content.offsetTop+adjustment)+"px";
}
function showTabsCloneIfNecessary(){
var contentBottom=activeTab.content.offsetTop+activeTab.content.offsetHeight;
var visibility=(contentBottom>getViewportHeight()||TabParams.alwaysShowClone)?"visible":"hidden";
tabsClone.style.visibility=visibility;
}
function switchTabs(tab,e){
if(typeof document.getElementById=="undefined")return true;
var el=(arguments.length==3&&typeof arguments[2]=="string")?document.getElementById(arguments[2].substring(1)):null;
var booleanReturnValue=(arguments.length==3&&arguments[2]==true)?true:false;
try{
document.getElementById(tab).depressTab(e);
}
catch(exception){}
if(!el&&!booleanReturnValue){
window.scrollTo(0,0);
return false;
}
else if(el!=null)scrollToElement(el);
if(booleanReturnValue)return booleanReturnValue;
}
function scrollToElement(el){
try{
if(typeof el.scrollIntoView=="function")el.scrollIntoView();
else
window.location.hash="#"+el.id;
}
catch(ex){}}
function hoverTab(){
if(activeTab==this||activeTab==this.controller)return;
this.className="tabHover tab";
this.src=this.getAttribute("hoversrc");
if(TabParams.useCloneOnBottom){
if(this.bottomTab)this.bottomTab.className="tabHover tab";
else this.controller.className="tabHover tab";
}}
function hoverOff(){
if(activeTab==this||activeTab==this.controller)return;
this.className="tab";
this.src=this["normalsrc"];
if(TabParams.useCloneOnBottom){
if(this.bottomTab)this.bottomTab.className="tab";
else this.controller.className="tab";
}}
function depressTab(e){
if(activeTab==this)return;
relatedTab=activeTab;
this.className="tab";
this.className="tab tabActive";
this.src=this.getAttribute("activesrc");
if(activeTab)resetTab(activeTab);
activeTab=this;
tabs.onchange(e);
if(!Browser.id.OPERA){
if(!Browser.id.MAC_IE5)this.content.style.display="block";
this.content.style.visibility="visible";
}
else document.getElementById("content"+this.num).style.visibility="visible";
if(TabParams.useCloneOnBottom){
setTabsClonePosition();
this.bottomTab.className=this.className;
showTabsCloneIfNecessary();
}}
function depressClonedTab(e){
if(activeTab==this.controller)return;
this.controller.depressTab(e);
this.className="tab";
this.className="tab tabActive";
window.scrollTo(0,(tabsClone.offsetTop+tabsClone.offsetHeight)-getViewportHeight());
}
function resetTab(tab){
tab.className="tab";
tab.src=tab["normalsrc"];
if(activeTab.bottomTab)activeTab.bottomTab.className="tab";
if(!Browser.id.OPERA){
if(!Browser.id.MAC_IE5)tab.content.style.display="none";
tab.content.style.visibility="hidden";
}
else document.getElementById("content"+tab.num).style.visibility="hidden";
}
get_elements_with_class_from_classList=function(tagName, classList){
var returnedCollection=new Array(0);
var collection=(this.all&&tagName=="*")?this.all:this.getElementsByTagName(tagName);
for(var i=0; i<collection.length; i++)jloop:for(var j=0;j<classList.length; j++)if(collection[i].className.test(classList[j], " ")){
returnedCollection[returnedCollection.length]=collection[i];
break jloop;
}
return returnedCollection;
};
if(!String.prototype.test){
String.prototype.test=function(inp, delim){
var exps=getTokenizedExps(inp, delim);
return(exps.global.test(this)||exps.ends.test(this));
};
function getTokenizedExps(inp, delim){
return {
global:new RegExp(delim+inp+delim, "\g"),
ends:new RegExp("^"+inp+delim+"|^"+inp+"$|"+delim+inp+"$", "\g")};
}}
function findAncestorWithClass(el, klass){
for(var parent=el;parent!=null;){
if(parent.className!=null&&parent.className.test(klass, " "))return parent;
parent=parent.parentNode;
}
return null;
};
function getScrollTop(){
if(Browser.id.NS6)return(window.pageYOffset);
if(document.documentElement.scrollTop)return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
else if(document.body.scrollTop)return(document.body.scrollTop);
}
function getViewportHeight(){
if(Browser.id.NS6)return window.innerHeight;
if(Browser.id.IE6)return Math.max(document.documentElement.clientHeight, document.body.clientHeight);
return document.body.clientHeight-2;
}
function removeTabs(index){
var noScrollFlag=activeTab.id=="tab1";
resetTab(activeTab);
var removeTabLink;
for(var i=0; i<tabArray.length; i++)if(Boolean(tabArray[i].content)&&tabArray[i].content.style){
tabArray[i].content.style.position="relative";
if(i!=0){
tabArray[i].content.style.borderTopWidth="0";
tabArray[i].content.style.marginTop="0";
if(!Browser.id.MOZ)tabArray[i].content.style.top="0";
}
if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="0";
else tabArray[i].content.style.marginBottom="10px";
if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="block";
tabArray[i].content.style.visibility="visible";
removeTabLink=tabArray[i].content.removeTabLink;
if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){
var newIndex=parseInt(removeTabLink.id.substring(removeTabLink.id.length-1));
if(newIndex<tabArray.length-1)newIndex+=1;
removeTabLink.href="javascript:undoRemoveTabs('tab"+newIndex+"')";
removeTabLink.firstChild.nodeValue="Afficher condense";
}
if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom=tabArray[0].content.offsetTop+"px";
}
tabs.style.display="none";
if(TabParams.useCloneOnBottom)tabsClone.style.display="none";
if(noScrollFlag)return;
if(Browser.id.MOZ)window.scrollTo(0, document.getElementById("content"+index).offsetTop);
else window.location.hash='content'+index;
}
function undoRemoveTabs(sTabToActivate){
for(var i=0; i<tabArray.length; i++){
if(Boolean(tabArray[i].content)&&tabArray[i].content.style){
tabArray[i].content.style.position="absolute";
if(i!=0){
tabArray[i].content.style.top="";
tabArray[i].content.style.borderTopWidth="";
}
if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="";
else tabArray[i].content.style.marginBottom="";
if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="none";
tabArray[i].content.style.visibility="hidden";
var removeTabLink=tabArray[i].content.removeTabLink;
if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){
removeTabLink.firstChild.nodeValue="Afficher tout";
removeTabLink.href="javascript:removeTabs("+(i+1)+")";
}}
}
tabs.style.display="block";
if(TabParams.useCloneOnBottom)tabsClone.style.display="block";
activeTab=null;
switchTabs(sTabToActivate, null);
activeTab=document.getElementById(sTabToActivate);
if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom="";
}

si tu envoi tout le code sans faire l'effort de selectionner les parties qui touchent au problème, personne ne peut t'aider.
Sacré parchemin!

ben c'est ca le gros pb, je n'ai pas codé ce javascript et il n'y a aucun commentaire. Je ne sais donc pas ce que je dois modifier. J'aimerais que tout les onglet soie de la même taille.

a+

Que tu n'aies pas écrit ce script, admettons, es-tu au moins capable de le lire et d'en suivre le fonctionnement ?
Si oui, tu devrais trouver toi-même quoi modifier, sinon, tu t'aventures dans un gros morceau.

Si tu veux te donner une chance d'avancer, commence donc par mettre une indentation propre au script, ça te permettra de suivre visuellement plus facilement les boucles et autres if/else.

Présenté tel quel ce code est parfaitement indigeste.

Je comprend très approximativement comment il fonctionne et je suis totalement d'accord avec toi, ce code est indigeste. Le pb c'est qu'ont m'a donné ce code au boulot et demandé de le modifier alors que je ne connais quasi rien en javascript

donc j'esaye de me débrouilel comem je peux. Bref, je vais le formater et essayer de le comprendre au max

a+

Ce n'est absolument pas un probleme de Javascript ... c'est de la mise en forme de tes onglets dont il est question !

Tu dois manipuler/utiliser une feuille de style CSS pour mettre en forme tes onglets comme tu le desires. On remarque rapidement que tous les onglets sont affectés d'une classe "tab" donc a toi de définir cette classe pour qu'elle ressemble a ce que tu veux !

un exemple :

Code : Tout sélectionner

.tab {
   display: block;
   width: 150px;
   float: left;
}

En plus dans la source de la page la classe tab est definie ... tu n'a plus qu'a rajouter les 3 lignes dedans ...

ca march!

merci pcp pour ton aide et a+

Forum d'entraide PHPFrance

tab fixe

tab fixe