sliding box bottom up

**Philips** · 17-12-2008, 15:10

Ciao a tutti...

mi sapreste indicare uno script per poter includere un box che si apra dal BASSO VERSO L'ALTO senza possibilmente farmi scrollare la pagina?

grazie

**Philips** · 22-12-2008, 11:45

up

**crisland** · 22-12-2008, 17:21

molto interessato anche io.

ho bisogno di far aprire un div dal basso verso l'alto, meglio se con effetto slide, ma che vada "sopra" agli altri, senza far scrollare nulla.

ho già incluso le prototype per altre cose, solo che dai doc non riesco a capire che funzioni usare (esiste effect.blindup mi pare ma fa scrollare gli altri div)

**Philips** · 22-12-2008, 18:09

a quanto pare non esiste nulla di ciò...continuo ad indagare!!

**Enzo (Strayst.)** · 23-12-2008, 00:21

Mi sono tenuto a DIV dimensionati in pixel, così diventa forse più comprensibile che non a %, e ho scritto il seguente.
Ho un DIV largo 300px che tengo a 0px di altezza (il contenuto non appare); a pulsante o link lo voglio far crescere sino a 200px HEIGHT sviluppandosi dal basso verso l'alto.
E posso anche tornare indietro ....
Due velocità; con servosterzo e poggiatesta:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>bottom opener</title> 

    <script type="text/javascript">

var divH  = 0;
var limit = 200;
var speed = 5;  // rapidità di apertura, più basso il num. più apre velocemente. 

T3=setTimeout('', 2);

function run(){ 
 clearTimeout(T3);
 document.getElementById("box").style.height=divH+"px";
 document.getElementById("box").style.margin=300-divH+"px auto";

   if(divH <= limit-1 ){
        divH ++; divH ++;
        T3=setTimeout(' run()', speed);
   } else {
   } 

 document.getElementById("disp").value="\n Altezza DIV = "+divH+"px "+
                               "\n margin-top = "+(300-divH)+"px \n";
 }


function closer(){ 
 clearTimeout(T3);
 document.getElementById("box").style.height=divH+"px";
 document.getElementById("box").style.margin=300-divH+"px auto";

   if(divH >= 1 ){
        divH --; divH --;
        T3=setTimeout(' closer()', speed);
   } else {
   } 

 document.getElementById("disp").value="\n Altezza DIV = "+divH+"px "+
                               "\n margin-top = "+(300-divH)+"px \n";
 }


</script>

</head>
<body bgcolor="#D0D090" text="#800000"> 


<div style="width: 400px; margin: 0 auto;">
 <textarea id="disp" rows="4" cols="22" readonly style="text-align: right; overflow: hidden;"></textarea>

 <input type="button" value="open div" onclick="run();">&#160;
 <input type="button" value="stop" onclick="clearTimeout(T3);">&#160;
 <input type="button" value="close div" onclick="closer();">&#160;&#160;&#160;
 Slow<input name="speed" type="radio" value="" onclick="javascript: speed=50;">/<input 
 name="speed" type="radio" value="" checked="checked" onclick="javascript: speed=5;">Fast

 

 
 <div style="height: 300px; border: 1px dashed blue;">
 
  <div id="box" style="width: 300px; height: 0px; margin: 300px auto; background-color: #90A6E0; padding-left: 8px; overflow: hidden;">
   

        Straystudio
&#160; Straystudio
&#160; &#160; Straystudio
&#160; &#160; &#160; 
        Straystudio
&#160; &#160; &#160; &#160; Straystudio

  </div>

 </div>
</div>


</body>
</html>

**Philips** · 23-12-2008, 10:13

...ti stimo un casino!!

Grazie mille e Buone feste a tutti!!

**Enzo (Strayst.)** · 23-12-2008, 14:48

Sui pulstanti Slow/Fast bisogna ricomporre javascript togliendo il trattino - che il sistema introduce nel codice postato:
onclick="java-script: speed=50;"
Questi assegnano un diverso valore alla variabile speed, cosa che evidentemente si può fare anche dal BODY direttamente col gestore di evento; sempreché quella variabile sia stata dichiarata nello SCRIPT.

Quello che posto ora illustra il principio di funzionamento: ogni volta che la funzione run() viene attivata (pulsante), si aggiunge 1px all'altezza del DIV
con divH ++; che fa crescere il valore numerico della variabile divH appunto, di una unità per volta.

L'uso delle tabelle rende anche più semplice averlo "dal basso", con valign="bottom" assegnato alla cella td che lo contiene e lo mantiene allineato alla linea di fondo anche al variare della sua altezza (del DIV).

0px o 1px come height di partenza del DIV.
Si può stare sia ad HTML 4.0 o 4.01 che ad XHTML ma per avere il DIV a 0px bisogna avere un flavour Strict nel !DOCTYPE altrimenti con Transitional IExplorer lo considera illegale e non riconosce il 0px; e il contenuto appare.
Purtroppo lo Strict "uccide" le altezze in % percentuale che si danno alle tabelle; quindi se per il vostro progetto siete legati a un Transitional, dovete tenere il DIV nascosto a 1px (ci si fa un cappello dello stesso colore del resto, semmai).

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>bottom opener (bases)</title> 

    <script type="text/javascript">

var divH  = 0;

function run(){ 
  divH ++;
 document.getElementById("box").style.height=divH+"px";

 document.getElementById("disp").innerHTML=" Altezza DIV = "+divH+"px";
 }

</script>

</head>
<body bgcolor="#D0D090" text="#800000"> 

<div align="center">
    

    <textarea id="disp" rows="1" cols="22" readonly></textarea>
    <input type="button" value="open div" onclick="run();"> 

    


  <table height="300" border="1" cellpadding="0" cellspacing="0" width="400">
   <td align="center" valign="bottom">

     <div id="box" style="width: 300px; height: 0px; background-color: #90A6E0; overflow: hidden;">
      

        Straystudio
  Straystudio
    Straystudio
     
     </div>
 
   </td>
  </table>
  
</div>
 
 
</body>
</html>

Discussione: sliding box bottom up

Strumenti discussione

Ricerca discussione

Visualizza

sliding box bottom up

Principio di funzionamento

Permessi di invio