Este es un tip muy útil, a la hora de diseñar, cada vez utilizamos mas los “pop up divs” y no tanto los Pop up Windows.
Cuando vamos a crear un div, absoluto o fixeado, por lo general utilizamos para centrar “top” y “left” en porcentaje o en pixeles. Pero en algunas pantallas, chicas o grandes, no nos va a quedar como mas nos gustaría, y eso influye negativamente en la experiencia del usuario.
Con esta solución, se acaba el problema.
Acá les dejo la funcion en jQuery que vamos a utilizar.
jQuery.fn.center = function () {
this.css("position","absolute");
//this.css("position","fixed"); Tambien podemos usar FIXED si queremos que al scrollear se quede fijo.
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
Una vez que escribimos la función, lo aplicamos en nuestro div.
Me pasó que tuve que crear un elemento dinámicamente y definirle que tenia que flotar a la inzquierda (float: left) sin poder tocar css, asi que lo hice desde JasvaScript de la forma correcta:
var elemento = document.createElement('img');
elemento.style.float = 'left';
// o
elemento.style['float'] = 'left';
El tema es que en Firefox no funcionaba y despues descubrí que en IE tampoco.
Cuando tenemos que insertar un elemento dentro de otro en JavaScript podemos usar el famoso método appendChild, y cuando tenemos que meter un elemento, no al final de los elementos padres, sino antes que otro, podemos usar otro método llamado insertBefore, el problema es que no existe ningún metodo nativo que nos deje insertar un elemento “despues” de otro, de manera que lo podamos usar como referencia para hubiar nuestro elemento nuevo donde queramos. Pero si hay una forma, y podemos hacer una función llamada insertAfter().
Aveces tenemos que desplazarnos dentro de un elemento con scroll, para terminar mostrando uno en especial dentro de este, un ejemplo puede ser un listado donde tengamos que “movernos” a un elemento de la lista en especial, o el tipico chat, donde tenemos que mover el scroll hasta el último. El otro día me presente ese problema y aunque ya lo habia resuelto con scrollTo, decidi no meter mas modulos al ya cargado proyecto, ya que solo necesitaba ir hasta un elemento en especial.
Muchas veces necesitamos saber cual es el ancho de un elemento, podemos saberlo de entrada si nosotros mismos lo definimos y si no se modifica en ningún momento, pero que pasa si este elemento es de ancho dinámico o nuestro sitio tiende a modificarlo (efectos, etc), para esto jQuery tiene un método llamado width()que nos devuelve el ancho actual del elemento, pero esto nos devolvería la version width de css, que no es la “real”, ya que el elemento puede tener propiedades que agranden su tamaño, como borde, padding, margen, etc.
Los elementos select son problemáticos a la hora de obtener el valor del option seleccionado, en primer lugar por que un select no solamente puede contener un elemento seleccionado, sino varios, aunque es poco común este elemento también fue diseñado para usarse como una lista de valores, esto se hace usando la propiedad multiple de estos elementos: Leer este tip »
Como ya saben jQuery es comodísimo a la hora de agregar efectos a nuestras páginas y mejorar las interfaces, un simple efecto de fade que antes eran varias lineas de código, ahora es un simple .fedeIn() / . fadeOut(), y asi con muchas cosas, podemos hacer estos efectos “lentos” para dar una sensación mas moderna, hacer desaparecer elementos, o habilitar otros en ciertos casos, los efectos nos suman muchos puntos en cuanto a como se ve la página. Pero tenemos un problema, que pasa cuando 2 efectos se cruzan, por ejemplo, si el desvanecimiento de un div tarda 1 segundo, y a los 500 milisegundos lo hago “reaparecer”, estarémos enviando 2 efectos a la vez, cosa que puede terminar en errores gráficos.
Esto no es nada de HTML5 ni Flash, solo una forma de hacer un uploader de archivos asincrónico sin recargar la página. Y es que aveces hacemos una buena interface en ajax con todo bonito y cuando tenemos que subir un archivo, nos encontramos con el problema de que no podemos hacer upload de un archivo por Ajax, ya que no tenemos permisos desde Javascript para leer un archivo, pero igual hay una solución.
Esto mas que un Tip es un recurso, el otro día necesitaba poder parsear una respuesta JSON desde javascript, como todos sabemos JSON es naturalmente Javascript, por lo que leerlo se hace con un simple eval, pero para poder convertir un objeto a JSON, se debe reconocer todas las propiedades y métodos de dicho objeto y convertirlo en un string respetando la sintaxis.
Hace poco escribí un post sobre como emular ajax cross domain, y la forma era básicamente llamar un script el cual traía los datos en una variable de javascript, el problema es que descubrí al terminar la aplicación y testearla en IE que no funcionaba el evcento onload del elemento script, asi que tuve que encontrar la forma de solucionarlo, y aqui se las traigo.
En web2.0-tips, cualquiera puede publicar un consejo, truco o articulo relacionado con el desarrollo y diseño web. Tu puedes registrarte y postear, aparte te quedas con el 80% de impresiones de adsense en tus publicaciones.
Ultimos comentarios