11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour
je suis en train de passer un site en HTML5 CSS3.
J'ai une page avec des radios boutons. Au début pas de problème, puis je clique sur un radio bouton et la présentation ne tient plus compte du flexbox.

html5 dans du php
echo '<div class="boitheaderima" onclick="selectRowEffect(this, ' . $radio_buttons . ')">'

La fonction javascript
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
document.checkout_address.shipping[buttonSelect].checked=true;
}

le code CSS3 m
.boitheaderima {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content:space-between;
padding:15px;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
box-align: center;
align-items:center;
}

A part virer la fonction et repasser réellement sur ma page html5, existe-il une autre solution? Une astuce CSS3?
Merci
Modifié par jean202 (13 Feb 2015 - 15:12)
A mon avis si tu perd le flexbox lorsque tu cliques sur le bouton, c'est que la fonction qui s'exécute au clic supprime écrase la classe CSS qui set la propriété flexbox. Regarde bien tu vas trouver.
Ta remarque m' a été utile parce qu'elle me dit que cela devrait fonctionner.
En fait, j'avais rajouté 2 classes dans le Html5 dont celle avec le flexbox. Il suffisait de rajouter ces 2 classes au bon endroit dans le javascript.
Merci