Drupal, Ubuntu, jQuery, CSS
Entradas etiquetadas con JavaScript
JS: Como saber si un objeto undefined está undefined
hace 1 año
en Programación, Tip
Suena a boludez:
if (objetoso == undefined) {
alert("objetoso no está definido.");
}
Pero lo anterior no te va a funcionar porque al querer comparar un objeto que está indefinido, el navegador va a arrojarte un error :S
La forma correcta de hacer esta comprobación entonces es:
if (typeof(objetoso) === "undefined") {
alert("objetoso no está definido.");
}
Y ya nos evitamos que se rompa todo por culpa de un objeto indefinido…
Bye.
Curiosidades y cosas útiles de jQuery
hace 2 años
en jQuery
En addyosmani.com encontré 31 snippets para jQuery de los cuales algunos me parecen especialmente útiles:
Método .live():
Según comentan en el blog (y tiene razón) es mas útil que usar directamente el método .click(). ¿por que?, fácil, porque el método .live() es capaz de mantenerse a la escucha de cualquier elemento que machee con el selector aun si el elemento ha sido creado después de haberlos enlazado.
Un ejemplo:
$('.clickme').click(function() {
alert("Hola, me hiciste click");
});
El código anterior va a funcionar sobre todos los elementos que actualmente existan en el DOM, pero nos podemos ir olvidando que lo haga sobre cualquier contenido que se cree después de ese momento.
$('.clickme').live('click', function() {
alert(“¿ves? Me sigo ejecutando sobre cualquier elemento”);
});
Aquí la diferencia: Si yo después de haber ejecutado el anterior código, hiciera:
$(“body”).append(“<a href=”#” class=”clickme” >Soy nuevo</a>);
El nuevo elemento SI ejecutaría el código.
Agrupado de funciones:
Otra de las gracias que tiene jQuery es que permite apilar funciones:
jQuery('#foo').bind({
click: function() {
alert(“Me haces click”);
},
mouseover: function() {
alert(“Me pasas por encima”);
},
mouseout: function() {
alert(“No estás mas encima de mi”);
}
});
Se explica solo, pero por si quedan dudas lo que hicimos acá fue ahorrar código usando un único selector. Al elemento seleccionado le hemos pegado tres eventos junto a las funciones correspondientes. Geeeenial.
Método .sleep()
Siempre me hiso falta una manera de retardar algunas acciones, y de momento había estado usando query.timer.js (un plugin). Pero los tiempos cambian, y desde la versión 1,4 de jQuery ya viene esta característica incorporada.
Ejemplo:
$('#caja').slideUp(300).delay(1000).slideDown(400);
Traducción: #caja va a plegarse en 300 mili segundos, no va a hacer mas que esperar un segundo (1000 mili segundos) y va a desplegarse a lo largo de 400 mili segundos
Método .data()
Si necesitas almacenar información (temporalmente) podes usar variables.. Pero si lo que querés es “pegar” información a elementos del DOM lo que necesitas es esto.
Ejemplo:
$("div").data("nombre", 'Marcelo');
alert($("div").data("nombre") === 'Marcelo'); //imprime true
¿Para que sirve?. Está mas que claro. Si tuvieras una tabla, y a los <tr /> les quisieras establecer un id asociado…. ¿vas viendo la idea?
Shortcut para el metodología .find()
Si tenes que ir seleccionado elementos que están dentro de un elemento por lo general usamos el método .find(). Bueno resulta que podemos usar el método de una forma mas abreviada y clara:
$(“a”).find(“b”); //podemos expresarlo como: $(“a”, “b”);
Seleccionar elementos cuyo id contiene caracteres especiales:
si tratamos seleccionar un div que tenga en su id un par de corchetes como en el siguiente caso:
$("$item_[200]");
No va a funcionar. Pero podemos seleccionar este elemento de la siguiente forma:
$("$item_\\[200\\]");
Hace casi un año me vi en la tarea de investigar una vez mas cual era la mejor forma de obtener bordes redondeados para estos navegadores pero esta vez teniendo en cuenta la velocidad de desarrollo.
Las opciones que tenia a mano eran:
La mas tradicional, anidar divs hasta el cuatro niveles para poder colocar imágenes en cada una de las esquinas:
<div class="redondeo">
<div>
<div>
<div>
<h2>Lorem ipsum dolor</h2>
<div class="contenido">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
</div>
</div>
</div>
</div>
* {
font-family: Verdana;
}
.redondeo {
background: url("images/esq_sup_2-1.png") no-repeat scroll 100% 100% transparent;
width: 300px;
}
.redondeo div {
background: url("images/esq_sup_1-1.png") no-repeat scroll 0 100% transparent;
}
.redondeo div div {
background: url("images/esq_sup_2.png") no-repeat scroll 100% 0 transparent;
}
.redondeo div div div {
background: url("images/esq_sup_1.png") no-repeat scroll 0 0 transparent;
}
.contenido {
background: none repeat scroll 0 0 transparent !important;
padding: 0 15px 15px;
text-align: center;
}
h2 {
color: #fff;
text-align: center;
}
Este método tiene sus pro y sus contras.
Lo que tiene de bueno es que esta técnica es compatible con todos los internet explorer partiendo de la versión 5 y que la velocidad de renderizado es instantánea.
Lo malo es que es poco mantenible. Lo digo por lo siguiente: pensemos por un momento que tenemos que cambiar el color de la cabecera de la caja de ejemplo. El primer problema es que al ser una imagen que tiene los bordes creados con algún editor de imágenes como Photoshop, Gimp o Paint.NET, para cambiar el color deberíamos recurrir a estas herramientas. Si quisiéramos ponerle un borde de color lo mismo., y ni hablar si queremos remaquetar el site entero.
Y lo anterior es por decir alguno de los casos mas normales, pero hay mas, y quien haya usado esta técnica sabe de lo que hablo.
La segunda opción DD_roundies:
Es la que estuve usando intensamente hasta hace poco. Se trata de una librería JavaScript llamada DD_roundies.
Esta librería redondea cualquier elemento HTML de tipo bloque usando VML para conseguirlo.
Es realmente notable el resultado que se consigue con esta librería. De hecho por un buen tiempo la consideré la solución mas acertada ya que es realmente fácil de usar:
<!-- Agregamos el JS--> <script src="DD_roundies.js"></script>
//Agregamos el JS
/*
Ahora solo necesitamos decirle a ddroundies sobre que
class o id debe redondear y de cuanto es el radio de
redondeo que debe aplicar */
/**
* Un redondeo de todos los bordes a 10 pixeles para todos
* los elementos HTML que lleven definida esta clase
* */
DD_roundies.addRule('.redondeado-10px', '30px');
/*
Tambien se puede especificar un redondeo para cada
una de las esquinas
5px para la esquina superior izquierda
10px para la esquina superior derecha
15px para la esquina inferior derecha
20px para la esquina inferior izquierda
*/
DD_roundies.addRule('.redondeado-popurri', '5px 10px 15px 30px');
/*
Es opcional definir los css, pero
aca los defino para darles un color
*/
.redondeado-10px {
background-color: #336699;
}
.redondeado-popurri {
background-color: #ff0000;
}
<div class="redondeado-10px">
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<br/>
<br/>
</div>
<br/>
<div class="redondeado-popurri">
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<br/>
<br/>
</div>
Como ven el uso es simple, PEEEERO la gran pega que tiene esta técnica es el hambre voraz de procesador para renderizar las esquinas, brutal, y en un principio para hacer cosas chicas como una o dos cajas redondeadas va de maravilla, pero haganlo con 20 o 30… Mejor NO LO HAGAN, ya les puedo adelantar que la pagina va a quedar congelada varios segundos hasta que termine de dibujar todas las esquinas.
La tercera, curved-corner:
Basada también en VML, es “curved-corner” y Alexis de Eliseos.net ha dedicado un post hace unas semanas.
Esta implementacion fue de las primeras alternativas que conoci hace un tiempo ya, y la usé y deje de usar con la misma rapidez porque tiene dos flaquezas inaceptables y que al dia de hoy no se han solucionado:
La mas importante es que despues de redondear una X cantidad de div o lo que sea, va a fallar y dejar de redondear el resto.
La segunda es que esta solucion a diferencia de la segunda propuesta, solo permite aplicar un redondeo completo al div, dejando fuera la porsibilidad de hacer un redondeo solo a una esquina.
Las otras soluciones:
¿Hay mas? si claro, un millón de soluciones. Las que mas han prosperado son sobre todo las basadas en frameworks js. Un ejemplo es
http://www.malsup.com/jquery/corner/
Pero ni vale la pena ponerse a hablar este tipo de soluciones porque no alcanzan a crear unos bordes tan perfectos como los que logran las anteriores soluciones ya citadas.
Conclusion:
De estas tres tecnicas la mas reocmendable de todas es la de DD_roundies, que mas alla de tener inconvenientes como las otras dos, es la que mas compensa la relacion velocidad de desarrollo – calidad. Lo unico en lo que hay que tener un muy especial cuidado es en no llenar la pagina de bordes redondeados por medio de este metodo porque insisto, van a tener un increible problema de performance.
De hecho, para cerrar este post puedo proponer una solucion hibrida entre la solucion de redondeo por medio de imagenes y la de DD_roundies, usando la primera para cualquier lista de elementos HTML que se repitan contantemente y sean iguales claro, dejando la opcion de DD_roundies para situaciones mas complicadas de solucionar con lo que a diseño respecta.
No funciona jQuery change() en Internet Explorer
hace 2 años
en jQuery
La situación: Probaste en Firefox el método change de jQuery sobre un checkbox, pero cuando lo probas en IE falla, no hace caso.
Esto se debe al pésimo soporte que ofrece Internet Explorer con javascript, pero esta nota no es para hablar mal de IE, para eso ya habrá un post entero y de varias paginas 
La solución mas acertada es mantener el método change para todo navegador que no sea IE, y usar click para IE. Lo hacemos así porque si aplicamos click sobre un checkbox en un navegador serio, este no lanza nada porque para el no es un click, es un change.
$(document).ready(function() {
var che = $(".mi_checkbox");
if ($.browser.msie) {
che.click(function() {
alert("funciono ok");
});
} else {
che.change(function() {
alert("funciono ok");
});
}
});
Variables globales en Javascript
hace 2 años
en jQuery, Programación
¿A que más de uno tuvo el mismo problema que yo?
Hablo de usar una función que tiene callback como $.post() de jQuery y no saber como recuperar los valores que se sesean en la respuesta de la petición.
Bueno es más bien de simple solución:
MAL:
$.post("urlDestino", { mandoAlgo : "cosas" },
function(resultado) {
var variableLocal = resultado
return variableLocal //--> esta variable no se va a ver jamas fuera de esta función
}, "json");
BIEN:
var variableGlobal;
$.post("urlDestino", {
mandoAlgo : "cosas"
},
function(resultado) {
var variableGlobal = resultado
return variableGlobal
}, "json");
Si todavía no te diste cuenta es tremendamente simple: definir las variables fuera de cualquier función.