Newsgroup: it.comp.lang.javascript
Titolo: [lunghetto] slider che segue il mouse

Salve a tutti.
"scopiazzando" alcune parti da criosoftware, sono riuscito a fare un
'abbozzo' di slider, cioe' una barra che si 'riempe' a seconda di dove
viene cliccata col mouse.
Cosi' com' e' funziona, ma solo al click, mentre vorrei che, mantenendo
premuto il pulsante del mouse, venisse aggiornata la posizione.
purtroppo non ho uno spazio web accettabile (digilander inserisce codice
javascript nelle pagine html, e pure errato), quindi lo copincollo qua:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
 <head>
  <title>test slider</title>
  <meta name="GENERATOR" content="Quanta Plus" />
  <meta name="AUTHOR" content="ZeD" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  /* <![CDATA[ */
  div.slider { border: 1px solid #000; height: 1em; background: #bff; margin: .25em auto; }
  div.slider span { float: left; background: #700; height: 1em; }
  /* ]]> */
  </style>
  <script language="javascript" type="text/javascript">
  /* <![CDATA[ */
  function getElementsByClass(classe) {
    var all=document.getElementsByTagName('*');
    var j=0;
    var mine=new Array();
    for (var i=0; i<all.length; i++)
      if (all[i].className==classe)
        mine[j++]=all[i];
    return mine;
  }
  function posizione (sender) {
    var i=sender.offsetLeft;
    if (sender.offsetParent!=null)
      i+=posizione(sender.offsetParent);
    return i;
  }
  function slider() {
    var sliders=getElementsByClass('slider')
    for (var i=0; i<sliders.length; i++) {
      sliders[i].setAttribute('style', 'width: 400px;');
      sliders[i].appendChild(document.createElement('span'));
    }
  }
  function aggiorna(id, e) {
    var larghezzaSpan=e.pageX-posizione(e.currentTarget);
    var div=document.getElementById(id);
    var larghezzaDiv=div.style.width.substring(0,div.style.width.length-2);
    div.firstChild.style.width=larghezzaSpan+'px';
//    window.alert(larghezzaSpan*100.0/larghezzaDiv); //mi servira' dopo
  }
  /* ]]> */
  </script>
 </head>
 <body onload="slider()">
  <div id="slider1" class='slider' onmousedown="aggiorna('slider1', event)"></div>
  <div id="slider2" class='slider' onmousedown="aggiorna('slider2', event)"></div>
 </body>
</html>
fondamentalmente modifico la larghezza di un tag span (creato a runtime,
preferisco avere il numero minore di elementi nell' html) a seconda di
dove clicco.
*Presumo* che la funzione aggiorna debba contenere un ciclo del tipo
finche' non alzo il pulsante del mouse
  sistema la larghezza dello span a seconda della posizione del mouse
solo che le mie conoscenze del javascript non mi consentono neanche di
fare una decente ricerca su google... quindi chiedo lumi a voi,
ringraziandovi sin d' ora (se non altro, per essere arrivati qui in fondo)
-- 
28/2/2005 | -1 all' alba!

 <?xml version="1.0" encoding="utf-8"?>
Anche se ho visto che hai scritto il codice escludendo Internet Explorer,
voglio cmq avvisarti, nel caso tu non lo sapessi, che con questa
dichiarazione prima del doctype, fai "switchare" IE in quirk mode, invece
che in standard mode.
-- 
ZER0
~ .. six thousand and thirty four days, nine hours, one minutes, eleven seconds.
That is when the world was ended.