Archive for category: JQuery

JQuery nightMode Plugin

Categories: JQuery, Plugins - Tags: , ,

Download JQuery nightMode Plugin

/////////////////////////ESPAÑOL //////////////////////

Anoche estaba aburrido y me puse a trabajar en un plugin para JQuery ya que nunca habia echo ninguno . Así nacio nightMode Plugin que es simplemente un script chiquitito que cambia el color de las letras y el fondo de pantalla. Con eso logramos ahorrar un poco de energia apagando algunos pixeles de nuestra pantalla y además nos facilita la lectura. Espero que les guste!!

El color tanto de las letras o el fondo se puede cambiar pasando opciones.

Uso:

1

 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6

 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Tan solo cambiar body por cualquier selector válido

También se puede ejecutar con opciones

1
2
3
4
5

 var options={
      color: '#ffffff',
     background:'#ccc'
 }
 $('body').nightMode(options);

Pueden probar como funciona haciendo click en la lamparita que aparece en la parte superior derecha de mi blog :D

Descargar JQuery nightMode Plugin

////////////////////////ENGLISH/////////////////////////////

JQuery nightMode Plugin its a funny tiny plugin that will allow you to change your background and letter colors for a night mode. Saving energy turning off pixels of your screen and allowing you to have a confortable read .

Letter colors and background can be moddified by options

Ussage:

1

 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6

 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Just change body to any valid selector you wish

Can also be called with options:

1
2
3
4
5

 var options={
      color: '#ffffff',
      background:'#ccc'
 }
 $('body').nightMode(options);

You can try how it works by clicking on the light bulb on the top right corner of my blog :D
Download JQuery nightMode Plugin

Acentos y caracteres especiales con Ajax y JQuery II parte

Categories: JQuery - Tags: ,

Hace un tiempo escribí un post acerca de los acentos y caracteres especiales con AJAX y JQuery que explicaba como salvar este problema en los formularios enviados por AJAX.

El problema es que esta solución no abarca cuando con JQuery hacemos un .load() de información con AJAX y para variar nos salen cuadraditos o rombos negros con un signo de interrogación adentro. con caracteres como á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü, etc

Para salvar esto tan solo tenemos que configurar JQuery.ajax() de la siguiente forma:

1
2
3
4
5
6

 
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
});

Con esa opción forzamos que el encabezado de respuesta sea iso-8859-1 y no UTF-8.

UPDATE:

Este método solo funciona con FF ya que IE no soporta xhr.overrideMimeType como bien comento Ignacio en los comentarios. Una forma de solucionar esto es hacer lo siguiente:
Modificar el codigo inicial

1
2
3
4
5
6
7
8
9
10

$.ajaxSetup({
'beforeSend' : function(xhr) {
try{
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
catch(e){
 
 
}
}});

Y luego hay que agregar en nuestro archivo PHP

1

<?php header( 'Content-type: text/html; charset=iso-8859-1' );?>

Mandando el encabezado con PHP lograremos que funcione en IE. Un saludo , hagan pruebas y comenten que yo no tuve mucho tiempo.

UPDATE II:
Ignacio comenta que para ASP habria que usar el metodo :
Response.ContentType=”text/html; charset=iso-8859-1?

Un saludo espero que les haya servido de ayuda.

Selects anidados con AJAX y JQuery

Categories: JQuery, Tutoriales - Tags:

Los selects anidados o dependent cascading selects como dicen los ingleses , son usados hoy en día en la mayoria de formularios cuando nos registramos en una web. El ejemplo más comun es a la hora de elegir nuestro pais de procedencia , donde seguidamente carga en otro select las provincias de dicho pais. El otro día precísamente publique un listado completo de paises + provincias.

Hacer esto con JQuery es más que sencillo. Tan solo necesitaremos 3 archivos:

index.php Donde tendremos un formulario simple con sus correspondientes selects.

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

<script type="text/javascript" src="cargarProvincias.js"></script>   
<script type="text/javascript" src="../jquery.js"></script> 
<? 
   include_once ('db.php');
   $conn= get_db_conn();
 
$paises=mysql_query("SELECT * from paises",$conn);
   ?>
<form id="form" action="" method="post" class="niceform">
<dl><dt>  	  <label><span class="rojo">*</span> Pais :</label></dt>
          	  <dd>	 <select name="pais" id="pais"  onchange="cargarProvincias();" />
                                 <option value="null">Selecciona un pais</option>
           	 <? 	          while($row=mysql_fetch_assoc($paises)){
					print '<option value="'.$row['id'].'" >'.$row['pais'].'</option>';
											}?>
				</select>
                 </dd>
</dl>                                                  
 
<dl><dt>      <label><span class="rojo">*</span> Provincia :</label></dt>
           		<dd>	 <select name="provincia" id="provincia"  />
                                <option value="null">Selecciona un pais</option>
           			</select></dd>
</dl>
</form>

Un archivo encargado de buscar las provincias según el pais indicado. Primero se conectará a la base de datos, y luego devolverá los resultados.

ajax_provincias.php

1
2
3
4
5
6
7
8
9
10
11
12
13

<? 
   include_once ('db.php');
   $conn= get_db_conn();
   ?>
<? 
$conn=get_db_conn();
$pais= cleanQuery($_GET['pais']);
$provincias=mysql_query("SELECT * FROM estados WHERE relacion = '$pais'",$conn);
?><?
while( $row= mysql_fetch_assoc($provincias)){
		echo '<option value="'.$row['id'].'">'.$row['estado'].'</option>';
}
?>

Y por último el código JQuery que hará la magia de pasar el Pais seleccionado al archivo ajax_provincias.php mediante AJAX y luego cargará los valores devueltos dentro del segundo SELECT

cargarProvincias.js

1
2
3
4
5
6
7
8
9
10
11
12
13

function cargarProvincias(){
	$('#provincia').html('<option selected>Cargando</option>');
 
 	var idPais= $('#pais').val();
 
	var toLoad= 'cargar_provincias.php?pais='+ idPais ;
	$.post(toLoad,function (responseText){
 
	$('#provincia').html(responseText);
 
							});
 
}

Para terminar , le pueden echar una ojeada al DEMO ONLINE
Y descargar el código del ejemplo.

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

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

Hoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros visitantes que quieren manternerse actualizados con novedades, etc.

cuenta-atras

Siguiendo la estructura básica de una web vamos a necesitar varios archivos para lo que queremos hacer:

Como ya tenemos definido el archivo db.php tal y como se explico en su día , pasamos al archivo ajax_usuarios.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
// compruena la variable $_POST 
if(isset($_POST['email']) && $_POST['email']!= ''){
     /* Conectamos a la base de datos */
     include('config/db.php');
     $conn=get_db_conn();
     /* Protejo SQL injection */
     $email = cleanQuery($_POST['email']);
     /* Realizo consulta SQL */
     $query = "INSERT INTO listado_emails (email) VALUES ('$email')";
     mysql_query($query,$conn);
    // Mensaje de respuesta
     echo $email .' fue ingresado a la base de datos correctamente!!!!!!';
} else { 
     // En caso de q la variable no este iniciado o no tenga caracteres el mensaje de respuesta es el siguiente
 echo 'Hubo un error, intenta otra ves.'; 
}
?>

El código de index.php también va a cambiar ya que agregamos nuevos plugins de JQuery y el formulario para ingresar emails

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!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=ISO-8859-1" />
<title>Timersys</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<link href="css/jqtransform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
	// Cuenta atras					   
	   jQuery('#text').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);  
 
	   //Esquinas redondeadas
	   $('.rounded').corners('transparent');
 
	   //Transformar el formulario
	   $("form.jqtransform").jqTransform();
 
 
	   // definimos las opciones del plugin AJAX FORM
            var opciones= {
 
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario email_list y le pasamos las opciones
            $('#email_list').ajaxForm(opciones) ;
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
 
             function mostrarRespuesta (responseText){
                          $("#update").fadeOut("slow"); // Hago desaparecer el formulario
                          $("#succes").fadeIn("slow").html(responseText); //muestro mensaje 
             };
 
 
		});
</script> 
 
</head>
<body>
 
<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="text" class="count_down"></div>
	</div>
    <div id="update">
 
    <form id="email_list" class="jqtransform" action="ajax_usuarios.php" method="post">
    <input type="text" class="input_text" name="email" value="Ingresa tu email para recibir actualizaciones" onclick="this.select();" />
    <input type="submit" value="ENVIAR"  class="input_button" />
     </form>
	</div>
    <div id="succes"></div>
</div>
</body>
</html>

Con esto y un poco de código CSS ya tendriamos nuestra página de lanzamiento lista , y ademas podriamos juntar una base de datos con emails de los usuarios para poder enviarles actualizaciones.

Como siempre pueden ver el EJEMPLO TERMINADO

Y descargar el código fuente .( Recuerden de editar el archivo db.php con los datos de su propia base de datos y crear las tablas necesarias)

jqTransform : Aplica estilo a tus formularios de una forma sencilla

Categories: JQuery, Recursos - Tags:

Con jqTransform nunca fue tan facil modificar el aspecto de un formulario dandole un aire elegante en cualquier navegador.

jqtransform

La forma de implementarlos es como siempre super sencilla:

1- Añadir el plugin a la cabezera de tu web

1

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.jqtransform.min.js" type="text/javascript"></script>

2- Escribir un formulario y añadirle la clase correspondiente

1
2
3
4
5

<form class="jqtransform">
 <label for="name">Name: </label>
<input name="name" type="text" />
<input type="submit" value="send" />
</form>

3- Activar el plugin

1
2
3
4
5
6
7
8

<script type="text/javascript">
$(function() {
    //Todos los formularios con clase jqtransform
 
    $("form.jqtransform").jqTransform();
 
});
</script>

Como ven , super sencillo de usar. Para descargarlo visiten la página del autor.

Para ver un ejemplo online pueden ver el usado en este tutorial

Crear gráficos dinámicos con JQuery Visualize

Categories: JQuery, Recursos - Tags: ,

Hoy dando una vuelta por la web de Andrés Nieto me encontre con este peculiar plugin llamado JQuery Visualize que se encarga de formar gráficas a partir de los datos de una tabla. Entre sus posibilidades podemos encontrar desde barras normales , areas, gráficas en queso , etc y lo mejor de todo es que si el visitante no dispone de Javascript podra ver la tabla en vez de la gráfica.
jquery.visualize

La forma en que funciona es muy sencilla. Dada una tabla cualquiera como :

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

<table>
	<caption>2009 Individual Sales by Category</caption>
	<thead>
		<tr>
			<td></td>
			<th>food</th>
			<th>auto</th>
			<th>household</th>
			<th>furniture</th>
			<th>kitchen</th>
			<th>bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Mary</th>
			<td>150</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th>Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
		...Las columnas repetidas las saco por brevedad
	</tbody>
</table>

Tan solo hay que llamar al plugin de la siguiente forma y el plugin se va a encargar de generar la gráfica a partir de los datos introducidos.

1

$('table').visualize({options});

Además podemos definir las siguiente opciones:

  • type: string. Valors aceptados ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
  • width: number. Ancho de la gráfica. Por defecto el tamaño de la tabla.
  • height: number. Altura de la gráfica. Por defecto el tamaño de la tabla.
  • appendTitle: boolean. Añadir título a la gráfica. Default: true.
  • title: string. Título de la gráfica. Por defecto se usa el
    de la tabla.
  • appendKey: boolean. Añadir color principal. Default: true.
  • colors: array. Array de colores usados. Default:['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']
  • textColors: array. Array de colores para el texto. Default: [].
  • parseDirection: string. Dirección de parseo de datos de la tabla Acepta ‘x’ e ‘y’. Default: ‘x’.
  • pieMargin: number.Espacio alrededor de la gráfica tipo “Pie”. Default: 20.
  • pieLabelPos: string. Posición del texto de etiqueta en la gráfica tipo “Pie”. Acepta ‘inside’ y ‘outside’. Default: ‘inside’.
  • lineWeight: number. Tamaño de la línea de la gráfica. Default: 4.
  • barGroupMargin: number. Espacio entre barras. Default: 10.
  • barMargin: number.Margenes de la gráfica. Default: 1

Pueden ver una gráfica dinámica desde este enlace o descargar el plugin directamente.
Un saludo a todos.

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

Te gusta?

© Copyright - Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más - by Timersys