Buenas!
Vaya, este año parece que estoy algo más presente por el blog, y yo que me alegro... resulta que estoy haciendo algunos avances en una librería que cree para mi TFG, y hoy os voy a compartir una cosilla un tanto curiosa que seguro os gustará
¡Vamos allá!
Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas
Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas
Timer.js: Arreglando y mejorando
¿Y esto qué es?
Sí! Vamos retomando el ritmo en el blog... y es que resulta que Meryhell estudia por las tardes y en el rato que hay entre que llego de trabajar y llega ella lo tengo como "rato muerto", y, oye... hay que aprovecharlo!
Así que aquí me tenéis, retomando el blog... que ya era hora :D
Y bueno, después del típico rodeo... a lo que vamos, ¿no? Hoy os traigo la tercera parte del proyecto del timer.
En esta entrada vamos a arreglar y mejorar (como dice el título) nuestro timer, ya que en la anterior entrada lo dejamos casi funcional.
¡Vamos allá!
Sí! Vamos retomando el ritmo en el blog... y es que resulta que Meryhell estudia por las tardes y en el rato que hay entre que llego de trabajar y llega ella lo tengo como "rato muerto", y, oye... hay que aprovecharlo!
Así que aquí me tenéis, retomando el blog... que ya era hora :D
Y bueno, después del típico rodeo... a lo que vamos, ¿no? Hoy os traigo la tercera parte del proyecto del timer.
En esta entrada vamos a arreglar y mejorar (como dice el título) nuestro timer, ya que en la anterior entrada lo dejamos casi funcional.
¡Vamos allá!
Timer.js: Desarrollo del Timer
Buenas!
Y otra entrada más... ¡qué locura!
Bueno, siguiendo con el temario, hoy vamos a ver los puntos 2 y 3 de nuestro índice...
2. Problemas de apilamiento
2.1 Do(n), pause(n)
2.2. Do, pause, Do
3. Timer vs. setInterval
3.1. Callback con parámetros
¿Ready? ¡Vamos allá!
Y otra entrada más... ¡qué locura!
Bueno, siguiendo con el temario, hoy vamos a ver los puntos 2 y 3 de nuestro índice...
2. Problemas de apilamiento
2.1 Do(n), pause(n)
2.2. Do, pause, Do
3. Timer vs. setInterval
3.1. Callback con parámetros
¿Ready? ¡Vamos allá!
Timer.js: Introducción
¡Buenas!
Vaya ritmo, ¿eh? La tercera entrada del año :D (al menos voy escribiendo).
¿Y qué contar? Pues bastante trabajo la verdad, no paro entre el trabajo, la uni, el cosplay... a penas saco un rato para experimentar con mis paranoias...
Pero bueno, eso no quiere decir que no saque algún rato muerto por ahí!! ;-)
Y eso, aquí estamos, con otra saga de paranoias. En este caso, un [k]timer en JavaScript
¡Vamos allá!
Vaya ritmo, ¿eh? La tercera entrada del año :D (al menos voy escribiendo).
¿Y qué contar? Pues bastante trabajo la verdad, no paro entre el trabajo, la uni, el cosplay... a penas saco un rato para experimentar con mis paranoias...
Pero bueno, eso no quiere decir que no saque algún rato muerto por ahí!! ;-)
Y eso, aquí estamos, con otra saga de paranoias. En este caso, un [k]timer en JavaScript
¡Vamos allá!
Tips & Tricks: "cval" en lenguajes dinámicos
Buenas!
¿Dos entradas tan seguidas? Sí... os explico.
No escribía porque estaba empeñado en seguir con las mates en las siguientes entradas, pero como no tengo tiempo para nada, pues he decidido seguir con otras cosillas mientras saco algo de tiempo para las mates (ya que para hacer entradas de matemáticas necesito estar en casa, en mi despacho, donde tengo todos los apuntes).
Así que iré alternando entradas "normales" con entradas de proyectos, ¿ok?
Hoy toca hablar de "cval".
¿Os interesa?
¡Vamos allá!
Aventuras de DoHITB: Buscar como el rayo
Buenas!
¿Tiempo sin escribir? apenas... jeje
Bueno, como supondréis mis ávidos lectores, ¡voy de culo! Mi vida últimamente es un caos... operaciones, muchos proyectos y mucho trabajo.
Sí, ya llevo casi dos años en mi nuevo trabajo y estoy muy contento. También he estado volcado casi en cuerpo y alma a hacer Cosplay (los que me sigáis por YouTube ya lo habréis visto ;-) )
Bueno, ya que con el poco tiempo que tengo es difícil adelantar los proyectos he decidido redactar una micro-aventura que me sucedió mientras planeaba una entrada sorpresa para vosotros.
¿Preparados?
¡Vamos allá!
Proyecto BSearch - Núcleo
¡Buenas!
No penséis que me he olvidado de vosotros... ¡pues no!
Como prometí, vamos a ver el núcleo del buscador
¡Vamos allá!
No penséis que me he olvidado de vosotros... ¡pues no!
Como prometí, vamos a ver el núcleo del buscador
¡Vamos allá!
Proyecto BSearch - Ayuda flotante
¡Buenas a todos!
Aquí estoy una vez más, dispuesto a avanzar el pequeño buscador que me propuse hacer.
De momento (en el momento en que escribo esto, el buscador aún está en desarrollo) tengo lista la ayuda flotante, y tengo casi listo el "kernel" (por llamarlo de alguna manera) que después hará de buscador.
De momento nos centramos en el primer aspecto.
¡Vamos allá!
Aquí estoy una vez más, dispuesto a avanzar el pequeño buscador que me propuse hacer.
De momento (en el momento en que escribo esto, el buscador aún está en desarrollo) tengo lista la ayuda flotante, y tengo casi listo el "kernel" (por llamarlo de alguna manera) que después hará de buscador.
De momento nos centramos en el primer aspecto.
¡Vamos allá!
Aventuras de DoHITB: DoHITB vs. JavaScript (IV)
Buenas!
Llegamos casi al clímax de esta aventura de programación... toca ver temas de ordenación. ¿Listos?
Llegamos casi al clímax de esta aventura de programación... toca ver temas de ordenación. ¿Listos?
Aventuras de DoHITB: DoHITB vs. JavaScript (III)
Buenas!
Tercera parte de la aventura, llegamos al ecuador de esta misma...
Veremos ahora algunos problemas que fueron surgiendo y cómo se solucionan :-)
Tercera parte de la aventura, llegamos al ecuador de esta misma...
Veremos ahora algunos problemas que fueron surgiendo y cómo se solucionan :-)
Aventuras de DoHITB: DoHITB vs. JavaScript (II)
Buenas!
Seguimos con las aventuras de mi "alter ego", DoHITB... ¿preparados?
Seguimos con las aventuras de mi "alter ego", DoHITB... ¿preparados?
Aventuras de DoHITB: DoHITB vs. JavaScript (I)
Buenas!
Haremos una breve pausa antes de seguir con el temario de Remote Tools, en la que os explicaré mi extraño y paranoico periplo con uno de los lenguajes (en mi opinión) más infames de los "mares de la programación":
JavaScript.
Haremos una breve pausa antes de seguir con el temario de Remote Tools, en la que os explicaré mi extraño y paranoico periplo con uno de los lenguajes (en mi opinión) más infames de los "mares de la programación":
JavaScript.
Interludio
Buenas!
De nuevo por aquí...
Acabada está ya la primera parte de nuestro remote tools... la próxima será, por tanto, matemáticas (tema II, ya).
Pero antes, hay varias cosas que anunciar.
a) Se ve a la vista un nuevo blog personal
b) Surgieron varios temas durante la pasada sección que dejo en cola. A saber:
b1) Criptología
b2) Hacking wifi
b3) Obtención de datos
c) He desarrollado una pequeña función JS/HTML para blogger (lo veremos más abajo)
d) Tengo un nuevo "juguete" del que escribir
e) Hay un pequeño cambio (¡por fin!)
Así que vamos por partes.
Blog personal:
Pues eso... estoy pensando en hacer un pequeño blog donde meter todos mis pensamientos y textos... a ver si podemos fomentar la escritura y el pensamiento (al menos lo intentaré). Os mantendré informados, y, como siempre, si me decido, lo encontraréis más allá de los confines de mi blog.
Temas:
Éstos - y otros que quizás salen durante este tiempo - los guardo en mi pila de ToDo's de mi despacho (tengo un corcho bien grande lleno de papelitos con ideas...)
Función JS/HTML:
Bien, he creado una pequeña galería fotográfica (pensada para el blog de cosplay). Es una de las cosas que blogger no acaba de hacer: al subir varias fotos cuesta cuadrarlas (salen casi siempre una abajo de otra, y cosas así), así que cuando tengo que poner varias queda bastante "cutre".
Así que me estrujé el cerebro, y como soy tan y tan escéptico, no quise coger galerías de terceras personas, sino más bien hacerme una para mi (que de eso va este blog, ¿no?, ¡DIY!).
Y me gustaría compartir con vosotros mi aporte. Por tanto, vamos a ir paso a paso para ver cómo funciona la pequeña galería.
Para empezar, dejo un esquema general de cómo está estructurada la galería:
Para la notación usaré la siguiente convención (ejemplos):
elemento.clase
elemento#id
elemento.clase subelemento#id:estado
El elemento "global" es "div.blogMarquee". Dentro tenemos tres elementos: "div.blogMarqueePhoto", "marquee#bm" y "div.blogMarqueeScroll".
Dentro del primero hay un elemento: "img#cp".
Dentro del segundo están las imágenes, es decir, un conjunto de "marquee#bm img".
Dentro del tercer elemento hay dos "div": "div#bMSL" y "div#bMSR"
El contenido de "marquee#bm" lo tendremos que introducir de manera manual, y será lo único que varíe de una entrada a otra (es decir, la estructura es siempre la misma, solo cambiaremos las imágenes).
Igual os preguntáis que es eso de "marquee". Para los que no hayan usado nunca este elemento NO ESTÁNDAR de HTML decir que es, de manera general, un div cuyo contenido se mueve. De este movimiento podemos definir:
Teniendo estas dos cosas en cuenta, vamos a pasar a ver la estructura HTML de nuestra galería:
<div class="blogMarquee">
<div class="blogMarqueePhoto">
<img src="" alt="" width="400" height="300" id="cp" onclick="external(this);">
</div>
<marquee id="bM" onmouseout="setAmount(this,5);" onmouseover="setAmount(this,0);" srcollamount="5">
<!-- imágenes aquí, en formato: width=320 height=240 -->
</marquee>
<div class="blogMarqueeScroll" onmouseover="setAmount(ge('bM'),0);">
<div id="bMSL" class="binv" onmousedown="action([ge('bM'),10,false],true);" onmouseup="action([ge('bM'),0,false],true);"> < </div>
<div id="bMSR" class="binv" onmousedown="action([ge('bM'),10,true],true);" onmouseup="action([ge('bM'),0,true],true);"> > </div>
</div>
<script type="text/javascript">addId(ge('bM'));</script>
</div>
(No me gusta que desfase el ancho del blog... pero así se ve mejor)
Como vemos, al final hay una llamada JavaScript. Ésta sirve para dar "id" a cada imagen dentro de marquee (ya veremos cómo, en un momento).
Antes de entrar en JS, vamos a estudiar un poco el HTML.
Como vemos, tenemos la estructura comentada, así que no pararemos ahí, sino que veremos el el elemento "marquee#bm".
Vemos que tiene "scrollamount=5". Esto indica la velocidad (5, en este caso) a la que se mueven los elementos. La dirección la veremos más adelante.
Ahora, vamos a por el JS (explicado con comentarios):
/**
* variable global para el solapamiento
*/
var b_max=2;
/**
* función action.
* Actúa como manejador de solapamiento de eventos entre "marquee#bm img:click" (a) y ("div#bMSL" | "div#bMSR") (b).
* (a) lanza cphoto
* (b) lanza move
* Recibe dos parámetros:
* @param v: array de parámetros de subllamada
* @param f: valor de flag
*/
function action(v,f){
b_max--;
if(f&&b_max>0){
move(v[0],v[1],v[2])
}else{
if(!f){
cphoto(v[0])
}
}
if(b_max==0||f){
b_max=2
}
}
/**
* función ge.
* Sinónimo de función "document.getElementById".
* Recibe un parámetro y retorna un elemento:
* @param e: id del elemento a retornar
* @return: elemento cuyo id corresponde a "e"
*/
function ge(e){
return document.getElementById(e)
}
/**
* función setAmount.
* Ajusta la velocidad (scrollAmount) del elemento "e" a la velocidad "a".
* Si la velocidad es 0, se muestran las flechas; en caso contrario se ocultan.
* Recibe dos parámetros:
* @param e: elemento a ajustar
* @param a: velocidad
*/
function setAmount(e,a){
e.direction='left';
e.scrollAmount=a;
if(a==0){
ge('bMSL').className='bMSL';
ge('bMSR').className='bMSR'
}else{
ge('bMSL').className='binv';
ge('bMSR').className='binv'
}
}
/**
* función addId.
* Itera sobre el elemento con id "e", y sobre sus hijos, asigna id's de forma secuencial.
* Del mismo modo, asigna un handler "click" a cada elemento.
* Recibe un parámetro:
* @param e: id del elemento a iterar
*/
function addId(e){
am=0;
for(i=0;i<e.childNodes.length;i++){
try{
e.childNodes[i].setAttribute('id','el'+am);
e.childNodes[i].setAttribute('onclick','action([this],false)');
am++
}catch(err){
}
}
}
/**
* función move.
* Mueve el elemento "e", en la dirección indicada por "t" a una velocidad "a".
* Recibe tres parámetros:
* @param e: elemento a mover
* @param a: velocidad a fijar
* @param t: dirección (true para derecha, false para izquierda)
*/
function move(e,a,t){
if(t){
e.direction='right'
}else{
e.direction='left'
}
e.scrollAmount=a
}
/**
* función cphoto.
* Muestra el elemento "e" sobre el elemento "#cp"
* Recibe un parámetro:
* @param e: elemento a mostrar sobre "#cp"
*/
function cphoto(e){
ge('cp').setAttribute('src',e.getAttribute('src'))
}
/**
* función external.
* Abre, en una ventana nueva, el elemento "e".
* Recibe un parámetro:
* @param e: elemento a abrir
*/
function external(e){
if(e.getAttribute('src')!=null){
window.open(e.getAttribute('src'))
}
}
Ahora, trataremos los dos asuntos:
a) Solapamiento: usamos este sistema para evitarlo.
b) Se generan dos eventos: onmousedown (cuando la tecla está pulsada) y onmouseup (cuando se suelta la tecla). En el primero, indicamos que se mueva hacia la dirección indicada; en el segundo, indicamos que pare.
Por último, falta indicar el estilo de nuestra nueva función:
img{
border:0;
}
.blogMarqueePhoto{
height:300px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10px;
}
.blogMarqueePhoto img{
width:400px;
height:300px;
border:1px solid #CCC;
padding:0px
}
.blogMarqueePhoto img:hover{
cursor:pointer;
border-color:#FFF;
}
#bM{
height:245px;
}
.blogMarqueeScroll div{
top:-245px;
width:100px;
height:240px;
position:relative;
font-familt:arial;
font-size:180px;
color:#FFF;
line-height:240px;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
background:#000;
}
.bMSL{
float:left;
}
.bMSR{
float:right;
}
.binv{
display:none;
}
#bM img{
padding:0px;
}
#bM img:hover,.bMSR:hover,.bMSL:hover{
cursor:pointer;
}
Y ya solo falta rellenar con imágenes y colocarlo en una entrada.
Aquí podéis ver un ejemplo en funcionamiento. Un consejo: usad el ingenio para "importar" fotos desde facebook ;-)
"Juguete":
Aquí está. Es una lámpara-tecla que compré en la feria del cómic de Barcelona. Mide unos 15cm de largo y se queda en mi despacho.
Ahora ya puedo decir que tengo la luz bajo control ;-)
Cambios:
Hace tiempo que voy detrás de graduarme en la universidad, pero lo que quería hacer estaba fuera de presupuesto (aunque tengo que admitir que de hacer algo relacionado 100% con la informática me gustaría hacerlo); un Bachelor en un centro adscrito a la universidad de Gales. Son tres años de carrera repleta de asignaturas con muy buena pinta...
Pero se va de presupuesto, así que vivía resignado.
Hasta que repasando los apuntes de mates me picó el gusanillo otra vez... así que ahí lo dejo:
¡Me voy a graduar en matemáticas!
Ya me he visto la carrera que voy a hacer y es buena, barata y a distancia. ¡Ale! así, entre curso y curso, podré hacer cursillos de informática (nunca hay que dejar de estudiar)... con este paso estoy más cerca de ser doctor... :-)
Desde luego no es un cambio que haya estado "esperando", más bien vino así de golpe... pero ya está bien.
De nuevo por aquí...
Acabada está ya la primera parte de nuestro remote tools... la próxima será, por tanto, matemáticas (tema II, ya).
Pero antes, hay varias cosas que anunciar.
a) Se ve a la vista un nuevo blog personal
b) Surgieron varios temas durante la pasada sección que dejo en cola. A saber:
b1) Criptología
b2) Hacking wifi
b3) Obtención de datos
c) He desarrollado una pequeña función JS/HTML para blogger (lo veremos más abajo)
d) Tengo un nuevo "juguete" del que escribir
e) Hay un pequeño cambio (¡por fin!)
Así que vamos por partes.
Blog personal:
Pues eso... estoy pensando en hacer un pequeño blog donde meter todos mis pensamientos y textos... a ver si podemos fomentar la escritura y el pensamiento (al menos lo intentaré). Os mantendré informados, y, como siempre, si me decido, lo encontraréis más allá de los confines de mi blog.
Temas:
Éstos - y otros que quizás salen durante este tiempo - los guardo en mi pila de ToDo's de mi despacho (tengo un corcho bien grande lleno de papelitos con ideas...)
Función JS/HTML:
Bien, he creado una pequeña galería fotográfica (pensada para el blog de cosplay). Es una de las cosas que blogger no acaba de hacer: al subir varias fotos cuesta cuadrarlas (salen casi siempre una abajo de otra, y cosas así), así que cuando tengo que poner varias queda bastante "cutre".
Así que me estrujé el cerebro, y como soy tan y tan escéptico, no quise coger galerías de terceras personas, sino más bien hacerme una para mi (que de eso va este blog, ¿no?, ¡DIY!).
Y me gustaría compartir con vosotros mi aporte. Por tanto, vamos a ir paso a paso para ver cómo funciona la pequeña galería.
Para empezar, dejo un esquema general de cómo está estructurada la galería:
Para la notación usaré la siguiente convención (ejemplos):
elemento.clase
elemento#id
elemento.clase subelemento#id:estado
El elemento "global" es "div.blogMarquee". Dentro tenemos tres elementos: "div.blogMarqueePhoto", "marquee#bm" y "div.blogMarqueeScroll".
Dentro del primero hay un elemento: "img#cp".
Dentro del segundo están las imágenes, es decir, un conjunto de "marquee#bm img".
Dentro del tercer elemento hay dos "div": "div#bMSL" y "div#bMSR"
El contenido de "marquee#bm" lo tendremos que introducir de manera manual, y será lo único que varíe de una entrada a otra (es decir, la estructura es siempre la misma, solo cambiaremos las imágenes).
Igual os preguntáis que es eso de "marquee". Para los que no hayan usado nunca este elemento NO ESTÁNDAR de HTML decir que es, de manera general, un div cuyo contenido se mueve. De este movimiento podemos definir:
- Velocidad
- Frecuencia de movimiento
- Dirección de movimiento
- Modo de movimiento
- Cantidad de ciclos de movimiento
Cuando veamos el código explicaré un poco más cómo funciona.
Entonces, el funcionamiento es el siguente:
- Las imágenes pasan por "marquee#bm".
- Al pasar por encima de "marquee#bm", el movimiento cesa, y se muestran flechas de dirección ("div#bMSL" y "div#bMSR").
- Al pulsar sobre una imagen, ésta se "colocará" en "div.blogMarqueePhoto img#cp".
- Al pulsar sobre las flechas, podremos navegar por las imágenes (mientras se mantenga el ratón pulsado)
- Al pulsar sobre "div.blogMarqueePhoto img#cp", la imagen se abrirá a tamaño real en una ventana nueva.
Aquí vemos dos cosas a destacar:
a) Hay un solapamiento de eventos javascript.
b) Tenemos que controlar cuándo el ratón está pulsado sobre "div#bMSL" y "div#bMSR".
Teniendo estas dos cosas en cuenta, vamos a pasar a ver la estructura HTML de nuestra galería:
<div class="blogMarquee">
<div class="blogMarqueePhoto">
<img src="" alt="" width="400" height="300" id="cp" onclick="external(this);">
</div>
<marquee id="bM" onmouseout="setAmount(this,5);" onmouseover="setAmount(this,0);" srcollamount="5">
<!-- imágenes aquí, en formato: width=320 height=240 -->
</marquee>
<div class="blogMarqueeScroll" onmouseover="setAmount(ge('bM'),0);">
<div id="bMSL" class="binv" onmousedown="action([ge('bM'),10,false],true);" onmouseup="action([ge('bM'),0,false],true);"> < </div>
<div id="bMSR" class="binv" onmousedown="action([ge('bM'),10,true],true);" onmouseup="action([ge('bM'),0,true],true);"> > </div>
</div>
<script type="text/javascript">addId(ge('bM'));</script>
</div>
(No me gusta que desfase el ancho del blog... pero así se ve mejor)
Como vemos, al final hay una llamada JavaScript. Ésta sirve para dar "id" a cada imagen dentro de marquee (ya veremos cómo, en un momento).
Antes de entrar en JS, vamos a estudiar un poco el HTML.
Como vemos, tenemos la estructura comentada, así que no pararemos ahí, sino que veremos el el elemento "marquee#bm".
Vemos que tiene "scrollamount=5". Esto indica la velocidad (5, en este caso) a la que se mueven los elementos. La dirección la veremos más adelante.
Ahora, vamos a por el JS (explicado con comentarios):
/**
* variable global para el solapamiento
*/
var b_max=2;
/**
* función action.
* Actúa como manejador de solapamiento de eventos entre "marquee#bm img:click" (a) y ("div#bMSL" | "div#bMSR") (b).
* (a) lanza cphoto
* (b) lanza move
* Recibe dos parámetros:
* @param v: array de parámetros de subllamada
* @param f: valor de flag
*/
function action(v,f){
b_max--;
if(f&&b_max>0){
move(v[0],v[1],v[2])
}else{
if(!f){
cphoto(v[0])
}
}
if(b_max==0||f){
b_max=2
}
}
/**
* función ge.
* Sinónimo de función "document.getElementById".
* Recibe un parámetro y retorna un elemento:
* @param e: id del elemento a retornar
* @return: elemento cuyo id corresponde a "e"
*/
function ge(e){
return document.getElementById(e)
}
/**
* función setAmount.
* Ajusta la velocidad (scrollAmount) del elemento "e" a la velocidad "a".
* Si la velocidad es 0, se muestran las flechas; en caso contrario se ocultan.
* Recibe dos parámetros:
* @param e: elemento a ajustar
* @param a: velocidad
*/
function setAmount(e,a){
e.direction='left';
e.scrollAmount=a;
if(a==0){
ge('bMSL').className='bMSL';
ge('bMSR').className='bMSR'
}else{
ge('bMSL').className='binv';
ge('bMSR').className='binv'
}
}
/**
* función addId.
* Itera sobre el elemento con id "e", y sobre sus hijos, asigna id's de forma secuencial.
* Del mismo modo, asigna un handler "click" a cada elemento.
* Recibe un parámetro:
* @param e: id del elemento a iterar
*/
function addId(e){
am=0;
for(i=0;i<e.childNodes.length;i++){
try{
e.childNodes[i].setAttribute('id','el'+am);
e.childNodes[i].setAttribute('onclick','action([this],false)');
am++
}catch(err){
}
}
}
/**
* función move.
* Mueve el elemento "e", en la dirección indicada por "t" a una velocidad "a".
* Recibe tres parámetros:
* @param e: elemento a mover
* @param a: velocidad a fijar
* @param t: dirección (true para derecha, false para izquierda)
*/
function move(e,a,t){
if(t){
e.direction='right'
}else{
e.direction='left'
}
e.scrollAmount=a
}
/**
* función cphoto.
* Muestra el elemento "e" sobre el elemento "#cp"
* Recibe un parámetro:
* @param e: elemento a mostrar sobre "#cp"
*/
function cphoto(e){
ge('cp').setAttribute('src',e.getAttribute('src'))
}
/**
* función external.
* Abre, en una ventana nueva, el elemento "e".
* Recibe un parámetro:
* @param e: elemento a abrir
*/
function external(e){
if(e.getAttribute('src')!=null){
window.open(e.getAttribute('src'))
}
}
Ahora, trataremos los dos asuntos:
a) Solapamiento: usamos este sistema para evitarlo.
b) Se generan dos eventos: onmousedown (cuando la tecla está pulsada) y onmouseup (cuando se suelta la tecla). En el primero, indicamos que se mueva hacia la dirección indicada; en el segundo, indicamos que pare.
Por último, falta indicar el estilo de nuestra nueva función:
img{
border:0;
}
.blogMarqueePhoto{
height:300px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10px;
}
.blogMarqueePhoto img{
width:400px;
height:300px;
border:1px solid #CCC;
padding:0px
}
.blogMarqueePhoto img:hover{
cursor:pointer;
border-color:#FFF;
}
#bM{
height:245px;
}
.blogMarqueeScroll div{
top:-245px;
width:100px;
height:240px;
position:relative;
font-familt:arial;
font-size:180px;
color:#FFF;
line-height:240px;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
background:#000;
}
.bMSL{
float:left;
}
.bMSR{
float:right;
}
.binv{
display:none;
}
#bM img{
padding:0px;
}
#bM img:hover,.bMSR:hover,.bMSL:hover{
cursor:pointer;
}
Y ya solo falta rellenar con imágenes y colocarlo en una entrada.
Aquí podéis ver un ejemplo en funcionamiento. Un consejo: usad el ingenio para "importar" fotos desde facebook ;-)
"Juguete":
Aquí está. Es una lámpara-tecla que compré en la feria del cómic de Barcelona. Mide unos 15cm de largo y se queda en mi despacho.
Ahora ya puedo decir que tengo la luz bajo control ;-)
Cambios:
Hace tiempo que voy detrás de graduarme en la universidad, pero lo que quería hacer estaba fuera de presupuesto (aunque tengo que admitir que de hacer algo relacionado 100% con la informática me gustaría hacerlo); un Bachelor en un centro adscrito a la universidad de Gales. Son tres años de carrera repleta de asignaturas con muy buena pinta...
Pero se va de presupuesto, así que vivía resignado.
Hasta que repasando los apuntes de mates me picó el gusanillo otra vez... así que ahí lo dejo:
¡Me voy a graduar en matemáticas!
Ya me he visto la carrera que voy a hacer y es buena, barata y a distancia. ¡Ale! así, entre curso y curso, podré hacer cursillos de informática (nunca hay que dejar de estudiar)... con este paso estoy más cerca de ser doctor... :-)
Desde luego no es un cambio que haya estado "esperando", más bien vino así de golpe... pero ya está bien.
Tips & Tricks: Overlay de eventos en JavaScript (II)
Buenas!
Vamos a ver rápidamente cómo tratar el solapamiento de eventos con AJAX...
Y es que AJAX puede resultar difícil de usar... ya que muchas veces se necesita de un elemento existente para que funcione bien...
Para empezar con los ejemplos, supondremos la siguiente llamada a función:
doAjax(url, query, getXML, divToChange, ev);
siendo los dos parámetros la URL completa; el tercer parámetro indica (con 1 o 0) si el resultado es o no XML.
El valor de divToChange es el id del div (o elemento) que queramos cambiar. Por otra parte, "ev" hace referencia a si el resultado ha de ser evaluado.
Pues bien, si "divToChange" hace referencia a un id inexistente, habrá un fallo en AJAX, por lo que siempre debemos comprobar que el elemento existe.
¿Y puede ser que no exista?
Pues, sí. Si hacemos varias cargas seguidas con AJAX/JS, puede ser que, al ser AJAX paralelo, intente acceder a un id que todavía no existe.
Para que esto no pase tenemos varias opciones:
a) Esperar un tiempo determinado
b) Evitar que AJAX sea paralelo
La primera opción tiene sus ventajas, pero posee un inconveniente que, para mí, es bastante obvio: dependiendo de la conexión que poseamos tardará un tiempo u otro.
Así, que, siempre que sea factible, al hacer varias cargas con AJAX deberíamos usar AJAX secucuencial.
Pero esto no es todo; si tenemos muchas llamadas AJAX seguidas, podemos hacer que AJAX pierda la petición y quedarnos sin resultado.
Es decir, suponed algo así:
Al ser un bucle sin más, nuestro Request perderá las peticiones (se solaparán), saliendo solo el resultado de la última.
Para no perder las peticiones podríamos esperar, como en el primer caso... pero ¿cuánto?
Pues... un tiempo indefinido, el justo para que la petición termine.
Para ello haremos uso de "setTimeout", cuyo uso es:
window.setTimeout(function(){sentencia_a_ejecutar}, tiempo);
En nuestro caso, debemos embeber la llamada. Es decir, pasaríamos el código anterior al siguiente:
Y, SÍ, usamos "t", sin definir... con esto tardará lo que tenga que tardar... y los eventos no se solaparán.
Ahora vamos a otro caso de solapamiento de eventos:
Imaginad que queremos hacer el típico sistema de "select" para elegir país y ciudad. Al elegir un país cambian las ciudades mediante AJAX, y los países se cargan a posteriori con AJAX, de manera que:
Entonces, el script no se ejecuta, ya que no evaluamos ninguna sentencia. Tocará pensar algo...
¿Un timer? Pasa lo de siempre, debemos esperar...
He aquí una solución que me gusta más: un handler. Hacemos así:
Y definimos en un fichero externo la función "carga()":
Y así, al tener el ratón por encima (antes de hacer click) se cargarán los países, sin que se note...
Y con esto podemos tener algo más controlado nuestro JS y AJAX.
Como final me gustaría añadir que estas entradas han sido algo raras y escasas, lo se... estoy demasiado liado con todo... a ver si los futuros cambios me sirven para ir a mejor!
Y como siempre,
¡Hasta la próxima!
Vamos a ver rápidamente cómo tratar el solapamiento de eventos con AJAX...
Y es que AJAX puede resultar difícil de usar... ya que muchas veces se necesita de un elemento existente para que funcione bien...
Para empezar con los ejemplos, supondremos la siguiente llamada a función:
doAjax(url, query, getXML, divToChange, ev);
siendo los dos parámetros la URL completa; el tercer parámetro indica (con 1 o 0) si el resultado es o no XML.
El valor de divToChange es el id del div (o elemento) que queramos cambiar. Por otra parte, "ev" hace referencia a si el resultado ha de ser evaluado.
Pues bien, si "divToChange" hace referencia a un id inexistente, habrá un fallo en AJAX, por lo que siempre debemos comprobar que el elemento existe.
¿Y puede ser que no exista?
Pues, sí. Si hacemos varias cargas seguidas con AJAX/JS, puede ser que, al ser AJAX paralelo, intente acceder a un id que todavía no existe.
Para que esto no pase tenemos varias opciones:
a) Esperar un tiempo determinado
b) Evitar que AJAX sea paralelo
La primera opción tiene sus ventajas, pero posee un inconveniente que, para mí, es bastante obvio: dependiendo de la conexión que poseamos tardará un tiempo u otro.
Así, que, siempre que sea factible, al hacer varias cargas con AJAX deberíamos usar AJAX secucuencial.
Pero esto no es todo; si tenemos muchas llamadas AJAX seguidas, podemos hacer que AJAX pierda la petición y quedarnos sin resultado.
Es decir, suponed algo así:
for(i=0;i<20;i++){
doAajax(url,query,0,'contenido'+i,0);
}
doAajax(url,query,0,'contenido'+i,0);
}
Al ser un bucle sin más, nuestro Request perderá las peticiones (se solaparán), saliendo solo el resultado de la última.
Para no perder las peticiones podríamos esperar, como en el primer caso... pero ¿cuánto?
Pues... un tiempo indefinido, el justo para que la petición termine.
Para ello haremos uso de "setTimeout", cuyo uso es:
window.setTimeout(function(){sentencia_a_ejecutar}, tiempo);
En nuestro caso, debemos embeber la llamada. Es decir, pasaríamos el código anterior al siguiente:
for(i=0;i<20;i++){
doAjaxTimed(url,query,0,'contenido'+i,0);
}
function doAjaxTimed(url,query,getXML,divToChange,eval){
window.setTimeout(function(){doAjax(url,query,getXML,divToChange,eval)}, t);
}
doAjaxTimed(url,query,0,'contenido'+i,0);
}
function doAjaxTimed(url,query,getXML,divToChange,eval){
window.setTimeout(function(){doAjax(url,query,getXML,divToChange,eval)}, t);
}
Y, SÍ, usamos "t", sin definir... con esto tardará lo que tenga que tardar... y los eventos no se solaparán.
Ahora vamos a otro caso de solapamiento de eventos:
Imaginad que queremos hacer el típico sistema de "select" para elegir país y ciudad. Al elegir un país cambian las ciudades mediante AJAX, y los países se cargan a posteriori con AJAX, de manera que:
<div class="decision">
Esto funciona a las mil maravillas para cargar las ciudades. Luego veremos el resto... pero ahora surge la duda: ¿Y si cargamos todo esto previamente con un AJAX?
<select id="paises"><option value="0"<Seleccione</option></select>
<select id="ciudades"><option value="0">Seleccione</option></select>
</div>
<script type="text/javascript">doAjax(url,query,0,"paises",0);//carga de paises</script>
Entonces, el script no se ejecuta, ya que no evaluamos ninguna sentencia. Tocará pensar algo...
¿Un timer? Pasa lo de siempre, debemos esperar...
He aquí una solución que me gusta más: un handler. Hacemos así:
<div class="decision">
<select id="paises" onmouseover="carga();"><option value="0"<Seleccione</option></select>
<select id="ciudades"><option value="0">Seleccione</option></select>
</div>
<select id="paises" onmouseover="carga();"><option value="0"<Seleccione</option></select>
<select id="ciudades"><option value="0">Seleccione</option></select>
</div>
Y definimos en un fichero externo la función "carga()":
function carga(){
if(document.getElementById('paises').options.length > 1){
return false;
}
doAjax(url,query,0,'paises',0);
return false;
}
if(document.getElementById('paises').options.length > 1){
return false;
}
doAjax(url,query,0,'paises',0);
return false;
}
Y así, al tener el ratón por encima (antes de hacer click) se cargarán los países, sin que se note...
Y con esto podemos tener algo más controlado nuestro JS y AJAX.
Como final me gustaría añadir que estas entradas han sido algo raras y escasas, lo se... estoy demasiado liado con todo... a ver si los futuros cambios me sirven para ir a mejor!
Y como siempre,
¡Hasta la próxima!
Tips & Tricks: Overlay de Eventos en JavaScript
Buenas!
Se avecinan cambios por aquí... de momento todo queda tal como está, pero nunca se sabe...
En fin, vamos a ver un poco el tema del solapamiento de eventos en JavaScript.
Y es que mucho se ha de tener en cuenta a la hora de hacer una serie de funciones JavaScript, ya que, en ocasiones, puede que no suceda aquello que esperamos...
Y es que muchas veces lo que esperamos no es exactamente lo mismo que el navegador "interpreta"... y uno de estos casos es el solapamiento.
Hay varios tipos de solapamiento en JavaScript (realmente se le llama "solapamiento"?). Empezaremos con los básicos, y luego iremos con el tema de AJAX (JavaScript y XML Asíncronos).
¿Qué es el solapamiento?
Supongamos que tenemos esta estructura HTML:
Y supongamos que queremos que al hacer click sobre el texto (el div, en realidad) se muestre un texto en "contenedor".
Podríamos hacer algo así:
Hay muchas maneras para hacer lo que queremos; podríamos, por ejemplo, crear un nuevo "div" desde cero (de "la nada") y ponerle el texto, pero esto (me da la sensación) que sería más costoso.
Así, lo que hacemos en el código de arriba es añadir un handler (manejador) que saltará cuando hagamos click (en inglés "on click", y todo junto "onclick") es editar el html interno del elemento con id "contenedor".
Ahora vamos a dejarlo todo por separado, el JS por un sitio y el HTML por otro:
Esta función no tiene mucho sentido, pues es muy "particular". Así que la vamos a hacer de ámbito general para poder usarla por más de un elemento:
Bien, ahora nuestro handler sería:
onclick="muestra('contenedor', 'Esto es texto');"
Ahora podríamos hacer que cualquier "div" mostrase cualquier texto... es más general.
Sigamos haciendo nuestra "web"... ahora queremos que al pulsar otro elemento que no sea el div "contenido" el texto se oculte.
Para denotar "cualquier elemento", podemos usar el body mismo... ya que éste contiene todos los elementos.
<body onclick="document.getElementById('contenedor').innerHTML = '';"> ** nótese que son dos comillas simples, un ";" y unas comillas dobles **
o lo que es lo mismo:
<body onclick="muestra('contenedor', '');">
Y vamos a probar, y... ¡OH! nuestra "web" no funciona!
Como decía antes, sí funciona, solo que no como esperábamos.
¿Y qué ha pasado? Se han solapado dos eventos JavaScript.
Vamos a explicar esto un poco: imaginad una web como algo tridimensional... (como lo hace FireFox cuando editamos el diseño OTF :-P )
Entonces, nuestra "web" sería algo así (lo haría más bien hecho, pero es tarde y no me apetece mucho jugar con las perspectivas del CorelDraw X5...):
Supongamos que el cubo verde es "contenido", el rojo "contenedor" y lo azul es "body". Al hacer click en "contenido" saltará el evento que pone el texto, pero a su vez estamos haciendo click sobre "body", por lo que vuelve a saltar el evento, borrando el texto...
Es decir, así como los programas tienen una pila de llamadas donde se apilan las llamadas de funciones, para saber a qué dirección de memoria volver cuando acabe la función actual, JS tiene una pila eventos, de manera que parece que no funcione, pero en realidad va todo tan rápido que parece que no funcione...
Entonces, ¿Cómo hacemos para que funcione como queremos?
Analicemos la situación: al hacer click en "contenido", la función es llamada dos veces, mientras que en cualquier otro sitio solo es llamada una vez.
Por tanto, podemos definir las siguientes cláusulas:
- Si la función se ha de mantener, se harán X clicks (2, en este caso)
- Si no, se harán solo Y clicks (1 en este caso).
Bien, vamos a hacer un poco más grande nuestro JS:
Entonces, vamos a ver:
Primero hacemos un contador global, con valor 2. Luego hemos modificado la función para que acepte un parámetro adicional (booleano), para diferenciar la llamada del div de otras.
Entonces, en "contenido" haremos:
onclick="muestra('contenedor', 'texto', false);"
y en body:
onclick="muestra('contenedor', 'texto', true);"
Así, al hacer click sobre el div, pasará lo siguiente (suponiendo una primera ejecución):
Se avecinan cambios por aquí... de momento todo queda tal como está, pero nunca se sabe...
En fin, vamos a ver un poco el tema del solapamiento de eventos en JavaScript.
Y es que mucho se ha de tener en cuenta a la hora de hacer una serie de funciones JavaScript, ya que, en ocasiones, puede que no suceda aquello que esperamos...
Y es que muchas veces lo que esperamos no es exactamente lo mismo que el navegador "interpreta"... y uno de estos casos es el solapamiento.
Hay varios tipos de solapamiento en JavaScript (realmente se le llama "solapamiento"?). Empezaremos con los básicos, y luego iremos con el tema de AJAX (JavaScript y XML Asíncronos).
¿Qué es el solapamiento?
Supongamos que tenemos esta estructura HTML:
<body>
<div id="contenido">¡Haz Click!</div>
<div id="contenedor"></div>
</body>
<div id="contenido">¡Haz Click!</div>
<div id="contenedor"></div>
</body>
Y supongamos que queremos que al hacer click sobre el texto (el div, en realidad) se muestre un texto en "contenedor".
Podríamos hacer algo así:
<body>
<div id="contenido" onclick="document.getElementById('contenedor').innerHTML = 'contenido';>¡Haz Click!</div>
<div id="contenedor"></div>
</body>
<div id="contenido" onclick="document.getElementById('contenedor').innerHTML = 'contenido';>¡Haz Click!</div>
<div id="contenedor"></div>
</body>
Hay muchas maneras para hacer lo que queremos; podríamos, por ejemplo, crear un nuevo "div" desde cero (de "la nada") y ponerle el texto, pero esto (me da la sensación) que sería más costoso.
Así, lo que hacemos en el código de arriba es añadir un handler (manejador) que saltará cuando hagamos click (en inglés "on click", y todo junto "onclick") es editar el html interno del elemento con id "contenedor".
Ahora vamos a dejarlo todo por separado, el JS por un sitio y el HTML por otro:
[div]
<script type="text/javascript">
function muestra(){
document.getElementById('contenedor').innerHTML = 'contenido';
return false;
}
</script>
<body>
<div id="contenido" onclick="muestra();">¡Haz Click!</div>
<div id="contenedor" ></div>
</body>
<script type="text/javascript">
function muestra(){
document.getElementById('contenedor').innerHTML = 'contenido';
return false;
}
</script>
<body>
<div id="contenido" onclick="muestra();">¡Haz Click!</div>
<div id="contenedor" ></div>
</body>
Esta función no tiene mucho sentido, pues es muy "particular". Así que la vamos a hacer de ámbito general para poder usarla por más de un elemento:
function muestra(elemento,texto){
document.getElementById(elemento).innerHTML = texto;
return false;
}
document.getElementById(elemento).innerHTML = texto;
return false;
}
Bien, ahora nuestro handler sería:
onclick="muestra('contenedor', 'Esto es texto');"
Ahora podríamos hacer que cualquier "div" mostrase cualquier texto... es más general.
Sigamos haciendo nuestra "web"... ahora queremos que al pulsar otro elemento que no sea el div "contenido" el texto se oculte.
Para denotar "cualquier elemento", podemos usar el body mismo... ya que éste contiene todos los elementos.
<body onclick="document.getElementById('contenedor').innerHTML = '';"> ** nótese que son dos comillas simples, un ";" y unas comillas dobles **
o lo que es lo mismo:
<body onclick="muestra('contenedor', '');">
Y vamos a probar, y... ¡OH! nuestra "web" no funciona!
Como decía antes, sí funciona, solo que no como esperábamos.
¿Y qué ha pasado? Se han solapado dos eventos JavaScript.
Vamos a explicar esto un poco: imaginad una web como algo tridimensional... (como lo hace FireFox cuando editamos el diseño OTF :-P )
Entonces, nuestra "web" sería algo así (lo haría más bien hecho, pero es tarde y no me apetece mucho jugar con las perspectivas del CorelDraw X5...):
Supongamos que el cubo verde es "contenido", el rojo "contenedor" y lo azul es "body". Al hacer click en "contenido" saltará el evento que pone el texto, pero a su vez estamos haciendo click sobre "body", por lo que vuelve a saltar el evento, borrando el texto...
Es decir, así como los programas tienen una pila de llamadas donde se apilan las llamadas de funciones, para saber a qué dirección de memoria volver cuando acabe la función actual, JS tiene una pila eventos, de manera que parece que no funcione, pero en realidad va todo tan rápido que parece que no funcione...
Entonces, ¿Cómo hacemos para que funcione como queremos?
Analicemos la situación: al hacer click en "contenido", la función es llamada dos veces, mientras que en cualquier otro sitio solo es llamada una vez.
Por tanto, podemos definir las siguientes cláusulas:
- Si la función se ha de mantener, se harán X clicks (2, en este caso)
- Si no, se harán solo Y clicks (1 en este caso).
Bien, vamos a hacer un poco más grande nuestro JS:
<script type="text/javascript">
var max = 2;
function muestra(elemento, contenido, flag){
max--;
if(flag && max > 0){
document.getElementById(elemento).innerHTML = '';
}else{
if(!flag){
document.getElementById(elemento).innerHTML = contenido;
}
}
if(max == 0 || flag){
max = 2;
}
}
</script>
var max = 2;
function muestra(elemento, contenido, flag){
max--;
if(flag && max > 0){
document.getElementById(elemento).innerHTML = '';
}else{
if(!flag){
document.getElementById(elemento).innerHTML = contenido;
}
}
if(max == 0 || flag){
max = 2;
}
}
</script>
Entonces, vamos a ver:
Primero hacemos un contador global, con valor 2. Luego hemos modificado la función para que acepte un parámetro adicional (booleano), para diferenciar la llamada del div de otras.
Entonces, en "contenido" haremos:
onclick="muestra('contenedor', 'texto', false);"
y en body:
onclick="muestra('contenedor', 'texto', true);"
Así, al hacer click sobre el div, pasará lo siguiente (suponiendo una primera ejecución):
- Parámetros de entrada: "contenedor", "texto", "false"
- max disminuye (max = 1)
- Entra en el "else"
- Se escribe el texto
- No entra en el if
- Devuelve la llamada a la pila
- Llamada desde Body: "contenedor", "", "true"
- max disminuye (max = 0)
- Entra en el else
- NO entra en el if (y por tanto no se modifica nada)
- Entra en el segundo if (max = 2)
¡Bien!, el texto ya se queda. Si llamamos directamente desde body:
- Parámetros: "contenedor", "texto", "true"
- max disminuye (max = 1)
- Entra en el if
- Vacía el elemento
- Entra en el segundo if (max = 2)
Y hemos evitado que, al solaparse, se produzca un borrado.
En la próxima entrada, veremos solapamientos con AJAX, y cómo solucionarlos de varias maneras.
Más adelante (la siguiente entrada a la de AJAX), entraremos en un mundo algo diferente: Matemáticas.
Ya veremos cómo acaba esta aventura.
Saludos, como siempre, y...
¡Hasta la próxima!
Suscribirse a:
Entradas (Atom)