Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juin 26, 2017 14:28

Salut à tous,

J'ai les codes javascript ci-dessous qui sont tous les deux dans un même fichier javascript.

Le premier code javascript ci-dessous sert à afficher une image dans mon menu. Cette image change lorsqu'on sélectionne un autre produit dans une liste déroulante qui est sous cette image :

Code: Tout sélectionner
function update_type_bijou() {
var e = document.getElementById("caption_bijou");
var id = e.options[e.selectedIndex].id;
document.getElementById('image_bijou').src = ../images/catalogue/' + id;
}
window.onload = update_type_bijou;


Le second code javascript met en forme des input du type checkbox qui sont dans mon menu :

Code: Tout sélectionner
var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {
    var body = gebtn(d,'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
   
    if (!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            l.onclick = check_it;
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.click();
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.click();
    };
};
function setupLabel() {
        if ($('.label_check input').length) {
            $('.label_check').each(function(){
                $(this).removeClass('c_on');
            });
            $('.label_check input:checked').each(function(){
                $(this).parent('label').addClass('c_on');
            });               
        };
        if ($('.label_radio input').length) {
            $('.label_radio').each(function(){
                $(this).removeClass('r_on');
            });
            $('.label_radio input:checked').each(function(){
                $(this).parent('label').addClass('r_on');
            });
        };
};


Lorsque je charge ma page, l'image au-dessus de ma liste déroulante ne s'affiche pas, si je sélectionne un autre produit depuis cette liste déroulante l'image s'affiche, c'est donc un problème onload.

J'ai un window.onload = update_type_bijou; pour l'une de mes fonctions javascript et un autre onload = function(), comment résoudre ce conflit javascript ?

Merci pour votre aide et vos réponses.
Haut
6 Réponses
Messages: 8555

Enregistré le: 14 Mai 2003

Message le Lun Juin 26, 2017 15:07

T'en fais 2 fonctions.
puis:
Code: Tout sélectionner
window.onload = function () {
    
update_type_bijou();
    
fonction_2();
}; 


NB: t'as une erreur de syntaxe là: document.getElementById('image_bijou').src = ../images/catalogue/' + id;
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Lun Juin 26, 2017 16:30

spout a écrit:T'en fais 2 fonctions.
puis:
Code: Tout sélectionner
window.onload = function () {
    update_type_bijou();
    fonction_2();
}; 


Encore un grand merci Spout ça marche nickel ta solution :)

spout a écrit:NB: t'as une erreur de syntaxe là: document.getElementById('image_bijou').src = ../images/catalogue/' + id;

Oui exact, j'ai enlevé mon url avant le "../images" pour le poster ici et j'ai supprimé par erreur le premier ' dans 'http://www.mon-site.com/images/catalogue/'
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Mer Juin 28, 2017 16:23

Voici un autre problème, j'ai une série d'icones sur lesquelles on peut cliquer pour les sélectionner, ce sont des input checkbox.

Ca marche très bien sur Firefox et Chrome mais pas sur Internet Explorer :(

Voici mon code html :
Code: Tout sélectionner
     <div class="sous_menu_image">
         <input type="checkbox" id="cb1"><label for="cb1"><img src="../images/formes-taille-icons/NB/rond.jpg" title="Brillant Rond"></label>
         <input type="checkbox" id="cb2"><label for="cb2"><img src../images/formes-taille-icons/NB/princesse.jpg" title="Princesse"></label>
         <input type="checkbox" id="cb3"><label for="cb3"><img src="../images/formes-taille-icons/NB/ovale.jpg" title="Ovale"></label>
         <input type="checkbox" id="cb4"><label for="cb4"><img src="../images/formes-taille-icons/NB/coeur.jpg" title="Coeur"></label>
     </div>


Mon CSS :
Code: Tout sélectionner
.sous_menu_image {
  margin:0;
  margin-left:5px;
  padding:0;
}
.sous_menu_image input[type="checkbox"][id^="cb"]{display: none;}
.sous_menu_image label {
  display:inline-block;
  position:relative;
  cursor:pointer;
  margin:0;
  padding:0;
}
.sous_menu_image label img {
  height:25px;
  width:25px;
  transition-duration:0.4s;
  padding:1px;
}
.sous_menu_image :checked + label img {
  transform:scale(0.85);
  box-shadow:2px 2px 2px 0px #656565;
  border:1px solid grey;
}


Voyez-vous pourquoi ça bug avec Internet Explorer ?
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Ven Juin 30, 2017 15:34

J'ai le code ci-dessous qui sélectionne des icones (input checkbox) lorsqu'on clique sur l'une de ces icones.

Code: Tout sélectionner
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icons checkbox</title>
<style>
.sous_menu_icons ul {
  list-style-type: none;
}
.sous_menu_icons li {
  display: inline-block;
}
.sous_menu_icons input[type="checkbox"][id^="cb"] {
  display: none;
}
.sous_menu_icons label {
  border: 1px solid #fff;
  padding: 2px;
  display: block;
  position: relative;
  margin:0;
  cursor: pointer;
}
.sous_menu_icons label img {
  height: 25px;
  width: 25px;
  transition-duration: 0.4s;
  transform-origin: 50% 50%;
}
.sous_menu_icons :checked + label {
  border-color: #ddd;
}
.sous_menu_icons :checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 2px #333;
  z-index: -1;
}
</style>
</head>
<body>
<form name="formulaire" method="post" action="mon_fichier.php">
<div class="sous_menu_icons">
<ul>
  <li><input type="checkbox" id="cb1"><label for="cb1"><img src="http://lorempixel.com/100/100"></label></li>
  <li><input type="checkbox" id="cb2"><label for="cb2"><img src="http://lorempixel.com/101/101"></label></li>
  <li><input type="checkbox" id="cb3"><label for="cb3"><img src="http://lorempixel.com/102/102"></label></li>
  <li><input type="checkbox" id="cb4"><label for="cb4"><img src="http://lorempixel.com/103/103"></label></li>
</ul>
</div>
<input type="submit" name="ok" value="OK">
</form>
</body>
</html>


Avec Internet Explorer il y a un problème : sans la balise <form> ça marche nickel mais ça ne marche pas avec la balise <form> :(

Que faudrait-il modifier pour que cela marche avec Internet Explorer ?
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Mer Juil 05, 2017 18:02

Tout le monde est à la plage :D

Il n'y a personne qui pourrait m'aider à résoudre ce problème avec Internet Explorer ?
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Jeu Juil 13, 2017 17:17

Je rentre de la plage et je me suis arrêté par WRI :D

J'utilise le widget jquery ui accordéon https://jqueryui.com/accordion/#collapsible pour un menu.

Dans ce menu, j'ai un <select> et des input radio.

Mon code php est le suivant :
Code: Tout sélectionner
<select name="caption_produit" id="caption_produit" class="listederoulante">
        <option value="produit_1" id="produit_1" selected>produit_1</option>
        <option value="produit_2" id="produit_2">produit_2</option>
        <option value="produit_3" id="produit_3">produit_3</option>
</select>

Lorsque je charge ma page et que je regarde le code généré je constate que le code de l'option du produit_1 de mon select a été modifié comme cela :
Code: Tout sélectionner
<select name="caption_produit" id="caption_produit" class="listederoulante">
        <option value="produit_1" id="produit_1" selected="">produit_1</option>
        <option value="produit_2" id="produit_2">produit_2</option>
        <option value="produit_3" id="produit_3">produit_3</option>
</select>


le selected de mon produit_1 s'est transformé en selected="".

On est bien d'accord qu'une option qui a été sélectionné dans un select doit s'écrire par un selected ?

Il se passe la même chose pour mes input radio, le code html généré est checked="" alors qu'il devrait être checked :(

Comment est-ce possible ? Et comment remédier à cela ?
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.