11540 sujets

JavaScript, DOM et API Web HTML5

Resize et positionnement de multiples objets

Bonjour,

J'écris un fichier PHP avec un body qui ressemble à ça :

  <body onload="load()">
    <div id="chalkboarddiv">
    <canvas id="chalkboardcanvas">
    <img id="chalkboardimg" src="blackboard-backgrounds-wallpapers.jpg">
    </canvas>
    </div>
    <div id="logodiv">
      <object id="logosvg" data="logo.svg" type="image/svg+xml" />
    </div>
    <div id="quisommesnousdiv">
      <object id="quisommesnoussvg" data="quisommesnous.svg" type="image/svg+xml" />
    </div>
    <div id="copyrightdiv">
      <object id="copyrightsvg" data="copyright.svg" type="image/svg+xml" />
    </div>
  </body>


La div chalkboarddiv gère un canvas pour mon background (avec un z-index à 1) puis sur ce background je viens positionner dynamiquement plusieurs object svg <div><object/></div>

Ca marche très bien pour le premier <div id="logodiv"> mais plus pour les suivants. Si je supprime cette <div id="logodiv">, ça marche alors très bien pour la <div id="quisommesnousdiv"> mais toujours pas pour la <div id="copyrightdiv">. Bref, ça ne marche que pour la première et pas pour les suivants. Pourquoi ?

Mes fonctions ont une tronche comme ça

    function resize_quisommesnous()
    {
      var w0 = 528.0;
      var h0 = 528.0;
      var w0h0 = w0/h0;
      var chalkboardcanvas = document.getElementById('chalkboardcanvas');
      var chalkboardcanvasctx = chalkboardcanvas.getContext("2d"); 
      var chalkboarddiv = document.getElementById('chalkboarddiv');
      var quisommesnousdiv = document.getElementById('quisommesnousdiv');
      var quisommesnoussvg = document.getElementById('quisommesnoussvg');
      quisommesnoussvg.width = chalkboardcanvas.width * 0.12;
      quisommesnoussvg.height = quisommesnoussvg.width / w0h0;
      var margin = findTop(chalkboarddiv) + 100.0;
      quisommesnousdiv.style.marginTop = margin + "px";
      var margin = findLeft(chalkboarddiv) + 10.0;
      quisommesnousdiv.style.marginLeft = margin + "px";
      quisommesnousdiv.style.marginBottom = "0px";
      quisommesnousdiv.style.marginRight = "0px";
    }
Salut Ababdge,

Vu ton constat, on dirait que c'est soit dû à l'appel de tes fonctions, soit au niveau des sélecteurs. Vérifies bien tes ids d'éléments dans ton js.

Quels sont les chaînes d'évènements? Comment appelles-tu tes fonctions js qui effectuent l'effet désiré?
Qu'est-ce qui "marche" exactement pour logodiv? Le positionnement?

Bien à toi.
Merci, il n'y a pas à proprement parlé de chaîne d’événements, juste un onload de la page qui appelle la fonction load() qui elle-même appelle la fonction resize(), qui elle-même appelle les fonctions resize_XXX(), plus un listener en cas de redimensionnement de ma fenêtre.
Et un alert en fin de fonction resize() semble m'indiquer que l'on sort correctement de chaque fonction resize_XXX()


  <script type="text/javascript">
    window.addEventListener('resize', resize, false);
    function load()
    {
      resize();
    }
    function resize()
    {
      resize_chalkboard();
      resize_copyright();
      resize_logo();
      resize_quisommesnous();
    }
    function findTop(obj)
    {
      var pos = 0;
      do
      {
        pos += obj.offsetTop;
        obj = obj.offsetParent;
      }
      while (obj != null);
      return pos;
    }
    function findLeft(obj)
    {
      var pos = 0;
      do
      {
        pos += obj.offsetLeft;
        obj = obj.offsetParent;
      }
      while (obj != null);
      return pos;
    }
    function resize_chalkboard()
    {
      ...
    }

    function resize_copyright()
    {
      var w0 = 1920.0;
      var h0 = 37.0;
      var w0h0 = w0/h0;
      var chalkboardcanvas = document.getElementById('chalkboardcanvas');
      var chalkboardcanvasctx = chalkboardcanvas.getContext("2d"); 
      var chalkboarddiv = document.getElementById('chalkboarddiv');
      var copyrightdiv = document.getElementById('copyrightdiv');
      var copyrightsvg = document.getElementById('copyrightsvg');
      copyrightsvg.width = Math.floor(chalkboardcanvas.width * 0.5);
      copyrightsvg.height = copyrightsvg.width / w0h0;
      var margin = findTop(chalkboarddiv) + chalkboardcanvasctx.canvas.height - copyrightsvg.height - 15.0;
      copyrightdiv.style.marginTop = margin + "px";
      copyrightdiv.style.marginBottom = "0px";
      copyrightdiv.style.marginLeft = "0px";
      copyrightdiv.style.marginRight = "0px";
    }

    function resize_logo()
    {
      var w0 = 528.0;
      var h0 = 528.0;
      var w0h0 = w0/h0;
      var chalkboardcanvas = document.getElementById('chalkboardcanvas');
      var chalkboardcanvasctx = chalkboardcanvas.getContext("2d"); 
      var chalkboarddiv = document.getElementById('chalkboarddiv');
      var logodiv = document.getElementById('logodiv');
      var logosvg = document.getElementById('logosvg');
      if (logosvg)
      {
        logosvg.width = Math.floor(chalkboardcanvasctx.canvas.width * 0.12);
        logosvg.height = Math.floor(logosvg.width / w0h0);
        var margin = findTop(chalkboarddiv) + 15.0;
        logodiv.style.marginTop = margin + "px";
        var margin = findLeft(chalkboarddiv) + 15.0;
        logodiv.style.marginLeft = margin + "px";
        logodiv.style.marginBottom = "0px";
        logodiv.style.marginRight = "0px";
      }
    }

    function resize_quisommesnous()
    {
      var w0 = 528.0;
      var h0 = 528.0;
      var w0h0 = w0/h0;
      var chalkboardcanvas = document.getElementById('chalkboardcanvas');
      var chalkboardcanvasctx = chalkboardcanvas.getContext("2d"); 
      var chalkboarddiv = document.getElementById('chalkboarddiv');
      var quisommesnousdiv = document.getElementById('quisommesnousdiv');
      var quisommesnoussvg = document.getElementById('quisommesnoussvg');
      if (quisommesnoussvg)
      {
        quisommesnoussvg.width = Math.floor(chalkboardcanvasctx.canvas.width * 0.06);
        quisommesnoussvg.height = Math.floor(quisommesnoussvg.width / w0h0);
        var margin = findTop(chalkboarddiv) + 150.0;
        quisommesnousdiv.style.marginTop = margin + "px";
        var margin = findLeft(chalkboarddiv) + 15.0;
        quisommesnousdiv.style.marginLeft = margin + "px";
        quisommesnousdiv.style.marginBottom = "0px";
        quisommesnousdiv.style.marginRight = "0px";
      }
    }

  </script>
Salut,

Je te conseille de commenter les fonctions resize, et tester unitairement tes fonctions en décommentant la première, valider que toutes les opérations fonctionnent pour cette première fonction et que visuellement le changement est donc ok.
Ensuite, décommente une deuxième et ainsi de suite.
Tu trouveras ton problème plus facilement.

Cdlt
Même si je vide mes fonctions resize_XXX de leur contenu, alors à chaque fois seule la premières des 3 est affichée. Ici par exemple logodiv. si je permute les div dans cette section body et que je place copyrightdiv après chalkboarddiv, alors seule chalkboarddiv est affichée


  <body onload="load()">
    <div id="chalkboarddiv">
    <canvas id="chalkboardcanvas">
    <img id="chalkboardimg" src="blackboard-backgrounds-wallpapers.jpg">
    </canvas>
    </div>
    <div id="logodiv">
      <object id="logosvg" data="logo.svg" type="image/svg+xml" />
    </div>
    <div id="copyrightdiv">
      <object id="copyrightsvg" data="copyright.svg" type="image/svg+xml" />
    </div>
    <div id="quisommesnousdiv">
      <object id="quisommesnoussvg" data="quisommesnous.svg" type="image/svg+xml" />
    </div>
  </body>
Je m'arrache les cheveux, je viens d'avoir l'idée de faire valider mon fichier PHP sur http://validator.progysm.com/ et là voilà l'erreur que ça me met

</script>
^
Erreur à la colonne 10: fin d'étiquette pour l'élément "SCRIPT" lequel n'est pas ouvert
(Une balise de fin a été trouvée sans balise de début.)

Alors là c'est mystère et bubble gum... J'ai vérifié les ouvertures/fermetures {} ()
et la balise script est bien ouverte en haut 


<!DOCTYPE html> 
<html>
  <head>
  <title>Sur ma table de chevet</title>
  <link rel="stylesheet" href="surmatabledechevet.css" />
  <script type="text/javascript">
Bon, j'ai trouvé !
<object id="quisommesnoussvg" data="quisommesnous.svg" type="image/svg+xml" />
il n'aime pas
<object id="quisommesnoussvg" data="quisommesnous.svg" type="image/svg+xml" ></object> ça marche, merci pour votre aide.
Sujet clos
Aller à