Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » javascript http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Fri, 03 Feb 2012 19:33:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Convertir cadenas de texto en números en Javascript http://www.masquewordpress.com/convertir-cadenas-de-texto-en-numeros-en-javascript/ http://www.masquewordpress.com/convertir-cadenas-de-texto-en-numeros-en-javascript/#comments Thu, 20 Oct 2011 13:24:12 +0000 Damian http://www.masquewordpress.com/?p=910 Sencillas funciones que no por ello son menos importantes para poder convertir strings en int o floats. Aunque estas funciones son de Javascript las pueden emplear con jQuery o cualquier otro framework para convertir sus cadenas de texto en números y así poder restar, sumar o realizar cualquier otra operación que necesiten.

Convertir string a entero

1
2
3
4
5
6
7
8

var texto = '1234';
 
// text + 10 = 123410
 
var numero;
numero = parseInt(texto) +10;
 
//numero= 1244

String a decimal:

1
2
3
4
5
6

var texto = '1234.0987';
//texto + 10 = 1234.098710
 
var entero = parseInt(text); // entero = 1234
var decimal = parseFloat(text); // decimal = 1234.0987
//decimal + 10 = 1244.098710

Reducir el número de decimales:

1
2
3

var numero = 1234.0987;
 
numero = numero.toFixed(2); // numero = 1234.09
]]> http://www.masquewordpress.com/convertir-cadenas-de-texto-en-numeros-en-javascript/feed/ 0 7 códigos JQuery que todos deberían tener http://www.masquewordpress.com/7-codigos-jquery-que-todos-deberian-tener/ http://www.masquewordpress.com/7-codigos-jquery-que-todos-deberian-tener/#comments Wed, 21 Jul 2010 22:51:32 +0000 Damian http://masquewordpress.com/?p=440 Hoy les traigo un pequeño recopilatorio de JQuery code snippets que hacen la vida más fácil. Aunque para la mayoría de estos ejemplos existen extensos plugins que hacen lo mismo, con unas simples lineas de código podemos realizar lo mismo y a su vez aprendemos como funciona.

1. Texto que desaparece en cajas de búsquedas

Este ejemplo mostrará un texto en la caja de búsqueda que al hacer click para escribir desaparecerá . Y si nos vamos de la caja sin escribir nada volverá a aparecer.

1
2
3
4
5
6
7

jQuery(function(){
var texto="Buscar";
jQuery("#whats-new")
  .val(texto)
  .focus(function(){ jQuery(this).val('') })
  .blur(function(){ jQuery(this).val() === '' ? jQuery(this).val(texto) : null; });
});

2. Cambiar el tamaño de fuente en la página

Pequeño script que permite al usuario agrandar o achicar el tamaño de la fuente dependiendo en que botón haga click.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 $(function(){
 
// Resetear al tamaño original
 var originalFontSize = $('html').css('font-size');
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 // Aumentar tamaño
 $(".aumentar").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });
 // Disminuir tamaño
 $(".disminuir").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*0.8;
 $('html').css('font-size', newFontSize);
 return false;
 });
 })

3.Pasar variables de PHP $_GET and javascript

Con este código podremos pasar las variables $_GET de php a javascript para poder utilizarlas si es necesario

1
2
3
4
5
6
7
8
9

var searchArray = document.location.search.substring(1).split("&");
 //Removemos '?' y separamos las variables
 
//Ahora hacemos un loop en searchArray y creamos otro array llamado  GET
 var GET = [];
 for (searchTerm in searchArray){
 searchTerm.split("="); //Dividimos searchTerm en propiedades y valores
 GET[searchTerm[0]] = searchTerm[1]; //Añadimos la propiedad y el valor al array GET
 }

4. Refrescar parte de una Web mediante AJAX

Este código es extremadamente útil cuando queremos que una parte de nuestra web ( un widget por ej) se actualice constantemente.

1
2
3
4
5

$(document).ready(function() {
 setInterval(function() {
 $("#content").load(location.href+" #content > *","");
 }, 5000);
 });

5. Evitar conflictos entre librerías

JQuery incluye al igual que otras librerías el alias $ .Con este método podremos cambiar dicho alias por cualquiera que nos plazca.

1
2
3
4

 var $timersys = jQuery.noConflict();
 
//Ahora podemos usar $timersys en vez de '$'
 $timersys("div").hide();

6. Detectar el navegador

Sencilla forma de detectar los diferentes navegadores

1
2
3
4
5
6
7
8
9

 //A. Para Safari
 
if( $.browser.safari )
 
//B. Para cualquier versión inferior a IE7
 if ($.browser.msie && $.browser.version < 7 )
 
//C. Para IE7 y versiones anteriores
 if ($.browser.msie && $.browser.version = "1.8" )

7. Deshabilitar click derecho del mouse

No siempre queremos que puedan hacer click derecho en nuestra web.

1
2
3
4
5

 $(document).ready(function(){
 $(document).bind("contextmenu",function(e){
 return false;
 });
 });
]]> http://www.masquewordpress.com/7-codigos-jquery-que-todos-deberian-tener/feed/ 8 Como limitar los caracteres de un textarea http://www.masquewordpress.com/como-limitar-los-caracteres-de-un-textarea/ http://www.masquewordpress.com/como-limitar-los-caracteres-de-un-textarea/#comments Mon, 14 Dec 2009 16:52:28 +0000 Damian http://masquewordpress.com/?p=355 A diferencia de los <input type=”text”> , los campos <textarea> no tienen el atributo de maxlength. Digamos que dado un campo de texto como el siguiente:

1

<textarea id="descripcion" onkeyup="contar(this);" cols="50" rows="8" name="descripcion"> </textarea><span id="letras">3000/3000 caracteres</span>

Si queremos contar y mostrar los caracteres escritos en un span, tan solo necesitamos esta pequeña función.

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

function contar(input) {
//Comprobamos que no pase de 3000 caracteres y si pasa, que borre los sobrantes
if (input.value.length >= 3000) {
input.value = input.value.substring(0,3000);
}
//alamacenamos el resto
var resto = 3000 - input.value.length;
 
//imprimimos los caracteres restantes en el span
var final=document.getElementById('letras');
final.innerHTML=resto+"/3000 caracteres";
 
}

Como pueden ver, es muy facil y tan solo bastaron unas lineas de javascript. Saludosss

]]> http://www.masquewordpress.com/como-limitar-los-caracteres-de-un-textarea/feed/ 2 Introducción a AJAX, Javascript, CSS, XHTML http://www.masquewordpress.com/introduccion-a-ajax-javascript-css-xhtml/ http://www.masquewordpress.com/introduccion-a-ajax-javascript-css-xhtml/#comments Thu, 21 May 2009 15:01:12 +0000 Damian http://masquewordpress.com/?p=49 Hoy les traigo una página que me ayudo mucho en mis comienzos. Estoy hablando de Librosweb, en ella podemos encontrar una serie de PDFs escritos en su mayoria por profesores con los contenidos que imparten en sus cursos.

Los libros son totalmente gratuitos y se pueden leer en la web o descargarlos. La verdad que estan muy bien como complemento y referencia, la mayoria incluye ejemplos y ejercicios para ir practicando a medida que se aprende.

Acá les dejo el listado completo:

Programación web

Introducción a AJAX :

  • Comenzando desde cero y llegando hasta las técnicas más avanzadas.
  • Incluye Google Maps, Prototype, jQuery y decenas de ejemplos.

Empezar a leerlo

Introducción a JavaScript :

  • Creado para diseñadores web sin experiencia en programación.
  • Aprende a manejar eventos, validar formularios y crear otras utilidades comunes.

Empezar a leerlo

Diseño web

Introducción a CSS :

  • Guía completa para aplicar estilos a las páginas web.
  • Incluye las propiedades de CSS 2.1 y decenas de ejemplos.

Empezar a leerlo

CSS avanzado :

  • Técnicas imprescindibles como sustitución de texto, sprites, sombras y transparencias
  • Buenas prácticas y recomendaciones de los mejores diseñadores
  • Frameworks CSS y diseño de páginas con YUI
  • Referencia imprescindible para diseñadores web avanzados

Empezar a leerlo

Referencia de CSS 2.1 :

  • Las 115 propiedades de CSS 2.1 explicadas detalladamente
  • Incluye más de 300 ejemplos originales

Empezar a leerlo

Introducción a XHTML :

  • Guía completa para crear páginas web, con más de 60 ejemplos.
  • Aprende cómo crear páginas web accesibles y que validen.

Empezar a leerlo

]]> http://www.masquewordpress.com/introduccion-a-ajax-javascript-css-xhtml/feed/ 0