Similar Posts
Efecto de escala de grises para navegadores no IE
Interesante script que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.
Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:
grayscale( document.getElementsByTagName('div') );
“Grayscaling” in non-IE browser
Vía / Script & Style
Texto explicativo en las cajas de los formularios
Dentro de una serie de artÃculos sobre Javascript he encontrado este script que permite mostrar un texto explicativo en las cajas de texto y que desaparezca cuando el usuario ha escrito algo.
Primeramente necesitamos el HTML que se mostrará, se trata de un formulario normal, pero el texto explicativo, mediante estilos, en vez de aparecer debajo como se verÃa sin estilos, al darle posición absoluta, se mostrará sobre la caja de texto.
<style type="text/css">
.helptext {
position: absolute;
color: #999999;
z-index: 10;
font-size: small;
overflow: hidden;
}
</style>
<form action="" method="post">
<input type="text" name="login" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_login" onclick="ChangeFocus(this);">
Enter Login Name
</div>
<input type="password" name="password" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_password" onclick="ChangeFocus(this);">
Enter Password
</div>
<input type="submit" name="submit" value="Login" onclick="return false;" />
</form>
<script type="text/javascript" language="JavaScript">
UpdateHelpText(document.getElementsByName('login')[0]);
UpdateHelpText(document.getElementsByName('password')[0]);
</script>
Acto seguido, se necesitan las funciones javascript, en este caso son dos, una de ella que pasa el foco a la caja de texto cuando se pincha en el texto explicativo (recordad que está encima de la caja de texto):
function ChangeFocus(el) {
while (el.tagName != 'INPUT')
el = el.previousSibling;
el.focus();
}
Y la otra función que oculta el texto explicativo dependiendo del contenido de la caja de texto:
function UpdateHelpText(el)
{
var label = el;
while (label.tagName != 'DIV')
label = label.nextSibling;
if (el.value == '') { // Field is empty; show text
label.style.left = getElementAbsPosX(el) + 'px';
label.style.top = (getElementAbsPosY(el) - 7) + 'px';
label.style.visibility = 'visible';
}
else { // Field is not empty; hide text
if (label)
label.style.visibility = 'hidden';
}
}
VÃa / AjaxLine
Clipping de vídeo usando HTML5 y SVG en Firefox4
La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).
El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:
SVG
Vídeo
Javascript
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
play.style.display = 'none';
pause.style.display = 'block';
video.play();
}, true);
pause.addEventListener('click', function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
video.addEventListener("ended", function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.
Vía / Project London Trailer
Paginación mediante Javascript
Sencillo pero efectivo método para paginar contenidos mediante Javascript. Puede ser muy útil cuando el diseño no permite grandes espacios para contenidos.
El funcionamiento es muy sencillo, se ocultan los contenidos y mediante los botones de paginación se van mostrando. La verdad es que no serÃa necesaria esta librerÃa, porque como ya he dicho el método es muy sencillo y nosotros mismos lo podrÃamos implementar, incluso mejorar, porque usa la librerÃa cssQuery unicamente para obtener los elementos, mientras que podrÃamos hacerlo nosotros mismos con un getElementsByTagName, si es que nuestras necesidades no son obtener elementos mediante sus estilos, rel u otras cosas.
Javascript pagination in yer face
Hapi.js + Vue.js accediendo a mongodb
Como ya dije, esta aplicación estará basada en Mongodb, y usaremos mongoose como ODM.
El primer paso es instalar mongoose:
npm i mongoose
Una vez instalado crearemos un controlador que nos permita usar la BD en toda la aplicación Hapi.js. Para ello haremos uso de los decorate del servidor. Los decorations permite extender objectos ofrecidos por Hapi.js, en nuestro caso server y request. Usando un plugin nos conectaremos a mongodb usando mongoose y añadiremos ese objecto con los decorate.
Creamos el fichero /plugins/db.js con el siguiente código:
/**
* DB controller
*
* It uses Mongoose and "stores" it in the server and the request using `decorate`
*/
const mongoose = require( 'mongoose' );
exports.plugin = {
name: 'db',
register: async function( server, options ) {
mongoose.connect( options.url, { useNewUrlParser: true } );
const db = mongoose.connection;
// eslint-disable-next-line
db.on( 'error', console.error.bind( console, 'connection error:' ) );
db.once( 'open', function() {
server.decorate( 'server', 'db', mongoose );
server.decorate( 'request', 'db', mongoose );
// eslint-disable-next-line
console.log( 'DB connected' );
} );
},
};
Para configurar la conectividad a mongodb tendremos que añadir los datos a la /config/index.js
const config = {
server: {
port: 3001,
},
website: {
name: `WP Desk`,
},
db: {
url: 'mongodb://localhost/wpdesk',
},
};
Y en el manifiest usado por glue, tendremos que añadir el nuevo plugin y las nuevas opciones de conexión:
const manifest = {
server: {
port: Config.get( '/server/port' ),
},
register: {
plugins: [
{
plugin: './api/home',
},
{
plugin: './plugins/db',
options: Config.get( '/db' ),
},
],
},
};
Ya tenemos casi todo configurado, ahora vamos a empezar con un ejemplo creando un esquema de moongose que nos permite acceder a colecciones de mongodb.
Lo más común es tener una colección de usuarios, que tendrá los siguientes campos:
- userName: de tipo String,
- firstName: de tipo String,
- lastName: de tipo String,
- email: de tipo String,
- role: que referencia a otro elemento de otra colección,
- isEnabled: de tipo Boolean,
- password: de tipo String,
- resetPassword: un objeto representado por:
- hash: de tipo String,
- active: de tipo Boolean,
También crearemos un método estático que devuelva todos los elementos de la colección users para realizar pruebas:
/**
* User model based on Mongoose
*/
const mongoose = require( 'mongoose' );
const Schema = mongoose.Schema;
// Mongoose schema
const userSchema = new mongoose.Schema( {
userName: String,
firstName: String,
lastName: String,
email: String,
role: Schema.Types.ObjectId,
isEnabled: Boolean,
password: String,
resetPassword: {
hash: String,
active: Boolean,
},
} );
/**
* User static model findAll
*
* @returns {array}
*/
userSchema.static( 'findAll', async function() {
const result = await new Promise( ( resolve, reject ) => {
this.model( 'User' ).find( {} ).exec( ( error, data ) => {
if ( error ) {
reject( error );
}
resolve( data );
} );
} );
return result;
} );
const User = mongoose.model( 'User', userSchema );
module.exports = User;
Ya está todo, ahora solo modificamos el handler de la ruta home.js para mostrar los valores de findAll:
/**
* Route handler
*
* @param {object} request
* @param {object} h Hapi object
* @returns {object}
*/
handler: async( request, h ) => { // eslint-disable-line
try {
const result = await User.findAll();
return result;
} catch ( error ) {
return { error: 500 };
}
},
Puedes bajarte el código aquí
Laboratorio: borrar filas de una tabla en Javascript
Viendo el otro dÃa la entrada de aNieto2K, recordé el efecto que usa WordPress para resaltar que se ha borrado una fila de una tabla en las herramientas de administración. Se trata de pintar progresivamente la fila en rojo y luego borrarla, consiguiendo asà que el usuario se percate de qué ha pasado.
Read More “Laboratorio: borrar filas de una tabla en Javascript”