JQuery: visualizzare e nascondere box

**BiancaMcT** · 03-06-2011, 01:02

scusate non so bene dove postare, spero di essere nella sezione giusta =)

sto provando a muovere i primi passi con jQuery, ma non riesco a combinare niente neanche seguendo la guida che si trova in questo sito passo passo. Ho scaricato jquery-1.6.1.min (e non so bene che farci) e l'ho messa all'interno di una cartella con questo file (prova.html):

codice:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>

<style>

#box {
	width:400px;
	height:200px;
	background-color:#CCCCCC;
	border:1px solid #666666;
	display:none;
}

</style>

<script>

function mostra_box () {
	$("#box").show("slow");
}

function nascondi_box () {
	$("#box").hide("slow",function () {
		alert("Animazione conclusa!");
	});
}

</script>

</head>

<body>
Mostra il box  

Mostra il box 



</body>
</html>

dove sbaglio? Cosa posso fare? Grazie

**fermat** · 03-06-2011, 01:09

jquery nn è java, dovevi postare in javascript.

cmq sbagli perchè nn c'è nessuno elemento con id=box.
nelle tue funzioni dici di voler nascondere/mostrare un elemento id=box, ma nella pagina nn c'è.

**alka** · 03-06-2011, 10:06

Java NON è JavaScript.
Sposto la discussione nell'area appropriata.

**charlieroot** · 03-06-2011, 15:19

Quanto detto da fermat + Mostra il box

**Peppe psp** · 03-06-2011, 15:30

questo dovrebbe essere il codice esatto

codice:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>

<style>

#box {
	width:400px;
	height:200px;
	background-color:#CCCCCC;
	border:1px solid #666666;
	display:none;
}

</style>

<script>

function mostra_box () {
	$("#box").show("slow");
}

function nascondi_box () {
	$("#box").hide("slow",function () {
		alert("Animazione conclusa!");
	});
}

</script>

</head>

<body>
Mostra il box  

Mostra il box 
<div id="box">
i contenuti del box da mostrare
</div>



</body>
</html>

**BiancaMcT** · 03-06-2011, 17:20

Grazier per aver spostato il quesito nella sezione giusta, purtroppo ho detto nel primo post che non sapevo dove postare.

Per gli altri.. ho fatto quello che mi avete detto, anzi ho proprio copiato l'intero codice scritto da Peppe, ma quando vado a cliccare sui link mi manda ad una pagina inesistente. Che faccio?

**charlieroot** · 03-06-2011, 17:55

correggi così :

codice:

Mostra il box

La parte coi link..

**rickynewtek** · 04-06-2011, 09:26

mmm siccome sei ai primi passi cerca di fare le cose con "calma" inizia consultando QUI per schiarirti le idee, nella pagina trovi anche l'esempio per far apparire/scomparire un box.

PEr completezza ti posto l'esempio anche qui:

codice:

<script type="text/javascript">
 
$(document).ready(function() {
 
            $(".apri").click(
            function(){
            $("#box").fadeIn("slow");
            });
 
            $(".chiudi").click(
            function(){
            $("#box").fadeOut("slow");
            });
 
    });//FINE DOM
 
</script>

Ovviamente questo è un metodo, e' possibile creare anche un funzione ad hoc per far apparire/scomparire il box, ma questa che ti posto e' di sicuro la via più semplice.

Come vedi la classe "apri" funge da trigger per far scomparire il box, mentre la classe "chiudi" la fa scomparire con fadeOut.

Se hai bisogno di delucidazioni sono qua.

**BiancaMcT** · 04-06-2011, 19:14

grazie per la guidaaa *___*
ne stavo cercando una buona in rete ma non avevo trovato niente che spiegasse in modo decente XD questa è ottima!

**rickynewtek** · 06-06-2011, 10:46

Grazie! se hai bisogno di qualche delucidazione specifica rimango a disposizione!

Discussione: JQuery: visualizzare e nascondere box

Strumenti discussione

Ricerca discussione

Visualizza

[jQuery] primi passi

Moderazione

Permessi di invio