Faire javascript-snippet affecter 3 divs au lieu de 1

Question

J'ai ce petit morceau très utile de javascript qui centre mig div. Par je voudrais le faire appliquer à 3 divs sur le même site, sans répéter le même morceau de code 3 fois.

Des idées sur la façon de le faire? Mettre tous les 3 divs en 1 div qui s'occupe de lui, n'est pas et option.

<script type="text/javascript"> 
    <!-- 
    function getWindowHeight() { 
     var windowHeight = 0; 
     if (typeof(window.innerHeight) == 'number') { 
      windowHeight = window.innerHeight; 
     } 
     else { 
      if (document.documentElement && document.documentElement.clientHeight) { 
       windowHeight = document.documentElement.clientHeight; 
      } 
      else { 
       if (document.body && document.body.clientHeight) { 
        windowHeight = document.body.clientHeight; 
       } 
      } 
     } 
     return windowHeight; 
    } 
    function setContent() { 
     if (document.getElementById) { 
      var windowHeight = getWindowHeight(); 
      if (windowHeight > 0) { 


      var contentElement = document.getElementById('outer'); 
       var contentHeight = contentElement.offsetHeight; 

       if (windowHeight < 570) { 
        contentElement.style.position = 'relative'; 
        contentElement.style.top = '30px'; 
       } 
       else if (windowHeight - contentHeight > 0) { 
        contentElement.style.position = 'relative'; 
        contentElement.style.top = ((windowHeight/2) - (contentHeight/2)) + 'px'; 
       } 





       else { 
        contentElement.style.position = 'static'; 
       } 

      } 
     } 
    } 
    window.onload = function() { 
     setContent(); 
    } 
    window.onresize = function() { 
     setContent(); 
    } 
    //--> 
    </script> 

Cordialement Troels

Answer 1

Vous n'avez pas besoin de vérifier si document.getElementById existe. Il a été soutenu depuis l'Empire romain. Passez l'id ou l'élément réel qui doit être centré sur votre fonction. Cela supprime la dépendance sur un élément fixe (#outer) dans votre cas et le rend plus flexible. Essayez aussi de nommer vos fonctions pour indiquer ce qu'elles font réellement. setContent est un nom très générique et n'indique pas l'aspect de centrage nulle part.

function centerElementWithId(id) { 
    .. 
    var contentElement = document.getElementById(id); 
    .. 
} 

appeler Ensuite, trois fois,

centerElementWithId('outer') 
centerElementWithId('secondDiv') 
centerElementWithId('thirdDiv');