Archivo de la categoría ‘Java Script’

Comprobar si un checkbox esta seleccionado con jQuery

Jueves, 24 de Noviembre de 2011

Para comprobar si un checkbox esta seleccionado o no via jQuery es tan fácil como trabajar con los pseudo-selectores. La función que usaremos devuelve true o false.

Veamos algunos ejemplos:

$(’#ID-CHECKBOX’).is(’:checked’)
Comprueba el checkbox con el ID determinado.

$(’form input:checkbox’)
Busca todos los checkbox de dentro del formulario.

Más información
API jQuery: Checkbox selector

Bug en parseInt de Javascript

Miércoles, 14 de Julio de 2010

Estabamos haciendo unos calculos con javascript, y para transformar un string a un valor para asegurarnos que la suma la hace correctamente nos hemos encontrado en un bug un tanto curioso en la funcion parseInt().

Resulta que todo funciona correcto excepto cuando la funcion tiene un 8 o un 9 a transformar, no sabe hacerlo, y devuelve un 0.

Para solucionarlo se debe multiplicar por 1:

var valor = 9;

alert(parseInt(valor));//devuelve 0
alert(parseInt(valor*1));//devuelve 9

jquery efecto desvanecimiento texto (fade in text, fade out texto)

Viernes, 28 de Mayo de 2010

En jQuery es fácil encontrar cualquier efecto de desvanecimiento - fade, fade in, fade out - pero casi todos estan orientados a hacer galerías de imagenes, me ha costado encontrar algo que funcione correctamente con solo texto. Esto es, un pase de diapositivas de información (no imagen).

Los ejemplos de utilización para imágenes no los voy a describir ya que son fáciles de encontrar y no me interesan en este momento, voy a explicar directamente como hacer el fade con textos:

jQuery
Usaremos el framework jQuery:
http://code.jquery.com/jquery-latest.pack.js

jQuery cycle
Complementamos jQuery con la extensión 'cycle':
http://jquery.malsup.com/cycle/

Código

JavaScript:
  1. $(function () {
  2. var $container = $('#informacion'),
  3.  
  4. quotes = [
  5. {fecha: '10 FEBRER 2010', titulo: 'Inauguració oficines SOC a Badalona'},
  6. {fecha: '05 MAIG 2010', titulo: 'Notícia nº1'},
  7. ];
  8.  
  9. $(quotes).each(function (i) {
  10. var quote = '<span>' + this.fecha + '</span> - <span>' + this.titulo + </span>';
  11. $container.append('
  12. <div>
  13.  
  14. ' + quote + '</div>
  15. ');
  16. });
  17. $container.cycle({
  18. speed: '2000',
  19. timeout: '10000',//1000=1seg
  20. cleartype: '1' // activar correcciones cleartype
  21. });
  22. });

Explicación

La variable container es el elemento que va a contener la información que queremos rotat. En mi caso:

Se crea el array 'quotes', que es el que contendrá la información que vamos a rotar, mi caso:

Posición N[fecha='',titulo='']

La manera en la que se mostrara se puede modificar en la linea:

var quote = '' + this.fecha + ' - ' + this.titulo + ';

En nuestro ejemplo pondra la fecha entre 'span' un guion separador y el titulo entre 'span' de nuevo.

Ejemplo

Podéis ver un ejemplo en funcionamiento en www.agparquitectes.com, en la sección de inicio, en el pie.

Aprender hacer expresiones regulares para quitar los tags de un texto en php

Jueves, 19 de Noviembre de 2009

Para eliminar los tags de un texto, ya sea en php o javascript o cualquier otro lenguaje, vamos a utiizar expresiones regulares.

la ideal para tags es:  .<[^>]+>.

Para aprender a como funcionan las expresiones regulares, podemos utilizar un simuladro muy bueno, que nos permite probar "in the fly", en tiempo real. Si la expressión regular es válida o hace lo que queremos.

Para ello te deja poner un texto donde reconocer y la expressión.

El sitio es:  regexpal.com

dedicado a luis.

Un enlace sin href que no mueva ni actualice la pagina

Jueves, 24 de Septiembre de 2009

Nos interesa un enlace, que al hacerle click, ejecute una funcion javascript, pero que no mueva la pagina, ni la refresque, ni se vaya a otra.

La gracia es colocar # en el href del enlace, pero al hacerlo la pagina escrolla hasta la cabecera de la misma.

Como arreglarlo? Muy fácil, con un return false en javascript.

<a href="#" onclick="return false;">
<a href="#" onclick="funcionJavascript();return false;">

Node cannot be inserted at the specified point in the hierarchy” code: “3 [Break on this error] (no source for http://www.sintoner.com/Javascript/funcion.js)

Martes, 14 de Julio de 2009
Este fallo que lanza firebug desde firefox,
Node cannot be inserted at the specified point in the hierarchy" code: "3
(no source for http://www.sintoner.com/Javascript/controlador.js)
Es debido a que se ha tratado de insertar un nodo padre a un hijo. Esto provoca un un ciclo dentro de la estructura DOM, que el navegador no puede interpretar. Revisa la estructura que estás creando y evita añadir el padre de un nodo a un hijo.
mi error:

columna=document.createElement('a');

nodoNuevo= document.createElement('div')

clomuna.appendChild(Nodonuevo);

NodoNuevo.appendChild(columna); // error! Estamos insertando un hijo que ya es padre del nodo actual

La solución era que tenía que crear una variable nueva para el nodo. al reutilizar un nombre de variable en un bucle. Se creaba este problema, utilizando otra variable ya no hay problema.

ThickBox: Ventanas flotantes

Viernes, 3 de Julio de 2009

ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador.

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • jquery.js: Librería necesaria para el funcionamiento e thickbox.
  • thickbox.js: Funciones thickbox para abrir las ventanas.
  • thickbox.css: Hoja de estilos para la ventana emergente.
  • loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente

Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <link rel="stylesheet" href="thickbox.css" type="text/css" />

Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:

  1. <a href="flash9.gif" class="thickbox" title="Ejemplo ThickBox">

Donde se tiene que class="thickbox" es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.

Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de Google.

  1. <a
    
  2. href="http://www.google.com?TB_iframe=true&height=420&width=600"
  3. title="Google"
  4. class="thickbox">Google</a>

Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.

Abrir multibox automaticamente al cargar pagina

Lunes, 25 de Mayo de 2009

Puede ser un caso poco común, pero hoy necesitabamos que MultiBox se lanzara automaticamente al hacer la carga de la página. Después de intentar simular un click sin éxito para este caso, la solución que he encontrado es más fácil de lo esperado.

PhatFusion ya había pensado en nosotros, y a la hora de inicializar el multibox en la página hay que agregar una nueva linea que tenga el evento open:

var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc'});
box.open($('mb1'));
});

funcion javascript para Simular un click

Lunes, 25 de Mayo de 2009
JAVASCRIPT:
  1. /* ***********************************************************************************
  2. * SimularClick: Simular un click en un objeto.
  3. *   idObjecte : objecte sobre el cual se aplica el evento click
  4. * ***********************************************************************************/
  5.  
  6. function SimularClick(idObjete){
  7.  
  8. var nouEvent = document.createEvent("MouseEvents");
  9. nouEvent.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
  10.  
  11. var objecte = document.getElementById(idObjete);
  12. var canceled = !objecte.dispatchEvent(nouEvent);
  13. }

Multibox, solución a problema con scrollbars

Martes, 14 de Abril de 2009

Nos hemos encontrado con un problema al utilizar la libreria Multibox para la carga de imagenes y el scrollbar horizontal.

Resulta que cuando incluyes alguna imagen con multibox, en esa sección de la web aparece el scrollbar(barra desplazamiento) horizontal en el navegador y realmente molesta a un diseño de página.

Solución al problema? En una línea(aprox L.40) del fichero Overlay.js pone lo siguiente:

'frameborder': 1,

Pues bien, ponle valor 0 y el scrollbar desaparecerá.