Aplicar estilo CSS a Inputs de tipo File

A algunos tipos de campo de formulario no es fácil aplicarles cambios en el estilo, como por ejemplo, los radio button, los checkbox o los campos de subida de ficheros.

Con el plugin que hoy os propongo aquí, podremos falsear los campos de tipo file fácilmente.

La clave está en ocultar el campo real (el que no podemos editar) y crear un nuevo elemento que lo imite, pero en el que sí podamos aplicar todos los cambios deseados. Posteriormente, por medio de Javascript haremos que al hacer clic en el campo falso, se abra la ventana de diálogo, para la elección del fichero en cuestión.

customInputFile

Estructura HTML:

<div class="customFileInput inputWithButton inputWithButton_150">
  <div class="inputWrap fileName"></div>
  <div class="btWrap">
    <a class="bt" href="#">Select File...</a>
  </div>
  <input class="text" type="file" placeholder="Placeholder" />
</div>

Plugin jQuery:

$.fn.customFileInput = function () {

    return this.each(function() {
        var t = $(this),
            input = t.find('input'),
            fakeTrigger = t.find('.bt'),
            fakeInput = t.find('.fileName');

        input.change(function () {
            // get only file name, with out path
            var fileName = input.val().split('\\').pop();
            fakeInput.html(fileName);
        });

        input.click(function (e) {
            e.stopPropagation();
        })

        t.click(function (e) {
            e.preventDefault();
            input.click();
        });

    });
};

$(function () {
    $('.customFileInput').customFileInput();
});

Las propiedades CSS para darle estilo no las pongo aquí, ya que simplemente estoy usando la nueva versión del framework paraGridma que estamos termiando de desarrollar en Paradigma

Ajustar el tamaño de texto según su contenedor

En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText  necesitas saberlo para proceder a ajustarlo.

Por eso, y gracias a mi compañera Nereavoy a usar esta función, que encaja mejor con lo que busco:

ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero “set_max_size” es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo “min_size”

adjustTextSize

 

(más…)

Componente de Tabla como RadioGroup

Hoy he tenido que desarrollar un nuevo componente, para un muy interesante proyecto que estamos empezando a desarrollar en Paradigma.

Este componte debe de mostrarse como una tabla, tal y como podéis ver en la siguiente imagen con el diseño creado por el artistazo @davidmontalvo, pero debe de actuar como un grupo de input tipo radio, ya que el usuario podrá seleccionar cada una de las celdas.

(más…)

Inserta tus fotos de Instagram en tu web

Estoy en pleno proceso de rediseño de la web, y una de los primeros problemas que me he encontrado es al intentar integrar mis imágenes de instagram en mi web.

Hay varias opciones:

  1. Utilizar uno de los plugins de wordpress que insertar las fotos de Instagram.
  2. Hacer un componente propio que haga exactamente lo que quieras.

En mi caso, opté por la segunda opción. Encontré un código jquery  + php muy sencillo que hace este proceso. El problema ha sido el registrar mi aplicación en Instagram para poder obtener el access token, y sobre todo me ha costado obtener mi numero de usuario. Ya lo sé, es una tontería, pero nunca antes me había tenido que pelear con ello.

Para registrarla he seguido los pasos del articulo de Dan Pavitt:

var access_token = location.hash.split('=')[1];

if (location.hash) {

} else {
    location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]/&response_type=token";
}

Es necesario remplazar [clientid] y  [callbackuri] por el Client ID y la Redirect URI que te aparece al dar de alta al cliente.

Este proceso solo debes de ejecutarlo una vez, y solo vale para obtener un token de acceso que te permitirá obtener tus fotos de Instagram.

El último datos que necesitaremos será nuestro identificador de usuario. En un principio yo pensé que será el Client ID que nos devolvió nuestro cliente, pero resulta que no.

Yo he usado esta aplicación de Instagram para obtener mi id de usuariohttp://yvesvanbroekhoven.github.com/get-your-instagram-user-id/ pero entiendo que tiene que haber una forma mas sencilla de hacerlo.

Una vez que tengamos toda esta información ya podremos utilizar el código que nos devolverá nuestras imágenes:

$(function() {

$.ajax({
  type: "GET",
  dataType: "jsonp",
  cache: false,
  url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
  success: function(data) {
    for (var i = 0; i < 6; i++) {
      if(data.data[i]) { // to prevent a bug with non missing images
         $(".instagram").append("<div class="instagram-placeholder"><a href="' + data.data[i].link + '" target="_blank"><img class="instagram-image" src="' + data.data[i].images.thumbnail.url + '" alt="" /></a></div>");
      }
    }
  }
});
});

Evidentemente tendremos que remplazar [userid] y [access_token] por los datos correctos.

Aquí podéis ver en funcionamiento este ejemplo:

Ahora ya solo me queda el integrar estas imágenes con un slider chulo y listo. Pero eso es otra historia.

Mostrar imágenes por tag

Tal como me ha comentado charlescuellar, tambien podemos obtener las imágenes de instagram por tag, en lugar de por usuario.

Tan solo es necesario remplazar la url de llamada a la API por esta:

</pre>
https://api.instagram.com/v1/tags/[tag]/media/recent/?access_token=[access_token]
<pre>

iosSlider: Responsive and touchable Carousel

Después de llevar todo el día buscando un buen carrusel para usar en mis proyectos he conseguido encontrar lo que buscaba:

  • Un carrusel que se adapte en tamaño, para poder ser usado en los proyectos de responsive design.
  • Válido tanto para ordenadores de escritorio como para terminales táctiles (móviles y tablets)
  • Que las animaciones se hicieran con el acelerador hardware de CSS3 para que funcione de una manera más fluida.
  • Opensource

Finalmente me he decantado por iosSlider . Tiene muy buena pinta, y está muy bien documentado.

Todavía no me he “peleado” con el, pero ya me muero de ganas por meterle mano.

Otra alternativa también muy atractiva era TouchCarousel, pero el hecho de que sea un plugin de pago (aunque tan solo son 10$) me ha hecho decantarme por iosSlider.