GlassBox: bordes transparentes mediante Javascript y CSS

ByLuis February 28, 2008

GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

GlassBox

Vía / CSS Globe

css | How to | PHP

Selecciona tu hoja de estilos mediante PHP

ByLuis August 29, 2006

En 456 Berea Street nos muestran una forma muy interesante para poder mostrar tu pÃ¡gina con diferentes hojas de estilo. Tiene el inconveniente de que solo admite dos estilos entre los que elegir.

Funciona aunque el javascript estÃ© desactivado, pero no cuando estan desactivadas las cookies, pero no darÃa error, tan solo visitarÃamos siempre la misma pÃ¡gina.

El funcionamiento es sencillo, disponemos de dos directorios, cada cual con las hojas de estilo que nos interesa. HabrÃ¡ un enlace a una pÃ¡gina que cuando accedemos a ella nos cambiarÃ¡ de directorio, guardarÃ¡ el valor en una cookie y nos devolverÃ¡ a la pÃ¡gina a la pÃ¡gina desde la que hemos hecho la llamada o a la raÃz si no existÃa esa pÃ¡gina. Y luego en cada pÃ¡gina deberemos obtener el valor del directorio de las cookies y usarlo para recuperar la hoja de estilo correspondiente.

El script que se encarga de cambiar de directorio es el siguiente:

<?php
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "main" : "zoom";
setcookie("layout", $layout, time()+31536000, '/');
$ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "http://{$_SERVER['SERVER_NAME']}/";
header("Location: $ref");
?>

Y luego en cada pÃ¡gina tendremos que incluir lo siguiente:

Para recuperar el directorio.

$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "zoom" : "main";

Para seleccionar el estilo correcto.

<style type="text/css" media="screen,projection">
@import '/css/<?php echo $layout; ?>.css';
</style>

Build your own PHP style sheet switcher

Javascript

Hapi.js + Vue.js empezando con las routes

ByLuis May 7, 2019May 7, 2019

Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.

Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.

Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:

const Config = require( '../config' );

const websiteName = Config.get( '/website/name' );

const register = function( server, serverOptions ) { // eslint-disable-line
	server.route( {
		method: 'GET',
		path: '/',
		options: {
			tags: [ 'api', 'home' ],
			description: 'Server home',
			notes: 'Server home',
			auth: false,
		},
		handler: function( request, h ) { // eslint-disable-line
			return {
				message: `Welcome to ${ websiteName }`,
			};
		},
	} );
};

module.exports = {
	name: 'api-home',
	dependencies: [],
	register,
};

Ahora solo falta añadir el plugin en el manifest.js

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
		],
	},
};

Puedes bajarte el código aquí

Javascript

Select Box Factory: combos con diseño y funcionalidades

ByLuis September 9, 2008

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

Usa divs en vez de options
Añade funcionalidades al desplegable
Los contenedores pueden contener lo que necesitemos
Las opciones pueden estar activas o inactivas
Los estilos se pueden modificar con facilidad
Distintos tipos de combos
Filtros

Select Box Factory

Javascript | Tutoriales

Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis July 20, 2009

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Javascript

Crear una nube de etiquetas con jQuery

ByLuis February 2, 2009

Aunque las nubes de etiquetas ya no están tan de moda como hace un tiempo, el tutorial donde explican cómo hacer un tagscloud mediante jQuery merece la pena, ya que se trata de una explicación detallada.
No solo se centra en jQuery, sino en la parte PHP que devuelve los datos en JSON y en los estilos CSS para mostrar las etiquetas según su relevancia.
Realmente la parte jQuery solo cambia el tamaño de la letra según la frecuencia de la etiqueta.
Building a jQuery-Powered Tag-Cloud

css | Javascript

Efecto fadding como en Flash con jQuery

ByLuis March 6, 2008

Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.

El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe

Similar Posts