Forum TourDeJeu -> Javascript: Trouver La Hauteur D'un Tableau

TourDeJeu, le réseau des jeux en ligne alternatifs : jeux web multijoueurs, jeux par forum. En savoir +

En ligne : + de 500 jeux, + de 7000 news, + de 26000 commentaires

Forum TourDeJeu · Règles du forum	Aide Recherche Membres
Bienvenue invité ( Connexion \| Inscription )	Recevoir à nouveau l'email de validation

Forum TourDeJeu -> La création et la gestion de jeux -> Programmer

Flux RSS des discussions du forum :

pour les joueurs, et

pour les créateurs et MJ

Javascript: Trouver La Hauteur D'un Tableau, dynamiquement bien sur ...

Suivre ce sujet | Envoyer ce sujet | Imprimer ce sujet

Sybler

Ecrit le : Samedi 09 Décembre 2006 à 07h57

Ouf

Groupe : Membre
Messages : 453

j'essaie de créer une fonction qui permet de calculer la hauteur qu'occupe un tableau (hauteur variant selon le contenu)

Mon développement actuel:

CODE

//Fonction qui retire les px en fin de string
function removePx(txt){
if (typeof txt == 'string'){
var last2chr = txt.substr(txt.length-2,2);
if(last2chr=="px")
return txt.substr(0,txt.length-2);
}
return txt;
}

//Fonction récursive qui cumule les hauteurs de tout les conteneurs d'un item.
function calculateHeightOfElem(elem){
var hauteur =0;
var htmp = 0;

//Calculer la hauteur de l'élément courrant
if (navigator.appName != "Microsoft Internet Explorer" && !window.opera && !document.mimeType && document.all && document.getElementById)
htmp = removePx(elem.offsetHeight);
else if(document.getElementById)
htmp = removePx(elem.scrollHeight);

if (typeof htmp == 'number')
hauteur+=htmp;

//Calculer la hauteur de tout les sous-élements
var nodes = elem.childNodes;
if (nodes){
for(var i=0;i<nodes.length;i++){
htmp = calculateHeightOfElem(nodes[i]);
if (typeof htmp == 'number')
hauteur+=htmp;
}
}

alert(hauteur + "...\n");
return hauteur;
}

J'ai déjà utilisé cette fonction pour calculer la hauteur du contenu d'un Iframe, mais hélas le contenu d'un tableau semble être plus complexe (et encore plus qu'une simple récursivitée comme je viend d'essayer :-\):

CODE

J'ai regardé rapidement toutes les propriétés des objets DOM tu tableau, mais je trouve rien jusqu'ici :-\

--------------------

Haram turval	Ecrit le : Samedi 09 Décembre 2006 à 10h49
Pro Groupe : Membre Messages : 126	Pourquoi tu ne récupère pas tout simplement la propriété offsetHeight (testée sous FF, IE6, IE7, Opera) de ton tableau ? Au passage, au lieu du RemovePx(), tu peux utiliser la fonction parseInt de Javascript qui converti une variable en integer. parseInt('26px') donnera 26. parseInt('26 px') donnera aussi 26. -------------------- Tant va la cruche à l'eau qu'à la fin elle est mouillée.

Sybler

Ecrit le : Samedi 09 Décembre 2006 à 17h25

Ouf

Groupe : Membre
Messages : 453

Si tu remarque bien, la fonction à pour opération principale ceci:

CODE

htmp = removePx(elem.offsetHeight);

La fonction étant récursive, elle essaie d'aller chercher le offsetHeight du tableau... mais de TOUT CE QU'IL CONTIEND aussi. Je m'attendais à recevoir une hauteur incroyable (à cause de plusieurs colones) Mais je recois toujours que 0 (Note:oui, la fonction RemovePx est ok, j'ai bien vérifié)

Voici une copie du Debug des propriétés d'un tableau:

CODE

offsetParent = 'null'
offsetLeft = '0'
offsetTop = '0'
nodeName = 'TABLE'
nodeValue = 'null'
nodeType = '1'
parentNode = '[object HTMLDivElement]'
childNodes = '[object NodeList]'
firstChild = '[object Text]'
lastChild = '[object HTMLTableSectionElement]'
previousSibling = '[object Text]'
nextSibling = '[object Text]'
attributes = '[object NamedNodeMap]'
ownerDocument = '[object HTMLDocument]'
namespaceURI = 'null'
prefix = 'null'
localName = 'TABLE'
tagName = 'TABLE'
ELEMENT_NODE = '1'
ATTRIBUTE_NODE = '2'
TEXT_NODE = '3'
CDATA_SECTION_NODE = '4'
ENTITY_REFERENCE_NODE = '5'
ENTITY_NODE = '6'
PROCESSING_INSTRUCTION_NODE = '7'
COMMENT_NODE = '8'
DOCUMENT_NODE = '9'
DOCUMENT_TYPE_NODE = '10'
DOCUMENT_FRAGMENT_NODE = '11'
NOTATION_NODE = '12'
id = 'table_55'
title = ''
lang = ''
dir = ''
className = 'subcenter'
caption = 'null'
tHead = 'null'
tFoot = 'null'
rows = '[object HTMLCollection]'
tBodies = '[object HTMLCollection]'
align = ''
bgColor = ''
border = ''
cellPadding = ''
cellSpacing = ''
frame = ''
rules = ''
summary = ''
width = ''
offsetWidth = '0'
offsetHeight = '0'
innerHTML = '

'
scrollTop = '0'
scrollLeft = '0'
scrollHeight = '0'
scrollWidth = '0'
clientHeight = '0'
clientWidth = '0'
tabIndex = '-1'
spellcheck = 'false'
style = '[object CSSStyleDeclaration]'
baseURI = 'http://www.<censuré>'
textContent = ' '
DOCUMENT_POSITION_DISCONNECTED = '1'
DOCUMENT_POSITION_PRECEDING = '2'
DOCUMENT_POSITION_FOLLOWING = '4'
DOCUMENT_POSITION_CONTAINS = '8'
DOCUMENT_POSITION_CONTAINED_BY = '16'
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = '32'

Pour parseInt, j'étais pas au courant qu'il gardait les entiers même si d'autre charactères étaient présents, merci

--------------------

Sybler	Ecrit le : Samedi 09 Décembre 2006 à 17h49
Ouf Groupe : Membre Messages : 453	HA !! c'est un peu stupide, en fait, le debug que je vous ai copié collé, c'est au moment ou mes 'fiches' se chargent, mais sont invisible (en attentes d'être affiché, donc "display: none;" comme display:none signifie de ne pas intégré l'élément au flux de la page, sa hauteur est 0 partout. Lorsque l'élément est affiché, la hauteur est bonne. Merci (d'avoir confirmé que c'était supposé fonctionné avec offsetHeight) ! --------------------

« Sujets + anciens | Programmer | Sujets + récents »