Nascondere elementi se superano la dimesione del box contenitore

**vale_ron** · 14-03-2009, 12:58

Ciao a tutti, non sono per nulla pratico di javascript e volevo sapere se è possibile fare questa cosa:
avrei un div 120x600 all' interno del quale appaiono degli annunci marcati con un elenco dl. Vorrei che non apparisse l' ultimo annuncio se la lunghezza complessiva supera i 600px del box contenitore. E' possibile? Il problema è che è indefinita la lunghezza di ogni annuncio...

**br1** · 14-03-2009, 13:21

Se non ho capito male tutto si riduce all'utilizzo della proprieta' CSS "overflow:hidden;" nel contenitore... oppure spiega meglio

ciao

**vale_ron** · 14-03-2009, 17:09

No, applicare la proprietà CSS overflow: hidden al contenitore non funziona perchè se viene raggiunta la lunghezza complessiva quando l' ultimo annuncio non è stato ancora visualizzato completamente, quest' ultimo viene visualizzato solo fino a quel punto, mentre io vorrei che venisse escluso.

**Xinod** · 14-03-2009, 17:15

si puo' vedere lo script in azione?

**vale_ron** · 14-03-2009, 17:31

In realtà volevo che qualcuno mi suggerisse uno script da utilizzare. Non conosco quasi per nulla il JavaScript... Chiedevo, dunque, se fosse possibile realizzare la mia idea...

**Xinod** · 14-03-2009, 17:58

sicuramente e' realizzabile,
ma da come avevi presentato il problema sembrava tu stessi gia' lavorando su qualcosa di funzionante eccetto per questo dettaglio della voce che non andrebbe mostrata se eccedente

questo "all' interno del quale appaiono degli annunci"
come appaiono? e' tutto statico?

sinceramente io posso dirti: rileva l' offsetWidth di ogni item, se c'e' margine orizontale tra una voce e l' altra aggiungilo al totale, se la somma dello spazio occupato e' superiore a 600 nascondi le voci successive
e tu, com' e' lecito, non c' hai capito niente!

ma se non posti almeno un po' di html e css mi devo immaginare tutto io da zero?

**Straystudios** · 14-03-2009, 19:46

L' ho partorito ...
però l' ho fatto coi DIV, preso dalla passione; si potrà applicare anche alle Liste DL.

Così com'è, copia-incollalo in Blocco Note e da File in alto fai Salva-con-nome... unNome.html e ti appare debordante; poi riattacca onload in on load='setup();' che chiama la funzione (è nel Tag BODY).
Nota bene, che se è il caso, te ne sa togliere anche più d' uno !!!

codice:

<html>
<head><title>contents cutter</title>

<script type="text/javascript" language="javascript">
<!--

 var sum = 0;
 var sub = 0;

function setup() {
   group = document.getElementById("box");
   single= group.getElementsByTagName("div");
   
     for(x=0; x<single.length-sub; x++){
         sum = sum + single[x].offsetHeight;
     }
   
   alert(sum);
     if(sum > group.offsetHeight){
       single[single.length-1-sub].style.display="none"
       sub = sub+1;
       sum = 0;
       setup();
  }   
 }

//-->
</script>

</head>
<body bgcolor="#004000" text="#E3E3E3" on load='setup();'>
<h1>Straystudio</h1>
400 x 200 px

<div id="box" style="width: 400px; height: 200px; overflow: hidden; border: thick solid white;">

 <div style="background-color: #A0A000; color: #0000FF; padding-left: 8px; font-family: Arial, sans-serif;">
   CONTENUTO 1 
We will rise again !


 </div>
 <div style="background-color: #A3A; color: #FFF; text-align: center; font-family: Courier New, monospace;">
   CONTENUTO 2 | Vai al thread
Ritorneremo !
&#38;nbsp; Ritorneremo !
 </div>
 <div style="background-color: aqua; color: red; padding-left: 8px; font-family: Impact, sans-serif;">

   CONTENUTO 3


 </div>
 <div style="background-color: #FFA000; color: #0000FF; padding-left: 8px; font-family: Times New Roman;">
   CONTENUTO 4 

We will rise again !
 </div>

</div>


</body>
</html>

IExplorer vuole overflow: hidden; al DIV contenitore div id="box"
altrimenti rileva il valore di offsetHeight del DIV come espanso.
Oppure, si può indicare il Valore fisso nello SCRIPT sum > 200

**vale_ron** · 15-03-2009, 01:37

Grazie! Sembra essere perfetto! Non mi sarei mai aspettato una soluzione così efficace in così poco tempo...

**Straystudios** · 15-03-2009, 14:53

Originariamente inviato da vale_ron
Non conosco quasi per nulla il JavaScript...

Allora dovevo precisare che per non avere più l' avviso che salta fuori con le misure, devi eliminare la riga:

    alert(sum);

o commentarla   //alert(sum);
l' ho inserita a scopo dimostrativo, evidentemente.

Il rilevamento si adatta perfettamente ad un contenuto dinamico, cioè a un contenuto/testo il cui spazio occupato non possiamo prevedere, e che fa espandere il singolo DIV; quella che viene rilevata con   .offsetHeight   è la dimensione finale del DIV specifico.
Il testo può crescere/diminuire per esigenze di redazione, perché editato nell' HTML direttamente o estrapolato da un Database in aggiornamento, ma nell' esempio dipende anche dal font-size in pixel che l' utente ha selezionato di default sul browser.
Può avvenire che IExplorer ti dia una diversa visualizzazione che FireFox, ad esempio.

Quindi nella pratica sarebbe il caso di specificare il font-size e un font-family comune ai S.O. Windows e MAC-OS.

Come pure Xinod, non sono ancora convinto se la tua lista si dovrà sviluppare in senso orizzontale o verticale; l' esempio è per il verticale, ma è facilmente "rigirabile".

Compatibilità sui diversi tipi di Browser.
offsetHeight e offsetWidth benché poco conosciute, sono proprietà JS che esistevano già su IE 5.5, dal 2000 quindi, e sono comuni a tutti i browser in uso; ti ci puoi affidare tranquillamente.
La cross-browser compatibility è un aspetto importante da considerare, quando si elabora uno script.

Discussione: Nascondere elementi se superano la dimesione del box contenitore

Strumenti discussione

Ricerca discussione

Visualizza

Nascondere elementi se superano la dimesione del box contenitore

offsetWidth offsetHeight

Permessi di invio