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

Mise en page CSS Discussion :

Range, methode GET, output, diaporama


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de zool.bzh
    Homme Profil pro
    peintre industriel
    Inscrit en
    Octobre 2023
    Messages
    159
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : peintre industriel
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2023
    Messages : 159
    Par défaut Range, methode GET, output, diaporama
    Bonjour
    j'ai opter pour le tuto de NoSmoking pour les range
    je mémorise avec la methode $_GET les dimension de mes photos
    Avec les range de NoSmoking, une fois validé, ça ne ramène pas le curseur à la taille spécifié en <output>
    voici les code:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="boxcenter two"> 
    <form method="GET" action="index2.php">	 
         <span class="gris9">hauteur comprise entre
         <input type="range" class="custom-slider"  name="hmin" value="<?php echo $heightmin; ?>" min="<?php echo $min_height_value; ?>" max="<?php echo $max_height_value; ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo $heightmin; ?></output><br>
         <span class="gris9">et </span><br>
    	 <input type="range" class="custom-slider"  name="hmax"   value="<?php echo $heightmax; ?>" min="<?php echo $min_height_value; ?>" max="<?php echo $max_height_value; ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo  $heightmax; ?></output>
         </span></div>
    Code : 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
    input[type=range].custom-slider {
      -webkit-appearance: none;     /*nécessaire pour Chrome */
      padding: 0;                   /* nécessaire pour IE */
      font: inherit;                /* même rendu suivant font document */
      outline: none;
      color: #B300B3;                  /* sert pour couleur de référence, via currentColor, pour le curseur */
      opacity: 1;
      background: #333333;             /* sert pour couleur de fond de la zone de déplacement */
      box-sizing: border-box;       /* même modèle de boîte pour tous */
     
      cursor: pointer;
    }
    /* la zone de déplacement */
    input[type=range].custom-slider {
      height: 5px;
      width: 100px;
     
     
      background-color: #333333;  /* supprimé définie sur l'input */
    }
    /* le curseur */
    input[type=range].custom-slider {
     width: 20px;
      height:20px;                /* s'adapte à la hauteur de l'input */
      border:none;                   /* supprimer la bordure */
      border-radius: 5px;               /* supprimer le rayon */
      background: #B300B3;
    }
    /* barre progression avant */
    input[type=range].custom-slider {
      height: 5px;
      width: 150px;
      background: #333333;        /* supprime barre progression avant */
    }
    comment garder le curseur en <output> au rafraîchissement de la page ??

  2. #2
    Membre émérite
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    435
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 435
    Par défaut
    Bonjour,

    Pas sûr d'avoir bien compris le problème mais ne devrais tu pas utiliser les paramètres GET pour renseigner l'output et l'attribut value ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
        <input type="range" class="custom-slider" name="hmin" value="<?php echo intval($_GET['hmin']); ?>" min="<?php echo $min_height_value; ?>" max="<?php echo $max_height_value; ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo htmlspecialchars($_GET['hmin']); ?></output><br>

  3. #3
    Membre confirmé Avatar de zool.bzh
    Homme Profil pro
    peintre industriel
    Inscrit en
    Octobre 2023
    Messages
    159
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations professionnelles :
    Activité : peintre industriel
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2023
    Messages : 159
    Par défaut
    ok j'ai trouvé !
    Code php : 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
    <form method="GET" action="index2.php">
    <?php
    $sql_done = 'SELECT min(height), max(height), min(width), max(width), name_tof, dos_tof FROM pictures WHERE dos_tof = :dos_tof';
    $sth_less = $pdo->prepare($sql_done); 
    $sth_less->execute(array('dos_tof' => $dos));
    $done_pics = $sth_less->fetch();
     
        $heightmin = $done_pics['min(height)'];
        $heightmax =$done_pics['max(height)'];
        $widthmin =$done_pics['min(width)'];
        $widthmax =$done_pics['max(width)'];
     
        $values = explode(' ', $_GET['pics']);  
        $lot_1 = $values[1];
        $lot_3 = $values[3];
    ?>
        <span class="gris9">hauteur comprise entre
            <input type="range" class="custom-slider custom-slider-bullet" name="hmin" id="hmin"
             value="<?php 
             if (isset($_GET['val'])) { 
    	     echo $_GET['hmin']; 
             } else if (isset($_GET['reset'])) { 
    	     echo $heightmin; } ?>" 
     
            min="<?php echo $heightmin ?>"
    	max="<?php echo $heightmax; ?>" 
     
            oninput="this.nextElementSibling.textContent = this.value"/>
     
            <output><?php
                if (isset($_GET['val'])) { 
    	        echo $_GET['hmin']; 
                } else  if (isset($_GET['reset'])) { 
    	echo $heightmin; }; ?>
    	</output>
    merci bien Pytet
    voila pour le css <input type="range"> de NoSmoking merci a lui ++
    Code css : 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
    input[type=range].custom-slider {
      -webkit-appearance: none;     /*nécessaire pour Chrome */
      padding: 0;                   /* nécessaire pour IE */
      font: inherit;                /* même rendu suivant font document */
      outline: none;
      color: #069;                  /* sert pour couleur de référence, via currentColor, pour le curseur */
      opacity: .8;
      background: #CCC;             /* sert pour couleur de fond de la zone de déplacement */
      box-sizing: border-box;       /* même modèle de boîte pour tous */
      transition: opacity .2s;
      cursor: pointer;
    }
    /* la zone de déplacement */
    input[type=range].custom-slider::-moz-range-track {
      height: 100%;
      border: none;
      border-radius: 0;
      background-color: transparent;  /* supprimé définie sur l'input */
    }
    /* le curseur */
    input[type=range].custom-slider::-moz-range-thumb {
      width: 1em;
      height: inherit;                /* s'adapte à la hauteur de l'input */
      border: none;                   /* supprimer la bordure */
      border-radius: 0;               /* supprimer le rayon */
      background: currentColor;
    }
    /* barre progression avant */
    input[type=range].custom-slider::-moz-range-progress {
      height: 0;
      background: transparent;        /* supprime barre progression avant */
    }

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

Discussions similaires

  1. prob tres simple, form, method get
    Par killy-kun dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 25/08/2005, 10h29
  2. Faire Choix du fichier destination methode GET grace a JS
    Par ahage4x4 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 14/06/2005, 15h26
  3. la méthode get du Net::telnet
    Par BENCHEKROUN dans le forum Modules
    Réponses: 4
    Dernier message: 25/05/2005, 12h31
  4. probleme avec methode get
    Par Tr@nkill dans le forum ASP
    Réponses: 2
    Dernier message: 12/05/2005, 13h54
  5. [Servlet] Méthode Get : récupérer données de l'url
    Par david71 dans le forum Servlets/JSP
    Réponses: 9
    Dernier message: 01/02/2005, 11h52

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