Archive for category: Tutoriales

25Jul 2009 9 Comments */?>

Como crear una página de lanzamiento con PHP, AJAX y JQuery

Categories: JQuery, MySQL, PHP, Tutoriales - Tags: ,

En este tutorial les voy a enseñar como hacer una página de lanzamiento como la que en ocasiones nos encontramos cuando visitamos una web sin estrenar con su cuenta atras correspondiente. Además de la cuenta atras más adelante vamos a añadir un pequeño formulario de  contácto con AJAX para añadir emails a una base de datos y asi poder mantener a los visitantes actualizados.

cuenta-atras

Para empezar vamos a necesitar un plugin de JQuery muy completo llamado epiClock que va a ser el encargado de realizar la cuenta atras. La verdad que vale la pena echar una ojeada a la página de epiClock , ya que además de cuentas atras podemos crear todo tipo de relojes, cronometros , etc.

1
2
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>

Si queremos por ejemplo hacer una cuenta atras hasta el 2012 es tan facil como poner:

1
2
3
4
$(document).ready(function(){
//espero que cargue el DOM y llamo al plugin
  j jQuery('#reloj').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN); 
});

Como pueden ver le paso tres parametros a .epiclock :

  • mode: El modo de cuenta atras (countdown).
  • format: El formato que quiero que en este caso es ‘<sup>dias</sup>’ para los dias y así susecivamente.
  • target: El tiempo final del contador pasado en modo de fecha.

Y por último inicio el contador con .clocks(EC_RUN)

Una ves que tengo el reloj definido voy a crear el código HTML necesario para que funcione:

1
2
3
4
5
6
7
8
9
<div id="header">
  <h3>Como crear una P&aacute;gina de lanzamiento. M&aacute;s tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
<div id="wrapper">
           <div id="cuadro2" class="rounded">
               <div id="reloj" class="count_down"></div>
           </div>
 
</div>

Y le aplico el siguiente estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#header{
 width:800px;
 height:80px; 
 text-align:center;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 } 
#cuadro2{
	padding:15px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
 
}
#wrapper{
	width:440px;
	margin:0 auto;
}
.count_down{
	padding: 3px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:38px;
	font-weight:bold;
	color:#222;
}
 
.count_down sup{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	padding:0px 10px 0 0;
	font-weight:normal;
}

Como toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog.

 $('.rounded').corners('transparent');

Y con eso tendriamos nuestra cuentra atras particular. En el próximo tutorial les explico como crear un formulario con AJAX para guardar todos los emails en una base de datos de forma que podamos mantener actualizados con noticias a nuestros seguidores.
Ver Ejemplo Online
Descargar código

18Jul 2009 26 Comments */?>

JQuery.ScrollTo , Olvidate de usar anchors aburridos

Categories: JQuery, Tutoriales - Tags:

Hoy les traigo otro plugin de JQuery que hace la nevagación un poco más facil . Con JQuery.ScrollTo podemos darle movimiento a una ventana o a un anchor por ejemplo. Como el nombre indica básicamente lo que hace es un scroll ( como cuando usamos la ruedita del mouse) tanto en sentido horizontal como vertical o ambos a la vez.

Esto es útil cuando tenemos una página bastante larga y no queremos que los clientes se cansen de ir un lado para otro. Hace unos meses un cliente me pidio una web para mostrar sus productos y queria algo muy sencillo donde todos los productos aparecieran en la página principal. Cuando empeze con la web me di cuenta que tardaba mucho en ir de un lado a otro así que fui poniendo scrolls en diferentes partes de la web para subir al top y despues cree un menu para que haga scroll a los diferentes tipos de productos. Si quieren ver de lo que hablo pueden visitar la web de Photo Momentos.

Para usar este plugin como siempre debemos usar la última versión de JQuery y el plugin JQuery.Scroll

1
2
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

Para realizar un scroll tan solo debemos crear un link o anchor apuntando al id del elemento destino:

1
<a href="javascript:$.scrollTo('#destino',800);">Destino</a>

Digamos que el destino seria algo así:

1
<div id="destino">..... Final de la web.....</div>

Más simple imposible…
JQuery.ScrollTo tiene un montón más de opciones como duración, funciones callback , etc… pero lo básico ya esta explicado.
Un saludo a todos y dejen comentarios

Ver Ejemplo
Descargar Ejemplo

Update: Por si quieren probar otra solución – scroll con jquery sin plugins
18Jul 2009 20 Comments */?>

Como seleccionar / deseleccionar todos los checkbox con JQuery

Categories: JQuery, Tutoriales - Tags:

Les voy a enseñar como crear un boton para seleccionar o deseleccionar todos los checkbox de un formulario al mismo tiempo con una sola linea de JQuery. En el último programa que realize necesite crear diferentes menus desplegables con diferentes opciones para así poder realizar búsquedas más detalladas . Pueden echar un vistazo a la demo si quieren ver como funciona (user: demo pass:demo).

checkall

En esta ocasión disponía de diferentes DIVS con sus respectivas opciones por lo que cada botón debe responder a los checkboxs de cada DIV. Partiendo del ejemplo de la foto, si tenemos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="tipos_trabajo" style="display: block;">
      <form id="search_form" action="busquedas.php" accept-charset="utf-8" method="post">
             //Boton que se encarga de seleccionar/ deseleccionar los checkbox
            <input id="checkAll" onclick="checkTodos(this.id,'tipos_trabajo');" name="checkAll" type="checkbox" />
                <ul>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="1" name="tipotrabajo[]"/>
                           Caldereria
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="2" name="tipotrabajo[]"/>
                           Electricidad
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="3" name="tipotrabajo[]"/>
                           Redes
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="10" name="tipotrabajo[]"/>
                           Carpinteria
                  </li>
                  <li name="tipotrabajo">
                           <input class="check" type="checkbox" value="15" name="tipotrabajo[]"/>
                           Mecánica
                  </li>
             </ul>
      </form>
</div>

Como pueden ver se trata de un simple DIV con id=”tipos_trabajo” el cual contiene un formulario con una serie de checkboxs ordenados dentro de una lista .
El primer checkbox va a ser el encargado de marcar o desmarcar el resto y para ello llama en el evento onClick a la función “checkTodos” pasandole dos atributos. Primero le pasa su propio id que en este caso es “checkAll” y el id de el DIV contenedor que es “tipos_trabajos” . Si en ves de un DIV tenemos todos los checkbox dentro de una tabla este último dato seria el id de la tabla.

Una ves que tenemos el código HTML pasemos a ver el codigo javascript.

busquedas.js

1
2
3
4
5
function checkTodos (id,pID) {
 
				   $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked')); 
 
   			}

Como pueden ver la función checkTodos tan solo necesita una linea de JQuery que paso a explicar a continuación:

$( “#” + pID + ” :checkbox”) Selecciona todos los elementos checkbox dentro del DIV con id= “tipos_trabajo”.

.attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Primero comprueba si el checkbox con id “checkAll” esta checked y devuelve true o false segun el estado. Por lo que si devuelve true asigna el atributo checked, y si devuelve false no lo asigna.

$( “#” + pID + ” :checkbox”).attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Por lo que resumiendo según el estado del checkbox con id=”checkAll” al hacer click , se le asigna el atributo checked o no a todos los checkbox dentro del DIV con id= “tipos_trabajos”.

Como pueden ver es muy simple de hacer y se usa muy poco código.

Ver ejemplo online
Descargar Ejemplo

12Jul 2009 0 Comments */?>

Ejemplo de estilo para tu contador del blog

Categories: Tutoriales - Tags: , ,

En este tutorial les voy a mostrar como crear un simple contador de comentarios o comments counter como se suele decir en ingles. Con un HTML muy básico y un poco de CSS vas a poder dar un nuevo aire a tu blog.
counter

Estructura:

La estructua HTML es muy simple.

counter2

Tenemos un DIV principal que incluye un elemento <span>( con la clase “count”) que es donde se va a mostrar el número de comentarios, y más abajo un texto con la palabra “comments”. El código HTML seria el siguiente:

1
2
3
4
<div class="bubble">
<span class="count">... contador ...</span>
comments
</div>

Para el globo usamos una imagen que vamos a aplicar como fondo del DIV

bubble

El código CSS que aplicamos es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.bubble{
background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;
}
.bubble .count{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;
}
//Añadimos un poco más de código para el texto
h1, p{margin:0; padding:0; border:0;}
p{
	font-size:16px;
	color:#666666;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
	margin-bottom:8px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
}

Y ya esta! con eso tendriamos todo.
Como siempre acá tienen el EJEMPLO ONLINE

Descargar Ejemplo

09Jul 2009 16 Comments */?>

Como redondear las esquinas de un DIV con jquery.corners

Categories: JQuery, Tutoriales - Tags: ,

Si hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.

rounded

Hay infinidad de plugins que cumplen esta función pero a mi el que más me gusta es JQuery Corners.

Para utilizarlo como siempre debemos utilizar la ultima version de JQuery y del plugin.

1
2
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>

Con esto tendriamos el plugin cargado. En este ejemplo voy a hacer que tanto el div como la foto tengan tengan la clase “rounded” por lo que para aplicar el plugin hago lo siguiente:

1
2
3
4
5
6
7
<script type="text/javascript">
 
$(document).ready(function(){
//espero que cargue el DOM y aplico el plugin a todos los elemento con clase rounded
	$('.rounded').corners();
		});
</script>

Tan solo nos quedaria añadir el código HTML :

1
2
3
4
5
<div id="wrapper">
<div id="cuadro1" class="rounded"> Div con gif degradado de fondo </div>
 
<img id="cuadro2" class="rounded" src="images/gatito.jpg"/>  Marco para foto redondo 
</div>

Y aplicarle un estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#cuadro1{
	background:#D7E9F3 url(images/intro2.gif) repeat-x scroll left top;
	margin-bottom:50px;
	padding:30px 80px;
}
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
	margin-right:50px;
}
#wrapper{
	width:370px;
	margin:0 auto;
}
</style>

Otra cosa a tener en cuenta es que podemos pasarle opciones como por ejemplo un radio de 8px y que sea transparente (en caso de tener imagenes o hover states):

1
$('.rounded').corners("8px transparent");

Pueden ver el ejemplo terminado en esta página.

Descargar Ejemplo

ACTUALIZACIÓN
Como menciona Jereny en IE no redondea las imágenes. Si quieren hacer un marco para la imagen redondeado lo pueden hacer de la siguiente forma:

1
<div id="cuadro2" class="rounded"><img  src="images/gatito.jpg"/></div>  Marco para foto redondo

El código CSS varia en cuanto a IE como Firefox

1
2
3
4
5
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
        border:1px solid #CCCCCC;  <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde
	}
05Jul 2009 20 Comments */?>

Como enviar un formulario via AJAX con JQuery

Categories: JQuery, Tutoriales - Tags: , , ,

Hoy en dia y gracias a JQuery cualquiera puede implementar AJAX en sus webs para hacerlas más dinámicas. Hoy debido a todo el tema de la fiebre porcina cierran los boliches así que ya que me quedo en casa aprovecho y les cuento como poder usar el plugin jquery.forms para enviar un formulario mediante AJAX de una forma super sencilla.

Para empezar necesitamos un formulario. Vamos a usar de ejemplo un formulario de contácto sencillo:

1
2
3
4
5
<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <label>Nombre:</label> <input type="text" name="name" /> 
    <label>Mensaje:</label> <textarea name="mensaje"></textarea> 
    <input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

Una vez tengamos el codigo HTML del formulario tan solo debemos añadir el plugin y ejecutarlo una vez el DOM este cargado añadiendo las opciones que creamos convenientes.
Hay diferentes gif animados para ajax, si quieren alguno diferente echen un vistazo al último artículo que escribí.
Para consultar las diferente opciones de jquery.form visiten su web.

index.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script src="js/jquery-latest.js" type="text/javascript"></script>
 <script src="js/jquery.form.js" type="text/javascript"></script> 
 
<script type="text/javascript">
 
        // esperamos que el DOM cargue
        $(document).ready(function() { 
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#myForm').ajaxForm(opciones) ; 
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $(#loader_gif).fadeIn("slow"); //muestro el loader de ajax
             };
             function mostrarRespuesta (responseText){
                           alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
                          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
                          $("#ajax_loader").append("<br>Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
             };
 
        }); 
 
</script>

Este ejemplo es muy simple. El action del formulario apunta a contacto.php y es ahi donde hay que poner las funciones que queramos, como por ejemplo que nos envie un mail con el mensaje y nombre que aparece en el formulario. Si no estuvieramos usando JQuery y el plugin de jquery.form, al hacer click en “Enviar” nuestro navegador cargaria la página contacto.php como suele pasar normalmente. En este caso gracias al AJAX el contenido del formulario se enviara mediante la variable $_POST a la página contacto.php de una forma invisible al usuario y una vez que se envie correctamente se va a ejecutar este simple código:

contacto.php:

1
2
3
4
5
<?php
if($_POST['mensaje'] != ''){
	echo $_POST['mensaje'];
}
?>

Lo que hacemos aca es un echo del mensaje enviado que aunque para el usuario pasa inadvertido , podremos mostrarlo con “responseText”.

Ver ejemplo
Descargar código

Si quieren ver un ejemplo de un formulario de contacto con AJAX, pueden probar este.

Espero que haya servido de ayuda. Un saludo a todos!!!

10Jun 2009 61 Comments */?>

Añadir campos a un formulario dinámicamente con JQuery

Categories: JQuery, Tutoriales - Tags: ,

formulario_dinamico

En uno de mis ultimos proyectos tuve la necesidad de crear un formulario donde el cliente pudiera añadir campos de texto a medida que lo fuera necesitando, y a su vez quitarlos si ya no le eran necesarios.

Esto se puede realizar de una forma muy sencilla con JQuery. Suponiendo que tenemos el siguiente código HTML

<div id="stylized" class="myform" style="margin:20px auto;">
<form id="form" name="form" method="post" action="index.php">
 
<div id="material_comprado"  > </div>  
 
<h1>Compra de material</h1>
<p>Si es necesario a&ntilde;ade el material a comprar</p>
<div id="div_1">
<label>Material de compra
<span class="small">A&ntilde;ade los materiales</span>
</label>
 
    <input  type="text"  name="materiales[]" id="materiales1" style="width:200px;" /> <span style="float:left;padding: 8px 0px 8px 8px;">Cantidad:</span> <input type="text"   name="cantidadmateriales[]"  style="width:40px;" /><input class="bt_plus" id="1" type="button" value="+" /><div class="error_form"></div>
</div>
 
 
 
 
<button type="submit" class="boton">Save</button>
<div class="spacer"></div>
</form>
</div>

Con este código y añadiendole un poco de estilo tendriamos un pequeño formulario como el que muestra la imagen.

Ahora solo queda añadir unas cuantas lineas de JQuery para que funciones:

$(document).ready(function() {
	//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
		$(".bt_plus").each(function (el){
			$(this).bind("click",addField);
									 });
							});
 
 
function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.
 
var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));
 
// Genero el nuevo numero id
var newID = (clickID+1);
 
// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);
 
//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);
 
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id",'materiales'+newID).val('');
 
//Borro el valor del segundo campo input(este caso es el campo de cantidad)
$newClone.children("input").eq(1).val('');
 
//Asigno nuevo id al boton
$newClone.children("input").eq(2).attr("id",newID)
 
//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));
 
//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);
 
//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);					
 
}
 
 
function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();
 
}

Como siempre debemos añadir la ultima version de JQuery y luego nuestro script.

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.addfield.js"></script>

Este mismo ejemplo se puede aplicar en cualquier otro lado, solo es cuestion de jugar un poco. Espero que les haya gustado. Saludoss

Ejemplo Online
Descargar Ejemplo