Modifier la largeur des boutons, en Javascript ...

[Arcy]

Bonjour à tous,

Je vais parler aujourd'hui d'un langage passionnant en terme de débogage : le javascript !

Je dispose actuellement de ce code :

<script language="javascript">
    window.onresize = LargeurPagination;
        
    function LargeurPagination()
    {
        var nbBoutons = <?PHP echo $nbBoutons + 3; ?>;
        var largeurFenetre = document.body.clientWidth;
        
        var largeur = largeurFenetre / nbBoutons;
        
        document.getElementById("pagination").style.width = largeur+"px";
    }
</script>

Le but est qu'une ligne de boutons fasse toujours la largeur de la fenêtre.

Mon bouton est de la forme :

<input id="Pagination" style="width : 30px" value="Bla bla bla"/>

Aucun problème là-dessus, le bouton est bien redimensionné ... mais uniquement le premier contenant "Pagination" comme ID, les autres ne sont pas changés.

Quelqu'un a une idée ?

Merci

[snoopy1492]

En fait normalement l'id doit être différente pour chaque bouton. On doit pas avoir plusieurs fois le même id, c'est pour ca que getElementById ne retourne qu'un seul élément, le premier trouvé.

Il faudrait soit utiliser une classe, soit un name sur les bouton. getElementByName te retourne une array avec tous les éléments si je ne m'abuse (ca fait longtemps que j'ai âs touché Javascript) idem je crois pour getElementByClassName.

[Arcy]

Début de réponse ici : http://devdocs.io/dom/document.getelementsbyname

Merci pour la piste ;-)

[Arcy]

Bon, je pense avoir la solution en me basant sur un tableau à la bonne taille situé en dessous.

Par contre, je parviens pas à récupérer sa largeur ... ce qui est essentiel pour moi.

PS : utiliser la largeur du body (document.body.clientWidth) n'est pas possible pour moi, mon kit CSS génère des décalages.

<table class="tableInventaire" id="tableCalculPagination">
            <thead>
            ...
</table>

<script language="javascript">
    window.onresize = LargeurPagination;
        
    function LargeurPagination()
    {
        // + 3 car il y a 3 boutons supplémentaires : le premier, le dernier et l'actif.
        var nbBoutons = <?PHP echo $nbBoutons + 3; ?>;
        var largeurFenetre = 0;
    
        largeurFenetre = document.getElementById("tableCalculPagination").clientWidth;
        
        var largeur = (largeurFenetre / nbBoutons) - 1;
        
        for (var i = 0; i <= nbBoutons ; i++)
        {
            var nomBouton = document.getElementsByName("btnPagination");

            document.getElementById(nomBouton[i].id).style.padding = "4px " + 0 + "px";
            document.getElementById(nomBouton[i].id).style.width = largeur + "px";
        }
</script>

EDIT : bon bah ... pour une raison de j'ignore, ce que j'ai écris précédemment refonctionne.

[snoopy1492]

Bon bah tant mieux.

Mais juste comme ca pourquoi es-tu obligé de passer par du javascript pour faire 3 boutons de la même taille alignés et qui se redimensionnent?

Car pour moi un truc comme ca devrait marcher :

<div style="width:100%;white-space: nowrap;">
<button style="width:33%;float:center;">blabla</button>
<button style="width:33%;float:center;">blabla2</button>
<button style="width:33%;float:center;">blabla3</button>
</div>

Mais il me manque peut-être quelque chose :)

[Arcy]

Il y en a pas un mais 17 pour faire ça à la sauce "Google" (avec les G ... oooooooooo ... gle) quand on fait une recherche, en récupérant le nombre d'entrée divisé par le nombre d'élément à afficher. Sans compter que je peux faire changer le nombre de boutons à afficher ...

C'est donc de la forme : [1] ... [boutons 40 à 47] [48] [boutons 49 à 56] ... [218]

Le javascript est juste là pour m'assurer que la ligne de boutons se redimensionne selon la largeur de la page.

[snoopy1492]

Aaaah ok, je comprends mieux (en même temps c'était marqué dans ton code que tu récupérai le nombre de boutons )

[Arcy]

[snoopy1492]