All posts by toniweb

Android y overflow auto o scroll. Javascript workaround

Pues tras ver que andriod todavía no soporta overflow:scroll

He dado con una solución javascript, impotar estas dos funciones:

		function isTouchDevice(){
			try{
				document.createEvent("TouchEvent");
				return true;
			}catch(e){
				return false;
			}
		}

		function touchScroll(id){
			if(isTouchDevice()){ //if touch events exist...
				var el=document.getElementById(id);
				var scrollStartPos=0;

				document.getElementById(id).addEventListener("touchstart", function(event) {
					scrollStartPos=this.scrollTop+event.touches[0].pageY;
					event.preventDefault();
				},false);

				document.getElementById(id).addEventListener("touchmove", function(event) {
					this.scrollTop=scrollStartPos-event.touches[0].pageY;
					event.preventDefault();
				},false);
			}
		}

Luego en el document.ready

$(function(){
			touchScroll('my-id');
})

 

Importar hoja de estilos .css una vez cargada la página

Aveces es necesario reducir el tiempo de carga de la web. Una buena práctica puede ser retrasar la importación archivos .css -que no son estrictamente necesarios en la carga de la página, sinó que intervienen en la interacción del usuario- hasta que la web ya ha sido cargada.

Con JQuery esto es muy sencillo, tres pasos:

  • crear un elemento html <link>
  • aplicarle la URL
  • añadirlo al <head>
Codigo javascript:
$(document).ready( function() {
    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "/css/ui.css"
    });
    $("head").append(css);
});

Obtener un color aleatorio / random color con javascript

Pues con ésta simple función se puede obtener un color aleatorio para ser utilizado en web,

function get_random_color() {
				var letters = '0123456789ABCDEF'.split('');
				var color = '#';
				for (var i = 0; i < 6; i++ ) {
					color += letters[Math.round(Math.random() * 15)];
				}
				return color;
}

Aquí un ejemplo de uso:

<center><a onclick="$('body').css('background', get_random_color)" href="#">generar color</a></center>

ver la demo

Botones de play y pause para iframe video de youtube sin API (de youtube)

Es posible que muchas veces necesitemos un poco más de control del video pero que no nos interese importar la API de youtube para ello,

Aquí voy a mostrar cómo montar unos botones de play y pause para un video de youtube insertado vía iFrame de una manera improvisada.

Codigo HTML:

<iframe src="http://youtube.com/embed/qZ9jpnMGkdA"></iframe>
<br>  <a onclick="play()"><img src="http://cdn1.iconfinder.com/data/icons/bnw/32x32/actions/player_play.png" /></a> <a onclick="stop()"><img src="http://cdn1.iconfinder.com/data/icons/bnw/32x32/actions/player_stop.png" /></a>

<br>
<br>
<br>
Url del iframe: <div id="url"></div>

Codigo CSS: No se ha esmerado demasiado. Solo para mostrar el ejemplo.

<style type="text/css">
a{

cursor:pointer;
    position:relative;
}
a:active{
top:1px;
    right:1px;
}
</style>

Codigo Javascript:

<script type="text/javascript">
function play(){
    url = $('iframe').attr('src');
    if(url.indexOf('autoplay=1') != -1){            
       }else{
           url = url + '?autoplay=1';
       }
    /*simplemente actualizamos la url del iframe añadiendole un autoplay*/
    $('iframe').attr('src',url);
   $('#url').text(url);
}

function stop(){
    /* simplemente actualizamos la url quitandole el autoplay */
    url = $('iframe').attr('src');
    url = url .replace('?autoplay=1','');
    $('iframe').attr('src',url);
   $('#url').text(url);
}
</script>

Como se puede observar, el truco utilizado es cambiar dinámicament la URL del video, añadiendo ?atuoplay=1 para iniciar el video y quitándoselo para parar el video.

Puede parecer una solución algo engorrosa pero cumple su función,

Podeis probar una demo aquí