Javascript

Librería Javascript para hacer zoom en imágenes

ByLuis February 8, 2008

FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.

Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente.
FancyZoom

Javascript

JIT: JavaScript Information Visualization Toolkit

ByLuis May 9, 2008

Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.

Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente.
JIT

Javascript

Highlight.js: resalta código automáticamente

ByLuis October 1, 2007

Si hace unos dÃas hablÃ¡bamos de CodePress, hoy vamos a hablar de otro Javascript parecido que resalta el cÃ³digo que se introduce en tu HTML entre las etiquetas <pre><code> … </code></pre>.
En este caso detecta automÃ¡ticamente el lenguaje de programaciÃ³n, aunque se puede indicar tambiÃ©n en el class de la etiqueta code, o tambiÃ©n se puede ignorar el cÃ³gido si ponemos como estilo no-highlight.
Los lenguajes que reconoce son los siguientes: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, RenderMan (RSL and RIB), SQL, SmallTalk, Axapta, 1C. A parte permite exportar el cÃ³digo HTML generado y aÃ±adirlo como plugin para WordPress.
Highlight.js
VÃa / WebAppers

Javascript

Colección de calendarios Javascript

ByLuis December 11, 2006

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.

css | Javascript

Añadir números de línea en highlight.js

ByLuis April 16, 2019April 17, 2019

Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.

El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.

document.addEventListener( 'DOMContentLoaded', () => {
	const prevHighligth = window.hljs.highlightBlock;
	window.hljs.highlightBlock = block => {
		const newline = '<span class="sw_new_line"></span>';
		// Replace all without regex
		block.innerHTML = block.innerHTML
			.split( newline )
			.join( '' );
		prevHighligth( block );
		if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
			block.innerHTML = newline +
				block
					.innerHTML
					.replace( /\n/g, `\n${ newline }` );
		}
	};
} );

¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.

Ahora toca explicar la parte CSS, para ello usaremos CSS counters.

pre code {
	counter-reset: linenumber;
}

pre code .sw_new_line::before {
	content: counter(linenumber, decimal-leading-zero);
	counter-increment: linenumber;
	padding-right: 15px;
	font-size: 0.8em;
	opacity: 0.6;
}

Javascript

Simpletip: tooltips mediante jQuery

ByLuis February 9, 2009

Simpletip es un plugin para jQuery que nos permite añadir tooltips a elementos HTML de forma sencilla y cómoda.

Posee muchas opciones para configurar el tooltip, además de ser modificable mediante estilos.

$("JQUERY SELECTOR").simpletip({
content: 'My Simpletip',
fixed: false
});

Funciona en Firefox 1.5+, IE6+, Safari 2.0+ y Opera 9.0+.

Simpletip

AJAX | Javascript

Ya tenemos nuevo ThickBox

ByLuis August 10, 2006

De muchos es conocido Lightbox, y la popularidad que produjo a su autor en su momento cuando se hizo pÃºblico. BÃ¡sicamente es uno de los efectos que mÃ¡s se estÃ¡n viendo en pÃ¡ginas webs a la hora de mostrar imÃ¡genes. No hablamos de nada nuevo ni lo descubrimos ahora.

Y como alternativa a Lightbox tenemos ThickBox 2.0 mucho mÃ¡s ligera y potente con sÃ³lo 27Kb de cÃ³digo. Â¿QuÃ© son 27Kb que sirven para cosas como esta?.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Similar Posts