Códigos jQuery, CSS, HTML para páginas web

Entradas

ventana modal con html, css y jQuery

Intentaré explicar cómo crear, sólo con CSS , HTML y un poco de jQuery , un tipo de esas ventanitas que no nos permiten pinchar fuera de ellas hasta que las cerremos. Con que hechéis un vistazo al post anterior ya está más de la mitad del trabajo hecho. En dicho post ya expliqué cómo crear la ventana (un div oculto), posicionarla y darle forma con css y abrirla y cerrarla con jQuery, pero, ¿cómo evitar que se pinche fuera de ella?. Lo más sencillo que he encontrado para ello es lo siguiente: (la ventana a abrir será el formulario de correo que comenté en el post anterior el cual os aconsejo tenerlo abierto) Colocar el siguiente div en el html de nuestra página: <div id="fondoformulario"></div> cuyo css será el siguiente: #fondoformulario { position:absolute; top:0px; left:0px; width:100%; /*ocupará todo el ancho de nuestra página*/ height:1860px; /*le d...

Abrir y cerrar formulario de correo en ventana tipo popup con jquery

Este post está relacionado con el anterior sobre enviar formulario de correo en segundo plano , en este voy a hablar sobre como abrir un div que contiene un formulario de correo, tipo popup o, tal vez mejor, ventana modal . En esta página sobre taller del automóvil tengo un formulario de correo oculto que se muestra al pinchar en un enlace. Intento minimizar el scroll de la página para mostrar la información. Me parece que es mejor mostrar toda la información posible moviendo la barra del scroll lo menos posible. Y, en este caso, me parecía que incluir un formulario visible recargaría demasiado la página. Voy a intentar explicar cómo mostrar y ocultar una ventana, que contiene un formulario de correo, usando jQuery . Primero, el código CSS: /*damos forma y posición al div formulario que, por defecto, estará oculto*/ #formulario{ display:none; position:absolute; top: 50%; ...

Formulario de correo y su envío mediante jQuery y PHP en segundo plano.

Tanto en esta página de excavaciones y movimientos de tierra , como en esta otra de mecánica de coches , existen sendos formularios para el envío de un correo desde la página web. La única diferencia es que en la segunda, el formulario no está visible (por falta de espacio) y hay que abrirlo mediante el enlace (esto está explicado en este otro post ). Es bueno tener un formulario para el envío de correo ya que facilita las cosas al posible cliente (que puede no tener un cliente de correo instalado, por ejemplo). En este post voy a tratar de explicar cómo hacer un formulario de correo sencillo y, en segundo plano , tratarlo con jQuery y enviarlo con PHP . Lo normal es que, al enviar directamente el contenido del formulario al archivo PHP que lo procesa y envía, se abra una ventana en blanco. Si lo enviamos con el método que voy a explicar a continuación, no se abrirá dicha ventana. Lo primero el formulario en HTML: <form id="myForm" acti...

Leer variables enviadas mediante los métodos POST y GET combinando PHP, javascript y jQuery

En este post voy a tratar de explicar como enviar y leer variables con los métodos $_POST y $_GET de PHP . Antes de nada deciros que tiene relación con los posts: problemas que surgen al recargar div contenedor y código PHP y javascript para redireccionar a otra página . Podéis echarle un vistazo si queréis. También está relacionado con la página del taller de mecánica que le he hecho a un amigo. Bueno, vamos al grano. En un post anterior ya comenté como, mediante el método load() de jQuery , enviábamos una variable a una página y la recogíamos con el método $_POST en PHP. Ahora voy a comentar como enviar una variable con el método $_GET y recogerla usando javascript . La siguiente línea, perteneciente al código que os comentaba del anterior post , nos puede ayudar: <?php if (!isset($_POST['primera']))echo "<SCRIPT>location.href='index.html?pag=2';</SCRIPT>"; ?> Como podéis ver, el anterior código c...

Leer un archivo XML con jQuery y javascript y modificar un HTML con su contenido

Una manera muy interesante y fácil de modificar los textos de tu página web. Si, por ejemplo, tenemos una página donde cambiamos a menudo unas noticias que tenemos en el margen derecho, podríamos tener un código HTML como este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Manejar archivo XML</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="leerxml.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Titulo de la página</h1> <div id="derecha"> <div class="noticias"> <div class="prim...

Código php y javascript para redireccionar a otra página.

Este post es para dar solución a uno de los problemas planteados en " Problemas que pueden surgir al recargar div contenedor ". Así que os aconsejo que le hechéis un vistazo para saber de qué va la cosa. Esta puede ser una de las soluciones. Lo primero que tenemos que hacer es guardar en formato PHP esas páginas que queremos recargar dentro de nuestro div, ya que usaremos dicho lenguaje para solucionar el problema. Antes del código html tenemos que incluir el siguiente código: <?php if (!isset($_POST['primera'])) echo "<SCRIPT>location.href='index.html';</SCRIPT>"; if (isset($_POST['primera'])){ if ($_POST['primera']!='no') {echo "<SCRIPT>location.href='index.html';</SCRIPT>";} } ?> <y a partir de aquí el código html que queremos mostrar> Explico un poco el código. La primera linea comprueba si no existe ( !isset ) la variable llamada 'primera...

Uso de la función animate de jQuery para la animación de menús

Con la función ' animate ' de jQuery podemos realizar, de forma sencilla, una animación de, por ejemplo, nuestros menús, con unas pocas lineas de código. En esta página podéis ver el ejemplo talleresguadamia . Para realizar el ejemplo tenéis que descargar, e incluir en el 'head' de vuestra página este plugin jquery_plugin_color que extiende la función 'animate' al color. Esto es así porque el 'animate' original de jQuery sólo nos permite animar aquellas propiedades css numéricas. Como, por ejemplo, el padding, margin, width, etc... Añadiendo este plugin, también el color. El código del ejemplo es el siguiente: function animaenlaces(){ enlace=$('a.but'); //recogemos en la variable qué enlaces queremos animar $color=enlace.css('color'); //en la variable '$color' guardo el color original enlace.hover(function() { //ejecutamos la función cuando el puntero esté...