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.
Muchas veces nos pasa que al testear en Safari o Chrome, nos encontramos con que los forms al posicionarte sobre ellos, muestran un bordeado tipo sombra celeste, algunas veces, está bueno, pero en otras, queremos un diseño mas simple.
Aca te dejo un simple TIP para solucionar ese problema.
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.
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.
Les voy a dejar un buen tip que lo usamos en DreamDesigners, para varios proyectos.
Como animar un div mediante una acción con el mouse (mouse over) que en la sintaxis de css sería :hover
La idea será realizar un tooltip hecho 100% con las transiciones de CSS3 sin necesidad de utilizar Javascript o JQuery.
Antes que nada, tenemos que saber que los nuevos browsers ya soportan css3, aunque muchos todavía no de forma nativa, por lo tanto debemos utilizar a la hora de “animar” ciertos prefijos en el código del style.
Si bien es un poco exagerado, la realidad es que no hay forma de maquetar una web aplicando el método “tableless” y sin hacer uso de floats. A mi no me parece lógico que para ubicar 2 bloques en forma horizontal halla que flotarlos a la izquierda o a la derecha. Y si los quiero en el medio? Por qué no hay un “float:center”?
Uno de factores importantes para la rápida carga de un sitio web, desde que el cliente o browser se conecta al servidor hasta que se renderiza la página web es la cantidad de peticiones (o requests) hechas al servidor, y es que hay que tener en cuenta que una vez cargado el documento principal (el que contiene el html en si), se deben descargar las imágenes, las hojas de estilo y demás archivos complementarios, todos necesarios para que el resultado final sea mostrado tal cual se diseñó.
El tema es simple, cada elemento complementario pedido al servidor tiene un tiempo de conexión, un tiempo de latencia y un traspaso de meta-información que componen la cabecera de estas peticiones, aparte tenemos que tener en cuenta que por regla los browsers o navegadores web solo harán 3 peticiones simultaneas por dominio y hasta 9 por IP, así que si reducimos estas conexiones vamos a tener una carga mas rápida. Una de las formas de reducir el número de peticiones es usando los llamados CCS Sprites. Leer este tip »
Buscando un poco de documentación sobre el lenguaje de configuracón Yaml, encunetro este Framwork CSS, que aparte ofrece on-line una herramienta para crear y una plantilla sobre este FW CSS, Yaml (Yet Anoter Multicolumn Layouts) ofrece una buena base de CSS para trabajar con templates basados en columanas sobre XHTML, aparte de incluir CSS’s y JS’s para fixear determinados bugs de Intertet Explorer. El codigo esta bien comentado y respeta los estandares web. Lo único malo es que no hay documentación en español (por ahora).
Pero lo que les vengo a mostrar, es una herramienta on-line que ofrecen, para crear un layout basado en CSS en pocos minutos, solo seleccionando el estilo de columnado y otras como el estilo de la barra de navegion ,etc.
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