jquery Effects/show

**duezero2** · 04-11-2007, 21:43

Ciao a tutti

ho questo codice

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    
    $("button").click(function () {
      $("p").show("slow");
    });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button>Show it</button>
  <p style="display: none">Hello</p>
</body>
</html>

volevo sapere come far per inserire un campo form con una textarea al posto della scritta hello, è possile?

è inoltre possibile richiamre una pagina esterna sempre al posto della scritta hello?

**Mega69** · 05-11-2007, 00:14

Ne tuo esempio vengono selezionati tutti i tag button e tutti i tag p. Meglio usare degli id univoci.
Per mettere un campo form basta sostituire al tag p un tag form.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    
    $("#show").click(function () {
      $("#campo").show("slow");
    });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button id="#show">Show it</button>
  <form id="campo"><textarea></textarea></form>
</body>
</html>

**duezero2** · 05-11-2007, 22:15

tnx mega cmq l'esempio che hai postato non funziona

questo è funzionate

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  

<script>
  $(document).ready(function(){
    
    $("button").click(function () {
      $("form").show("slow");
    });

  });
  </script>



</head>
<body>
  <button id="#show">Show it</button>
  <form id="campo" style="display: none"><textarea></textarea></form>
</body>
</html>

ma includere un intera pagina esterna è possibile?

**Mega69** · 05-11-2007, 23:22

Scusa, avevo scritto id="#show" al posto di id="show"

Per fare comparire una pagina esterna ( immagino ti stia riferendo ad un iframe ) basta usare questo codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    
    $("#show").click(function () {
      $("#myframe").show("slow");
    });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button id="show">Show it</button>
  <iframe id="myframe" src="http://www.google.it" style="display:none; width:500px; height:200px;" />
</body>
</html>

**duezero2** · 06-11-2007, 22:52

intendevo qualcosa di simile al "include" di php.
nel senso...
potrei usare del codice simile a quello sopra per inserire una tabella, dentro a questa tabella ci metto un po' di tutto form immagini ecc. ma per rendere il codice vorrei che il codice venga caricato solo quando faccio il click e non risieda subito nella pagina.

**Mega69** · 07-11-2007, 12:51

Devi usare ajax. Jquery fornisce delle api a riguardo, è tutto spiegato qui: http://docs.jquery.com/Ajax

Al posto dell'iframe basta che metti un div

codice:

<div id="mybox"></div>

e poi metti al posto di

codice:

    $("#show").click(function () {
      $("#myiframe").show("slow");
    });

questo

codice:

    $("#show").click(function () {
      $.ajax({ 
        url:"/page.htm",
        success: function() {
          $("#mybox").show("slow");
        }
      })
    });

Non sono sicuro che funzioni, ho letto le api velocemente; anche dovesse funzionare ti consiglio di leggerti le api

**dwj** · 07-11-2007, 19:03

Penso che tu debba anche inserire il codice resituito da ajax:

codice:

$("#show").click(function () {
      $.ajax({ 
        url:"/page.htm",
        success: function(html) {
          $(html).appendTo("#mybox");
          $("#mybox").show("slow");
        }
      })
    });

ciao ciao!

PS: con jquery puoi inserire del codice html in un lemento anche scrivendo:

codice:

$("

testo di esempio</p>").appendTo("#mybox");

naturalmente se hai grosse porzioni di codice è preferibile usare una chiamata AJAX anche perché (stranamente) IE nn sempre risponde bene al metodo sopra.

ciao ciao!

**nandonandonando** · 29-11-2007, 22:49

come posso inserire + effetti nella stessa pagina?
cioè se voglio aprire 2 iframe perchè un codice come questo non funziona?

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    
    $("#show").click(function () {
      $("#myframe").show("slow");
    });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button id="show">Show it</button>
  <iframe id="myframe" src="http://www.google.it" style="display:none; width:500px; 

height:200px;" /></iframe>

  <button id="show">Show it</button>
  <iframe id="myframe" src="http://www.google.it" style="display:none; width:500px; 

height:200px;" /></iframe>
</body>
</html>

**Mega69** · 30-11-2007, 00:41

La prima cosa che mi balza agl occhi è che hai usato due elementi con id uguali.
Correggi cosi:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    
    $("#show").click(function () {
      $(".myframe").show("slow");
    });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button id="show">Show it</button>
  <iframe class="myframe" src="http://www.google.it" style="display:none; width:500px; 

height:200px;" /></iframe>

  <button id="show">Show it</button>
  <iframe class="myframe" src="http://www.google.it" style="display:none; width:500px; 

height:200px;" /></iframe>
</body>
</html>

**nandonandonando** · 30-11-2007, 14:04

grazie mega

ma credo di essermi spiegato male

non intendevo aprire più iframe con un click
ho bisogno di due effetti separati:
click sul primo bottone e si apre l'iframe1
click sul secondo bottone si apre l'iframe2

non in sequenza cioè clicco sul secondo bottone e si apre l'iframe2 non devo per forza cliccare il primo

Discussione: jquery Effects/show

Strumenti discussione

Ricerca discussione

Visualizza

jquery Effects/show

Permessi di invio