jQuery and Google Translate

Author: Adrià Cidre  |  Category: JQuery, Java Script

Gran plugin para jQuery para hacer uso de la Google translate API

Sitio oficial

Botonera JQuery

Author: Adrià Cidre  |  Category: JQuery, Java Script

Bonita botonera JQuery, no hay tutorial de instalación, pero el código es muy simple.

Botonera JQuery

Javascript – Validar telefono

Author: Adrià Cidre  |  Category: Java Script, MiniCodes

Función JavaScript para validar el número de telefono.

function isValidPhoneNumber(ph) {
	if (ph == null) {
		return false;
	}
	var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
	return ((/\d{10,}/i).test(stripped));
}

Javascript – Validar Email

Author: Adrià Cidre  |  Category: Java Script, MiniCodes

Función JavaScript para validar email.

function isValidEmailAddress(emailAddress) {
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	return pattern.test(emailAddress);
}

JQuery – Rellenar un calendario datepicker

Author: Adrià Cidre  |  Category: Java Script, PHP

Buenas,

después de mucho buscar, y no encontrar nada de nada, al final, desarrollé este código que inserta en la pagina un datepicker de JQueryUI, y lo rellena con datos servidos en JSON. Igual es una chorrada, pero no he encontrado nada mejor, así que aquí os lo dejo por si queréis echarle un vistazo.

Necesitaremos el siguiente script:

	$(function() {
		$("#datepicker").datepicker({
			numberOfMonths	: 3,
			monthNames			: ['Gener','Febrer','Març','Abril','Maig','Juny','Juliol','Agost','Setembre','Octubre','Novembre','Desembre'],
			dayNamesMin			: ['Diu', 'Dill', 'Dim', 'Dim', 'Dij', 'Div', 'Dis'],
			firstDay				: 1,
			currentText			: 'Avui',
			onChangeMonthYear: function(year, month, inst) {
				setTimeout("populateDays("+year+", "+month+")", 500);
			}
		});

	});

	function populateDays(year, month) {
		var months = $("#datepicker .ui-datepicker-group");

		for(var i=0; i

A continuación colocamos el objeto html en el lugar que nos interese:

Y por último necesitaremos un script de parte del servidor que pasandole los paramentros año y mes nos devuelva un array como el siguiente, con los dias en que el calendario contiene algún evento.
Para no aburriros os pongo directamente el tipo de código de salida, y ya os apañais ;-)

echo "{'year': 2009, 'month' : 10, 'days' : [3,4,10,11,12,22,23,24,25,26]}";

El resultado es algo parecido a esto:

Autocompletar Datepicker en Jquery

Autocompletar Datepicker en Jquery

Si tenéis alguna duda ya sabéis :-)

Javascript – Diferencia entre dos fechas

Author: Adrià Cidre  |  Category: Java Script, MiniCodes

Ahora mismo estoy desarrollando una aplicación para un hotel en la que el usuario tiene que seleccionar dos fechas, y hay que calcular la diferencia entre las dos para obtener el número de noches que se va a alojar.

Solo tenéis que utilizar esta función javascript, que os devolverá un entero con el numero de noches.

function getNumeroDeNits(){
	var d1 = $('#datepicker1').val().split("-");
	var dat1 = new Date(d1[2], parseFloat(d1[1])-1, parseFloat(d1[0]));
	var d2 = $('#datepicker2').val().split("-");
	var dat2 = new Date(d2[2], parseFloat(d2[1])-1, parseFloat(d2[0]));

	var fin = dat2.getTime() - dat1.getTime();
	var dias = Math.floor(fin / (1000 * 60 * 60 * 24))  

	return dias;
}

Esta claro que en html deberíais tener dos campos llamados datepicker1 y datepicker2, con el formato de fecha dd-mm-aaaa.

JQUERY – Scroll top

Author: Adrià Cidre  |  Category: Java Script, MiniCodes

Bueno después de un tiempo sin publicar a ver si nos ponemos las pilas de nuevo :-) .

Cuando desarrollas webs de una sola pagina en las que muestras un contenido u otro en javascript, a menudo queda un poco tosca la transición entre un contenido y otro, lo mejor es hacer un scroll hasta arriba de la pagina y no hay manera más estética de hacerlo que mediante este trozo de código en jquery.

$('html, body').animate({scrollTop:0}, 'slow')

Espero que os guste y os sirva.

JQuery – Reset de un formulario

Author: Adrià Cidre  |  Category: Java Script, MiniCodes

A continuación se muestra como extender el núcleo de JQuery para poder hacer uso de la función reset() de un formulario en JQuery

	$.fn.extend({
		reset: function() {
	   	return this.each(function() {
				$(this).is('form') && this.reset();
	   	});
		}
	});

Javascript – Crear un Bookmark

Author: Adrià Cidre  |  Category: Java Script

Bueno como no podia ser de otra manera, Firefox, IE y Opera se lo montan diferente a la hora de gestionar los bookmarks, por lo que será necesario la siguiente función para poder crear un enlace que nos permita añadir un bookmark en cualquiera de los tres navegadores anteriores.


function CreateBookmarkLink(title, url) {
	if (window.sidebar) { // Mozilla Firefox Bookmark
		window.sidebar.addPanel(title, url,"");
	} else if( window.external ) { // IE Favorite
		window.external.AddFavorite( url, title); }
	else if(window.opera && window.print) { // Opera Hotlist
		return true; }
 }

ExtJS – ComboBox opción por defecto

Author: Adrià Cidre  |  Category: EXT JS, Java Script

Quizá soy yo no he sido capaz de encontrar la solución correcta pero me parece que una cosa tan simple como tener una opción seleccionada por defecto en un desplegable, no debería ser una tarea tan y tan complicada.

Aquí tenéis el código para poder tener una opción seleccionada por defecto en un desplegable con EXTJS

{
	xtype		: 'combo',
        fieldLabel	        : 'Sexo',

	hiddenName	: 'sexo',
        name		: 'sexo',

	mode		: 'local',
        width		: 250,
	displayField     : 'name',
	valueField	        : 'id',
	store                : new Ext.data.SimpleStore({
	        id		: 0 ,
	        fields	: [  'id', 'name' ],
	        data	: [
			    [1, 'Hombre'],
			    [2, 'Mujer']
			]
	    }),
	listeners	: {
		beforerender: function(combo){
			combo.setValue(1);// El ID de la opción por defecto
		}
	},
},

Si bien es cierto que podemos ponerle un valor por defecto con la propiedad value, Nos pone como valor el nombre es decir ‘Hombre’ o ‘Mujer’ y no el ID ’1′ o ’2′.

Lo ‘único‘ que hay que hacer entonces es utilizar la propiedad ‘hiddenName‘ y poner en el listenerbeforerender‘, que se ejecuta una vez se ha cargado el store, una función que nos cargue como valor el ID que queramos.
Me ha costado encontrar como hacerlo, espero que no perdáis tanto rato como yo, si tenéis dudas preguntad :-)