<BikerTB />: en bikertb

Mostrando entradas con la etiqueta en bikertb. Mostrar todas las entradas

miércoles, 13 de marzo de 2019

Notas sobre los mapas de rutas BikerTB versión 2019

Estructura del fichero índice

Fichero: indiceTracksMadrid.js

datos="\ 003\taqua\t003-alameda-rascafria-pedrosillo-cerradillas-tejos-milenarios-an.kml\n\ 004\tblack\t004-alcala-de-henares-quer.kml\n\ 005\tblue\t005-alcala-de-henares-parque-de-los-cerros-anchuelo-villalbilla-.kml\n\ 006\tfuchsia\t006-alcala-meco-quer-alovera-azuqueca.kml\n\ . . . 438\tBlueViolet\t438-via-verde-del-tajuna-completa-ida-y-vuelta.kml\ "

Opciones generales

var fullZoomNav = false; //true = zoom al navegador. Usar false para mapa incrustado en un post del blog.
var boundsAuto = false; //al iniciar mostrar el área ocupada por los tracks. Irrelevante si se muestra un solo track.
//Si boundsAuto = false, definir los coordenadas del área a mostrar al iniciar:
var Norte = 41.31908, Sur = 39.84523, Este = -2.56531, Oeste = -5.05096; //recomendable para mostrar más de 100 tracks.
var iniIcon = false; //mostrar permanentemente los iconos de inicio de los tracks.
var openBlog = "https://maparutasmtb.blogspot.com"; //para el botón "Ir al Blog"

Mostrar todas las rutas en una página dedicada

<a href="https://www.bikertb.es/nano/madrid.html">Mapa de rutas</a>

(Rutas para la DEMO tomadas de Nano Flojo)

Mostrar todas las rutas incrustadas en un post del blog

<script>
  var trackAlone='TODOS'; // TODOS = presentar todos los tracks
  document.write('<iframe width="828" height="680" allowfullscreen src="https://www.bikertb.es/nano/madrid.html?track='+trackAlone+'"></iframe>')
</script>

Mostrar una ruta en un post del blog

<script>
  var trackAlone='232'; // mostrar la ruta con referencia 232, esto es lo único que variaría de un post a otro.
  document.write('<iframe width="828" height="500" allowfullscreen src="https://www.bikertb.es/nano/madrid.html?track='+trackAlone+'"></iframe>')
</script>

Mostrar un selector de rutas en un post del blog

<iframe src="https://www.bikertb.es/nano/getSelect-Chosen.php" allowfullscreen frameborder="0" width="880" height="580"></iframe>

Nota: Esta vista necesita php en el servidor.

Demo: Mostrar un selector de rutas en un post del blog

Rutas para la DEMO tomadas de Nano Flojo.

Demo: Mostrar una ruta en un post

Ruta #232: La Jarosa

Ruta para la DEMO tomada de Nano Flojo.

Demo: Mostrar todas las rutas incrustadas en un post

Rutas para la DEMO tomadas de Nano Flojo.

jueves, 24 de octubre de 2013

Hack para handleOversize:drag en IE10

El parámetro drag (options={"handleOversize":"drag"}) de Shadowbox, que presenta imágenes sin redimensionar, funciona en todos los navegadores excepto en Internet Explorer 10. El siguiente META en el HEAD soluciona el problema de forma temporal hasta que aparezca una versión de Shadowbox compatible.

<head>
<!-- INI Forzar compatibilidad de IE10 con IE9 para hacer funcionar "drag" en Shadowbox -->
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- FIN Forzar compatibilidad de IE10 -->

27 de noviembre de 2013 - El problema ha sido corregido en Internet Explorer 11.

jueves, 25 de octubre de 2012

Dewplayer vía DOM

Катюша

Расцветали яблони и груши,
Поплыли туманы над рекой;
Выходила на берег Катюша,
На высокий берег, на крутой.

div donde insertaremos el código:

<div id="Katyusha" style="position:absolute;top:0px;left:0px;"></div>

Script en cualquier parte de la página:

<script type="text/javascript" language="JavaScript">
//<![CDATA[
  var encender = 0;
  var enlace1 = document.URL;
  var enlace2 = window.location.href;
// Autoplay si estamos en la página concreta:
  if ( (enlace1 || enlace2) == 'http://bikertb.blogspot.com/2012/09/Katyusha.html' ) { encender=1; }
  var codigoPlayer = "<object id='myObjID' width='200' height='20' name='dewplayer' type='application/x-shockwave-flash' data='http://www.dropbox.com/dewplayer.swf'><param name='wmode' value='transparent'><param name='flashvars' value='mp3=http://www.dropbox.com/Katyusha.mp3&autostart="+encender+"' /></object>"; 
// Modifico el código si el navegador es Internet Explorer:
  if ( /*@cc_on!@*/false ) {
      codigoPlayer = "<object id='myObjID' width='200' height='20' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'><param name='movie' value='http://www.dropbox.com/dewplayer.swf'><param name='wmode' value='transparent'><param name='flashvars' value='mp3=http://www.dropbox.com/Katyusha.mp3&autostart="+encender+"' /></object>"; }
// Inserto el código:
  document.getElementById("Katyusha").innerHTML = codigoPlayer;
//]]
</script>

Nota: A Internet Explorer (v9.0.10) no le gusta que construya el nodo <object> en el DOM elemento a elemento, por eso utilizo innerHTML para insertar el código en bloque.

jueves, 5 de abril de 2012

Imagen anclada a una palabra

Este procedimiento ancla una imagen a una palabra. Si redimensionamos la ventana del navegador, o cambiamos la resolución de la pantalla, la imagen fluirá atada a la palabra en un punto preciso, sin alterar la distribución del texto u otros elementos circundantes. Se utiliza en el blog para señalar las actualizaciones de ciertas páginas:

El método es simple, consiste en variar adecuadamente los márgenes de la imágen. Veamos a el efecto paso a paso.

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA