Javascript: come calcolare "l'ampiezza" del movimento della scrollbar

 :o Mi spiego meglio...

Ho trovato (e adattato alle mie esigenze) questo breve script in javascript:

   var myTipName = 'tip';
   
   function on_MouseMove(e) 
   {
      if (!e) var e = window.event;
      var t = document.getElementById(myTipName);
      t.style.top = e.clientY + 4;
      t.style.left = e.clientX + 4;
      return false;
   }   
   
   function over(testo)
   {
      if(testo)
      {
         var t = document.getElementById(myTipName);
         t.innerHTML = testo;
         t.style.display = 'block';
      }
   }
   
   function out()
   {
      var t = document.getElementById(myTipName);
      t.innerHTML = '';
      t.style.display = 'none';
   }
   
   document.onmousemove = on_MouseMove;   

banalmente mi consente di visualizzare un DIV accanto al cursore (come fosse una tool-tip-text) con l'ovvio vantaggio di poterci mettere dentro testo, immagini ed essere formattabile con i CSS...

 ^-^

Funziona benissimo... ma se l'altezza della finestra supera quella dello schermo e la scrollbar (di FFox o IE) non è posizionata in cima sballa il posizionamento

...e sballa esattamente di quanto la scrollbar si sposta verso il basso...

 :-\

Questo perché rispetto alla "finestra" il cursore non si è spostato, ma si è spostato il contenuto (documento)

 :coolsmiley:

e qui scatta la domandona:  :idiot:

"c'e' la possibilità di acquisire il valore dello spostamento Y della scrollbar?"

 :uglystupid:

mi sarebbe sufficiente sommarlo alla posizione Y del mouse per ottenere un allinemanto costante...

 ::)

(spero di essermi stato spiegato...)  :-[

Ciao e grazie!

 :bye:

inviato 10 anni fa
myne.it
X 0 X

ehm...

intanto ho risolto così (se poi c'e' un modo + elegante, "ascolto" volentieri)  ::)

ho aggiunto

var sT = document.body.scrollTop;

alla funzione on_MouseMove() ed il valore sT lo sommo alla posizione Y della DIV... sembra funzionare (almento con FFox 1.5.0.3 e IE6...)

 :coolsmiley:

risposto 10 anni fa
myne.it
X 0 X

E torno a BOMBA...  :uglystupid:

Ora mi trovo ad affrontare un nuovo problema (se non si capisce io e Javascript siamo stati lontanissimi fino a qualche giorno fa...)

 ???

Questo mio DIV che funge da ToolTipText ovviamente non ha un'altezza precisa, in quanto il suo contenuto è variabile... Se l'oggetto che deve visualizzare la TIP si trova in fondo al video ovviamente la TIP finisce in parte fuori dalla vista (in basso ma anche a DX, direi)...

 ^-^

La soluzione sarebbe di capire se la posizione (per esempio TOP) della DIV + l'altezza della DIV supera la dimensione della pagina, mostrami la DIV in posizione TOP-altezzaDIV (quindi sopra al mouse)...

 :coolsmiley:

Come è possibile individuare l'altezza (o la larghezza) di una DIV con javascript?

In giro si parlava di style.pixelHeight e style.pixelwidth, ma a quanto pare funziona solo con IE4 (?)

mentre style.height o style.width non danno nessun risultato...

 :tichedoff:

Qualcuno sa cosa/come aiutarmi? E' possibile quello che chiedo o è fantasc(em)enza?

 :-\

Grazie (spero di essermi spiegato!)

Mauro

 :bye:

risposto 10 anni fa
myne.it
X 0 X

... e cerca... cerca... cerca...

ECCOTI QUI LA SOLUZIONE!

   function getCSSProp(element, prop) 
   {
      if (element.style[prop]) 
      {
         // inline style property
         return element.style[prop];
      } 
      else if (element.currentStyle) 
      {
         // external stylesheet for Explorer
         return element.currentStyle[prop];
      } 
      else if (document.defaultView && document.defaultView.getComputedStyle) 
      {
         // external stylesheet for Mozilla and Safari 1.3+
         prop = prop.replace(/([A-Z])/g,"-$1");
         prop = prop.toLowerCase();
         return document.defaultView.getComputedStyle(element,"").getPropertyValue(prop);
      } 
      else 
      {
         // Safari 1.2
         return null;
      }
   }

// Richiamo
var elemento = getElementById('id');
var x = getCSSProp(elemento, "height");

Il valore di ritorno è qualcosa tipo "auto" quando non ha dimesione, oppure "###px" quando indica un valore in pixel... è quindi sufficiente ricavare il solo valore con parseInt(x) ed utilizzarlo...

 :D

risposto 10 anni fa
myne.it
X 0 X

 O0

risposto 10 anni fa
Gianni Tomasicchio
X 0 X

Te la sei cantata e suonata da solo  :D

Ma con i css potevi semplicemente dare le scrollbars al tuo div mobile.

Prova a seguire questo semplice tutorials: http://www.constile.org/tips/emulare_gli_iframe/

in questo modo puoi anche dimensionare il tuo tooltipdiv in modo da non occupare tutta la pagina del browser e togliere un po' di javascript che non fa mai male.

risposto 10 anni fa
Marco Grazia
X 0 X

Te la sei cantata e suonata da solo  :D

Ma con i css potevi semplicemente dare le scrollbars al tuo div mobile.

Prova a seguire questo semplice tutorials: http://www.constile.org/tips/emulare_gli_iframe/

in questo modo puoi anche dimensionare il tuo tooltipdiv in modo da non occupare tutta la pagina del browser e togliere un po' di javascript che non fa mai male.

Si... in effetti è una bella soluzione...  O0 ma ho fatto qualche prova: la mia tooltip segue il movimento del mouse, a differenza delle tooltip standard. quindi la scrollbar risulta inutilizzabile, in quanto irraggiungibile... Se infatti con il mouse provi a spostarti tutta la DIV si sposta con lui...

 :uglystupid:

Dovrei "fissare" la DIV nel punto di apparizione (quindi appena passi sopra il controllo), mantenerla fissa e visibile finché il mouse si trova sul controllo o sulla DIV stessa...

 ::)

Ma la mia intenzione iniziale era proprio quella di creare una Tooltip che si spostasse con il mouse, che lo seguisse come un cagnolino... Infatti imposto sempre la DIV con un filtro di trasparenza per consentire di vedere comunque il controllo sottostante (soprattutto per le immagini)...

 :coolsmiley:

Comunque grazie per il consiglio... lo tengo buono per la tooltip fissa...

 :bye:

risposto 10 anni fa
myne.it
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda