Dimension d'un div de façon dynamique Résolu

Question

Bonjour tout le monde

Je cherche le moyen d'avoir dynamiquement les dimensions d'un div...

J'ai essay&#233; document.getElementbyID(IDdiv).offsetWidth et .offsetHeight mais il me r&#233;pond "Erreur : this.document.ftb has no properties" (ca c'est le
copier/coller, il marque pas vraiment &#231;a mais je pense que &#231;a c'est
plus parlant)

Alors j'ai essay&#233; de mettre .width et d'autre (dont je me souviens plus) mais j'ai toujours la m&#234;me erreur....

Je place le code si &#231;a peux aid&#233;... C'est un code que j'ai trouv&#233; ici (enfin je crois j'ai plus le lien) que j'essai de modifier (&#231;a travail mon peu de JS, et puis je trouvais simple le code de base)
Je met en orange la partie &#224; probl&#232;me... 

/**********************
* infobulles
* Ben, 23/07/2005
**********************/

//Espacement entre le curseur et l'infobulle
var cursorX = 5;
var cursorY = 5;

//Gestion des navigateurs (IE, MOZ, NS)
nav = navigator.appName;

ie = document.all;
ns = document.layers;
fi = document.getElementById && !document.all;

if(!ie && !ns && !fi){
    alert("Navigateur "+nav+" incompatible !");}

if(!ie){
    document.captureEvents(Event.MOUSEMOVE);}

document.onmousemove = get_mouse;

function get_mouse(e){
    //R&#233;cup&#232;re les coordonn&#233;es de la souris
    if(ie){
        sourisX = event.x;
        sourisY = event.y;
        window.status = x;
    }else{
        sourisX = e.pageX;
        sourisY = e.pageY;
    }    
    
    //Cr&#233;ation du terme bubble (d&#233;signant l'infobulle)
    var bubble = document.getElementById("infobulle");

    //R&#233;cup&#232;re la r&#233;solution de l'&#233;cran
    var ecranX = document.body.clientWidth + document.body.scrollLeft;
    var ecranY = document.body.clientHeight + document.body.scrollTop;

    //R&#233;cup&#232;re la taille de la bubble
    var tailleX = bubble.offsetWidth;
    var tailleY = bubble.offsetHeight;

    //V&#233;rifie si la bubble sort de l'&#233;cran &#224; droite
    if( sourisX + cursorX + tailleX > ecranX ){
        //Oui, la bubble est bloqu&#233;
        bubble.style.left = ecranX - tailleX + 'px';
    } else {
        //Non, la bubble se d&#233;place
        bubble.style.left = sourisX + cursorX + 'px';}

    //V&#233;rifie si la bubble sort de l'&#233;cran en bas
    if( sourisY + cursorY + tailleY > ecranY ) {
        //Oui, la bubble est bloqu&#233;
        bubble.style.top = ecranY - tailleY + 'px';
    } else {
        //Non, la bubble se d&#233;place
        bubble.style.top = sourisY + cursorY + 'px';}
}

//Affiche la bubble
function see_bubble(text){
    bubble.style.visibility = "visible";
    bubble.style.display = "block";
    bubble.innerHTML = text;}

//Cache la bubble
function kill_bubble(){
    bubble.style.visibility = "hidden";
    bubble.style.display = "none";}

J'esp&#232;re que vous pourrez m'aidez.... 

PS: J'ai pas trouv&#233; de balise pour mettre un commentaire ou du code, c'est normal?
PS': Je sais, c'est un script d'infobulle, y'en a plein de d&#233;j&#224; fait, mais bon.... J'ai le d'essayer et d'apprendre.

hawks_ttf · Accepted Answer

J'ai trouv&#233; le pb.... Si on retire le "var" &#224; "var bubble = document.getElementById("infobulle");" &#231;a marche....

Mindiell · Answer

ok, tu as un script d'info-bulle...
Tu veux faire quoi exactement ? pourquoi chercher à connaitre sa taille ?

hawks_ttf · Answer

Merci de ta r&#233;ponse Mindiell

Si la position de la souris plus l'&#233;cart entre la souris et la bulle plus la taille de la bulle sont plus grand que la taille de l'&#233;cran, il en manquera un bout, donc dans ce cas, la bulle est bloqu&#233; au bord de l'&#233;cran.

Voila pourquoi je veux connaitre sa taille en dynamique, pour &#233;viter que la bulle sortent de l'&#233;cran...

Mindiell · Answer

Moi j'ai une bulle comme ca, un div. Je vérifie rien, j'ai juste ca :

.tooltip_on
{
 position : absolute;
 display  : block;
}

et ca dépasse jamais de l'écran (il se retaille tout seul, suivant le texte ca fera une bulle de plusieurs lignes, pitet un peu moche, mais bon...)

Forcément, quand on arrive trop à droite ca déborde, mais bon :

http://www.mindiell.net/tooltip/exemple.html

hawks_ttf · Answer

Merci pour cette astuce, mais je pr&#233;f&#232;rerai pouvoir calculer la taille, comme &#231;a la bulle sera ind&#233;formable...

En attendant d'avoir la r&#233;ponse &#224; ma question, je vais me servir de &#231;a.

PS: Je ne valide pas car &#231;a ne r&#233;pond pas vraiment &#224; ma question, et puis j'ai un probl&#232;me pour valider....
PS': Et puis &#231;a va peut &#234;tre me poser probl&#232;me, il y aura surement des bulles proche du bord de l'&#233;cran!

Mindiell · Answer

Ok,
une petite question : "Comment calcules-tu la première taille de ta bulle ?"

Si la souris est très à gauche de l'écran, la taille de départ fait quasiment toute la largeur de l'écran, non ? Si on déplace la souris vers la droite, la bule restera sur place, mais très grande.
En contre-partie, si on passe avec la souris très à droite, la bulle de départ sera toute petite.

C'est pour ca que si j'étais toi, je fixerais la largeur de l'infobulle. A partir de là, plus de problèmes, tu connais forcément sa taille !

Si tu re-regardes mon lien, j'ai fixé la taille de la bulle, et j'ai donc pu bloquer celle-ci :o)

Dimension d'un div de façon dynamique

6 réponses

Votre réponse

Discussions similaires