Barra di controllo

[panecasareccio]

Salve a tutti,

Vorrei realizzare una pagina web con una barra di controllo, ovvero un piccolo oggetto che puo' essere trascinato con il mouse lungo una linea verticale o orizzontale. Dopdoche' qualcosa dovra' cambiare nella pagina in base alla posizione dell'oggetto.

Nulla di particolarmente sofisticato, cerco una soluzione semplice.

Premetto che le mie conoscenze di Java Script sono a dir poco minime, quindi avrei bisogn, se possibile, di essere guidato passo passo.


Grazie mille per l'aiuto,
panecasareccio.

[cavicchiandrea]

Originariamente inviato da panecasareccio
Salve a tutti,

Vorrei realizzare una pagina web con una barra di controllo, ovvero un piccolo oggetto che puo' essere trascinato con il mouse lungo una linea verticale o orizzontale. Dopdoche' qualcosa dovra' cambiare nella pagina in base alla posizione dell'oggetto.

Nulla di particolarmente sofisticato, cerco una soluzione semplice.

E' l'operazione in se complessa, la soluzione più semplice (si fa per dire non conoscendo il javascript e credo jquery) ritengo sia questa http://jqueryui.com/demos/slider/

Premetto che le mie conoscenze di Java Script sono a dir poco minime, quindi avrei bisogn, se possibile, di essere guidato passo passo.

Dubito che forum possa fare questo, dovrai studiare, studiare, poi ancora studiare guide e libri, il forum difficilmente potrà farti da tutor, anche volendo l'operazione diventerebbe lunga e poco comprensibile se dilatata nel tempo

Grazie mille per l'aiuto,
panecasareccio.

[Enzaccio]

Il trascinamento e la rilevazione delle coordinate del mouse, presuppongono uno SCRIPT più complesso e che incontra problemi di cross-browser; ma si fa'.
Intanto puoi cominciare a masticare JavaScript con questo, che potrebbe anche profilare un accettabile "ripiego":

<script>

function fai(dove){

if(dove==1){document.body.bgColor="#000000";};
if(dove==2){document.body.bgColor="#FFFFFF";};
if(dove==3){alert("olé olé");};
if(dove==4){document.body.bgColor="#FF00FF";};
if(dove==5){document.body.text="#00FF00";};
if(dove==6){mario=window.open(); mario.document.write("<h1>ma fate anche il pane con le olive ??</h1>");};
if(dove==7){document.body.text="#0000FF";};
if(dove==8){altrove();};

}

function altrove(){
 alert("salve, sono un' altra funzione");
}

</script>

<h2>panecasareccio</h2>
<table width="100%"><td><input 
 name="enzo" type="radio" onclick="fai(1);"></td><td><input 
 name="enzo" type="radio" onclick="fai(2);"></td><td><input 
 name="enzo" type="radio" onclick="fai(3);"></td><td><input 
 name="enzo" type="radio" onclick="fai(4);"></td><td><input 
 name="enzo" type="radio" onclick="fai(5);"></td><td><input 
 name="enzo" type="radio" onclick="fai(6);"></td><td><input 
 name="enzo" type="radio" onclick="fai(7);"></td><td><input 
 name="enzo" type="radio" onclick="fai(8);"></td><td><input 
 name="enzo" type="radio" onclick="fai(9);"></td><td><input 
 name="enzo" type="radio" onclick="fai(10);"></td><td><input 
 name="enzo" type="radio" onclick="fai(11);"></td><td><input 
 name="enzo" type="radio" onclick="fai(12);"></td><td><input 
 name="enzo" type="radio" onclick="fai(13);"></td><td><input 
 name="enzo" type="radio" onclick="fai(14);"></td><td><input 
 name="enzo" type="radio" onclick="fai(15);"></td><td><input 
 name="enzo" type="radio" onclick="fai(16);"></td></table>

Ora però, TUTTI gli IF-statement vengono testati (eseguito uno, semi-eseguiti gli altri).
Per una migliore economia, si dovrebbe passare all' uso combinato con l' ELSE o allo SWITCH-statement.

[panecasareccio]

Ciao Enzaccio!

Ti ringrazio molto per il codice che hai postato, e' molto semplice e lineare da capire!

Praticamente, correggimi se sbaglio, la struttura del codice che dovro' realizzare e' la seguente:

1. Devo definire una funzione che prende in ingresso le coordinate del mouse e fa determinate cose in base alle coordinate del mouse. Chiamiamo questa funzione FAI(x,y)

2. Detta funzione va definita nell'head della pagina html, inclusa tra i tag <script> e </script>

3. Devo creare un oggetto, per esempio un'immagine (tu hai usato gli input di tipo radio, ma va bene qualunque altra cosa, testo, immagini, ...) ed associare ad esso uno o piu' eventi. Tu hai usato onclick, ma forse dovro' usare anche on mouse up/on mouse down. Questi eventi chiameranno la funzione FAI

4. La funzione FAI fara' apparire sullo schermo quello che voglio far apparire, ma probabilmente dovra' anche preoccuparsi di modificare la posizione dell'oggetto in base alle coordinate del mouse.

Per esempio, nel caso di una barra orizzontale, la Y dell'oggetto non deve essere toccata, mentre la X dell'oggetto deve seguire i movimenti del mouse fintantoche' il mouse non esce dal limite consentito dalla barra... beh piu' o meno...

Ho tralasciato qialcosa di importante?
Ci sono andato vicino oppure sono completamente fuori strada?

A questo punto mi mancano le seguenti informazioni:

1. Come posso rendere l'oggetto trascinabile?
2. Come posso leggere le coordinate del mouse?
3. Come posso settare le coordinate dell'oggetto una volta acquisite quelle del mouse?



Grazie mille per l'aiuto, panecasareccio

[panecasareccio]

Salve,

ho scritto il codice seguente, sembra un buon punto di partenza per quello che devo fare:

quando trascino l'iconcina riesco a leggere le coordinate del mouse, quindi potro' far fare quello che voglio alla pagina.

L'unico problema e' che quando trascino l'iconcina il puntatore del mouse cambia forma ed una copia 'trasparente' dell'iconcina segue il mouse. Come posso evitarlo?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function SetValues()
{
    var s = 'X=' + window.event.clientX +  ' Y=' + window.event.clientY ;
    document.getElementById('divCoord').innerText = s;
        document.getElementById('iconcina').style.top = window.event.clientY;
        document.getElementById('iconcina').style.left = "450px";
}  

</script></head>
<body>
<div id="divCoord"></div>
[img]GiuseppePapari.png[/img]
</body></html>

Grazie mille per l'aiuto, Panecasareccio