Jsanca - Blog

Supongamos que se desea eliminar una lista de nodos hijos en un elemento particular en el dom; regularmente seguiríamos la siguiente forma // Bajo parent Id los elementos que deseo eliminar tienen un className en común. var nodes =     document.getElementsByClassName(className); var parentNode =     document.getElementById(parentId);             if (nodes) {                 for (var i = 0; i < nodes.length; ++i) {                     var node = nodes[i];                     if (node) {                         if (parentNode.contains(node)) {                             parentNode.removeChild(node);           ...

El siguiente es un ejemplo de Javascript de como crear una lista con parrafos adentro, utilizando para ello unicamente el DOM, adicionalmente se muestra un ejemplo de como usar el getElementByTag, con el cual obtenemos una Array de tag y cambiamos el estilo (color) a azul <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <title>New Web Project</title>             </head>     <body>         <div>             <ul>                 <li><p>Uno</p></l...

Si ocupa un datepicker, aqui como integrarlo sencillamente; <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#datepicker").datepicker({ defaultDate: document.forms['myForm'].elements['dateSelected'].value, onSelect: function(dateText, inst) { alert (dateText); document.forms['myForm'].elements['dateSelected'].value = dateText; } }); }); </script> </head> <body style="font-size:62.5%;"> <form name=...

Hola, recientemente tenia la necesidad de implementar un fadeOut o lo que es lo mismo, que un div, desvaneciera! Con YUI, sabia que se podía hacer de la siguiente manera: setTimeout(function() { var fadeOut = new YAHOO.util.Anim('idDelDiv', { opacity: { to: 0 } }, 0.5); fadeOut.onComplete.subscribe(function() { yd.setStyle('list_success_message', 'opacity', 1); }); fadeOut.animate(); }, 4000); Básicamente, el timeout invoca después de 4 segundos a la función anónima, que llama a la animación, que desaparece el div. En dojo, algo parecido lo encontré en http://docs.dojocampus.org/quickstart/Animation Básicamente se debe hacer algo así dojo.style("idDelDiv", "opacity", "1"); dojo.fadeOut({ node: "idDelDiv", duration: 4000, onEnd: fu...

Hola, para utilizar el servicio: http://recaptcha.net/ He encontrado la libreria: http://code.google.com/p/recaptcha/ La verdad con la ayuda del sitio, el servicio funciona perfecto :)

Para crear el efecto de lightbox, con JQuery puedes valerte del siguiente plugin: http://github.com/krewenki/jquery-lightbox/ Para que funcione tenes que depositar en tu sitio Web; el javascript jquery.lightbox.js, el css lightbox.css y las imagenes de la carpeta images. Seguidamente, tienes que incluir tanto el javascript como el css en tu pagina. Adicionalmente, tienes que modificar el archivo js (regularmente al final) y el css, para asegurarse que las direcciones de las imagenes en el css y el js, apunten al lugar correcto. Por ultimo, dos pasos: Incluir este pequeño código de Javascript: $(document).ready(function(){ $(".lightbox").lightbox(); }); Si desea mostrar el lightbox solo sobre una imagen, coloque la misma como valor del href y agregue el class lightbox, al atributo class del link: href="/images/jquerylightbox/image-0.jpg" class="lightbox" title="Titulo inferior del lighbox" Tome en cuenta que el valor del atributo title, saldra en...

Me apunto por aquí estos 20 plugins para Jquery, de fijo más adelante usaré alguno de ellos http://addyosmani.com/blog/20-amazing-jquery-plugins-to-improve-your-user-interface/ Un saludo, J

Para implementar la funcionalidad de disponible y no disponible en JQuery debes hacer lo siguiente: Para hacerlo disable: $('#' + buttonId).attr("disabled", "disabled"); Para quitarlo $('#' + actionButtonId).removeAttr("disabled"); Eso funciona así, pues para que el botón sea disable, tienes que agregar un atributo de la siguiente manera input disable="disable" type="button" y para ponerlo de nuevo, solo sería eliminar el atributo. Un saludo, J

En algunas ocasiones necesitamos filtrar todas las respuestas de los callbacks de JQuery, ya se para agregar, eliminar o modificar la trama de respuesta, o bien inspeccionarla para hacer algo! Por ejemplo, aquí un caso para determinar si la trama retornada es la pagina de login, muy útil cuando usamos por ejemplo, spring security y la session esta vecina y nos retorna la pagina de login: $.ajaxSetup({ dataFilter: function(data) { if (isLoginPage (data)) { // If it is login page, so is session timeout! location.href = '/j_spring_security_logout'; // ... } return data; } }); Este código sera utilizado por todos los callback que tengas o que vayas a hacer ;)

Me encontré este excelente artículos de cookies en Javascript; explica muy bien cada atributo: http://www.quirksmode.org/js/cookies.html

Articulo en ingles, acerca del uso del YAHOO.util.Event. http://www.dustindiaz.com/yahoo-event-utility/ Un saludo, J

Hace poco tuve un problema relacionado con los reflesh, entonces quiero dejar lo aprendido en un post. Cuando usted utiliza en JavaScript, location.href = location.href Es como si colocaras la direccion directamente en el browser (no actualizar) es decir, haces un GET REQUEST METHOD Si invocas a location.refresh() Es como si utilizaras el boton actualizar, lo que permite que se vuelva a enviar el body de un formulario, es decir, hacemos un POST. Un saludo, J

Google AjaxLibs Hola, Ya fue algún tiempo atrás cuando escuche en una conferencia de Ajax, acerca de repositorios JavaScript de donde puedes referenciar una librería JavaScript y reutilizarla, sin necesidad de tenerla en tu servidor, veamos un ejemplo: <!-- Google reference apis --> <script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script> <!-- Indico que deseo utilizar prototype y scriptaculous --> <script type="text/javascript" charset="utf-8"> google.load("prototype", "1.6"); google.load("scriptaculous", "1.8.2"); </script> Este ejemplo muestra como se incluye el Google JavaScript API y como al mismo se le solicita incluir prototype y scriptaculous. Entre los inconvenientes podrían estar el tiempo de descarga del JavaScript, sin embargo esto es debatible en el sentido que el servidor de Google puede ser más rápido que el...