Copie la moitié d'un enfant HTML tableau nœuds

Question

J'ai un élément HTML (disons un div ision) qui contient un titres ensemble (h2) et paragraphes (p) avec d'autres éléments à l'intérieur (quelques liens par exemple, a).

Mon but est de couper mon élément HTML en 2 éléments de même taille.

: paragraphes Contraint, les titres et le bloc ne doit pas être coupé

Mon idée asbout cela devait parcourir l'intérieur de la liste des nœuds enfants et copie childNodes de chaque paragraphe.

Chaque fois que je copie un paragraphe, je calcule la taille afin de savoir si j'ai atteint la demi-taille de la division.

Voici un code pour l'expliquer:

var elm = document.getElementById('article_colonnes'); // I want to cut this into 2 parts 
var paragraphesNumber = paragraphes.length; 
var halfSize = elm.innerHTML.length/2 ; 
var col1 = document.getElementById('col1'); 
var col2 = document.getElementById('col2'); 
var i=0; 
do { 
    var node = createNodeFromParagraphe(paragraphes[i]); 
    if(node) { 
    col1.appendChild(node); 
    // update the size of the 1st column by updating inner HTML 
    col1String = col1String + paragraphes[i].innerHTML; 
    } 
    i++; 
    // compute the size of the 1st column 
    col1Size = col1String.length; 
} 
while(col1Size < halfSize || i < paragraphesNumber) ; 

Et je fais la même chose pour la 2ème colonne.

Merci pour votre aide.

Answer 1

Si vous essayez de créer une disposition automatique à deux colonnes; jetez un oeil à multicolumnlists

Answer 2

Pour obtenir une disposition à deux colonnes, vous avez besoin de la hauteur des paragraphes (pas les caractères). Le problème ici: La seule façon d'obtenir la hauteur est d'attendre que le navigateur affiche la page sauf si vous spécifiez la largeur de chaque élément. Sinon, l'utilisateur verrait un vilain scintillement.

Je suggère donc d'essayer ceci:

1. Utilisez une disposition de plusieurs colonnes dont la plupart de support du navigateur. Si le navigateur n'est pas IE < = 7, vous avez terminé.

2. Pour IE 7 et inférieur, définissez une largeur fixe pour tous les éléments. Attendez que le navigateur affiche la page (cela devrait suffire pour exécuter ce code dans body.onload ou à partir d'une balise de script à la fin de la page). Mettez tous les éléments dans un div avec l'ID "col1".

3. Utilisez JavaScript pour trouver l'élément à la moitié de la hauteur du div « col1 ». (see here)

4. Si cet élément est un cap, sauter un élément. Déplacez l'élément suivant (et tout le reste) dans la div "col2".

Cela devrait vous donner un col1 plus long et un col2 plus court. Si le déplacement ne fonctionne pas, insérez un caractère invisible après avoir identifié le point de partage, récupérez col1.innerHtml, scindez-le au niveau du caractère fractionné et utilisez les deux chaînes résultantes comme innerHtml pour col1 et col2.

Si cela scintille beaucoup, essayez de masquer col1 et col2 pendant que votre script s'exécute (display = 'None').