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.
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 los bloggers para darle valor a sus contenidos utilizan videos complementando la nota que escriben.
Encontramos una solución muy práctica para todos los generadores de contenido. Vidiofy ofrece con un minimo script incrustado al final de la página, un sistema de relacionar videos y además compartirlos y comentarlos con varias redes sociales.
Por si no saben, los captchas son sistemas de protección contra procesos automatizados, como los conocidos spam bots, una forma de validar que el que está realizando una acción es un humano y no un programa o bot, esto se logra pidiendo una acción que solo puede realizar un humano, como escribir ciertas letras que estan deformadas para que los sistemas de OTR no puedan leerlas, fondos aleatorios y efectos de humo o rayas que confundan la identificación por software.
El problema de esto es que los sitemas de identificación para romper estos sistemas son cada vez mejores, asi que los captchas tienen que ser mejores, pero sin imposibilitar la lectura humana, realmente estos se vuelven cada vez mas molestos, asi que estan apareciendo formas alternativas, dificiles para los bots, pero mas “humanizadas”.
Yo uso el de PHP porque me cabe el PHP, quizas es mas copado usar el de javascript.
Antes de comenzar a escribir cualquier cosa les recomiendo hacer desde la misma pagina de developers su primer App para poder usar el Api Key y el Api Id que despues te van a pedir.
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