problema con ritardo dropdown

**alx17** · 06-12-2012, 13:00

Salve a tutti.

Sono un principiante in html e sto muovendo i miei primissimi passi in js.
Mi sto esercitando con un menu effetto dropdown del quale vorrei ritardare la comparsa e la scomparsa della “tendina”.

Dopo tanti consigli raccolti sul web, mi sono deciso ad utilizzare jquery perché, secondo come se ne parla, sembra adatto a chi come me non ha dimestichezza con js.
Ho scaricato la library (ultima versione) dal sito di jquery e ho inserito nella pagina html lo script per collegare la pagina alla library.

Poi ho cercato nello stesso jquery degli script semplici (per poterli almeno comprenderli in parte) che facessero al caso mio. Il tutto però non funziona.
Dopo tante parole, ecco il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prova con jQuery</title>
<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="prova_style.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="prove.js" type="text/javascript"></script>
</head>

<body>

<script type="text/javascript">
$('#hormenu').hover(function(){
$('#hormenu').delay(10000).fadeIn('slow');
});
</script>

<div id="hormenu">

<ul>
[*]Home
<ul> [*]Homepage[*]a[*]b[*]c[*]d[*]e[/list]

[*]Offerte
<ul> [*]a[*]b[*]c[/list]

[/list]

</div>

</body>
</html>

Sarò grato a chiunque vorrà aiutarmi, soprattutto perché sono tre giorni (e svariati script tentati) che non ne vengo a capo.

Grazie mille in anticipo

Alx17

**cavicchiandrea** · 06-12-2012, 13:26

Dopo tanti consigli raccolti sul web, mi sono deciso ad utilizzare jquery perché, secondo come se ne parla, sembra adatto a chi come me non ha dimestichezza con js.
Assolutamente vero il contrario, jquery va usato quando si conosce js, se non sai come funziona un linguaggio come fai ad utilizzare uno strumento

codice:

<script type="text/javascript">
$('#hormenu').hover(function(){
setTimeout(function(){$('#hormenu').fadeIn('slow')},10000);
});
</script>

Consiglio, studiati almeno le basi di js e bene jquery

**alx17** · 06-12-2012, 15:03

Ciao e grazie per il tuo aiuto.

In effetti ho cominciato ieri con il corso base di js, proprio su questo sito, ma penso che ci vorrà qualche giorno in più per cominciare a capirci veramente...

Ho inserito lo script che mi hai fornito (anche se profano, dopo tante ricerche la funzione "setTimeout" era sembrata la soluzione più ovvia anche a me, ma purtroppo con scarsi risultati) ma la cosa continua a non funzionare.

Per sicurezza ho riscaricato la library di jquery, salvandola nuovamente con il suo nome originale (ovvero "jquery-1.8.3.js") modificando appropriatamente il link ad essa nell'html, ma niente.

Può essere che l'errore sia nella posizione dello script nella pagina, magari devo metterlo fra i tag head o all'interno del tag "hormenu" o magari produrlo in un file esterno al quale poi linkare la pagina html...???

Nel primo post, ho purtroppo omesso di dire che alla pagina è associato anche un css dove ho definito lo stile del menu a comparsa.

Di seguito l’html modificato con il tuo script e il css abbinato:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prova con jQuery</title>
<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="prova_style.css" />
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="prove.js" type="text/javascript"></script>
</head>

<body>

<script type="text/javascript">
$('#hormenu').hover(function(){
setTimeout(function(){$('#hormenu').fadeIn('slow') },10000);
});
</script>

<div id="hormenu">

<ul>
[*]Home
<ul> [*]Homepage[*]a[*]b[*]c[*]d[*]e[/list]

[*]Offerte
<ul> [*]a[*]b[*]c[/list]

[/list]

</div>

</body>
</html>

/* inizio css hormenu*/

div#hormenu {
color : #FFFFFF;
font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
width: 860px;
float: left;
margin-top: 15px;
padding: 0;
background: #336600;
}

div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

div#hormenu li {
width:286px;
float:left;
margin: 0;
padding: 0;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
color:#FFFFFF;
line-height:20px;
}

div#hormenu a {
display: block;
padding: 5px;
color: #FFFFFF;
text-decoration: none;
text-shadow: 2px 2px 2px #333;
}

div#hormenu a:hover {
background-color: #336600;
color: #FFFFFF;
text-decoration: underline;
}

div#hormenu li ul {display: none}

div#hormenu li:hover ul {
font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif;
display: block;
position: absolute;
z-index:1;
width:180px;
padding: 0;
margin: 0 0 0 50px;
background: #336600;
border-bottom: 1px solid silver;
}

div#hormenu li li {
border: none;
width: 180px;
}

div#hormenu li li a {padding: 2px 2px 2px 10px;}

/* fine css hormenu*/

Grazie ancora.

alx17

**cavicchiandrea** · 06-12-2012, 15:07

codice:

<script type="text/javascript">
$(function(){
$('#hormenu').hover(function(){
setTimeout(function(){$('#hormenu').fadeIn('slow')},10000);
});
})
</script>

La fretta devi racchiudere tutto nel onload jquery $(function(){})

P.S. quando posti racchiudi il codice usando il tasti [code].....[/ code]

**alx17** · 06-12-2012, 15:27

Fatto...,e purtroppo ancora niente...
Ho anche controllato che sul mio browser (mozilla) js fosse attivato e sembra tutto in ordine....

Riposto il codice con lo script che mi hai appena trasmesso:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Prova con jQuery</title> <link rel="stylesheet" href="stile.css" type="text/css" media="screen" /> <link type="text/css" rel="stylesheet" href="prova_style.css" /> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script src="prove.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(function(){ $('#hormenu').hover(function(){ setTimeout(function(){$('#hormenu').fadeIn('slow')},10000); }); }) </script> <div id="hormenu">  <ul>[*]Home <ul>[*]Homepage[*]a[*]b[*]c[*]d[*]e[/list][*]Offerte <ul>[*]a[*]b[*]c[/list][/list]</div> </body> </html>

Aspetto speranzoso tue notizie..

alx17

**RoTeam** · 06-12-2012, 15:48

Volevi qualcosa di simile?

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prova con jQuery</title>
<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="prova_style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>

<script type="text/javascript">
$(document).ready(function(){
    $('#hormenu li').hover(function(){
        $(this).find('ul').stop(true);
        $(this).find('ul').animate({'height':'100px'},500);
    }, function(){
         $(this).find('ul').animate({'height':'0px'},500);
    });
});
</script>


<div id="hormenu"> 

<ul> 
[*]Home
<ul> [*]Homepage[*]a[*]b[*]c[*]d[*]e[/list]
 
[*]Offerte
<ul> [*]a[*]b[*]c[/list]
 
[/list]

</div>

</body>
</html>

<style>
    /* inizio css hormenu*/

div#hormenu {
color : #FFFFFF;
font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
width: 860px; 
float: left; 
margin-top: 15px; 
padding: 0;
background: #336600;
}

div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

div#hormenu li {
width:286px;
float:left;
margin: 0;
padding: 0;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
color:#FFFFFF;
}

div#hormenu a {
display: block;
padding: 5px;
color: #FFFFFF;
text-decoration: none;
text-shadow: 2px 2px 2px #333;
}

div#hormenu a:hover {
background-color: #336600;
color: #FFFFFF;
text-decoration: underline;
}

div#hormenu li ul {
    font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif;
display: block;
position: absolute;
z-index:1;
padding: 0;
width:180px;
margin: 0 0 0 50px;
background: #336600;
border-bottom: 1px solid silver;
 height:0px;
}

div#hormenu li li {
border: none;
width: 180px;
}

div#hormenu li li a {padding: 2px 2px 2px 10px;}

/* fine css hormenu*/
</style>

**cavicchiandrea** · 06-12-2012, 15:50

Sposta lo script dentro il tag <head>....script....</head> se non funziona posta un link ad una tua pagina demo pubblica.

P.S. Non è che per caso usi un qualche cms?

**alx17** · 06-12-2012, 16:35

Ciao a entrambi.

Ho spostato, come scrive Andrea, lo script all'interno dell'head ma continua a non funzionare.
Non utilizzo nessun cms ma un semplice editor testuale.

Nel frattempo sto aprendo un dominio per provare il tutto online.

La tua soluzione, Ro Team, funziona bene.
Quindi, questo potrebbe significare che il problema era nel link alla library (visto che è stato cambiando a favore della library online)…??

L’unico problema di questo script, invece, è che prevede un altezza fissa per la tendina, determinata da {'height':'100px'}.

Essendo che non tutti gli ul del menu avranno la stessa altezza (alcuni avranno più link e altri meno), non c’è forse un modo per far adattare “height” alla lunghezza della tendina..???

Grazie a entrambi per il vostro prezioso aiuto.

alx17

**RoTeam** · 06-12-2012, 17:41

Originariamente inviato da alx17
Ciao a entrambi.

Ho spostato, come scrive Andrea, lo script all'interno dell'head ma continua a non funzionare.
Non utilizzo nessun cms ma un semplice editor testuale.

Nel frattempo sto aprendo un dominio per provare il tutto online.

La tua soluzione, Ro Team, funziona bene.
Quindi, questo potrebbe significare che il problema era nel link alla library (visto che è stato cambiando a favore della library online)…??

L’unico problema di questo script, invece, è che prevede un altezza fissa per la tendina, determinata da {'height':'100px'}.

Essendo che non tutti gli ul del menu avranno la stessa altezza (alcuni avranno più link e altri meno), non c’è forse un modo per far adattare “height” alla lunghezza della tendina..???

Grazie a entrambi per il vostro prezioso aiuto.

alx17

Sostituisci la parte compresa fra i tag script con questo e dovrebbe andare con tutti senza definire un'altezza predefinita

codice:

$(document).ready(function(){
    $('#hormenu li').hover(function(){
        var i = $(this).find('ul');
        var hb = i.height();
        i.stop(true);
        var h = i.css('height','auto').height();
        i.css('height',hb);
        i.animate({'height':h},500);
    }, function(){
        $(this).find('ul').stop();
         $(this).find('ul').animate({'height':'0px'},500);
    });
});

A me funziona perfettamente

**alx17** · 06-12-2012, 18:14

Funziona..!!!!!!

Grazie mille per il tuo aiuto Ro Team.

Mi sei stato veramente utile ed ho capito soprattutto che il problema era nel file jquery.js.
Linkandomi alla versione online anche gli altri script che avevo scaricato funzionano.

Grazia ancora.

alx17

Discussione: problema con ritardo dropdown

Strumenti discussione

Ricerca discussione

Visualizza

problema con ritardo dropdown

Permessi di invio