Visualizzazione dei risultati da 1 a 4 su 4

Visualizzazione discussione

  1. #1

    range con input che cambia colore

    Ciao Ragazzi, sono nuovo del forum.
    Sto realizzando un range che svolga la seguente funzione con onchange.
    Cerco di spiegarmi meglio una volta che cambio la posizione del valore oltre a darlo in output (lo fa benissimo con una funzione trovata tempo fa) deve cambiare il background ed il color font.
    vi scrivo qui css, div html e funzione js



    codice:
    output { 
      position: relative;
      background: url(http://www.goodbuyauto.it/vendinew/i...mcontent.png); 
      background-repeat: no-repeat;
      width: 160px; 
      height: 60px; 
      text-align: center; 
      color: #00C071; 
      border: 20px; 
      display: block; 
      font: bold 30px Source Sans Pro;
      bottom: -50%;
    }
    output:after { 
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: 10px solid #999999;
      top: 100%;
      left: 40%;
    
    
    }
    
    
    
    <script type="text/javascript">
            function ControlloKm() {
             var x = $ ( ".range_km"). val ();
                //creazione var targa per controllo
                if ( x == 105000)
    
    
                //controllo con serch
                //if  (kminput.value > 100000) 
                 {
                 // In caso di errore stampo un avviso e pulisco il campo...
                  // document.getElementById("error1").innerHTML = "<p>I valori inseriti non sono di una targa autorizzata</p>";
                document.getElementById('error2').hidden = false;
                document.getElementById('km').style.background = url('http://www.goodbuyauto.it/vendinew/images/kmcontentfail.png ');
                document.getElementById('km').style.color ="#fff";         
                  //alert("I valori inseriti non sono di una targa autorizzata");
            }
            else{
                 
                document.getElementById('km').style.background = url('http://www.goodbuyauto.it/vendinew/images/kmcontentok.png ');
                document.getElementById('km').style.color ="#fff";
                document.getElementById('check3').hidden= false;
                 document.getElementById('check4').hidden= false;
    
    
             }
            }
    </script>
    
    <div id="selezione_km" style="background: transparent url(http://www.goodbuyauto.it/vendinew/images/KM_BG.png) no-repeat"  alt="sfondomenu" >
                            <img src="http://www.goodbuyauto.it/vendinew/images/KM_Auto.png" /> 
                            <br>
                            <br>
                            <input type="range" name="range_km" id="range_km" min="0" max="105000" step="5000" value="10000">
                            <output for="range_km" id="km" oninput="value" onchange="ControlloKm(range_km)"> </output>
                            <script>
                            var el, newPoint, newPlace, offset;
                            // Select all range inputs, watch for change
                            $("input[type='range']").change(function() {
                            // Cache this for efficiency
                            el = $(this);
                            // Measure width of range input
                            width = el.width();
                            // Figure out placement percentage between left and right of input
                            newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
                            offset = -34;
                            // Prevent bubble from going beyond left or right (unsupported browsers)
                            if (newPoint < 0) { newPlace = 0; }
                            else if (newPoint > 1) { newPlace = width; }
                            else { newPlace = width * newPoint + offset; offset -= newPoint; }
                            // Move bubble
                            el
                            .next("output")
                            //.next("auto")
                            .css({
                            left: newPlace,
                            marginLeft: offset})
                            .text(el.val());
                            })
                            // Fake a change to position bubble at page load
                            .trigger('change');
                            </script>
                             <br>
    inoltre vorrei che insieme al range si spostasse l'immagine superiore
    Ultima modifica di ciro78; 05-03-2016 a 18:41

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.