Problème de conflit javascript

[poupilou]

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 :

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 :

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.

 

[spout]

T'en fais 2 fonctions.
puis:

<span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">onload&nbsp;</span><span class="syntaxkeyword">=&nbsp;function&nbsp;()&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">update_type_bijou</span><span class="syntaxkeyword">();<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">fonction_2</span><span class="syntaxkeyword">();<br />};&nbsp;</span><span class="syntaxdefault"></span>

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

 

[poupilou]

T'en fais 2 fonctions.
puis:

<span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">onload </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> function </span><span class="syntaxkeyword">()</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    update_type_bijou</span><span class="syntaxkeyword">();<br /></span><span class="syntaxdefault">    fonction_2</span><span class="syntaxkeyword">();<br />};&nbsp;</span><span class="syntaxdefault"></span>

Encore un grand merci Spout ça marche nickel ta solution

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/'

 

[poupilou]

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 :

     <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 :

.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 ?

 

[poupilou]

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

<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 ?

 

[poupilou]

Tout le monde est à la plage

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

 

[poupilou]

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

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 :

<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 :

<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 ?