Similar Posts
Javascript para realizar drag y resize
Buen script que nos permite mover nuestras capas mediante drag&drop y cambiarlas de tamaño.
Funciona con posicionamiento relativo y absoluto de los elementos en la página. Además permite personalizar los estilos mediante CSS. No es obtrusivo. Es posible indicar tamaños máximos y mínimos para las cajas y es compatible con la mayoría de los navegadores.
DragResize
Vía / Ajaxline
jQuery Masonry: encaja capas HTML
Supongo que lo de “encajar capas HTML” no es algo que se entienda muy bien, pero realmente se trata de eso. Este plugin de jQuery coloca las capas HTHL de tal forma que no queden espacios en blanco entre ellas (algo normal cuando se usa el css float).
Hay que tener cuidado, porque aunque nos devuelve un layout sin espacios en blanco, también nos lo da con un orden no muy usable, por lo que es importante no usar este plugin cuando el orden de colocación importa.
jQuery Masonry
Vía / WebAppers
Colección de calendarios Javascript
En muchas aplicaciones web, la utilización de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando asà que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …
Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:
- The DHTML / JavaScript Calendar: visible mediante popup o en plano, adecuado para seleccionar fecha y hora, válido para la mayorÃa de los navegadores, admite CSS, themes, navegación por teclado, muestra los dÃas de los meses adyacentes, traducido a varios idiomas, dÃas especiales resaltados de distinta manera.
- Calendar Popup: se muestra un popup mediante ventana o usando capas, implementado para que tenga el aspecto de Microsoft Outlook, fácil de usar.
- Zapatec Calendar: script comercial, muy completo, admite varios meses, válido para la mayorÃa de los navegadores, permite varios formatos de fecha y multiple selección de dÃas.
- ScriptCalendar: versión comercial, basado en objetos, fácil de usar y de modificar, válido para la mayorÃa de los navegadores.
- CalendarXP: versión comercial, muy completo que a parte del calendario pequeño, muestra un calendario grande que admite más detalles.
- Tigra Calendar: el que más me ha gustado, cada campo es seleccionable, se puede adjuntar a un campo existente, meses seleccionables mediante scrolling y muchas cosas más.
- Epoch Calendar: básico, de aspecto atractivo y válido para ser usado en aplicaciones AJAX.
Usa jQuery para mostrar mensajes según origen de la visita
Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.
// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);
Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.
jQuery Fun: Greeting Your Site Referrals
Vía / dzone
Evitar el caché en las hojas de estilo
Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.
Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.
function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}
En este caso el autor hace uso de la función de Prototype $$, pero se podrÃa hacer sin el uso de este framework.
Como consejos sobre el mismo tema yo añadirÃa dos:
- si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, asà los cambios aparecerán, luego los podrás ver en la página.
- si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />
Documentación oficial de prototype: por fin!
Prototype ya dispone de documentación oficial. Aprovechando el lanzamiento de la versión 1.5 de la famosa librerÃa han publicado la documentación de la API, un blog y una sección de tutoriales.
La documentación está realmente bien. Bien organizada y bajo un diseño limpio y claro. Pero se echan de menos dos cosas: la posibilidad de que la gente envÃe comentarios y ejemplos como ocurre con la documentación de PHP y un buscador. Respecto al buscador, proporcionan un bookmarklet que cumple esa función pero parece una solución forzada.
La sección de tutoriales y consejos está todavÃa muy vacÃa pero es una buena idea el que la hayan implementado. Actualmente ofrecen dos documentos: Introducción a AJAX y Cómo Prototype extiende DOM.
Y el blog, genial. TodavÃa esta vacÃo pero es lógico… lo acaban de publicar! Desde luego yo ya me he suscrito a las RSS
VÃa / Anieto2k