begin process at 2010 03 20 21:46:28
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Fonctionnement d'une propriété d'un navigateur

 > 

Récupération des dimensions d'un div sous Opéra


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Récupération des dimensions d'un div sous Opéra

lundi 12 mars 2007 à 18:05:52 | Récupération des dimensions d'un div sous Opéra

flexx

Bonjour

J'ai écris une fonction permettant de récupérer les dimensions d'un élément HTML.
Pour cela, il faut créer un élément avec createElement et le passer en paramètre à la fonction getDimension.
Cette fonction se contente juste d'ajouter l'élément dans le document, de récupérer ses dimensions et de le supprimer.

Exemple d'utilisation :

var spanLibelle = document.createElement("span");
spanLibelle.id = "spanLibelle";
spanLibelle.className = "libelleCategorie";
spanLibelle.innerHTML = "Mon libellé";
var dimensionLibelle = getDimension(spanLibelle);

...

// Objet dimension
function Dimension(width, height){
    this.width = width;
    this.height = height
}

// Méthode de récupération des dimensions d'un élément
function getDimension(element){

    // Affecte un ID par défaut à l'élément s'il n'en a pas
    if (!element.id) element.id = "testDimension";
   
    // Ajoute l'élément au document
    document.body.appendChild(element);
   
    // Récupère les dimensions de l'élément
    var dimension = new Dimension(
            document.getElementById(element.id).offsetWidth,
            document.getElementById(element.id).offsetHeight);
   
    // Supprime l'élément du document
    document.body.removeChild(element);
   
    return dimension;
   
}

Ca marche très bien avec Internet Explorer et Firefox, par contre sous Opéra j'obtiens des dimensions nulles !

Savez-vous pourquoi et comment y remédier ?

Merci de votre aide


lundi 12 mars 2007 à 18:19:56 | Re : Récupération des dimensions d'un div sous Opéra

PetoleTeam

Membre Club
B onjour...
voir peut être http://www.javascriptfr.com/codes/RECUPERER-LARGEUR-AFFICHAGE-TEXTE_41737.aspx
mais je ne pense pas avoir bien compris...
;0)
mardi 13 mars 2007 à 10:45:34 | Re : Récupération des dimensions d'un div sous Opéra

flexx

Réponse acceptée !
Salut

Oui, en fait, ma source généralise la sienne qui ne récupère que les dimensions d'un texte.

Le problème que j'avais était que sous Opera, les dimensions d'un texte étaient tout le temps nulles !

J'ai résolu le problème en spécifiant le style "position: absolute" de l'élément passé en paramètre.

A+


mardi 13 mars 2007 à 20:53:19 | Re : Récupération des dimensions d'un div sous Opéra

PetoleTeam

Membre Club

B onsoir...
Merci pour l'info...

Sous Opéra je n'est pas noté de dimensions nulles, peut être qu'Opéra attend la balise de fin de </BODY> pour autoriser la lecture en absence de positionnement précis.

Pourquoi récupérer les dimensions d'un élément que l'on n'utilise pas, puisque remover du body?

On est bien obligé d'attendre peut être pas la fin du chargement, mais au moins le chargement de la balise <BODY>, à preuve le document.body.appendChild().

...ma source généralise...
En ce qui concerne la généralisation il me semble qu'il y à
//---------------------------
function Get_Dimension( obj_){
  return([ obj_.offsetWidth, obj_.offsetHeight]);
}
qui fonctionne quelque soit l'objet que l'on passe...

...la sienne qui ne récupère que les dimensions d'un texte...
OUI c'est une demande fréquente lorsque l'on veut calculer par exemple les dimensions d'une bannière.

En ce qui concerne ta fonction
il est inutile d'affecter un ID à l'élément, l'appel à element.offsetWidth et element.offsetHeight étant suffisant...
function getDimension(element){
  document.body.appendChild(element);
  // Récupère les dimensions de l'élément
  var dimension = new Dimension(
    element.offsetWidth,
    element.offsetHeight);
  // Supprime l'élément du document
  document.body.removeChild(element);
  return dimension;
}
Mais je n'ai peut être pas très bien saisi la finalité de tout cela...

;0)

mardi 13 mars 2007 à 21:36:26 | Re : Récupération des dimensions d'un div sous Opéra

flexx

Oui, en effet, il n'est pas utile d'affecter un id.
Cela résultait de précédents tests que je faisais :)

Sinon, le but est de pouvoir connaitre la dimension d'objets HTML étant utilisés dans la réalisation de composants javascript.




Cette discussion est classée dans : élément, element, document, dimensions, spanlibelle


Répondre à ce message

Sujets en rapport avec ce message

XHTML 1.0 strict et OnClick [ par eijii ] Bonjour,ces les vacances et depuis quelques jours je m'attèles à refaire de a à z mon pt'it site. Mais j'ai un soucis lorsque je passes mon site avec Ajax - temps attente [ par citt ] Bonjour,Je voudrait executer un script php en ajax plusieur fois mais mon code n'atant pas que le premier passage soit fait il ne fait que le dernier Pb avec Drag And Drop [ par Sylvain74 ] Bonjours tout le monde,voila,j a'ai recupéré un script permettant de faire du drag and drop avec les lignes d'un tableau.Je l'ai adapter pour passer d pb ie : ajouter un <option> à un <select> à partir d'une popup [ par yosh ] Bon c assez compliqué mais je vai essayer d'être le plu clair possible J'ai une page dans laquel j'utilise la technologie AJAX couplé à du PHP pour i HTML avec javascript non valide W3C [ par marap ] Bonjour, J'arrive à la fin d'une opération de mise en conformité W3C de mes sites, mais une dernière difficulté se présente, à laquelle je n'ai pas modification lightbox .... bouton close en haut a droite [ par petardier ] bonjour,je souhaite modifier une light box en mettant le bouton close en haut a gauche , plutot qu'en bas.Ainsi, quand une image est plus grande que l Element portant le meme id [ par 6xavier6 ] Bonjour,J'aurai aimé savoir s'il été possible de sélectionner plusieurs élément par leur id, s'il est identique.Je m'explique : J'ai 2 champs d'un for Trouver les dimensions réelles d'une image [ par ov3rdoze ] BonjourJe suis en train de développer une galerie d'images. Quand on clique sur une image, celle-ci s'ouvre dans un cadre. Il y a un bouton "Image sui attachEvent(); qui ne marche pas et addEventListener(); qui marche ! [ par nicomilville ] Salut,J'ai une fonction qui marche que sur firefox mais pas sous IE !ma fonction :function aff_conversation() { var O_discution = document.createEleme


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,342 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales