Newsgroup: it.comp.lang.javascript
Titolo: Impostare altezza elemento tramite jQuery

Salve, ho un problema che non riesco a risolvere. O perlomeno, sono
indeciso su come risolverlo...
Sto realizzando un sito dinamico dove ho una serie di menu laterali a
comparsa realizzati con i soliti elementi ul e li annidati fra loro.
Usando jQuery creo gli effetti di animazione con mouseenter/mouseout, ma
il problema è che devo specificare un'altezza prestabilita in un'area
dove gli elementi sono dinamici.
Ogni voce ha un'altezza fissa di 32px quindi è facile avere il totale.
Secondo voi qual'è il metodo migliore per ottenere questo valore e
passarlo a jQuery? 
In questo esempio uso 192px come valore perchè l'elemento ha 6 voci:
$(document).ready(function() {
//mouseover su menu di primo livello
$("ul.leftMenu li.has-sub").mouseover(function(){
$(this).find('.subItem').stop().animate({height:'192px',opacity:'1'},{
queue:false, duration:1500, easing: 'easeOutBounce'})
});
//quando si verifica il mouse out ...
$("ul.leftMenu li.has-sub").mouseout(function(){
$(this).find('.subItem').stop().animate({height:'0px',opacity:'0'},{
queue:false, duration:1600, easing: 'easeOutBounce'})
});
Grazie
Max
-- 
http://www.maxori.it
L'Arte è la capacità di fare cose di nessun valore
e di riuscire a venderle
F. Zappa

 passarlo a jQuery?
Scusa la domanda stupida, ma il contenitore non è un block element? 
Perché dovrebbe espandersi automaticamente per contenere il contenuto ...
Non è che devi solo sistemare la parte html / css, o settare un 
display:block al contenitore?

nli = $('#id=ul li').length;
hn = (32 * nli);
hpx = h + 'px';
$(this).find('.subItem').stop().animate({height:hpx,opacity:'1'}...ecc..

 display:block al contenitore?
Ciao Cristiano,
il problema nasce dal tipo di animazione applicato, che prevede un
effetto di "easing" nell'apparizione del submenu, una specie di rimbalzo
sia di dimensioni che di trasparenza e necessita di conoscere l'altezza
del blocco per essere visualizzato bene.
So che � un eccesso di raffinatezza (personalmente lo trovo infatti
eccessivo), ma per il progetto in questione ci vogliono anche queste
cose visto il target a cui si rivolge...
Max
-- 
http://www.maxori.it
L'Arte � la capacit� di fare cose di nessun valore


 wrote:

Ciao Oreste,
grazie per l'aiuto, avevo gi� fatto una cosa del genere.
L'unica cosa � che di menu e sottomenu ce ne sono vari, quindi devo
trovare il modo di passare questo valore per ogni elenco.
Max
-- 
http://www.maxori.it
L'Arte � la capacit� di fare cose di nessun valore


I sottomenu non hanno un id? Se non lo hanno possono essere individuati all'interno di un qualche insieme od elenco che dir si voglia. Posta il codice completo magari si vede una soluzione.

 wrote:

Lo avevano, ma visto che nel sistema che ho usato non servivano, li ho
tolti.
Rimetterli non è un problema, tanto tutto il menu è generato
dinamicamente da queries, basta mettere l'id del record ottenuto.
Attualmente il codice è questo, manca la verifica dell'esistenza dei
submenu, ma è per chiarezza, perciò la classe "has-sub" viene dichiarata
solo se esistono dei sottoelementi:
<ul class="leftMenu">
<?php foreach($locations as $v) { ?>
  <li class="has-sub"><a href="#"><?php echo $v; ?></a>
  <ul class="subItem">
<?php foreach($countries as $country) { ?>
      <li><a href="#"><?php echo $country; ?></a></li>
<?php } ?>
   </ul></li>
<?php } ?>
</ul>
Il codice js:
$(document).ready(function() {
$("ul.leftMenu li.has-sub").mouseover(function(){
$(this).find('.subItem').stop().animate({height:'224px',opacity:'1'},{
queue:false, duration:1500, easing: 'easeOutBounce'})
});
//quando si verifica il mouse out ...
$("ul.leftMenu li.has-sub").mouseout(function(){
$(this).find('.subItem').stop().animate({height:'0px',opacity:'0'},{
queue:false, duration:1600, easing: 'easeOutBounce'})
});
}
Max
-- 
http://www.maxori.it
L'Arte è la capacità di fare cose di nessun valore


prova il seguente:
$("ul.leftMenu li.has-sub").mouseover(function(){
nli = $(this).length;
hn = (32 * nli);
hpx = h + 'px';
$(this).find('.subItem').stop().animate({height:hpx,opacity:'1'},{
si può compattare meglio, ma così è più leggibie

 wrote:

Anche questo non va bene, ma alla fine ci sono arrivato:
$('ul.leftMenu li.has-sub').mouseover(function(){
  nli = $(this).find('.subItem li').length;
  hn = (32 * nli);
  hpx = hn + 'px';
$(this).find('.subItem').stop().animate({height:hpx,opacity:'1'},{
queue:false, duration:1500, easing: 'easeOutBounce'})
});
-- 
