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

jQuery Discussion :

Récupérer valeur de mon slider


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut Récupérer valeur de mon slider
    Salut la compagnie!

    Encore un petit souci relatif à mon projet.
    Je crois que je devrais un peu mieux m'informer concernant le javascript car je pourrais répondre tout seul avec un peu de temps. Mais faute de temps, je m'en remets à vous, si cela ne vous dérange pas

    Alors voilà, ayant récupéré un plugin sur codepen.io, je me retrouve un peu perdu quant à la manière de récupérer la valeur de mon colored slider.
    J'ai alors ajouté une fonction dans le code javascript déjà établi pour tenter de la récupérer par une manière du langage java appris l'année passée avec l'école.

    Voici l'étendue de mon code html :

    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
    <?php
    session_start();
     
    $hostname='localhost';
    $username='root';
    $sqlpassword='';
    $conn = new PDO("mysql:host=$hostname;dbname=cocoon;charset=utf8mb4",$username,$sqlpassword);
     
    if(isset($_POST['Connexion'])){
        $email= $_POST["email"];
        $password= $_POST["password"];
    }
    ?>
     
    <html>
        <head>
            <title>Cocoon - Connexion</title>
            <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link rel="stylesheet" href="css/colored_slider.css">
                    <link rel="stylesheet" href="css/principal.css">
                      <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
                       <meta http-equiv="page-enter" content="revealtrans(duration=4.0, transition=14)">
     
     
     
     
        </head>
        <body>
        <hey_reduced2>How do you feel now?</hey_reduced2>
     
            <div class= centered_slider>
                <div id="coloredSlider"></div>
            </div>
     
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    <script type="text/javascript" src="slider_color.js"></script>
        </body>
    </html>

    Et voici l'étendue de mon code javascript :
    L'ajout de la function getRange(); est de moi mais je ne crois pas son efficacité.

    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
    35
    36
    37
    38
    39
    function getTheColor( colorVal ) {
      	var theColor = "";
      	if ( colorVal < 50 ) {
    			    myRed = 255;
    			    myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
    		  }
    	  else 	{
    			    myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
    			    myGreen = 255;
    		  }
    	  theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
      	return( theColor ); 
    }
     
    function refreshSwatch() {
    	var coloredSlider = $( "#coloredSlider" ).slider( "value" ),
    	myColor = getTheColor( coloredSlider );
     
    	$( "#coloredSlider .ui-slider-range" ).css( "background-color", myColor );
     
    	$( "#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default" ).css( "background-color", myColor );
    }
     
    $(function() {
    	  $( "#coloredSlider" ).slider({
    		    orientation: "horizontal",
    		    range: "min",
    		    max: 100,
    		    value: 0,
    		    slide: refreshSwatch,
    		    change: refreshSwatch
    	  });
     
    });
     
    function getRange() {
        var range = $( "#coloredSlider" ).slider( "value" );
        return(range);
    }
    Alors comment pourrais afficher la valeur choisie par l'utilisateur en temps réelle et la récupérer pour l'envoyer à une bdd. (Je sais comment l'envoyer)

    Merci d'avance et une excellente soirée à vous!

  2. #2
    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,
    tout se passe dans la propriété slide/change en l’occurrence dans la fonction refreshSwatch, c'est dans celle-ci que tu dois mettre le code pour l'affichage et l'envoi.

  3. #3
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut
    Excuse moi je suis totalement perdu.

    Comment la stocker et l'afficher? Je ne comprends pas bien le code :/

  4. #4
    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
    Sorry mais les questions que tu poses relèves des basiques du langage alors c'est par l'acquisition de ces bases qu'il faut que tu commences.

    Sur base de l'exemple voici un petit fichier de test
    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
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
    #main { max-width: 50em; margin: auto;}
    p { line-height: 2em; width: 20em;}
    p span { float: right; display: inline-block; width: 10em;}
    p span:before { content: ":"; margin-right: 1em;}
    </style>
    <script>
    function getTheColor(colorVal) {
      var theColor = '';
      if (colorVal < 50) {
        myRed = 255;
        myGreen = parseInt(((colorVal * 2) * 255) / 100);
      } 
      else {
        myRed = parseInt(((100 - colorVal) * 2) * 255 / 100);
        myGreen = 255;
      }
      theColor = 'rgb(' + myRed + ',' + myGreen + ',0)';
      return (theColor);
    }
     
    var $_Slider;
    function colorSlide(color) {
      $('#coloredSlider .ui-slider-range').css('background-color', color);
      $('#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default').css('background-color', color);
    }
    function handlerSlide(e) {
      var color = $_Slider.slider('value'),
      color = getTheColor(color);
      $('#slide-value span').html(color);
      colorSlide(color);  
    }
    function handlerChange(e) {
      var color = $_Slider.slider('value'),
      color = getTheColor(color);
      $('#change-value span').html(color);
      $('#change-value').css('background-color', color);
      colorSlide('');  
    }
    $(function () {
      $_Slider = $('#coloredSlider');
      $_Slider.slider({
        orientation: 'horizontal',
        range: 'min',
        max: 100,
        value: 0,
        slide: handlerSlide,
        change: handlerChange
      });
    });
    </script>
    </head>
    <body>
    <div id="main" class="ui-widget">
      <h1>A Colored jQuery UI Slider</h1>
      <div id="coloredSlider"></div>
      <p id="slide-value">Slide value<span></span></p>
      <p id="change-value">Change value<span></span></p>
    </div>
    </body>
    </html>
    le code est très peu différent du tien ... rien de complexe, il te faut maintenant faire l'effort de comprendre ce qui se fait en le testant !

  5. #5
    Membre habitué
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut
    Oui, j'ai finalement trouvé par moi-même, je vous prie de m'excuser. Merci!

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

Discussions similaires

  1. récupérer valeur de slider
    Par bubulle29 dans le forum Interfaces Graphiques
    Réponses: 1
    Dernier message: 11/01/2011, 09h19
  2. Récupérer la valeur de mon textarea
    Par vivi21 dans le forum Langage
    Réponses: 3
    Dernier message: 07/01/2011, 10h44
  3. Réponses: 23
    Dernier message: 05/05/2010, 16h59
  4. Réponses: 4
    Dernier message: 22/04/2010, 16h06
  5. [PHP 5.2] Récupèrer la valeur de mon $_POST
    Par beegees dans le forum Langage
    Réponses: 4
    Dernier message: 07/02/2009, 19h56

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