IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Boucle for sur les éléments saute 1 item


Sujet :

JavaScript

  1. #1
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut Boucle for sur les éléments saute 1 item
    Bonjour a tous
    un truc qui me rend dingue et j'ai beau controler lettre par lettre le code je ne vois pas l'erreur surtout qu'elle est insensée
    j'ai une boucle qui boucle sur tout les element de la classe "slide" et je ne sais pourquoi elle saute celui du milieu
    j'ai verifier le code html il est bon
    le code de la boucle est tellement simple que je ne vois pas ou peut etre cette erreur mais elle est bien dans cette boucle
    j'ai mis des console.log pour verifier


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    <style>
    #conteneur >*{
            user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
    }
    .fondd1 {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
     margin-top: 5px;
    }
     
    .fondd2 {
     border: 1px solid rgb(250,250,250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
            margin-top: 5px;
    }
    .fondd1 > div {
     background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
    }
     
    .fondd2 > div {
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
     
     
     
     .fondg1 {
     border: 1px solid rgb(245, 245, 245);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255,255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
      margin-top: 5px;
    }
    .fondg2 {
     border: 1px solid rgb(250,250,250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
            margin-top: 5px;
    }
    .fondg1 > div {
     box-shadow: 0 0 1em #58D3F7 inset;
            background-color:rgb(245, 245, 245);
          
    }
    .fondg2 > div {
     box-shadow: 0 0 1em #6E6E6E inset;
            background-color:rgb(245, 245, 245);
    }
     
    .slide{
         margin-top:5px;
         border:1px solid rgb(240,240,240);
    }
     
    .slide > div{
           border:1px solid rgb(230,230,230);
    }
     
    </style>
    <script  type= "text/javascript">
    var LrG;
    var Crs;
    var oX;
    var newX;
    var Mx;
    var Dv;
    var dragg;
    function Start(event) {
     console.log(event.target.id);
     Crs = event.target;
     dragg = Crs.parentElement;
     dragg.className=dragg.getAttribute("cl2");
              LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
     Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
     oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     Mx = oX - Crs.offsetLeft;
     dragg.addEventListener("mousemove", dragging, false);
     dragg.addEventListener("mouseup", relache, false);
     dragg.addEventListener("mouseleave", relache, false);
    }
    function dragging(event) {
     newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     console.log("deplacement " + newX);
     var posX = newX - Mx;
     if (posX < 0) {
      posX = 0;
     }
     if (posX > LrG - (Crs.offsetWidth / 2)) {
      posX = LrG - (Crs.offsetWidth / 2);
     }
     Crs.style.position = "absolute";
     Crs.style.left = posX + "px";
     document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
    }
    function relache(event) {
     console.log(Crs.id);
     dragg.removeEventListener("mousemove", dragging);
     dragg.removeEventListener("mouseup", relache);
     dragg.removeEventListener("mouseleave", relache);
            dragg.className=dragg.getAttribute("cl1");
           }
    function ajoute() {
     var messlides = document.getElementsByClassName("slide");
            console.log("attribution de l'evenement down"); 
              for (var i = 0; i < messlides.length; i++) {
         messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
                console.log("slider : " + messlides[i].id);
                       console.log ("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                       messlides[i].className=messlides[i].getAttribute("cl1");
              }
    }
     
    </script>
     
    </head>
    <body>
    <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
          des slides pas comme les autres 
          <p id ="res">position</p>
          <br/><br/>
     
     
          <div id="fond5"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
             <div id="Crs5" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
          </div>
          <div id="fond6"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
             <div id="Crs6" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
          </div>
     
          <div id="fond7"  class="slide"  cl1="fondg1" cl2="fondg2" style="position:relative;width:300px;height:26px;overflow:none;" >
             <div id="Crs7" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
          </div>
    </div>
     <script> ajoute();</script>  
    </body>
    </html>

    dans la capture ci dessous on vois bien que le fond6 avec son curseur crs6 n'est pas listé
    Nom : Capture.JPG
Affichages : 440
Taille : 70,6 Ko
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  2. #2
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    cela tiens à la méthode utilisée, à savoir getElementsByClassName qui retourne une NodeList dynamique ce qui veut dire que toute modification effectuée sur un de ses éléments est prise en compte et la liste est mise à jour.

    Comme plus loin dans ton code tu modifies la className des éléments celui en cours de traitement est retiré de la NodeList et de ce fait l'élément en position 2 passe en position 1. Comme le compteur i est incrémenté cet élément est ignoré.

    Remplace la méthode getElementsByClassName par querySelectorAll(".slide") qui elle renvoie un NodeList statique.

    [EDIT]
    C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...
    tout à fait, pas suivi cette discussion de Patrick

    [ReEDIT]
    Remplacement du terme listNode en NodeList pour respecter la littérature.

  4. #4
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Quand tu fais var messlides = document.getElementsByClassName("slide"); tu obtiens une nodeLisit qui peut changer (qui est actualisée en fonction des changements) et notamment sa taille peut changer, elle vaut 3 au début ensuite tu modifies les choses avec messlides[i].className = messlides[i].getAttribute("cl1"); après cette instruction la taille de messlides passe à 2 puisque tu as modifié la class (l'élement n'a du coup plus la class "slider" et alors il ne reste plus que deux élèments avec la class "slider" ce qui fausse le reste de ton code...


    EDIT : Ah je viens de voir la réponse de NoSmoKing qui explique aussi les choses...

    Sinon je ne comprends pas pourquoi tu n'utilises pas les méthodes équivalentes à celle de classList proposés par psychadelic au lieu d'utiliser ces attributs...

    Citation Envoyé par NoSmoking Voir le message
    tout à fait, pas suivi cette discussion de Patrick :oops:
    Ça lui fait une explication supplémentaire...

  5. #5
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Sinon tu pouvais aussi utiliser la class "cur" :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function ajoute() {
                var messlides = document.getElementsByClassName("cur");
                console.log("attribution de l'evenement down");
                for (var i = 0; i < messlides.length; i++) {
                    messlides[i].addEventListener("mousedown", Start, false);
                    console.log("slider : " + messlides[i].parentElement.id);
                    console.log("curseur : " + messlides[i].id);
                    messlides[i].parentElement.className = messlides[i].parentElement.getAttribute("cl1");
                }
            }

  6. #6
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Désolé, mais je ne peux pas utiliser ton systeme avec des faux attributs CL1 et CL2

    Je trouve aussi que c'est une mauvaise idée, parce que je fais pas mal de TMA, et on préfère tous que le code suive des "standards", car les multiples astuces rendent fou ceux qui font de la maintenance.

    donc, voici - à mon sens - comment tu devrai coder tes slider:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width">
    	<title>JS Bin</title>
    	<style>
                    #conteneur * {                  /*---- petite erreur, ici ne pas mettre de sélecteur direct,  ( #conteneur>* ) --------------*/
                            user-select: none;
                            -moz-user-select: none;
                            -webkit-user-select: none;
                    }
                    .slide {
                            position:relative;
                            overflow:hidden;          /* la valeur "none" n'existe pas cet attribut */
                            margin-top: 5px;
                            border: 1px solid rgb(240, 240, 240);
                    }
     
                    .slide>div {
                            position:absolute;
                            border: 1px solid rgb(230, 230, 230);
                    }
     
                    #fond5, #fond6 {
                            border: 1px solid rgb(240, 240, 240);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
                            margin-top: 5px;
                    }
                    #fond5>div , #fond6>div {
                            background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
                    }
     
                    #fond5.ModActif, #fond6.ModActif {
                            border: 1px solid rgb(250, 250, 250);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                            box-shadow: 0 0 1em #BDBDBD inset;
                            margin-top: 5px;
                    }
                    #fond5.ModActif>div, #fond6.ModActif>div {
                            background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                    }
     
     
                    #fond7 {
                            border: 1px solid rgb(245, 245, 245);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                            margin-top: 5px;
                    }
     
                    #fond7>div {
                            box-shadow: 0 0 1em #58D3F7 inset;
                            background-color: rgb(245, 245, 245);
     
                    }
     
                    #fond7.ModActif {
                            border: 1px solid rgb(250, 250, 250);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                            box-shadow: 0 0 1em #BDBDBD inset;
                            margin-top: 5px;
                    }
     
                    #fond7.ModActif>div {
                            box-shadow: 0 0 1em #6E6E6E inset;
                            background-color: rgb(245, 245, 245);
                    }
     
     
            </style>
    	<script type="text/javascript">
                    var LrG;
                    var Crs;
                    var oX;
                    var newX;
                    var Mx;
                    var Dv;
                    var dragg;
     
                    function Start(event) {
                            console.log(event.target.id);
                            Crs = event.target;
                            dragg = Crs.parentElement;
                            // dragg.className = dragg.getAttribute("cl2");
                            addClass(dragg, "ModActif");
                            LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
                            Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
                            oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                            Mx = oX - Crs.offsetLeft;
                            dragg.addEventListener("mousemove", dragging, false);
                            dragg.addEventListener("mouseup", relache, false);
                            dragg.addEventListener("mouseleave", relache, false);
                    }
     
                    function dragging(event) {
                            newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                            console.log("deplacement " + newX);
                            var posX = newX - Mx;
                            if (posX < 0) {
                                    posX = 0;
                            }
                            if (posX > LrG - (Crs.offsetWidth / 2)) {
                                    posX = LrG - (Crs.offsetWidth / 2);
                            }
                            Crs.style.position = "absolute";
                            Crs.style.left = posX + "px";
                            document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
                    }
     
                    function relache(event) {
                            console.log(Crs.id);
                            dragg.removeEventListener("mousemove", dragging);
                            dragg.removeEventListener("mouseup", relache);
                            dragg.removeEventListener("mouseleave", relache);
                            //dragg.className = dragg.getAttribute("cl1");
                            removeClass(dragg, "ModActif");
                    }
     
                    function ajoute() {
                            var messlides = document.getElementsByClassName("slide");
                            console.log("attribution de l'evenement down");
                            for (var i = 0; i < messlides.length; i++) {
                                    messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
                                    console.log("slider : " + messlides[i].id);
                                    console.log("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                            }
                    }
     
     
                    /* fonctions de substitution sur l'ajout / suppression de Classe pour les anciennes versin de JS */
                            function hasClass(el, className) {
                                    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
                            }
                            function addClass(el, className) {
                                    if (!hasClass(el, className))
                                            el.className += " " + className;
                            }
                            function removeClass(el, className) {
                                    if (hasClass(el, className)) {
                                            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
                                            el.className = el.className.replace(reg, ' ');
                                    }
                            }
                    /* */
     
            </script>
     
    </head>
     
    <body>
    	<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
    		des slides pas comme les autres
    		<p id="res">position</p>
    		<br/>
    		<br/>
     
     
    		<div id="fond5" class="slide" style="width:300px;height:26px;">
    			<div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
    		</div>
    		<div id="fond6" class="slide" style="width:300px;height:26px;">
    			<div id="Crs6" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
    		</div>
     
    		<div id="fond7" class="slide" style="width:300px;height:26px;">
    			<div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
    		</div>
    	</div>
    	<script>
                    ajoute();
            </script>
    </body>
    </html>

  7. #7
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Je remplacerais aussi messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false); par messlides[i].firstChild.addEventListener("mousedown", Start, false);... Même si cela ne joue pas beaucoup...

  8. #8
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re preuve avec capture
    re
    bonjour beguinner
    avec firstChild plus d'evenement du tout avec les 3 explorateurs FF,IE CHrome
    parcontre Children[0] oui

    bref une enigme de plus je suis pas pret de l'intégrer dans mon app excel ce truc
    regarde la capture c'est moi qui deraille ou bien ??
    si encore c'etait le dernier ou le premier je soupconnerais l'indexation mais la il n'y a aucunne raison surtout qu'avant le boucle dans la console on vois bien qu'il y en a 3
    imcomprehensible j'ai meme copié le code html du premier puisqu'il fonctionne en changeant le id et le cl1 et cl2
    absolument rien n'y fait
    je deviens fou avec ce language
    Nom : Capture.JPG
Affichages : 379
Taille : 204,9 Ko

    edit:
    en plus je viens de remarquer que des que j'ajoute la balise meta compatible ie=edge
    le css ci dessous ne fait plus son effet
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS Bin</title>
    <style>
    #conteneur > *{
           -moz-user-select: none;
     -webkit-user-select: none;
           user-select: none;
    }
    au cas ou vous vous posez la question avec queryselectroall(".slide") je n'ai plus rien et puis de toute facon il deraille sur le support vba donc
    y aurait t il un moyen de boucler du dernier au premier en vba on fait comme ca pour ne pas perdre l'indexation apres changement de classe


    un truc de fou j'ai l'impression de m'emmerder pour rien y aura toujours quelques chose qui tourne pas rond si dans IE 10 et 11 ca ne peut pas fonctionner c'est pas la peine ca me sert a rien les autres explorateurs ne les utilisant pas c'a ne m'est d'aucun interet
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  9. #9
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Citation Envoyé par patricktoulon Voir le message
    re
    bonjour beguinner
    avec firstChild plus d'evenement du tout avec les 3 explorateurs FF,IE CHrome
    parcontre Children[0] oui
    Oui désolé c'est plutôt firstElementChild ou Children[0]...

    Sinon pour le reste on t'a donné plusieurs explications et solutions, j'avais expliqué ceci :

    C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...[/B]

    Quand tu fais var messlides = document.getElementsByClassName("slide"); tu obtiens une nodeLisit qui peut changer (qui est actualisée en fonction des changements) et notamment sa taille peut changer, elle vaut 3 au début ensuite tu modifies les choses avec messlides[i].className = messlides[i].getAttribute("cl1"); après cette instruction la taille de messlides passe à 2 puisque tu as modifié la class (l'élement n'a du coup plus la class "slider" et alors il ne reste plus que deux élèments avec la class "slider" ce qui fausse le reste de ton code...
    Il y a aussi l’explication de NoSmoKing et la réponse de psychadelic...


    ---> Voilà ta fonction retravaillée :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function ajoute() {
                var messlides = document.querySelectorAll(".slide");
                console.log("attribution de l'evenement down");
                for (var i = 0; i < messlides.length; i++) {
                    messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                    console.log("slider : " + messlides[i].id);
                    console.log("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                    messlides[i].className = messlides[i].getAttribute("cl1");
                }
            }
    Mais je te conseil le code de psychadelic avec l’alternative à classList que NoSmoKing avait utilisé...

  10. #10
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re
    re
    merci beguinner
    bon ca a l'air de fonctionner sur le 4 support et grande surprise en meta edge et non 10 ou 11 queryselector match dans le support vba
    ca va me changer la vie ca
    je vais verifier si tout le reste d'avant fonctionne en mode compatible edge

    par contre j'ai toujours pas determiné pour quoi le unselectable dans une classe global css ne fonctionne pas je suis obligé de laisser le unselectable="on" dans le style inline pour IE
    si j'enleve la meta compatible je peux les enlever mais alors le queryselector walouh walouh
    j'en ai la migraine avec ces histoires de compatibilité
    bref ca marche ca suffit

    je vais tester aussi classeList en mode edge pour voir en testant le reste aussi

    en gros quand je developpe IE 10 ca marche partout mais je n'ai pas les queryselector classList et compagnie et j'ai certaine partie css3 qui deraille

    en mode edge tout ce qui fonctionnait en mode 10 c'est un peu des ratés mais visiblement j'ai les fonctions recentes mais pas tout certaine sont fatales dans le support vba

    bref

    allons y pour le test classList
    je reviens plus tard
    merci a tous
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  11. #11
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re
    bon ben classList fonctionne aussi en mode edge sur les 4 supports



    oh puré que je le bin ce jsbin



    model sur jsbin

    le plus important pour moi etant celui ci
    Nom : demo2.gif
Affichages : 406
Taille : 193,2 Ko

    et le comble c'est que ca fonctionne en HTA aussi
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  12. #12
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    tu a gardé tes faux attributs [ cl1="fondg1" cl2="fondg2" ] alors mon exemple exlpique comment se passer de cette "astuce"....
    je suis déçu, mais alors déçu à un point que tu peux pas imaginer,
    je suis même pire que déçu, je suis aussi complètement médusé et désabusé et même entièrement désillusionné, je m'en remettrai pas, c'est impossible..

  13. #13
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re
    re
    Bonjour Psychadelic

    re d'accords sur ton exemple dans les classe css tu part du #ID.modactif/ou pas c'est bien ca ?

    médusé !!

    c'est pas plus mal tu a raison on sait ou aller chercher pour le debugage

    n'oubliez pas que j'ai pas les meme reflexes que vous encore

    dans tout les cas j'ai du boulot il faut tout que je réencode mes app hta et vba/web pour benificier de toutes ces fonctions recentes en mode edge et j'en ai quelques unes


    pour la fausse fonction classLIst plus besoins l'originale fonctionne en mode edge
    ca va pas trop le moral dans les chaussettes
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  14. #14
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re version selon ton principe de css par le id.classe(no/yes)
    re
    voila qui va te redonner le moral
    selon ta methode
    j'en ai profité pour reduire le style inline html a son minimum c'est a dire a n'avoir que les dimentions car en realité ces slider seront construits dynamiquement

    2 petites choses que je comprends pas c'est les deux classe css qui ne fonctionne je suis obligé de mettre la premiere a chaque fois dans les classe (actif/noactif) et la seconde dans le inline pour IE

    sinon ca fonctionne bien

    ces deux class la
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #conteneur > div {
     position: relative;
     overflow: none;
    }
    #conteneur >* {
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
    }



    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Menu slide border radius</title>
    <style>
    #conteneur >* {
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
    }
    #fond5.noactif {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
     margin-top: 5px;
     position: relative;
     overflow: none;
    }
    #fond5.actif {
     border: 1px solid rgb(250, 250, 250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
     margin-top: 5px;
     position: relative;
     overflow: none;
    }
    #fond5.noactif> div {
     background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
    }
    #fond5.actif > div {
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
    #fond6.noactif {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     margin-top: 5px;
     position: relative;
     overflow: none;
    }
    #fond6.actif {
     border: 1px solid rgb(250, 220, 0);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em rgb(255, 100, 0) inset;
     margin-top: 5px;
     position: relative;
     overflow: none;
    }
    #fond6.noactif > div {
     background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
    }
    #fond6.actif > div {
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
    #fond7.noactif {
     border: 1px solid rgb(245, 245, 245);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     margin-top: 5px;
     position: relative;
     overflow: none;
    }
    #fond7.actif {
     border: 1px solid rgb(250, 250, 250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
     margin-top: 5px;
     position: relative;
     overflow: none;
    }
    #fond7.noactif > div {
     box-shadow: 0 0 1em #58D3F7 inset;
     background-color: rgb(245, 245, 245);
    }
    #fond7.actif > div {
     box-shadow: 0 0 1em #6E6E6E inset;
     background-color: rgb(245, 245, 245);
    }
    .slide {
     margin-top: 5px;
     border: 1px solid rgb(240, 240, 240);
    }
    .slide > div {
     border: 1px solid rgb(230, 230, 230);
    }
    #conteneur > div {
     position: relative;
     overflow: none;
    }
    .cur {
     position: absolute;
    }
    </style>
    <script  type= "text/javascript">
    var LrG;
    var Crs;
    var oX;
    var newX;
    var Mx;
    var Dv;
    var dragg;
    function Start(event) {
     console.log(event.target.id);
     Crs = event.target;
     dragg = Crs.parentElement;
     dragg.classList.add ("actif");
            LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
     Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
     oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     Mx = oX - Crs.offsetLeft;
     dragg.addEventListener("mousemove", dragging, false);
     dragg.addEventListener("mouseup", relache, false);
     dragg.addEventListener("mouseleave", relache, false);
    }
    function dragging(event) {
     newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     console.log("deplacement " + newX);
     var posX = newX - Mx;
     if (posX < 0) {
      posX = 0;
     }
     if (posX > LrG - (Crs.offsetWidth / 2)) {
      posX = LrG - (Crs.offsetWidth / 2);
     }
     Crs.style.position = "absolute";
     Crs.style.left = posX + "px";
     document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
    }
    function relache(event) {
     dragg.removeEventListener("mousemove", dragging);
     dragg.removeEventListener("mouseup", relache);
     dragg.removeEventListener("mouseleave", relache);
            dragg.classList.remove ("actif");
           }
    function ajoute() {
                var messlides = document.querySelectorAll(".noactif");
                 for (var i = 0; i < messlides.length; i++) {
                    messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                 }
            }
     
    </script>
     
    </head>
    <body>
    <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
          des slides pas comme les autres 
          <p id ="res">position</p>
          <br/><br/>
     
     
          <div id="fond5"  class="noactif" style="width:300px;height:26px;" >
             <div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
          </div>
          <div id="fond6"  class="noactif"  style="width:300px;height:26px;" >
             <div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;" unselectable="on"></div>
          </div>
     
          <div id="fond7"  class="noactif" style="width:300px;height:26px;" >
             <div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
          </div>
    </div>
     <script> ajoute();</script>  
    </body>
    </html>
    ca va mieux la ?
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  15. #15
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    vi, j'aime beaucoup plus mieux

    et du coup, c'est bien tu commence à devenir un cake

    donc:
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #conteneur > div {
      position: relative;
      overflow: none;
    }

    alors primo l'instruction css => overflow: none; n'existe pas, la bonne syntaxe c'est overflow: hidden;

    voir : https://developer.mozilla.org/fr/docs/Web/CSS/overflow

    ensuite...

    utiliser #conteneur > div { n'est pas une mauvaise idée en soit, mais c'est casse gueule à l'usage et il faut mieux créer une classe plus précise pour tout ce qui doit utiliser les même instructions css

    donc dans ton cas je te propose cette écriture:
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .slide {
      position: relative;
      margin-top: 5px;
      overflow: hidden;
    }
    ( j'en ai prifité pour rajouter le margin-top: 5px; qui se repete lui aussi )

    ce qui du coté code HTML donne :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="fond6" class="slide noactif" style="width:300px;height:26px;">
    et oui on peut mettre autant de classes qu'on veut

    au passage puisque tes sliders on forcément un curseur en position absolute,
    au lieu d'écrire : .cur { tu peut mettre : .slide > div {
    mais perso je préfere écrire .slide > div.cur { ce qui permet de comprendre des années plus tard qu'il ne s'agit que des curseurs apartenant qu'a des slide et évite toute confusion si par la suite ce même code est utilisé dans une page comportant aussi des curseurs servant à autre chose.


    pour la seconde partie de ta question je ne saurai trop quoi te repondren parce que je n'ai pas d'IE sur ma machine Linux....

    Sinon une hypotese d'écriture :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #conteneur > * {
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
    }}
    c.a.d. de les placer dans cet ordre la, car IE rejettera les instructions css pour les navigateurs de la famille Mozzila, et celles du WebKit, donc autant lui donner en premier quelque chose qu'il doit savoir faire, avant qui ne se bloque sur les suivantes ???


    sinon je vois pas trop l'utilité ici du selecteur > parce qu'il signifie que seuls les enfants directs y sont soumis, et non leurs enfants, tel le curseur ici... ?

    La suite:

    donc, du coup le fait de mettre une classe slide en commun "pour tous" j'ai preéféré changer l'affectation du mousedown:
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    var messlides = document.querySelectorAll(".noactif");
    en
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    var messlides = document.querySelectorAll(".slide");
    et qui une autre utilité, car tes classes noactif sont inutiles, car jamais utilisées réellement

    donc cela donne :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #fond5 {
       /* ... */ 
     
    #fond5>div {
       /* ... */
    au lieu de
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     #fond5.noactif {
     /* ... */ 
     
    #fond5.noactif>div {
     /* ... */

    je juste fait ici pour le #fond5

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    <!DOCTYPE html>
    <html>
     
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>Menu slide border radius</title>
    	<style>
                    #conteneur>* {
                            user-select: none;
                            -moz-user-select: none;
                            -webkit-user-select: none;
                    }
     
                    .slide {
                            position: relative;
                            margin-top: 5px;
                            overflow: hidden;
                    }
     
                    /*  .cur {   */
                    /*  .slide > div  {   */
                    .slide > div.cur { 
                            position: absolute;
                    }
     
                    /* #fond5.noactif { */
                    #fond5 {
                            border: 1px solid rgb(240, 240, 240);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
                    }
                    /* #fond5.noactif>div { */
                    #fond5>div {
                            background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
                    }
     
                    #fond5.actif {
                            border: 1px solid rgb(250, 250, 250);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                            box-shadow: 0 0 1em #BDBDBD inset;
                    }
     
                    #fond5.actif>div {
                            background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                    }
     
                    #fond6.noactif {
                            border: 1px solid rgb(240, 240, 240);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                    }
     
                    #fond6.actif {
                            border: 1px solid rgb(250, 220, 0);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                            box-shadow: 0 0 1em rgb(255, 100, 0) inset;
                    }
     
                    #fond6.noactif>div {
                            background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
                    }
     
                    #fond6.actif>div {
                            background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                    }
     
                    #fond7.noactif {
                            border: 1px solid rgb(245, 245, 245);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                    }
     
                    #fond7.actif {
                            border: 1px solid rgb(250, 250, 250);
                            border-radius: 10px;
                            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                            box-shadow: 0 0 1em #BDBDBD inset;
                    }
     
                    #fond7.noactif>div {
                            box-shadow: 0 0 1em #58D3F7 inset;
                            background-color: rgb(245, 245, 245);
                    }
     
                    #fond7.actif>div {
                            box-shadow: 0 0 1em #6E6E6E inset;
                            background-color: rgb(245, 245, 245);
                    }
     
     
            </style>
    	<script type="text/javascript">
                    var LrG;
                    var Crs;
                    var oX;
                    var newX;
                    var Mx;
                    var Dv;
                    var dragg;
     
                    function Start(event) {
                            console.log(event.target.id);
                            Crs = event.target;
                            dragg = Crs.parentElement;
                            dragg.classList.add("actif");
     
                            LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
                            Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
                            oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                            Mx = oX - Crs.offsetLeft;
                            dragg.addEventListener("mousemove", dragging, false);
                            dragg.addEventListener("mouseup", relache, false);
                            dragg.addEventListener("mouseleave", relache, false);
                    }
     
                    function dragging(event) {
                            newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                            console.log("deplacement " + newX);
                            var posX = newX - Mx;
                            if (posX < 0) {
                                    posX = 0;
                            }
                            if (posX > LrG - (Crs.offsetWidth / 2)) {
                                    posX = LrG - (Crs.offsetWidth / 2);
                            }
                            Crs.style.position = "absolute";
                            Crs.style.left = posX + "px";
                            document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
                    }
     
                    function relache(event) {
                            dragg.removeEventListener("mousemove", dragging);
                            dragg.removeEventListener("mouseup", relache);
                            dragg.removeEventListener("mouseleave", relache);
                            dragg.classList.remove("actif");
                    }
     
                    function ajoute() {
                            // var messlides = document.querySelectorAll(".noactif");
                            var messlides = document.querySelectorAll(".slide");
                            for (var i = 0; i < messlides.length; i++) {
                                    messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                            }
                    }
            </script>
     
    </head>
     
    <body>
    	<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
    		des slides pas comme les autres
    		<p id="res">position</p>
    		<br/>
    		<br/>
     
    		<!-- div id="fond5" class="slide noactif" style="width:300px;height:26px;" -->
    		<div id="fond5" class="slide" style="width:300px;height:26px;">
    				<div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
    		</div>
    		<div id="fond6" class="slide noactif" style="width:300px;height:26px;">
    			<div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;" unselectable="on"></div>
    		</div>
     
    		<div id="fond7" class="slide noactif" style="width:300px;height:26px;">
    			<div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
    		</div>
    	</div>
    	<script>
                    ajoute();
            </script>
    </body>
     
    </html>

  16. #16
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re
    ok je garde donc "la classe slide et et noactive" des le depart

    pour le replace dans l'ordre pour les unselectable ca ne parche pas dans IE j'avais deja essayé au cas ou effectivement IE n'execute pas le reste du code apres echec

    bon ben je le laisse dans le inline n'ayant pas de reponse sur ce point

    hi son'bo mescurseur et transportable en plus cé'bo'la vie
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  17. #17
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re version aboutie enfin
    re
    voila la version aboutie
    j'ai trouver la raison du unselectable
    c'est pas user-select mais ms-user-select pour IE
    j'ai donc revu les classe css et utiliser slide pour etre precis

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS Bin</title>
    <style>
    .slide{
     position: relative;
     overflow: hidden;
            user-select: none;
            -moz-user-select: none;
     -webkit-user-select: none;
            -ms-user-select: none;
            margin-top: 5px;
     border: 1px solid rgb(240, 240, 240);
    }
    .slide > div {
     position: absolute;
            -ms-user-select: none;
            user-select: none;
            -moz-user-select: none;
     -webkit-user-select: none;
            border: 1px solid rgb(230, 230, 230);        
            
    }
    #fond5 {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
     margin-top: 5px;
     
    }
    #fond5.actif {
     border: 1px solid rgb(250, 250, 250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
     margin-top: 5px;
     
    }
    #fond5> div {
     background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
    }
    #fond5.actif > div {
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
    #fond6 {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     margin-top: 5px;
     
    }
    #fond6.actif {
     border: 1px solid rgb(250, 220, 0);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em rgb(255, 100, 0) inset;
     margin-top: 5px;
     
    }
    #fond6 > div {
     background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
    }
    #fond6.actif > div {
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
    #fond7 {
     border: 1px solid rgb(245, 245, 245);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     margin-top: 5px;
     
    }
    #fond7.actif {
     border: 1px solid rgb(250, 250, 250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
     margin-top: 5px;
     
    }
    #fond7 > div {
     box-shadow: 0 0 1em #58D3F7 inset;
     background-color: rgb(245, 245, 245);
    }
    #fond7.actif > div {
     box-shadow: 0 0 1em #6E6E6E inset;
     background-color: rgb(245, 245, 245);
    }
     
    </style>
    <script  type= "text/javascript">
    var LrG;
    var Crs;
    var oX;
    var newX;
    var Mx;
    var Dv;
    var dragg;
    function Start(event) {
     console.log(event.target.id);
     Crs = event.target;
     dragg = Crs.parentElement;
     dragg.classList.add ("actif");
            LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
     Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
     oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     Mx = oX - Crs.offsetLeft;
     dragg.addEventListener("mousemove", dragging, false);
     dragg.addEventListener("mouseup", relache, false);
     dragg.addEventListener("mouseleave", relache, false);
    }
    function dragging(event) {
     newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     console.log("deplacement " + newX);
     var posX = newX - Mx;
     if (posX < 0) {
      posX = 0;
     }
     if (posX > LrG - (Crs.offsetWidth / 2)) {
      posX = LrG - (Crs.offsetWidth / 2);
     }
     Crs.style.position = "absolute";
     Crs.style.left = posX + "px";
     document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
    }
    function relache(event) {
     dragg.removeEventListener("mousemove", dragging);
     dragg.removeEventListener("mouseup", relache);
     dragg.removeEventListener("mouseleave", relache);
            dragg.classList.remove ("actif");
           }
    function ajoute() {
                var messlides = document.querySelectorAll(".slide");
                 for (var i = 0; i < messlides.length; i++) {
                    messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                 }
            }
     
    </script>
     
    </head>
    <body>
    <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
          des slides pas comme les autres 
          <p id ="res">position</p>
          <br/><br/>
     
     
          <div id="fond5"  class="slide" style="width:300px;height:26px;" >
             <div id="Crs5" class="cur" style="top:0px;width:26px;height:26px;border-radius:8px;" ></div>
          </div>
          <div id="fond6"  class="slide"  style="width:300px;height:26px;" >
             <div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;"></div>
          </div>
     
          <div id="fond7"  class="slide" style="width:300px;height:26px;" >
             <div id="Crs7" class="cur" style="top:0px;width:26px;height:26px;border-radius:50%;"></div>
          </div>
    </div>
     <script> ajoute();</script>  
    </body>
    </html>
    on peu meme enlever les margin-top dans les classes "#fond....."

    ou Sur Jsbin
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  18. #18
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re pas si bien que ca les classes css par le id
    et quoi que en y réfléchissant un peu et surtout histoire d'augmenter ton taux d'adrénaline et donc ton etat dépressif

    ton idée d'utiliser les IDs n'est pas forcement une bonne solution

    imagine que j'ajoute un slider donc "fond8" et que je veux qu'il est le meme style que le "fond5" je fait quoi? j'ajoute encore une classe

    t'habite loin au moins ??? hein rassure moi

    en l'etat je regle le probleme comme suit regarde les classes #fond5...... maintenant c'est pas pratique tu en conviendra
    surtout si par exemple je decide d'utiliser ce module pour une dizaine de sliders identiques
    la notion de transportabilité en est reduite
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS Bin</title>
    <style>
    .slide{
     position: relative;
     overflow: hidden;
            user-select: none;
            -moz-user-select: none;
     -webkit-user-select: none;
            -ms-user-select: none;
            margin-top: 5px;
     border: 1px solid rgb(240, 240, 240);
    }
    .slide > div {
     position: absolute;
            -ms-user-select: none;
            user-select: none;
            -moz-user-select: none;
     -webkit-user-select: none;
            border: 1px solid rgb(230, 230, 230);        
            
    }
    #fond5,#fond8 {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
     margin-top: 5px;
     
    }
    #fond5.actif ,#fond8.actif{
     border: 1px solid rgb(250, 250, 250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
     margin-top: 5px;
     
    }
    #fond5 > div  ,#fond8 > div{
     background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
    }
    #fond5.actif > div,#fond8.actif > div{
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
    #fond6 {
     border: 1px solid rgb(240, 240, 240);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     margin-top: 5px;
     
    }
    #fond6.actif {
     border: 1px solid rgb(250, 220, 0);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em rgb(255, 100, 0) inset;
     margin-top: 5px;
     
    }
    #fond6 > div {
     background: linear-gradient(to bottom, rgba(80, 134, 196, 1) 1%, rgba(62, 92, 201, 1) 43%, rgba(62, 92, 201, 1) 56%, rgba(80, 134, 196, 1) 100%);
    }
    #fond6.actif > div {
     background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
    }
    #fond7 {
     border: 1px solid rgb(245, 245, 245);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     margin-top: 5px;
     
    }
    #fond7.actif {
     border: 1px solid rgb(250, 250, 250);
     border-radius: 10px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
     box-shadow: 0 0 1em #BDBDBD inset;
     margin-top: 5px;
     
    }
    #fond7 > div {
     box-shadow: 0 0 1em #58D3F7 inset;
     background-color: rgb(245, 245, 245);
    }
    #fond7.actif > div {
     box-shadow: 0 0 1em #6E6E6E inset;
     background-color: rgb(245, 245, 245);
    }
     
    </style>
    <script  type= "text/javascript">
    var LrG;
    var Crs;
    var oX;
    var newX;
    var Mx;
    var Dv;
    var dragg;
    function Start(event) {
     console.log(event.target.id);
     Crs = event.target;
     dragg = Crs.parentElement;
     dragg.classList.add ("actif");
            LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
     Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
     oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     Mx = oX - Crs.offsetLeft;
     dragg.addEventListener("mousemove", dragging, false);
     dragg.addEventListener("mouseup", relache, false);
     dragg.addEventListener("mouseleave", relache, false);
    }
    function dragging(event) {
     newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
     console.log("deplacement " + newX);
     var posX = newX - Mx;
     if (posX < 0) {
      posX = 0;
     }
     if (posX > LrG - (Crs.offsetWidth / 2)) {
      posX = LrG - (Crs.offsetWidth / 2);
     }
     Crs.style.position = "absolute";
     Crs.style.left = posX + "px";
     document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
    }
    function relache(event) {
     dragg.removeEventListener("mousemove", dragging);
     dragg.removeEventListener("mouseup", relache);
     dragg.removeEventListener("mouseleave", relache);
            dragg.classList.remove ("actif");
           }
    function ajoute() {
                var messlides = document.querySelectorAll(".slide");
                 for (var i = 0; i < messlides.length; i++) {
                    messlides[i].firstElementChild.addEventListener("mousedown", Start, false);
                 }
            }
     
    </script>
     
    </head>
    <body>
    <div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
          des slides pas comme les autres 
          <p id ="res">position</p>
          <br/><br/>
     
     
          <div id="fond5"  class="slide" style="width:300px;height:26px;" >
             <div id="Crs5" class="cur" style="top:0px;width:26px;height:26px;border-radius:8px;" ></div>
          </div>
          <div id="fond6"  class="slide"  style="width:300px;height:26px;" >
             <div id="Crs6" class="cur" style="top:7px;width:26px;height:14px;border-radius:8px;"></div>
          </div>
     
          <div id="fond7"  class="slide" style="width:300px;height:26px;" >
             <div id="Crs7" class="cur" style="top:0px;width:26px;height:26px;border-radius:50%;"></div>
          </div>
     
          <div id="fond8"  class="slide" style="width:300px;height:26px;" >
             <div id="Crs8" class="cur" style="top:0px;width:26px;height:26px;border-radius:50%;"></div>
          </div>
    </div>
     <script> ajoute();</script>  
    </body>
    </html>
    ais-je tords?
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

  19. #19
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Citation Envoyé par patricktoulon Voir le message
    on peu meme enlever les margin-top dans les classes "#fond....."
    Surtout pas, car alors ton code friserait la perfection; ça ferait sans doute trop prétentieux

  20. #20
    Inactif  

    Homme Profil pro
    cuisiniste
    Inscrit en
    Avril 2009
    Messages
    15 374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : cuisiniste
    Secteur : Bâtiment

    Informations forums :
    Inscription : Avril 2009
    Messages : 15 374
    Billets dans le blog
    8
    Par défaut re
    re


    tu a compris pourquoi je parlais de notion de portabilité

    ca m'oblige en fin de compte a réecrire le css ou a ajouter successivement les element concernés pour un style

    mais bon de toute facon ca fonctionne avec id ou avec classe

    prétentieux non ca certainement pas

    je vais pofiner tout ca au calme afin de choisir ce qui est le mieux dans le contexte de mon utilisation

    je fait souvent ca meme en VB le plus generique possible pour un export eventuel dans un autre fichier d'ou mes deux classe suplementaires au depart pour un ou X elements

    en tout cas un grand merci a toi nosmoking,beguinner,jreaux62,progelect au top you are
    mes fichiers dans les contributions:
    mail avec CDO en vba et mail avec CDO en vbs dans un HTA
    survol des bouton dans userform
    prendre un cliché d'un range

    si ton problème est résolu n'oublie pas de pointer : : ça peut servir aux autres
    et n'oublie pas de voter

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Boucle while sur les éléments d'une matrice
    Par Jean Val dans le forum Signal
    Réponses: 0
    Dernier message: 26/03/2015, 16h42
  2. Boucle for sur éléments
    Par Antoniom dans le forum jQuery
    Réponses: 3
    Dernier message: 28/05/2014, 08h18
  3. [Batch] Boucle for sur tous les fichiers sauf certaines extentions
    Par SuperPat dans le forum Scripts/Batch
    Réponses: 4
    Dernier message: 03/01/2014, 00h43
  4. Boucle for sur une variable sans prendre en compte les espaces
    Par laurentze dans le forum Shell et commandes GNU
    Réponses: 3
    Dernier message: 23/03/2012, 11h15
  5. [XL-2003] Boucle For sur toutes les feuilles d'un classeur
    Par dlight dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 28/10/2010, 22h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo