scrollers
Este scroller lo encontré en w3c
Me podría valer para sustituir la marquesina que no se ve bien en todos los navegadores.
He estado probando pero no se como, ¿se podría cambiarlo para que haga el scrolling horizontalmente en vez de verticalmente?
A ver si alguien sabe.
<style>
span
{
font:12px arial;
background:#CCCCCC;
position:absolute;
width:300;
height:100;
top:100;
clip:rect(0 100 100 0);
}
</style>
<script type="text/javascript">
var interval
startPosition=0
topPosition=100
endPosition=100
speed=50
function scrollit()
{
if (startPosition!=200)
{
startPosition=startPosition+1
topPosition=topPosition-1
document.all("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
document.all("display").style.top=topPosition
interval=setTimeout("scrollit()",speed)
}
else
{
startPosition=0
topPosition=100
endPosition=100
interval=setTimeout("scrollit()",speed)
}
}
function stopinterval()
{
clearTimeout(interval)
}
</script>
</head>
<body onload="scrollit()" onunload="stopinterval()">
<span id="display"><br /><br /><br /><br /><br /><br /><br /><img src="images/plane.gif" alt="Marbella Sun Rentals, holiday homes for rent" width="61" height="28">
Hello Developers, this script makes a scrolling text. <br />W3Schools.com
</span>
Helen
CarlosJ
Hola,.,.modificarlo para que funcione en vertical es fácil, de cualquier manera te aviso que esta "marquesina" sólo funciona en IE, ya que utiliza document.all para hacer referencia a las propiedades.
De cualquier manera así a primera vista habría que modificar el clipping y las posiciones que modifica:
<code>
document.all("display").style.top=topPosition
por
document.all("display").style.left=laPosicion
</code>
y en:
<code>
document.all("display").style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)"
</code>
cambiar las variables de lugar, y que afecten al ancho en lugar de al alto: clip(top,right,bottom,left).
Probablemente haya que ajustar algún valor más.
helenp
Gracias,
Pues vaya,
hace tiempo lo encontré, y como es de w3c, tomaba por supuesto que funcionaría,.......
He probado y funciona en Opera, pero no en netscape ni mozilla,
aunque mejor que una marquesina, que en no IE se ve a media, mejor no ver nada.
Si alguien sabe algo parecido a marquesina pero que funcione en casi todos navegadores, please.
Helen
spiral
haz en tu documento un div
<div id="miscroller">
aqui va mi contenido
</div>
y especifica en tu css para las propiedades de ese div:
#miscroller{
width:100px;
height:100px;
overflow:auto;
}
y automaticamente te pone scroll si el contenido rebasa el div.
otra manera, menos practica a mi punto de vista, es usar un iframe
helenp
spiral
haz en tu documento un div
<div id="miscroller">
aqui va mi contenido
</div>
y especifica en tu css para las propiedades de ese div:
#miscroller{
width:100px;
height:100px;
overflow:auto;
}
y automaticamente te pone scroll si el contenido rebasa el div.
otra manera, menos practica a mi punto de vista, es usar un iframe
Gracias, está muy guay, pero no me habré explicado bien,
lo que buscaba era scrolling text, tipo marquesina.
Ya he aprendido otra cosa :)
Helen
meddle
te lo explico asi medio rapido, luego lo haces tu y si no te sale te ayudo. Necesitas:
1.capa contenedora, llamemosle outerBox para la explicacion
2.capa contenido, ejemplo innerBox
3.Texto dentro del innerBox
4.un css que le ponga un ancho al outerBox, y overflow: hidden
5.un css que le ponga un position: absolute al innerBox, y top: 0px; left: Xpx (donde X igual al ancho del outerBox + 10px, para que empiece escondido a la derecha)
6.un javascript que mueva X pixels a la izquierda la capa innerBox cada Y segundos y acto seguido calcule si innerBox está en una posicion negativa que sea inferior al ancho de outerBox mas el ancho del innerBox. En ese caso mover innerBox a una posicion x = ancho del outerBox + 10 (volver a empezar). Si no, seguir moviendo a la izquierda.
helenp
meddle
te lo explico asi medio rapido, luego lo haces tu y si no te sale te ayudo. Necesitas:
1.capa contenedora, llamemosle outerBox para la explicacion
2.capa contenido, ejemplo innerBox
3.Texto dentro del innerBox
4.un css que le ponga un ancho al outerBox, y overflow: hidden
5.un css que le ponga un position: absolute al innerBox, y top: 0px; left: Xpx (donde X igual al ancho del outerBox + 10px, para que empiece escondido a la derecha)
6.un javascript que mueva X pixels a la izquierda la capa innerBox cada Y segundos y acto seguido calcule si innerBox está en una posicion negativa que sea inferior al ancho de outerBox mas el ancho del innerBox. En ese caso mover innerBox a una posicion x = ancho del outerBox + 10 (volver a empezar). Si no, seguir moviendo a la izquierda.
Gracias, de verás eres demasiado, bueno claro
Pero no entiendo ni pi, aun no llego ni a la suela de tus zapatos me temo, pero me caliento el tarro lo que puedo.
Acabo de cambiar de host, por fin puedo usar php, cgi, perl, bases de datos,
quiero hacer lo de css,
y como colmo,
creo que debido al descenso de visitas, es temporada baja ahora, google valora visitas y tiempo que se queden en el site tengo entendido, hemos bajado desde la semana pasada del primer puesto buscando por marbella rentals al quinto, buscando por marbella apartments y marbella villas estamos en segunda página, antes en segundo lugar de primera página.
Tengo que trabajar mucho, y supongo que lo de css, un codigo mas limpio y cambiar logo flash por un H1 nos dará un mejor ranking.
Este mundo es duro, y cada vez más, los demás se despavilan cada vez mas......................
helenp
meddle
te lo explico asi medio rapido, luego lo haces tu y si no te sale te ayudo. Necesitas:
1.capa contenedora, llamemosle outerBox para la explicacion
2.capa contenido, ejemplo innerBox
3.Texto dentro del innerBox
4.un css que le ponga un ancho al outerBox, y overflow: hidden
5.un css que le ponga un position: absolute al innerBox, y top: 0px; left: Xpx (donde X igual al ancho del outerBox + 10px, para que empiece escondido a la derecha)
6.un javascript que mueva X pixels a la izquierda la capa innerBox cada Y segundos y acto seguido calcule si innerBox está en una posicion negativa que sea inferior al ancho de outerBox mas el ancho del innerBox. En ese caso mover innerBox a una posicion x = ancho del outerBox + 10 (volver a empezar). Si no, seguir moviendo a la izquierda.
Bueno a ver,
El codigo css sería algo así:
#outerBox { width : 400px;
overflow: hidden;
}
#innerbox { position: absolute; top: 0px; left: 410px;
}
<div id="outerBox">
<div id="innerBox "><p>Este sería mi texto</p>
</div>
</div>
Ahora lo de javascript, ni idea..........
gracias,
Helen
meddle
vale, igual un poco de ayuda, pero te aseguro que esto lo vas a hacer tu, yo te guiaré, pero si lo hago yo no tiene gracia ;)
El siguiente codigo es pseudo codigo, no funciona, es solo para ver el proceso, mas o menos:
<code>
function scroll() {
// primero movemos la capa interior unos px a la izquierda:
document.getElementById("innerBox").style.left = parseInt(document.getElementById("innerBox").style.left) - X + "px";
// recalculamos posiciones y valores:
innerBoxLeft = parseInt(document.getElementById("innerBox").style.left);
innerBoxWidth = parseInt(document.getElementById("innerBox").style.width);
// si el texto ya se ha escondido, reseteamos posicion de innerBox:
if (innerBoxLeft < -innerBoxWidth) {
outerBoxWidth = parseInt(document.getElementById("innerBox").style.width);
document.getElementById("innerBox").style.left = outerBoxWidth + 10 + "px";
}
// en cualquier caso hacer scroll de nuevo al cabo de Y milisegundos:
setTimeout("scroll()", Y);
}
</code>
Bien pensado, te van a surgir mas problemillas (leer estilos de una capa sin haberselo dado con css, ejemplo, el ancho), pero cuando lleguemos a ese punto te lo explicare. Puedes mirar aqui, pero ya lo explicare cuando llegue el momento.
helenp
[quote="meddle"]vale, igual un poco de ayuda, pero te aseguro que esto lo vas a hacer tu, yo te guiaré, pero si lo hago yo no tiene gracia ;)
Tiene toda razon del mundo, no me gusta hacerle nada a nadie,,,,,,,,,, hay que aprender.
Lo voy a intentar mirar, pero tengo el tarro ya, con tantas cosas a la vez,
para cambiar de tema, que esto me urge más,
este link parece bueno para esconder css de ciertos navegadores: http://www.ericmeyeroncss.com/bonus/trick-hide.html
pero no se podría mediante un javascript o php, detectar navegador y si es IE4 o netscape 4 (aun no lo he visto en netscape), llevarles a otra hoja css? en vez de hacer todo eso?
Poniendo las fotos a la derecha en un float, si desactivo o escondo la regla float, las imagenes vendrá en una fila dentro del contenido,
ahora si lo hago columna derecha con salto de línea, vienen las fotos en una columna larga, en IE4 se vería peor.
meddle
no es que no me guste hacer ejemplos para los demas (mas bien todo lo contrario, creo que está demostrado) es por cuestion de practica. Yo ya lo se hacer, tardaria pocos minutos y no aprenderiamos nada, ni tu, ni yo, así que sería perder el tiempo a largo plazo (aunque a corto plazo te solucione un problema). Si quieres un script hecho hay miles por la red, en serio :)
En cuanto a lo otro, IE4/NS4 tienen muy poco chare, yo pasaria de ellos, no creo que lleguen ni a un 1%. Lo que suelo hacer es esconder los estilos a NS4 (simplemente poniendo media="all" en el link que llama al css).
helenp
meddle
En cuanto a lo otro, IE4/NS4 tienen muy poco chare, yo pasaria de ellos, no creo que lleguen ni a un 1%. Lo que suelo hacer es esconder los estilos a NS4 (simplemente poniendo media="all" en el link que llama al css).
Si pero si hubiera forma de hacerlo visible para todos mejor, y no costaría mucho hacer otra css para ellos, si es que se puede,
me temo que esos no actualizados son gente como mi madre, ni entiende ni pi de ordenador pero son en vista comercial buenos clientes, aunque si se debe educar al internauta,
este son las visitas segun mis estadisticas si son de fiar:
MSIE 6.0 17977
MSIE 5.0 7193
MSIE 5.5 6670
AOL 7.0 856
MSIE 4.0 376
AOL 8.0 291
AOL 6.0 251
Netscape Gecko 181
Netscape 4.7 172
MSIE 5.1 159
MSIE 5.2 125
AOL 5.0 92
Netscape 4.5 76
Netscape 6.2 42
MSIE 4.5 31
Netscape 4.0 26
Opera 6.01 16
Netscape 4.6 14
AOL 9.0 12
Opera 6.05 12
Opera 7.11 11
Opera 6.04 8
Opera 7.03 8
AOL 4.0 6
Konqueror 3.1 5
Opera 6.0 5
Netscape 6.0 5
Opera 7.01 5
Opera 7.0 3
Netscape 6.1
meddle
hacerlo visible para todos no es lo mismo que hacerlo con el mismo layout para todos. eso depende de ti, yo no pondria estilos para los navegadores antiguos.
helenp
meddle
hacerlo visible para todos no es lo mismo que hacerlo con el mismo layout para todos. eso depende de ti, yo no pondria estilos para los navegadores antiguos.
Bueno, han pasado muchos dias y no tenia acceso al javascript, la tenía aquí en domestika y no lo he podido seguir,
por fin esta de vuelta domestika...............:)
pero me ha servido para trabajar mucho y aprender algo mas, y no preguntar tanto:)
El ejemplo que hiziste de outerbox y innerbox, sí que me ha servido para algo, para colocar unas banderas y la marquesina en la misma linea (en IE) , que por supuesto se ve bien en todas navegadores, se veia a media porque el alto no estaba bien.
Eso será lo que se llama nested divs?
Hablando de hacer la pagina visible para todos, he optado por esta opcion que de esta manera excluye algunas reglas css tanto de N4 como de IE4:
<link rel="stylesheet" type="text/css" href="images/basic.css">
<style type="text/css">
@import "images/advanced.css";
</style>
en la pagina advanced solamente estan las reglas flout que se ven mal en IE4, el resto del css lo interpreta bien IE4, en N4 no lo he visto, si alguien lo tiene.................. http://www.marbellasunrentals.com/prueba9.htm.
Un saludo,
Helen
Pd, a ver si miro ese javascript, pero estoy haciendo demasiadas cosas a la vez me temo