Archivo de la categoría: javascript

text-overflow:ellipsis multilínea

Hola a todos:

CSS nos proporciona una opción muy interesante cuando queremos cortar un texto que es mas largo que su contenedor añadiéndole puntos suspensivos. Esta opción es muy útil y se consigue utilizando la propiedad css  text-overflow: ellipsis.

Si tenemos un div conteniendo texto por ejemplo:

<div id="container" class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed dolor ac sapien interdum interdum. Etiam leo tortor, tincidunt eu neque nec, laoreet ullamcorper augue. Phasellus commodo tincidunt ligula, quis sodales est tempus ut. Donec non finibus dolor, quis molestie ligula. Sed orci magna, vehicula ut dui in, posuere rhoncus augue. </div>

Y se  asignamos un css como este:

#container {
 width: 250px;
 height: 40px;
 padding: 10px;
 overflow: hidden;
 border: 2px solid #000;
 white-space: nowrap;
 text-overflow: ellipsis;
 }

Obtendremos algo así:

2015-02-28-124359_1280x800_scrot

Sin embargo esto tiene un problema y es que solo sirve para mostrar textos en una sola línea.

Hay otras soluciones css mas complejas que intentar solucionar esto añadiendo mas elementos html  pero no siempre el resultado es bueno.

La solución que hoy os presento es una  pequeña función javascript que hará que podamos mostrar puntos suspensivos al final cuanto un texto supere en tamaño a su contenedor.

He creado una función que nos permite solucionar esto:

function ellipsis(selector){
 var nodeList = document.querySelectorAll(selector);
 arrNodes = [].slice.call(nodeList);
 for (var i in arrNodes)
 {
   var n = arrNodes[i];
   while(n.scrollHeight-n.offsetHeight>0)
   {
     var text = (n.innerText != undefined) ? n.innerText : n.textContent;
     if(n.innerText != undefined)
     {
         n.innerText=text.replace(/\W*\s(\S)*$/, '...');
     }
     else
     {
       // Para Firefox
       n.textContent = text.replace(/\W*\s(\S)*$/, '...');
     }
   }
 }
}

Para conseguir el efecto text-overflow: ellipsis multilinea solo tenemos que llamar a esta función en el evento onload pasandole el selector css al que hay que aplicar el evento.

Por ejemplo si queremos que se aplique en todos los elementos  que tengan la clase ellipsis debemos llamarla así:

ellipsis('.ellipsis');

Se puede utilizar cualquier selector css.

Al ejemplo anterior vamos a darle más altura al contenedor y eliminamos white-space: nowrap;  quedando el css como sigue:

#container {
 width: 200px;
 height: 100px;
 padding: 10px;
 overflow: hidden;
 border: 2px solid #000;
 }

Al aplicarle la función obtendremos algo como esto:

2015-02-28-144136_1280x800_scrot

Si estáis usando jQuery podeis llamar a la función en el evento ready:

$( document ).ready(function() {ellipsis('.ellipsis');});

Solo queda decir que esta función no necesita jQuery para funcionar así que la podéis llamar en el evento onload de la pagina.

window.onload = function(){ ellipsis ('.ellipsis') }

Eso es todo por hoy, espero que sea de utilidad.

Abrir mapa nativo en iOS, Android y Windows Phone desde un link

 

Hola a todos:

A veces nos interesa poner el típico enlace de «Como llegar» en nuestra web, o en una app que estemos construyendo por ejemplo con Phonegap, y nos interesa que la dirección que le indicamos se abra en la aplicación nativa  de mapas del móvil, que suele funcionar mejor y la interfaz resulta mas familiar para el usuario que esta acostumbrado a utilizar su plataforma móvil.

Veamos las diferentes tipos de url que podemos utilizar en los liks para abrir mapas.

Por defecto:

Sabemos que tenemos el link estándar de google maps que podría ser algo así:

<a href="http://maps.google.com?q=laubideta+16+matiena+abadiano">Mostrar mapa</a>

iOS:

Sin embargo para que nos abra la aplicacion de mapas nativa de iOS (iPhone) deberemos poner una url como esta:

<a href="http://maps.apple.com/maps?q=laubideta+16+matiena+abadiano">Mostrar Mapa en iOS</a>

Y si queremos que nos trace una ruta  desde el punto en el que nos encontramos hasta un punto  de destino tenemos que usar una url como esta:

 <a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao">como llegar Ios</a>

En el parámetro saddr ponemos Current%20Location para indicar que el punto de inicio es el sitio donde nos situamos en este momento, podemos indicar una dirección de inicio de la ruta en lugar de «Current Location» , y en saddr ponemos la dirección de destino.

Tambien podemos indicarle la dirección mediante coordenadas de latitud y longitud:

<a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=43.12955890000001,-2.542329300000006">Como  llegar en IOs - coordenadas</a>

Android:

Para que se abra directamente la aplicación de mapas de Android usaremos:

<a href="geo:0,0?daddr=Laubideta+16+Abadiano+bizkaia">como  llegar Android</a>

Si lo que queremos es indicar la dirección por sus coordenadas seria:

<a href="geo:43.1689947,-2.608256200000028">Como llegar Android - Coordenada</a>

Por desgracia este tipo de url no permite indicarle un punto de inicio para establecer una ruta, una vez abierto el mapa el usuario deberá seleccionar en la aplicación  que le indique la ruta si así lo desea.

Windows Phone:

Las urls anteriores no funcionan en Windows Phone, que utilizan su propio formato:

<a href="maps:Elorrio+Bizkaia">Abrir mapa en Windows Phone</a>

Por coordenadas sería:

<a href="maps:43.1689947,-2.608256200000028">Abrir mapa en Windows phone por coordenadas</a>

De esta manera podemos elegir que url nos interesa.

Si estamos trabajando con Phonegap/Apache Cordova elegiremos la que se ajuste a la plataforma para la que estemos utilizando.

A modo de información os comento que otra forma de hacerlo en Phonegap puede ser utilizar InAppBrowser de la siguiente manera:

window.open("http://maps.google.com/?q="+ address,"_system");

Si estamos desarrollando una web en php  una  opción es detectar la plataforma y mostrar el link con la url que corresponda dependiendo de este.

Para detectar dispositivos móviles en php se puede utilizar la clase php-mobile-detect que dispone de los siguientes metodos: isAndroid(), isAndroidtablet(), isIphone(), isIpad(), isBlackberry(), isBlackberrytablet(), isPalm(), isWindowsphone(), isWindows(), isGeneric(), isMobile().

Un ejemplo de como la  podríamos usar para mostrar un enlace dependiendo del dispositivo seria  este:

<?php
include('Mobile_Detect.php');
$detect = new Mobile_Detect();
if( $detect->isAndroid() ) {
 // Android
 $url="geo:0,0?daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isIphone() ) {
 // iPhone
 $url="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isWindowsphone() ) {
 // Windows Phone
 $url="maps:Universidad+de+deusto+bilbao";
} else{
 // Por defecto
 $url = 'http://maps.google.com?daddr=Universidad+de+deusto+bilbao';
}
 echo '<a href="'.$url.'">Mostrar Mapa</a>';
?>

 

Ahora os mostraré un sencillo ejemplo de como podemos hacer esto con javascript:

Primero vamos a crear una función en javascript  que he llamado showMap:

Para hacer un ejemplo de forma rápida podéis pegar este código en el head.

 // ****************************************************************//
 // * Función: showMapa() *//
 // * Descripción: Abre el mapa nativo del dispositivo móvil *//
 // * Autor: Eduardo Revilla Vaquero *//
 // ****************************************************************//

 showMap=function(q)
 {
 var device = navigator.userAgent;
 var url = 'http://maps.google.com?daddr='+q;
 if (device.match(/Iphone/i) || device.match(/iPhone|iPad|iPod/i))
 {
 // iOs
 url='http://maps.apple.com/maps?saddr=Current%20Location&daddr='+q;
 }
 else if(device.match(/Android/i))
 {
 // Android
 url='geo:0,0?q='+q;
 }
 else if(device.match(/Windows Phone/i))
 {
 // windows phone
 url='maps:'+q;
 }

 window.location.href = url;
 }

Y después en el body donde queramos mostrar el enlace al mapa podremos algo como esto:

<a href="#" onclick="showMap('Universidad+de+Deusto+Bilbao')">Mostrar mapa</a>

Y solo con este pequeño código podemos redirigir la petición y abrir el mapa nativo del móvil independientemente de la plataforma en la que nos encontremos.

Sencillo ¿no? 😉

Y…. eso es todo por hoy.

Espero vuestros comentarios.

Un saludo.

Índice   –   <– Capítulo Anterior

Calcular días transcurridos entre dos fechas en javascript

Hola de nuevo:

En el post anterior vimos como sumar o restar días a una fecha dada en javascript, ahora vamos a ver como calcular los días transcurridos entre dos fechas. Para ello vamos a crear una pequeña función:

Actualización: He actualizado la función ya que la original tenía un error y además he reducido el número de lineas de código para conseguir el mismo resultado.
// Función para calcular los días transcurridos entre dos fechas
restaFechas = function(f1,f2)
 {
 var aFecha1 = f1.split('/');
 var aFecha2 = f2.split('/');
 var fFecha1 = Date.UTC(aFecha1[2],aFecha1[1]-1,aFecha1[0]);
 var fFecha2 = Date.UTC(aFecha2[2],aFecha2[1]-1,aFecha2[0]);
 var dif = fFecha2 - fFecha1;
 var dias = Math.floor(dif / (1000 * 60 * 60 * 24));
 return dias;
 }

Esta función nos devolverá el número de días que han transcurrido entre las dos fechas pasadas.

Las fechas pasadas deben ser dos strings en formato ‘dd/mm/aaaa’.

Un ejemplo de llamada sería este:

var f1 = '10/09/2014';
var f2='15/10/2014';
alert(restaFechas(f1,f2));

Esto nos sacará un alert con el número 35 que son los días transcurridos entre las dos fechas.

Eso es todo por hoy, espero que os sirva de ayuda.

Sumar días a una fecha en javascript

Hola a todos:

En el post anterior vimos como «Sumar o restar días, semanas, meses o años a una fecha con PHP«.

Hoy me han preguntado como sumar días a una fecha desde javascript y he preparado una función con un pequeño ejemplo de como hacerlo.

La función para sumar o restar días a una fecha seria la siguiente:

Actualización:  La función original se ha modificado debido a un error que provocaba que no se calculasen correctamente algunas fechas, . (Gracias a Edisson y a Gustavo por el aviso). 
// Función que suma o resta días a la fecha indicada

sumaFecha = function(d, fecha)
{
 var Fecha = new Date();
 var sFecha = fecha || (Fecha.getDate() + "/" + (Fecha.getMonth() +1) + "/" + Fecha.getFullYear());
 var sep = sFecha.indexOf('/') != -1 ? '/' : '-';
 var aFecha = sFecha.split(sep);
 var fecha = aFecha[2]+'/'+aFecha[1]+'/'+aFecha[0];
 fecha= new Date(fecha);
 fecha.setDate(fecha.getDate()+parseInt(d));
 var anno=fecha.getFullYear();
 var mes= fecha.getMonth()+1;
 var dia= fecha.getDate();
 mes = (mes < 10) ? ("0" + mes) : mes;
 dia = (dia < 10) ? ("0" + dia) : dia;
 var fechaFinal = dia+sep+mes+sep+anno;
 return (fechaFinal);
 }

La función recibe como parámetros el número de días que se le quiere sumar y la fecha a la  cual que se le van sumar los días.

Si no se le pasa ninguna fecha coge por defecto la fecha actual.

Esta función está pensada para ser usada con fechas en formato dd/mm/aaaa y dd-mm-aaaa. Admite como separador ‘/’ y ‘-‘.

Un ejemplo de llamada seria este:

var fecha = sumaFecha(8,'01/07/2014');
alert(fecha);

En este ejemplo sumaríamos 8 días a la fecha 01/07/2014 sacaría un alert con la fecha ’09/07/2014′.

Espero que os sea de utilidad.

Como abrir Google Play y App Store desde Phonegap (Apache Cordova)

 

Hola a todos,

En ocasiones nos puede interesar enlazar con otra aplicación nuestra o que muestre todas las apps que tenemos publicadas en Google Play o en la App Store de apple desde nuestra aplicación creada con Phonegap.

En Android:

Para acceder nuestras aplicaciones en Google Play desde javascript  usamos:

window.location.href="market://search?q=pub:<nombre_publicador>";

En mi caso escribiría:

window.location.href="market://search?q=pub:Eduardo+Revilla+Vaquero";

Tenéis que sustituir lógicamente  «Eduardo+Revilla» por vuestro nombre de publicador.

Si lo que queremos es enlazar con una app en concreto tenemos que escribir lo siguiente:

window.location.href="market://details?id=<nombre_paquete>"

Por ejemplo:

window.location.href="market://details?id=com.revigames.SnowSoccer"

En iOS:

Si estamos desarrollando para iOS y queremos enlazar con otra aplicación en la App Store tenemos que escribir algo como esto:

window.location.href="itmss://itunes.apple.com/us/app/galactic-insects/id806472599?ls=1mt=8"

Una forma de saber la url que debemos poner es:

  1.  Desde iTunes Connect seleccionamos Manage your Apps.
  2. Selecciónamos la app a la que queremos enlazar y en links pulsamos botón derecho sobre View in App Store.
  3. Copiamos la dirección del enlace.
  4. sustituimos https:// por itmss://

Por cierto, os animo a que probéis mis juegos: 😉

 

jQuery UI Datepicker, como poner el calendario en español, euskera o cualquier otro idioma.

Hola a todos:

Hoy voy a mostrar como configurar las opciones de localización idiomática del datepicker de jQuery UI.

Como ya sabréis jQuery UI nos proporciona una serie de elementos de interface de usuario listos para utilizar de una manera muy sencilla.

Entre estos elementos con los que cuenta  jQuery UI se  encuentra Datepicker que nos proporciona un elegante calendario personalizable que nos permite introducir fechas de una manera visual en nuestros formularios.

   Formulario con DatePickerPara insertar un calendario en nuestro formulario escribiremos el siguiente código:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fechas</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
$("#fecha").datepicker();
});
</script>
</head>
<body>
<label for="fecha">Fecha:
 <input type="text" id="fecha" value="" />
</label>
</body>
</html>

Con esto le indicamos que se aplique  el calendario al campo con id fecha.

Por último incluimos en el body un campo input de tipo text al que le asignamos el id=»fecha».

Cabe resaltar que el estilo del calendario es personalizable y se pueden aplicar diferentes estilos css. Existen muchos themes con estilos ya pre-diseñados listos para utilizarse.

Podéis descargar los themes desde aqui: http://jqueryui.com/download/

Como podréis observar el calendario del ejemplo anterior está configurado en inglés, que es el idioma que utiliza por defecto si no le indicamos nada.

 

¿Como podemos utilizar el datepicker en otros idiomas?

Primero tenemos que definir los parámetros regionales del idioma.

El código necesario para poner  el datepicker en español  es el siguiente:

<script>
 $.datepicker.regional['es'] = {
 closeText: 'Cerrar',
 prevText: '< Ant',
 nextText: 'Sig >',
 currentText: 'Hoy',
 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
 monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
 dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
 dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
 weekHeader: 'Sm',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''
 };
 $.datepicker.setDefaults($.datepicker.regional['es']);
$(function () {
$("#fecha").datepicker();
});
</script>

Como veis lo que hacemos es definir el regional ‘es’ con los nombres de los meses y de los días en español,  el formato de fecha que vamos a utilizar «dd/mm/yy», etc.

Formulario con calendario en español

Y si queremos que el calendario aparezca por ejemplo en euskera el código completo quedaría de la siguiente manera:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fechas</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>

 jQuery.datepicker.regional['eu'] = {
 closeText: 'Egina',
 prevText: '<Aur',
 nextText: 'Hur>',
 currentText: 'Gaur',
 monthNames: ['Urtarrila','Otsaila','Martxoa','Apirila','Maiatza','Ekaina',
 'Uztaila','Abuztua','Iraila','Urria','Azaroa','Abendua'],
 monthNamesShort: ['Urt','Ots','Mar','Api','Mai','Eka',
 'Uzt','Abu','Ira','Urr','Aza','Abe'],
 dayNames: ['Igandea','Astelehena','Asteartea','Asteazkena','Osteguna','Ostirala','Larunbata'],
 dayNamesShort: ['Iga','Ast','Ast','Ast','Ost','Ost','Lar'],
 dayNamesMin: ['Ig','As','As','As','Os','Os','La'],
 dateFormat: 'yy/mm/dd', firstDay: 1,
 isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['eu']);
$(function () {
$("#fecha").datepicker();
});
</script>
</head>
<body>
<label for="fecha">Fecha:
 <input type="text" id="fecha" value="" />
</label>
</body>
</html>

Espero que os haya servido de ayuda.

 

Cualquier duda podéis plantearla en los comentarios.