Foros del Web - Ver Mensaje Individual

gitiquitando · #1 (**permalink**) 03/05/2012, 11:29

Buenas tardes,

Llevo intentando un ratito, y no acabo de comprender el porque se limita, es decir :

creo un doctype, script de jquery y creo un formulario con X campos, mi intención es que al cargar la pagina sólo aparezca el buscador básico , pero cuando de al botón avanzado suba el formulario mostrando todos los campos a filtar, además de querer poner opaco el resto del documento.

Con conseguir que clicando dentro del formulario subiera el form me conformaria. Si saco el botón del form funciona si lo coloco dentro , hace el intento, se anima, pero siempre acaba en la misma posición , alguien puede decirme como acutar con un botón desde dentro de un DIV ? pongo el código con el botón fuera, podrán comprobar que funciona correctamente, sin embargo , desde dentro solo realiza el intento.

Alguien puede iluminarme un poco ?

Muchas gracias,

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  margin:5px;
}
</style>
  <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
  
  
    <div class="form">
            <article align="rigth" style="padding:20px">
                    <form action="#" method="Post">
                        <table border="0" align="center">
                            <tr>
 
                                <td>
                                    <label><b>Buscar por texto</b>:</label>
                                    <input type="text" placeholder="Buscar" size="15" />
                                </td>
 
                                <td width="1%"></td>
                                
                                <td>
                                    <label><b>Precio</b>:</label>
 
                                    <select name="min_price">
                                      <option value="" selected="selected">Desde</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
                                
                                    <select name="max_price">
                                      <option value="" selected="selected">Hasta</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
                                </td>
 
                                <td width="1%"></td>
                                
                                <td>
                                    <label><b>Superficie</b>:</label>
 
                                    <select name="min_surface">
                                      <option value="" selected="selected">Desde</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
 
                                    <select name="max_surface">
                                      <option value="" selected="selected">Hasta</option>
                                      <option value="windows">0</option>
                                      <option value="mac">1000</option>
                                      <option value="linux">100000</option>
                                      <option value="otro">1000000</option>
                                    </select>
                                </td>
 
                                <td width="7%"></td>
 
                                <td>
                                    <input type="button" name="Boton" value="Buscar" OnClick="ejecutarBusqueda();">
                                </td>
 
                                <td width="5%"></td>
 
                                <td>
                                    
                                </td>
 
                            </tr>
 
                        </table>
                    </form>  
            </article>
        </div>
    <button id="avanzado" >Avanzado</button>
<script>
$("#avanzado").click(function(){
  $(".form").animate({"top": "+=50px"}, "slow");
});
 
$("#left").click(function(){
  $(".form").animate({"top": "-=50px"}, "slow");
});
 
</script>
 
</body>
</html>