JS – Recoger Parámetros de la Etiqueta Script

Publicado por Iván Gajate el 22 de febrero de 2015 en JavaScript | Los comentarios están cerrados.

Si tenemos una etiqueta script con algún parámetro así:

<script type="javascript" src="js/myscript.js?id=123"></script>

podemos recoger los parámetros usando esta función:

// Extract "GET" parameters from a JS include querystring
function getParams(script_name) {
  // Find all script tags
  var scripts = document.getElementsByTagName("script");
 
  // Look through them trying to find ourselves
  for(var i=0; i<scripts.length; i++) {
    if(scripts[i].src.indexOf("/" + script_name) > -1) {
      // Get an array of key=value strings of params
      var pa = scripts[i].src.split("?").pop().split("&");
 
      // Split each key=value into array, the construct js object
      var p = {};
      for(var j=0; j<pa.length; j++) {
        var kv = pa[j].split("=");
        p[kv[0]] = kv[1];
      }
      return p;
    }
  }
 
  // No scripts match
  return {};
}

Visto en loopj.com

CSS – Cambiar el SRC de una Imagen

Publicado por Iván Gajate el 17 de noviembre de 2014 en Desarrollo Web | Los comentarios están cerrados.

Se puede cambiar el src de una imagen por css, utilizando la propiedad content.

.miImagen{
    content:url("http://path/to/imagen.jpg");
}

Visto en Stackoverflow

No es compatible con todos los navegadores (Internet Explorer…) pero para móviles lo podemos utilizar con seguridad http://caniuse.com/#search=content.

Sublime Text – Side By Side Plugin

Publicado por Iván Gajate el 17 de noviembre de 2014 en Desarrollo Web | Los comentarios están cerrados.

He instalado este plugin en Sublime para comparar dos archivos, uno al lado del otro, con los scrolls sincronizados.
Es muy útil porque añade renglones en blanco para que se vean ambas páginas en paralelo.

https://bitbucket.org/dougty/sublime-compare-side-by-side

HTACCESS – Redirección con Ancla

Publicado por Iván Gajate el 30 de octubre de 2014 en Desarrollo Web | 1 comentario »

Si queremos redirigir una url que contenga un hash (ancla) utilizando htaccess podemos usar el flag NE (noscape) para que no nos convierta la almohadilla (#) en %23

RewriteRule .* https://example.com/sample/#tag [R=301,NE,L]

Y el resultado sería este


https://example.com/sample/#tag

Visto en https://revolvedmedia.com/htaccess-rewrite-changes-anchor-tag-hash-%23-destination-url/#-destination-url/

JS – Métodos Estáticos en JavaScript

Publicado por Iván Gajate el 26 de octubre de 2014 en JavaScript | Los comentarios están cerrados.

A veces podemos necesitar que una clase que instanciemos muchas veces guarde alguna variable o método a nivel de clase, no a nivel de instancia (variables estáticas).
Podemos usar las clausuras para ello:

http://jsfiddle.net/yporqueno/h1n2gk2d/

var Persona = function (){
    // Variable de clase (estatica)
    var count = 0;
 
    // Constructor de la clase Persona
    var fn = function(){
        var _api = {};
        _api.saluda = function(){
            alert('Hola #'+count);
        };
        count++;
        return _api;
    };
 
    // Metodo estatico de Persona
    fn.getCount = function(){
        alert('Numero de personas '+count);
    }
 
    return fn;
}();

De esta manera la variable “count” solo se crea una vez, y queda accesible para cada instancia que creemos de la clase Persona.
Ahora podemos crear tantas instancias como queramos de Persona y acceder al conteo que lleva la clase de forma centralizada.

var manolo = new Persona();
manolo.saluda();
 
var pepe = new Persona();
pepe.saluda();
 
// Metodo estatico de la clase Persona
Persona.getCount();

Gracias Javi por la idea!! :)

CSS – Centrar Vertical y Horizontalmente un Elemento

Publicado por Iván Gajate el 14 de octubre de 2014 en css | 1 comentario »

Hay otras formas para centrar un objeto en pantalla, pero esta me resulta la más cómoda.

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: table;

Es importante el display table para que lo centre verticalmente.

Ejemplo en JSfiddle

Lo bueno, es que no necesita tener un tamaño especificado para funcionar bien.
Por supuesto se puede usar para centrar solo verticalmente.
Gracias Irene! :)

Timeline – Parámetro Position

Publicado por Iván Gajate el 6 de octubre de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Sigo siendo super fan del TweenMax como herramienta para animar, y cuando utilizas a fondo el TimelineMax se pueden hacer animaciones que nunca pensaste hacer en HTML :)
Hay un parámetro extra al final del todo que nos da mucha flexibilidad. Position:

.to( target, duration, vars, position )

Lo que hace es “sacar” esa animación de su flujo normal en el timeline y fuerza a que empiece en otro momento que nosotros queramos.
Podemos decirle que empiece en un tiempo concreto desde que empezó el timeline, un segundo, dos segundos… o relativo a lo que sería su tiempo normal de comienzo, “+=1″ por ejemplo empieza un segundo después de lo que le correspondería.
También se puede crear un label como haríamos en Flash para referirnos a ese momento con mayor facilidad.

Algo así:

 

tl.to(element, 1, {x:200})
  //1 second after end of timeline (gap)
  .to(element, 1, {y:200}, "+=1")
  //0.5 seconds before end of timeline (overlap)
  .to(element, 1, {rotation:360}, "-=0.5")
  //at exactly 6 seconds from the beginning of the timeline
  .to(element, 1, {scale:4}, 6);

Se explica muy bien en el propio vídeo de Greensock.

Hay ejemplos muy chulos como este.

JS – Hacer una Transición de un Valor Numérico

Publicado por Iván Gajate el 17 de septiembre de 2014 en JavaScript | Los comentarios están cerrados.

Hay una forma muy sencilla de hacer una interpolación entre dos valores numéricos. Un tween de un valor, como si lo hiciésemos de una posición o de la anchura de un objeto pero de un valor numérico.
Yo esto lo suelo usar para cambiar el volumen de un sonido.
Tan solo hay que envolver el valor que queramos interpolar en un objeto y hacer un tween con TweenMax como siempre:

var obj = {value:0};
TweenMax.to(obj, 1, {value:3, ease:Linear.easeNone, onUpdate:onUpdate});
function onUpdate() {
	console.log(obj.value);
}

En este ejemplo hago un tween desde 0 hasta 3 en 1 segundo.
Devolvería esto:

0
0.126
0.33
0.396
0.42000000000000004
0.471
0.522
0.573
0.6180000000000001
0.672
0.7230000000000001
0.771
0.8219999999999998
0.8699999999999999
0.9239999999999999
0.9719999999999999
1.023
1.071
1.1219999999999999
1.17
1.224
1.272
1.323
1.371
1.4249999999999998
1.4729999999999999
1.524
1.572
1.6230000000000002
1.674
1.722
1.7759999999999998
1.8239999999999998
1.875
1.9260000000000002
2.022
2.073
2.127
2.175
2.226
2.277
2.325
2.376
2.4269999999999996
2.4779999999999998
2.526
2.577
2.628
2.676
2.7270000000000003
2.775
2.8289999999999997
2.877
2.928
2.979

JS – Detectar si estoy en un iFrame

Publicado por Iván Gajate el 12 de septiembre de 2014 en JavaScript | Los comentarios están cerrados.

A veces viene bien saber si nuestra página está siendo cargado dentro de un iFrame. Es así de simple :D

var insideIframe = window.top !== window.self;
if(insideIframe){
     // lo que sea...
}

¿Harto de IE8?

Publicado por Iván Gajate el 5 de septiembre de 2014 en Accesibilidad, Desarrollo Web | Los comentarios están cerrados.

Con estas dos líneas podrás redirigir por htaccess en caso de que alguien entre con un navegador mas antiguo que explorer 8. Envías al usuario a una página y ahí le muestras la info que quieras.

De esta forma no llega a cargar las imágenes ni los js ni las css ni nada… :)

Visto en Stackoverflow, como siempre :)

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} "MSIE [6-8]" [NC]
RewriteRule ^(.*)$ http://mysite.com/ie [R=301,L]

http://stackoverflow.com/questions/12666684/redirect-ie-6-7-and-8-users-with-htaccess