Position absolute y relative

Agregar a favoritos

16 Comentarios

Posteado hace 338 días en:

Este tip puede ser una tontería pero es algo que a simple vista no se tiene en cuenta.

Cuando usamos position absolute sabemos que la capa se mueve con las propiedades top,left, right y bottom, pero si la caja contenedora tiene position relative el elemento se mueve en relación al tamaño de la caja y no de la página web.

Lo vemos por ejemplo para redondear capas o añadir sombras.

<div>
    <h3>Hola!</h3>
</div>

div {
position:relative;
}

div h3 {
position:absolute;
top:0;
left:0;
}

La diferencia de usar position relative la puedes ver en este pequeño gráfico.

relative


is_ajax

Agregar a favoritos

6 Comentarios

Posteado hace 347 días en:

Sencilla función para saber si tus peticiones vienen de AJAX o no. Para que funcionen tienes que saber si tu framework envía esa cabecera.

function is_ajax(){
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest');
}

Si utilizas tu propia clase tienes que enviarla

this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

Skin DS r4

Agregar a favoritos

7 Comentarios

Posteado hace 347 días en:

Hace unas semanas o así intente contribuir con la comunidad creando una skin para la r4, la primera parte es la que veis pero la segunda anda aun un poco floja.

r4

También hay que tener en cuenta que no acepta toda la gama de colores y en la DS se remarca bastante el degradado. Las pantallas de elección de juegos es la que me tiene mosca, no me termina de convencer así que la he dejado reposando. Seguro que tarde o temprano daré con la clave jeje.


Toggle en MooTools

Por fin han escuchado las palabras de los usuarios y han añadido las funciones para ocultar y mostrar capas como existe en Prototype.

Ayer mismo andaba liado escribiendo y no daba con la tecla para ello, pero claro en parte tienen razón, para que un display soso cuando puedes usar Fx.Slide.

Han llegado a un acuerdo, usan Element.toggle con Fx.Slide.

Ejemplo:

var fx = new Fx.Slide($('element'));
fx.toggle();

//Nueva versión
$('element').toggle();

Timer.js

Agregar a favoritos

7 Comentarios

Posteado hace 361 días en:

Esta clase forma parte de un proyecto que tengo entre manos, algo sencillo y personal.

Su función es crear un cronometro, el cual lo podemos parar, resetar o volver a iniciar. Se puede usar con cuenta atrás aunque tendrías que crear una clase para disparar cuando llegues a 0. Quiero decir que la clase es muy básica pero muy útil si la extiendes.

var Timer = new Class({

    initialize: function(el) {
        this.element = $(el);
    },

    start: function() {
        if (this.timer) return this;
        this.time = (!this.now) ? $time() : $time() - (this.toSeconds() * 1000);
        this.timer = this.step.periodical(500,this);
    },

    stop: function() {
        if (!this.timer) return this;
        this.timer = $clear(this.timer);
        return this;
    },

    toggle: function() {
        if(this.timer) this.stop();
        else this.start();
        return this;
    },

    reset: function(now) {
        this.time = $time();
        this.now = now ? this.toArray(now*1000) : [0,0,0];
        this.increase();
        return this;
    },

    toSeconds: function() {
        return ((this.now[0] * 3600) + (this.now[1] * 60) + (this.now[2]));
    },

    toArray: function(step) {
        var deltaH = step % 3600000;
        var deltaM = deltaH % 60000;
        return [(step-deltaH) / 3600000, (deltaH - deltaM) / 60000, Math.floor(deltaM/1000)];
    },

    step: function() {
        var step = $time() - this.time;
        this.now = this.toArray(step);
        this.increase();
    },

    increase: function() {
        var display = this.now.map(function(item) {
            item = Math.abs(item);
            if(item==60) return '00';
            return (item < 10) ? '0'+item : item ;
        });
        this.element.setText(display.join(':'));
    }

});

Ejemplo:

<div id="timer">00:00:00</div>    

//Normal
var time = new Timer('timer');
time.start();

//Cambiar tiempo: 01:00:00
time.reset(3600);

//Cuenta atrás
time.reset(-3600);


Anterior 1 ... 2 3 4 5 6 7 8 9 10 ... 56 Siguiente