Smooth Scroll, desplázate con estilo por una página web

Está pequeña utilidad llamada df Smooth Scroll hecha en JavaScript, nos permite desplazarnos entre los link que apuntan a la misma página (anchor).

Cómo usarlo

<script type="text/javascript" src="smooth.pack.js"></script>

En la parte html

<a name="top" href="#footer">IR ABAJO</a>
<p>Contenido por aqui...</p>
<a name="footer" href="#top">IR ARRIBA</a>
<p>Mas contenido por aqui...</p>

El resultado será un desplazamiento con estilo entre los enlaces internos gracias a que se usa JavaScript.

Enlaces | Demo 

Calendar Data Select, control calendario para Rails

Calendar Date SelectCalendar Date Select es un nuevo control calendario (muestra dia y hora) diseñado para usarse en aplicaciones Rails. Usa la librería Javascript Prototype.

Para instalar este plugin, vamos a la consola y escribimos:

script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select

Enlace | Ruby Inside, Demos Calendario

Más iconos gratuitos

Vía Blogultura me entero de zeus box, un blog que tiene una sección dedicada a compartir utilidades, como sets de iconos gratuitamente. Estos paquetes contienes iconos en formatos .ico y .png.

Free Icons



Crea tu avatar con Avatar Sizer

Avatar Sizer es una plicación para crear avatares (pequeñas imágenes), de manera rápida y fácil. Solo redimensiona una imagen, no la edita. Nos permite crear una avatar de diferentes tamaños, desde 1x1 píxeles hasta un máximo de 150x150 píxeles. Útil para tener nuestro avatar en foros, redes sociales, mensajería y más. Podemos obtener nuestro avatar en diversos formatos: jpg, gif, bmp, wmf, emf e ico.

Avatar Sizer

3 nuevos menús en CSS

Una lista de nuevos menús para todos los gustos! gracias a nuestros amigos de CSSPlay

1. Menú en forma hexagonal

Menu 1 

2. Menú lista desplegable

Menu 2 

3. Menú superior con sombras 

Menu 3

Gráficos 3D con Canvas

El autor de Dragan's Blog ha desarrollado una librería llamada canvas3DGraph.js que nos permite crear / mostrar gráficos 3D en una página HTML. Él nos explica que la etiqueta <canvas> no es soportada por IE (cuando no!). Así que teniendo en cuenta eso se ayudo de la librería excanvas.js para mostrar o trabajar sobre IE. Sobre Firefox y Safari los gráficos hechos con canvas van de maravilla (10 veces más rápido que IE).

Canvas 3D

El la página del proyecto podemos encontrar un ejemplo en tiempo real e información sobre como usar las librerías en nuestra páginas web. 

Enlaces | ¿Qué es canvas?

Resaltado de palabras después de usar Buscador (JavaScript)

La librería searchhi hace posible resaltar automáticamente palabras de una página web que son buscadas a través de los buscadores web. Para entender mejor esto, cuando un buscador nos arroja los resultados de cierta búsqueda, éste resalta la expresión buscada en negrita, y si hacemos clic en En caché lo resalta también con un color de fondo. Bueno es así como trabaja searchhi.

Resalta tus busquedas

Como usarlo

Descarga la librería, y en la página donde deseas que las palabras se resalten, agregas la siguiente línea.

 <script src="searchhi.js" type="text/javascript"></script>

Además en tu hoja de estilos agregas span.searchword (ó .searchword) y con el contenido "background-color: yellow", esto es para indicar el color con el cual se resaltará las palabras buscadas encontradas.

.searchword{
background-color:yellow;

Enlaces | Mas información y documentación

Edge.js, aplica una máscara a imágenes con JavaScript

La librería Edge.js combina Canvas y JavaScript para aplicar una imagen como máscara sobre otra imagen. Por regla: la imágen que aplicaremos como máscará debe ser PNG.

Edge.js

Como usarlo

<script type="text/javascript">
var mask2load = new Array();
mask2load[0] = "masks/8bit/crippleedge.png";
mask2load[1] = "masks/8bit/frizzedge.png";
mask2load[2] = "masks/8bit/softedge.png";
mask2load[3] = "masks/8bit/splatteredge.png";
mask2load[4] = "masks/8bit/waveedge.png";
</script>
// else only this line...
<script type="text/javascript" src="edge.js"></script>

Vía Ajaxian

Calendario con Mootools - JavaScript

Mootools CalendarHe aquí un interesante calendario elaborado con Mootools. La página del autor ofrece un ejemplo y documentación sobre las opciones que dispone. Además de los archivos necesarios: DataPicker.js y DataPicker.css. Necesitarán descargar la librería de Mootools v1.11 ó superior y algunas dependencias: Core, Class, Class.Extras, Array, String, Function, Number, Element, Element.Event, Element.Filters, Element.Selectors, Window.DomReady y Json.

Ejemplo

<html>
<head>
<title>MooTools DatePicker Ejemplo</title>

<link rel="stylesheet" href="DatePicker.css" type="text/css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/DatePicker.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
});
</script>

</head>
<body>
<div>
<h1>MooTools Date Picker</h1>
<p>
<label for="birthday">default calendar</label>
<input readonly="readonly" id="birthday" name="birthday" class="DatePicker" tabindex="1" value="10/24/2016" type="text">
</p>
<p>
<label for="new_day">calendar with all options</label>
<input readonly="readonly" id="new_day" name="new_day" class="DatePicker" alt="{
dayChars:3,
dayNames:['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
format:'dd-mm-yyyy',
monthNames:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Deciembre'],
startDay:1,
yearOrder:'desc',
yearRange:90,
yearStart:2007
}" tabindex="1" value="02-08-2007" type="text">
</p>
</div>
</body>
</html>

Desplazamiento interactivo de imágenes con Javascript

Corner Dock es una pequeña utilidad en Javascript que permite desplazarnos de manera interactiva a través de un grupo de imágenes. Por defecto la ubicación de las imágenes es en la esquina superior (por algo el nombre), aunque no he visto si eso se puede configurar.

Como usarlo

Después de descargar el paquete comprimido, referenciamos en nuestra página html, la hoja de estilos y el archivo Javascript.

<script language="JavaScript" src="js/CornerDock.js"></script> 
<link rel="stylesheet" href="css/CornerDock.css" type="text/css" />

Luego en un div (id=MiDiv) colocamos una serie de imágenes.

<div id="CornerDockDiv" style="border:1px solid red;"> 
<!-- Each 'a' tag must have a unique ID and must contain one single 'img' tag -->
<a id="0" href="JavaScript:alert('You clicked icon 1');"><img src="images/Chart.png" alt="" /></a>
<a id="1" href="JavaScript:alert('You clicked icon 2');"><img src="images/Pie Diagram.png" alt="" /></a>
<a id="2" href="JavaScript:alert('You clicked icon 3');"><img src="images/User.png" alt="" /></a>
<a id="3" href="JavaScript:alert('You clicked icon 4');"><img src="images/Chat_01.png" alt="" /></a>
<a id="4" href="JavaScript:alert('You clicked icon 5');"><img src="images/Class.png" alt="" /></a>
<a id="5" href="JavaScript:alert('You clicked icon 6');"><img src="images/Contact.png" alt="" /></a>
<a id="6" href="JavaScript:alert('You clicked icon 7');"><img src="images/Copy.png" alt="" /></a>
<a id="7" href="JavaScript:alert('You clicked icon 8');"><img src="images/House.png" alt="" /></a>
<a id="8" href="JavaScript:alert('You clicked icon 9');"><img src="images/Shopping cart.png" alt="" /></a>
</div>

Creamos un Corner Dock, pasamos como parámetros el id del div que contiene nuestras imágenes, así como la altura y ancho de este.

<script language="JavaScript">  
window.CornerDock = new JSCornerDock('CornerDockDiv',300,800);
</script>

El resultado final lo podemos apreciar aquí.

Navegación

Categorias

Archivos