menuflotante para cambiar tamaño de texto

DAN-T · #1 (**permalink**) 03/08/2007, 04:56

Hola alguien sabe algun script ya escrito para hacer algo semejante al menu flotante de esta web? http://www.babyonlineshop.de/deutsch/15/ /el de la derecha)

Muchas gracias por adelantado!

Tigervlc · #2 (**permalink**) 03/08/2007, 16:01

Hola, me estoy devanando los sesos para intentar ayudarte, pero no hay forma de conseguirlo.

El script que he hecho hace que el menu lateral que creo se desvanezca al hacer sroll y se desplace y reaparezca. Pero lo hace de forma arbitraria, a veces si, a veces no. Algún problema con los retardos. Tampoco consigo hacer que el texto aumente o disminuya.

Este es el código que he hecho. Seguro que alguien experto en el tema puede depurarlo para conseguir que funcione. Yo ya estoy que echo humo jejeje

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#contenido {
	float:left;
	width: 80%;
	font-size: 16px;
}
#menu {
	position:relative;
	float:left;
	width: 20%;
}
#menuFlotante {
	position:absolute;
	top: 10px;
	background-color:#CCCCFF;
}
-->
</style>
<script type="text/javascript">
var old = 10	// posición superior inicial de menu
var opacidad = 10	// opacidad inicial de menu
var intervalo, temporizador	// temporizadores
var miMenu = null	// vble para referenciar al menu

function init() {	// Función de inicialización
	miMenu = new getObj("menuFlotante")
	miContenido = new getObj("contenido")
	window.onscroll = function() {
		temporizador = setTimeout("reMostrarMenu()", 1000) // Ejecutar en 1 segundo la función reMostrarMenu()
	}
}

function getObj(name)		// Obtención de referencia a nodo de id=name
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
	this.obj = getObjNN4(document,name);
	this.style = this.obj;
  }
}


function reMostrarMenu () {	 
	intervalo = setInterval("fadeOut()", 50)	// Ejecutar función fadeOut() a intervalos de 50ms
	clearTimeout(temporizador)
}

function fadeOut () {	// Esta función desvanece el menu
	setOpacity(miMenu, opacidad)
	opacidad--
	if (opacidad <= 0) {	// Si se llega a visibilidad 0...
		clearInterval(intervalo)	// ... parar de desvanecer
		desplazaMenu()				// ... llamar a desplazamiento de menu
		intervalo = setInterval("fadeIn()", 50)	// ... crear el intervalo que hará reaparecer el menu
	}
}

function fadeIn () {	// Función que hace reaparecer menu
	setOpacity(miMenu, opacidad)
	opacidad++
	if (opacidad >= 10) {
		clearInterval(intervalo)	// Una vez alcanzada opacidad total, parar el proceso de reaparición
	}
}

function desplazaMenu() {	//	Recoloca el menu en función de la posición de scroll actual
	if (window.innerHeight) {
			  pos = window.pageYOffset
	} else if (document.documentElement && document.documentElement.scrollTop) {
			pos = document.documentElement.scrollTop
	} else if (document.body) {
			  pos = document.body.scrollTop
	}
		
	if (pos < 10)
		pos = 10
	else pos += 10
	
	if (pos == old)	miMenu.style.top = pos + 'px'
	old = pos
}

function setOpacity(elemento, value) {	//	Función que aplica opacidad
	elemento.style.opacity = value/10;
	elemento.style.filter = 'alpha(opacity=' + value*10 + ')';
}

function tamanyo(op) {	// Función para cambiar el tamaño de la fuente
	var miContenido = document.getElementById("contenido")
	var medidaActual = parseInt(miContenido.style.fontSize)
	switch (op) {
		case '+': miContenido.style.fontSize = (medidaActual + 1) + "px" 
		break
		case '-': miContenido.style.fontSize = (medidaActual - 1) + "px"
	}
}
</script>
</head>

<body onload="init()">
<div id="contenido">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis elementum.
      Aliquam erat volutpat. Pellentesque facilisis ligula quis ante. In ullamcorper
      vulputate urna. Ut condimentum quam id nisl condimentum scelerisque. Cras
      nunc. Vestibulum ac nunc. Cras turpis lectus, convallis id, imperdiet eu,
      ultrices a, diam. Suspendisse potenti. Duis ligula elit, pulvinar quis,
      viverra vel, pulvinar eget, nisi. Quisque accumsan tincidunt tellus. Cras
      velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Aenean nibh dolor, euismod ut, auctor non, molestie non,
      sem. Quisque luctus, mi faucibus dapibus placerat, enim turpis commodo
      diam, et ultricies odio purus nec augue. Ut volutpat nulla in lorem. Pellentesque
      nec sapien. </p>
    <p>Nullam at metus quis enim tempus egestas. Nulla facilisi. Duis rutrum
      enim ut dolor. Maecenas nibh magna, blandit at, malesuada pulvinar, ultricies
      vel, arcu. Etiam eu purus. Sed faucibus orci sed enim. Integer lacus lectus,
      imperdiet non, consectetuer quis, scelerisque ac, nisi. Praesent sapien
      nulla, semper eu, semper a, condimentum sed, velit. Vestibulum mollis,
      mauris ut rutrum adipiscing, augue orci imperdiet ipsum, in molestie elit
      lectus sed ipsum. Pellentesque habitant morbi tristique senectus et netus
      et malesuada fames ac turpis egestas. Nunc vestibulum, velit suscipit commodo
      tempor, leo pede tincidunt risus, ut congue quam tellus ut velit. In iaculis,
      neque vitae fermentum fermentum, ante velit consequat turpis, vel rutrum
      turpis tellus et mi. Donec massa nisi, commodo eu, rhoncus nec, rhoncus
      sit amet, nibh. Morbi facilisis pharetra dolor. Ut venenatis. </p>
    <p>Maecenas sit amet velit ac dolor aliquam varius. In in neque nec odio
      mattis aliquam. Vivamus tellus leo, semper at, vestibulum sed, congue eget,
      massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos hymenaeos. Nullam fermentum dignissim nibh. Maecenas nulla.
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos hymenaeos. Sed turpis justo, ultrices et, gravida non, volutpat
      et, sapien. Nullam magna. Vestibulum eu risus vitae justo fermentum dignissim. </p>
    <p>Ut leo nisi, facilisis sit amet, ullamcorper in, semper in, massa. Aliquam
      orci mi, laoreet sed, varius sed, ultricies eu, leo. Nulla imperdiet eros
      id orci. Curabitur non mauris. Sed ut lectus et justo pharetra faucibus.
      Nullam nisi. Sed ornare mollis mauris. Donec sagittis lorem tristique tellus.
      Nulla nunc mauris, bibendum non, aliquam eu, rhoncus et, augue. Vestibulum
      sed odio. Ut facilisis lorem at justo. Vestibulum sem. Aliquam elementum,
      nisi vitae tristique auctor, sapien libero egestas metus, et tempor sapien
      diam et ligula. Praesent malesuada adipiscing leo. In hac habitasse platea
      dictumst. Proin semper mattis massa. Phasellus molestie. </p>
    <p>Cras varius molestie nisi. Sed diam lacus, luctus eu, iaculis eget, dictum
      nec, diam. Vivamus laoreet tristique quam. Ut non nisl non lectus molestie
      egestas. Phasellus et felis. Nam nec massa. Morbi et nisl. Ut aliquam.
      Proin imperdiet aliquet diam. Integer a mi. Aliquam in justo. Cras condimentum
      lacus ac ante. Nulla rhoncus leo et nunc lacinia eleifend. Nulla facilisi.
      Fusce ac nisi. Aliquam nulla tellus, accumsan vel, malesuada vel, aliquam
      sit amet, lacus. Maecenas metus enim, dignissim quis, aliquet eu, porta
      eget, magna. In hac habitasse platea dictumst. </p>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut varius.
        Donec nonummy. Quisque tempus. Fusce sit amet lorem sit amet velit congue
        ornare. Nam non felis non dolor ultricies aliquet. Donec rutrum. Etiam
        condimentum egestas metus. Nunc elit elit, tincidunt non, faucibus sit
        amet, rutrum a, nibh. Vestibulum non tortor ut nibh sollicitudin scelerisque.
        Maecenas eu nulla in quam tristique ultrices. Vestibulum posuere, lorem
        non porta condimentum, diam velit gravida enim, non lobortis urna odio
        eget nulla. Aenean pulvinar. </p>
      <p>Duis a urna. Sed in enim. Pellentesque sit amet dui. Maecenas elementum
        est id justo. Nam velit leo, ultrices vitae, ullamcorper eleifend, iaculis
        vitae, mi. Etiam congue. Quisque ultricies feugiat tellus. Pellentesque
        non neque eu orci volutpat mattis. In nec erat. Vestibulum volutpat arcu
        ut dolor. Suspendisse facilisis arcu eleifend quam. </p>
      <p>Aliquam posuere massa ut odio. Mauris cursus nulla euismod magna. Morbi
        dui. Sed porttitor. Nulla aliquam risus in tellus. Fusce vestibulum,
        risus vitae hendrerit suscipit, ligula mauris cursus tortor, et vulputate
        justo eros in risus. Integer a eros non urna aliquet imperdiet. Nullam
        tincidunt magna eget nisl. Integer imperdiet nibh id tellus lobortis
        facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Vestibulum vel mauris. Sed auctor volutpat nunc. Duis quis diam. </p>
      <p>Mauris hendrerit arcu ac tellus. Proin interdum tortor in ante. Mauris
        sed augue eu elit scelerisque aliquam. Donec sodales. Etiam ut risus.
        Mauris vel massa. Cras nec leo. Integer eros. Aenean iaculis. Morbi at
        augue. Donec varius. Phasellus orci. Quisque blandit diam. </p>
</div>
<div id="menu">
  <div id="menuFlotante">
    <ul>
      <li><a href="javascript:tamanyo('+')">texto [+]</a></li>
      <li><a href="javascript:tamanyo('-')">texto [-]</a></li>
    </ul>
  </div>
</div>
</body>
</html>

DAN-T · #3 (**permalink**) 06/08/2007, 16:58

Hey! pues muchisimas gracias por tu trabajo, a pesar de que no me soluciones el problema :P . Pero bueno.... igual un alma caritativa nos puede ayudar.

Si consigo hacerlo posteare el codigo para que podais verlo!

Saludos! y gracias de nuevo

Tigervlc · #4 (**permalink**) 07/08/2007, 15:45

De nada

, esperemos que alguien más nos ayude.

En cuanto pueda volveré a intentar depurarlo, pero lo que tengo seguro es que el intervalo da problemas, ya que al hacer scroll se dispara el evento muchas veces por muy poco que le des a la barra. Intenté detener su ejecución tras el primer disparo del evento pero no pude.

Y luego para el tamaño del texto, la verdad es que pensaba que así era correcto, pero no sé por qué miContenido.style.fontSize no me lo reconoce.