Foros del Web » Programando para Internet » Javascript »

Imposible repetir js en la misma página

 Estas en el tema de Imposible repetir js en la misma página en el foro de Javascript en Foros del Web. Hola, buenas tardes. Estoy teniendo un problema hace bastante tiempo y me gustaría que me lo pudiesen solucionar. El problema es que con un js, ...
  #1 (permalink)  
Antiguo 12/11/2012, 12:56
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 17 años
Puntos: 0
Imposible repetir js en la misma página
Hola, buenas tardes. Estoy teniendo un problema hace bastante tiempo y me gustaría que me lo pudiesen solucionar.

El problema es que con un js, style css y unos div, no puedo poner dos galerías en una misma página. Más que una galería, sería como un pasador de imágenes.

Tengo este js por duplicado, cambiando el rotator1 por rotator2. es decir, tengo dos js, uno que llama al elemento rotator1 y otro igual solo que llama a rotator2

Cita:
<script type="text/javascript">
window.addEventListener?window.addEventListener('l oad',so_init,false):window.attachEvent('onload',so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator1').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
</script>
tengo este style

Cita:
<style rel="stylesheet" type="text/css">
#rotator1 {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator1 img {
border: 0;
padding: 0;
width: 100%;
}
#rotator2 {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator2 img {
border: 0;
padding: 0;
width: 100%;
}
</style>
entonces, por qué no funciona esto?:

Cita:
<div id="rotator1">
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div><br><br>

<div id="rotator2">
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio1.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio2.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio3.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio4.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio5.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio6.jpg" /></center>
</div>
  #2 (permalink)  
Antiguo 12/11/2012, 13:23
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 8 meses
Puntos: 63
Respuesta: Imposible repetir js en la misma página
Mi primera pregunta es ¿por que no crear una clase rotator y ya? de esa manera no tendrías que usar rotator1, rotator2, rotator3, ..., rotatorN y mi segunda pregunta ¿en donde ejecutas el segundo rotator? espero que tengas una función so_init2 o algo x el estilo donde la mandes a llamar de igual manera.

No creo que halla ningún problema en colocar el mismo script dos veces, aparte de la duplicidad de código, aunque puedes probar a parametrizar la función:

Código Javascript: 
Ver original
  1. window.addEventListener('DOMContentLoaded', function () {,so_init("rotator1")},false);
  2. window.addEventListener('DOMContentLoaded', function () {,so_init("rotator2")},false);
  3. function so_init(id) {
  4.     //code
  5.     imgs = d.getElementById(id).getElementsByTagName('img');
  6.     //code
  7. }

De esta manera no duplicarias código. Si tú función sirve para un elemento, debería funcionar para muchos.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 12/11/2012, 14:42
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 17 años
Puntos: 0
Respuesta: Imposible repetir js en la misma página
Cita:
Iniciado por laratik Ver Mensaje
Mi primera pregunta es ¿por que no crear una clase rotator y ya? de esa manera no tendrías que usar rotator1, rotator2, rotator3, ..., rotatorN y mi segunda pregunta ¿en donde ejecutas el segundo rotator? espero que tengas una función so_init2 o algo x el estilo donde la mandes a llamar de igual manera.

No creo que halla ningún problema en colocar el mismo script dos veces, aparte de la duplicidad de código, aunque puedes probar a parametrizar la función:

Código Javascript: 
Ver original
  1. window.addEventListener('DOMContentLoaded', function () {,so_init("rotator1")},false);
  2. window.addEventListener('DOMContentLoaded', function () {,so_init("rotator2")},false);
  3. function so_init(id) {
  4.     //code
  5.     imgs = d.getElementById(id).getElementsByTagName('img');
  6.     //code
  7. }

De esta manera no duplicarias código. Si tú función sirve para un elemento, debería funcionar para muchos.
Gracias por responder.. Lo que vos decís es que es innecesario crear diferentes clases? Apuesto por eso porque simplificaría todo.. pero algo mal estoy haciendo porque esto no funciona:

Cita:
<div id="rotator">
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div><br><br>

<div id="rotator">
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio1.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio2.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio3.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio4.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio5.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio6.jpg" /></center>
</div>
obviamente, cambie el estilo por este:

Cita:
<style rel="stylesheet" type="text/css">
#rotator {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator img {
border: 0;
padding: 0;
width: 100%;
}
</style>
y el js quedó así:

Cita:
<script type="text/javascript">
window.addEventListener?window.addEventListener('l oad',so_init,false):window.attachEvent('onload',so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
</script>
Esto hace que solo funcione una galería de fotos, y lo podés ver acá :
http://www.alemmotor.com.ar/usados_2.html
  #4 (permalink)  
Antiguo 12/11/2012, 14:57
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 8 meses
Puntos: 63
Respuesta: Imposible repetir js en la misma página
Lo que esta creando es identificadores, al referirme a clases me refiero a:

Código HTML: 
Ver original
  1. <div class="rotator">
  2. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
  3. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
  4. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
  5. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
  6. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
  7. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
  8. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
  9. </div><br><br>
  10.  
  11. <div class="rotator">
  12. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio1.jpg" /></center>
  13. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio2.jpg" /></center>
  14. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio3.jpg" /></center>
  15. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio4.jpg" /></center>
  16. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio5.jpg" /></center>
  17. <center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio6.jpg" /></center>
  18. </div>

y pues el javascript seria algo más complejo, pues se tendría que ejecutar cada elemento dentro de una iteración:

Código Javascript: 
Ver original
  1. function so_init() {
  2.     if(!d.getElementById || !d.createElement)return;
  3.     css = d.createElement('link');
  4.     css.setAttribute('href','slideshow2.css');
  5.     css.setAttribute('rel','stylesheet');
  6.     css.setAttribute('type','text/css');
  7.     d.getElementsByTagName('head')[0].appendChild(css);
  8.     elements = d.getElementsByClassName('rotator'); //getElementsByClassName solo funciona en exploradores modernos
  9.     for (var i=0, element; element=elements[i]; i++) {
  10.         imgs = element.getElementsByTagName('img');
  11.             for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
  12.             imgs[0].style.display = 'block';
  13.             imgs[0].xOpacity = .99;
  14.             setTimeout(so_xfade,3000);
  15.     }
  16. }

y el css:

Código CSS: 
Ver original
  1. .rotator {
  2. border: 8px outset #000;
  3. display:block;
  4. padding:0;
  5. overflow: hidden;
  6. position: relative;
  7. width:600px; 
  8. height: 450px;
  9. }
  10. .rotator img {
  11. border: 0;
  12. padding: 0;
  13. width: 100%;
  14. }
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #5 (permalink)  
Antiguo 14/11/2012, 06:13
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 17 años
Puntos: 0
Respuesta: Imposible repetir js en la misma página
sigue sin funcionarme

mi css

Cita:
<style rel="stylesheet" type="text/css">
.rotator {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
.rotator img {
border: 0;
padding: 0;
width: 100%;
}
</style>
mi js

Cita:
<script type="text/javascript">
window.addEventListener?window.addEventListener('l oad',so_init,false):window.attachEvent('onload',so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
elements = d.getElementsByClassName('rotator'); //getElementsByClassName solo funciona en exploradores modernos
for (var i=0, element; element=elements[i]; i++) {
imgs = element.getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
</script>
y mis div

Cita:
<div class="rotator">
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div><br><br>
<div class="rotator">
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div>
http://www.alemmotor.com.ar/prueba.html

ACLARO: Una sola galería funciona..

Etiquetas: funcion, imposible, js, página, repetir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:52.