problema controllo

andreabud

Nuovo Utente
4 Mar 2016
4
0
0
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

HTML:
<style>
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 660px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 620px;
    height: 20px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #18a55e;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #fff;
}

input[type=range]::-moz-range-track {
    width: 400px;
    height: 5px;
    background: #fff;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #18a55e;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 620px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #fff;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #fff;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: red;
}
input[type=range]:focus::-ms-fill-lower {
    background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
    background: #fff;
}

output { 
position: relative;
background: url([url]http://www.goodbuyauto.it/vendinew/i...mcontent.png);[/url] 
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%;
}
</style>


<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([url]http://www.goodbuyauto.it/vendinew/images/KM_BG.png[/url]) 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>
</div>
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, l'evento onchange lo devi mettere sul tag input non su quello sotto che tra l'altro non mi sembra che esista nell'html ( <output> ).
Poi per indicare a jquery di recuperare un elemento dall'id si usa il cancelletto non il punto
Codice:
var x = $("#range_km").val();
 

andreabud

Nuovo Utente
4 Mar 2016
4
0
0
grazie ho cambiato la funzione così

function ControlloKm(range_km) {
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.color ="red";
//alert("I valori inseriti non sono di una targa autorizzata");
}
else{

document.getElementById('km').style.background-image = 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;

}
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Problema con controllo form in real time jQuery 6
P [PHP] Realizzare un controllo accessi cantiere, problema lettore Qrcode... PHP 0
P Problema inserimento controllo su script multiupload... PHP 2
T problema strano con procedura di controllo da database, di dati immessi in un form asp Classic ASP 5
M [RISOLTO]Problema controllo e passaggio di valori da una pagina all''altra PHP 4
D Problema con funzione preg_match() per controllo email PHP 2
foki Problema Controllo Username HELP PHP 3
LaKanka Problema controllo diversi browser Webdesign e Grafica 3
K problema con il Controllo A Schede. Aiuto! MS Access 0
M problema controllo campo numerico PHP 1
A Problema form: controllo campi vuoti e inibizione pulsante invio Javascript 5
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1
T problema con select dinamica con jquery Javascript 0

Discussioni simili