Añadir efecto a un sript

eres · #1 (**permalink**) 06/04/2011, 03:13

Hola el otro dia muy amablemente un usuario del foro, abimaelrc me facilito el script que dejo a continuación, ya que necesitava un efecto así y no lo encontrava.
Lo que hace el código es lo mismo que en la siguiente página las noticias de arriba del todo: www.elmundodeportivo.es

Quisiera que si el usuario no pone el raton encima de ningun boton, lo que muestra el script en grande vaia canviando cada x tiempo, me da igual si es aleatoria o secuencialmente, eso es posible? (es decir como si el usuario estuviera poniendo el raton pero sin que lo ponga, para que se vaia alternando lo quese muestra y luego si realmente pone el raton que funcione normalmente como lo hace ahora) gracias!

aqui dejo el código y vuelvo a dar las gracia a abimaelrc por facilitarmelo!

Código:

<html>
<head>
<style>
    *{ margin: 0; padding: 0; cursor: default; }
    ul{ list-style: none; }
    li{
        font-size: 16px;
        border-bottom: 1px solid #333;
        padding: 5px;
        background-color: #ddd;
    }
    #wrapper{ width: 600px; }
    #content{
        background-color: #eee;
        width: 400px;
        float: left;
        height: 93px;
    }
    #content div{
        display: none;
        font-size: 32px;
        padding: 5px 10px;
    }
    #menu{
        width: 200px;
        float: right;
    }
    .clear{ clear: both; }
</style>
<script>
function displayContent(id){
    if(document.getElementById(id).style.display == 'block'){
        document.getElementById(id).style.display='none';
    }else{
        document.getElementById(id).style.display='block';
    }
}
</script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="foo">foo content</div>
        <div id="bar">bar content</div>
        <div id="baz">baz content</div>
    </div>
    <div id="menu">
        <ul>
            <li onmouseover="this.style.backgroundColor='#eee'; displayContent('foo');" onmouseout="this.style.backgroundColor='#ddd'; displayContent('foo');">foo</li>
            <li onmouseover="this.style.backgroundColor='#eee'; displayContent('bar');" onmouseout="this.style.backgroundColor='#ddd'; displayContent('bar');">bar</li>
            <li onmouseover="this.style.backgroundColor='#eee'; displayContent('baz');" onmouseout="this.style.backgroundColor='#ddd'; displayContent('baz');">baz</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

laratik · #2 (**permalink**) 06/04/2011, 10:27

Se me ocurre jugar un poco con setInterval() y setTimeout() de esta manera:

Código HTML:

<html>
<head>
<style>
    *{ margin: 0; padding: 0; cursor: default; }
    ul{ list-style: none; }
    li{
        font-size: 16px;
        border-bottom: 1px solid #333;
        padding: 5px;
        background-color: #ddd;
    }
    #wrapper{ width: 600px; }
    #content{
        background-color: #eee;
        width: 400px;
        float: left;
        height: 93px;
    }
    #content div{
        display: none;
        font-size: 32px;
        padding: 5px 10px;
    }
    #menu{
        width: 200px;
        float: right;
    }
    .clear{ clear: both; }
</style>
<script>
var cont = ["foo","bar","baz"];
var i = 0;
var ctr,ctr2;

function displayContent(id,e){
    if(document.getElementById(id).style.display == 'block'){
        document.getElementById(id).style.display='none';
		if(typeof e != "undefined") {
			e.target.style.backgroundColor='#ddd';
		}
    }else{
        document.getElementById(id).style.display='block';
		if(typeof e != "undefined") {
			e.target.style.backgroundColor='#eee';
		}
    }
}

function limpiar() {
	clearInterval(ctr);
	clearTimeout(ctr2);
	document.getElementById("foo").style.display = 'none';
	document.getElementById("bar").style.display = 'none';
	document.getElementById("baz").style.display = 'none';
	i = 0;
}

function cargar() {
	if(i==cont.length) {
		i=0;
	}
	ctr = setInterval("displayContent('"+cont[i]+"')",2000);
	i++;
	setTimeout("clearInterval("+ctr+")",5000);
	ctr2 = setTimeout(cargar,3000);
}

window.onload = cargar;
</script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="foo">foo content</div>
        <div id="bar">bar content</div>
        <div id="baz">baz content</div>
    </div>
    <div id="menu">
        <ul>
            <li onmouseover="limpiar();displayContent('foo',event);" onmouseout="displayContent('foo',event);cargar();">foo</li>
            <li onmouseover="limpiar();displayContent('bar',event);" onmouseout="displayContent('bar',event);cargar();">bar</li>
            <li onmouseover="limpiar(); displayContent('baz',event);" onmouseout="displayContent('baz',event);cargar();">baz</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

eres · #3 (**permalink**) 07/04/2011, 02:21

Gracias laratik, es justo lo que estava intentando hacer!!!!

eres · #4 (**permalink**) 07/04/2011, 05:10

El codigo funciona ben, pero cuando te pones encima de un boton con el raton salta el siguiente error en internet explorer 8:

Cita:

Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; Tablet PC 2.0)
Fecha: Thu, 7 Apr 2011 11:05:02 UTC

Mensaje: 'target.style' es nulo o no es un objeto
Línea: 44
Carácter: 4
Código: 0
URI: file:///C:/Users/Eres/Desktop/aaaa.html

Mensaje: 'target.style' es nulo o no es un objeto
Línea: 39
Carácter: 4
Código: 0
URI: file:///C:/Users/Eres/Desktop/aaaa.html

Alguna idea de como arreglarlo? gracias!!!!

laratik · #5 (**permalink**) 07/04/2011, 07:58

ok, no entiendo por que razón no toma el typeof iexplorer... pero en fin sera materia de investigación

solución rapida, volver al script original en donde se cambiaban los colores directamente desde el manejador de eventos:

Código HTML:

<html>
<head>
<style>
    *{ margin: 0; padding: 0; cursor: default; }
    ul{ list-style: none; }
    li{
        font-size: 16px;
        border-bottom: 1px solid #333;
        padding: 5px;
        background-color: #ddd;
    }
    #wrapper{ width: 600px; }
    #content{
        background-color: #eee;
        width: 400px;
        float: left;
        height: 93px;
    }
    #content div{
        display: none;
        font-size: 32px;
        padding: 5px 10px;
    }
    #menu{
        width: 200px;
        float: right;
    }
    .clear{ clear: both; }
</style>
<script>
var cont = ["foo","bar","baz"];
var i = 0;
var ctr,ctr2;

function displayContent(id,e){
    if(document.getElementById(id).style.display == 'block'){
        document.getElementById(id).style.display='none';
    }else{
        document.getElementById(id).style.display='block';
    }
}

function limpiar() {
	clearInterval(ctr);
	clearTimeout(ctr2);
	document.getElementById("foo").style.display = 'none';
	document.getElementById("bar").style.display = 'none';
	document.getElementById("baz").style.display = 'none';
	i = 0;
}

function cargar() {
	if(i==cont.length) {
		i=0;
	}
	ctr = setInterval("displayContent('"+cont[i]+"')",2000);
	i++;
	setTimeout("clearInterval("+ctr+")",5000);
	ctr2 = setTimeout(cargar,3000);
}

window.onload = cargar;
</script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="foo">foo content</div>
        <div id="bar">bar content</div>
        <div id="baz">baz content</div>
    </div>
    <div id="menu">
        <ul>
            <li onmouseover="limpiar();displayContent('foo',event);this.style.backgroundColor='#eee';" onmouseout="displayContent('foo',event);cargar();this.style.backgroundColor='#ddd';">foo</li>
            <li onmouseover="limpiar();displayContent('bar',event);this.style.backgroundColor='#eee'" onmouseout="displayContent('bar',event);cargar();this.style.backgroundColor='#ddd';">bar</li>
            <li onmouseover="limpiar(); displayContent('baz',event);this.style.backgroundColor='#eee'" onmouseout="displayContent('baz',event);cargar();this.style.backgroundColor='#ddd';">baz</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

SALUDOS.

eres · #6 (**permalink**) 08/04/2011, 02:35

El efecto parece funcionar perfectamente, pero luego se vuelve loco y se solapan las capas!

pongo el ejemplo real del uso de el script:

http://www.viulleida.es/recomanats.php

paskuini · #7 (**permalink**) 08/04/2011, 03:00

a mi no em funciona bé al firefox; desplaça els banners cap avall de la pàgina per sota dels altres divs...

laratik · #8 (**permalink**) 08/04/2011, 10:28

Como lo dije en un pricipio:

Cita:

Iniciado por laratik

Se me ocurre jugar un poco con setInterval() y setTimeout()

Hay que jugar con estas dos funciones, claro que pensándolo bien, hacerlo de la manera que lo plantee se vuelve enredado y poco sostenible, así que se me ocurrió una nueva idea, donde se pueden manejar mejor los tiempos utilizando recursividad en vez de intervalos. Probado en firefox 4 y funciona bien.

codigo corregido y probado durante 10 minutos:

Código HTML:

<html>
<head>
<style>
    *{ margin: 0; padding: 0; cursor: default; }
    ul{ list-style: none; }
    li{
        font-size: 16px;
        border-bottom: 1px solid #333;
        padding: 5px;
        background-color: #ddd;
    }
    #wrapper{ width: 600px; }
    #content{
        background-color: #eee;
        width: 400px;
        float: left;
        height: 93px;
    }
    #content div{
        display: none;
        font-size: 32px;
        padding: 5px 10px;
    }
    #menu{
        width: 200px;
        float: right;
    }
    .clear{ clear: both; }
</style>
<script>
var cont = ["foo","bar","baz"];
var i = -1;

function displayContent(id,anima){
    if(document.getElementById(id).style.display == 'block'){
        document.getElementById(id).style.display='none';
    }else{
        document.getElementById(id).style.display='block';
    }
	if(anima) {
		ctr = setTimeout("displayContent('"+id+"')",2000);//cuanto tiempo quieres que aparesca en pantalla
		ctr2 = setTimeout(cargar,3000);//intervalo entre una imagen y la otra de 1 segundo 3000-2000 = 1000
	}
}

function limpiar() {
	clearTimeout(ctr);
	clearTimeout(ctr2);
	document.getElementById("foo").style.display = 'none';
	document.getElementById("bar").style.display = 'none';
	document.getElementById("baz").style.display = 'none';
	i = -1;
}

function cargar() {
	if(i==cont.length-1) {
		i=-1;
	}
	i++;
	displayContent(cont[i],true);
	//setTimeout("displayContent("+cont[i]+",true)",2000);
}

window.onload = cargar;
</script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="foo">foo content</div>
        <div id="bar">bar content</div>
        <div id="baz">baz content</div>
    </div>
    <div id="menu">
        <ul>
            <li onmouseover="limpiar();displayContent('foo');this.style.backgroundColor='#eee';" onmouseout="displayContent('foo');cargar();this.style.backgroundColor='#ddd';">foo</li>
            <li onmouseover="limpiar();displayContent('bar');this.style.backgroundColor='#eee'" onmouseout="displayContent('bar');cargar();this.style.backgroundColor='#ddd';">bar</li>
            <li onmouseover="limpiar(); displayContent('baz');this.style.backgroundColor='#eee'" onmouseout="displayContent('baz');cargar();this.style.backgroundColor='#ddd';">baz</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

eres · #9 (**permalink**) 09/04/2011, 13:04

Ahora funciona perfectamente en explorer, firefox y crhome.