Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Dos javascript causan conflicto en una pagina.

Estas en el tema de Dos javascript causan conflicto en una pagina. en el foro de Javascript en Foros del Web. Hola chicos, veran estoy haciendo el sito web de una agencia de viajes. Pero como he leido que hay problemas de carga y saturacion de ...
  #1 (permalink)  
Antiguo 26/04/2013, 11:28
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 19 años, 7 meses
Puntos: 0
Dos javascript causan conflicto en una pagina.

Hola chicos, veran estoy haciendo el sito web de una agencia de viajes. Pero como he leido que hay problemas de carga y saturacion de proceso con los display Flash Macromedia, asi que decidi poner un par de displays en Javascript.


Uno es de texto que es este (primero javascript):

Código PHP:
<TABLE BORDER="0" width="100%" align="CENTER" bgcolor="blue">
<
TR background="">
<
TD>
<
CENTER>


<
script type="text/javascript">
var 
Textos = new Array();
 
// Enter the names of the images below
 
Textos[0]="Hola amigo internauta bienvenido a nuestra agencia de viajes.";
 
Textos[1]="Aqui encontraras la informacion de la mejores rutas turisticas.";
 
Textos[2]="Planea aqui tu ruta de sitios por recorrer segun tus necesidades.";
 
var 
nuevoTexto = -1;
var 
totalTextos Textos.length;
 
function 
repetir() {
  
nuevoTexto++;
  if (
nuevoTexto == totalTextos) {
    
nuevoTexto 0;
  }
  
document.getElementById('texto').innerHTML=Textos[nuevoTexto];

  
setTimeout("repetir()"4*1000);
}
window.onload=repetir;
</script>


<div id="texto" font style="color:#F9F9F9; font-size:x-small; font-family:Verdana" line-height: 1.35em>
<!-- texto -->
</div>


</CENTER>
</TD></TR>
</TABLE> 

El otro es de imagenes que es este (segundo javascript):

Código PHP:
<TABLE BORDER="0" width="100%">
<
CENTER>
<
TR background="">
<
TD ALIGN="center" width="100%">


<
script language="JavaScript1.2">
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var slideshow_width='260px' //SET IMAGE WIDTH
var slideshow_height='260px' //SET IMAGE HEIGHT
var pause=500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas01.png"
fadeimages[1]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas02.png"
fadeimages[2]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas03.png"
fadeimages[3]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas04.png"
fadeimages[4]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas05.png"
fadeimages[5]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas06.png"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (
p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var 
ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height :'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var 
curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (
curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+0
setTimeout
("rotateimage()",pause)
}
}
function 
rotateimage(){
if (
ie4||dom){
resetit(curcanvas)
var 
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var 
temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+0
}
function 
resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (
crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}
function 
startit(){
var 
crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (
ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>


</TD>
</TR>
</CENTER>
</TABLE> 

Los dos javascript por separado trabajan muy bien y son exactamente lo que quiero, pero cuando los pongo en el html de una misma pagina ahi hay un conflicto y deja de funcionar el display de texto y solo funciona el de imagenes.

Creo que una solucion seria poner por separado los javascript en frames, pero la verdad me gustaria tener los dos javascript en el mismo html. Segun he investigado solo es cuestion de resolver un conflicto en dos varibles que tienen el mismo nombre o hace un proceso similar...

El javascript de imagenes es muy extenso y mas complejo, asi que trato de modificar el de texto en la variable ó proceso que hace el conflicto con el javascript de imagenes, pero no encuentro una variable o proceso de nombre similar. Me podrian ayudar a hacer la modificacion o localizar el conflicto.
  #2 (permalink)  
Antiguo 26/04/2013, 13:02
Avatar de TahuriKiller  
Fecha de Ingreso: abril-2013
Mensajes: 6
Antigüedad: 11 años
Puntos: 0
Respuesta: Dos javascript causan conflicto en una pagina.

Porque no usas bootstrap o jquery para hacer esto? creo que sera mejor usar eso que un codigo que ayas hecho vos.
  #3 (permalink)  
Antiguo 26/04/2013, 13:41
Avatar de tanliz  
Fecha de Ingreso: abril-2013
Ubicación: Irapuato
Mensajes: 63
Antigüedad: 11 años
Puntos: 1
Respuesta: Dos javascript causan conflicto en una pagina.

tengo un problema parecido, si encuentras la solucion, porfa, postealo :D Laura_Berenice
  #4 (permalink)  
Antiguo 26/04/2013, 16:26
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 19 años, 7 meses
Puntos: 0
Respuesta: Dos javascript causan conflicto en una pagina.

De bootstrap enserio no se de que me estas hablando o a que te refieres con el arranque del sistema???

Con jQuery, bueno, ese es el tema actual. Se que es una libreria publica de aplicaciones javascript, pero yo la verdad no entiendo su pagina para buscar en su libreria los eventos javascript que me interesan...

http://jquery.com/

Quizas el futuro es que todos los eventos javascript sean sustituidos por aplicaciones jQuery, pero creo que romperse la cabeza un poco con localizar el conflicto entre dos codigos segira siendo viable todavia.

Alguna opinion del conflicto entre estos dos codigos javascript???
  #5 (permalink)  
Antiguo 26/04/2013, 21:17
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 10 meses
Puntos: 63
Respuesta: Dos javascript causan conflicto en una pagina.

Hola Laura_Berenice, a lo que se refiere TahuriKiller con bootstrap es a la libreria de twitter y pues yo soy de los que piensa que hoy en día existe mucha jQuery dependencia (pero eso es otro cuento), acerca de tu problema, lo que sucede es simple y es que estas sobrescribiendo window.onload y la funcion que se ejecuta siempre va a ser la ultima asignada, la solución es igual de sencilla, reemplazar:

Código Javascript:
Ver original
  1. window.onload=startit

por

Código Javascript:
Ver original
  1. window.onload= function () {
  2.     repetir();
  3.     startit();
  4. }

de esta manera estas ejecutando ambas funciones al final. Por ultimo y como consejo existen mejores formas de esperar a que el DOM halla cargado como puede ser llamar etiquetas javascript solo al final de la pagina o DOMContentLoaded.
__________________
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.
  #6 (permalink)  
Antiguo 29/04/2013, 19:31
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 19 años, 7 meses
Puntos: 0
Respuesta: Dos javascript causan conflicto en una pagina.

Ya cambie el "window.onload=startit" como me comentaste por el "window.onload= function" y el javascript me quedo asi y no funciona el display de imagenes... ya lo cambie de muchas formas y nada.


Código PHP:

<script language="JavaScript1.2">
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var slideshow_width='260px' //SET IMAGE WIDTH
var slideshow_height='260px' //SET IMAGE HEIGHT
var pause=500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas01.png"
fadeimages[1]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas02.png"
fadeimages[2]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas03.png"
fadeimages[3]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas04.png"
fadeimages[4]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas05.png"
fadeimages[5]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas06.png"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (
p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var 
ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height :'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
var 
curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (
curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+0
setTimeout
("rotateimage()",pause)
}
}
function 
rotateimage(){
if (
ie4||dom){
resetit(curcanvas)
var 
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var 
temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+0
}
function 
resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (
crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}
function 
startit(){
var 
crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (
ie4||dom)
    
window.onload= function () {
        
repetir();
        
startit();
    }
</script> 

Voy a ver eso de poner DOMContentLoaded ó llamar etiquetas javascript al final de la pagina. Algo es lo que hace conflicto al tener estos dos javascript en la misma pagina, solo que no se o no entiendo que es.

No creo que las librerias jQuery ó bootstrap sena la unica solucion para poner varios javascripts en una misma pagina.
  #7 (permalink)  
Antiguo 30/04/2013, 18:16
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 10 meses
Puntos: 63
Respuesta: Dos javascript causan conflicto en una pagina.

Hola Laura_Berenice, copie y peque el código y me funciono tanto para el mensaje como para las imagenes, no se sira ya cuestión del navegador, lo prove tanto en IE como en Chrome.



Código Javascript:
Ver original
  1. <html>
  2. <head>
  3.     <title>Probando</title>
  4. </head>
  5. <body>
  6.     <TABLE BORDER="0" width="100%" align="CENTER" bgcolor="blue">
  7. <TR background="">
  8. <TD>
  9. <CENTER>
  10.  
  11.  
  12. <script type="text/javascript">
  13. var Textos = new Array();
  14.  // Enter the names of the images below
  15.  Textos[0]="Hola amigo internauta bienvenido a nuestra agencia de viajes.";
  16.  Textos[1]="Aqui encontraras la informacion de la mejores rutas turisticas.";
  17.  Textos[2]="Planea aqui tu ruta de sitios por recorrer segun tus necesidades.";
  18.  
  19. var nuevoTexto = -1;
  20. var totalTextos = Textos.length;
  21.  
  22. function repetir() {
  23.   nuevoTexto++;
  24.   if (nuevoTexto == totalTextos) {
  25.     nuevoTexto = 0;
  26.   }
  27.   document.getElementById('texto').innerHTML=Textos[nuevoTexto];
  28.  
  29.   setTimeout("repetir()", 4*1000);
  30. }
  31. window.onload=repetir;
  32. </script>
  33.  
  34.  
  35. <div id="texto" font style="color:#F9F9F9; font-size:x-small; font-family:Verdana" line-height: 1.35em>
  36. <!-- texto -->
  37. </div>
  38.  
  39.  
  40. </CENTER>
  41. </TD></TR>
  42. </TABLE>
  43. <TABLE BORDER="0" width="100%">
  44. <CENTER>
  45. <TR background="">
  46. <TD ALIGN="center" width="100%">
  47.  
  48.  
  49. <script language="JavaScript1.2">
  50. //Fade-in image slideshow- By Dynamic Drive
  51. //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
  52. //This credit MUST stay intact for use
  53. var slideshow_width='260px' //SET IMAGE WIDTH
  54. var slideshow_height='260px' //SET IMAGE HEIGHT
  55. var pause=500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
  56. var fadeimages=new Array()
  57. //SET IMAGE PATHS. Extend or contract array as needed
  58. fadeimages[0]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas01.png"
  59. fadeimages[1]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas02.png"
  60. fadeimages[2]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas03.png"
  61. fadeimages[3]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas04.png"
  62. fadeimages[4]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas05.png"
  63. fadeimages[5]="http://i190.photobucket.com/albums/z68/AC_Ociel_Sanchez/DefinesFotogramas06.png"
  64. ////NO need to edit beyond here/////////////
  65. var preloadedimages=new Array()
  66. for (p=0;p<fadeimages.length;p++){
  67. preloadedimages[p]=new Image()
  68. preloadedimages[p].src=fadeimages[p]
  69. }
  70. var ie4=document.all
  71. var dom=document.getElementById
  72. if (ie4||dom)
  73. document.write('<div style="position:relative;width:'+slideshow_width+';height :'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
  74. else
  75. document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')
  76. var curpos=10
  77. var degree=10
  78. var curcanvas="canvas0"
  79. var curimageindex=0
  80. var nextimageindex=1
  81. function fadepic(){
  82. if (curpos<100){
  83. curpos+=10
  84. if (tempobj.filters)
  85. tempobj.filters.alpha.opacity=curpos
  86. else if (tempobj.style.MozOpacity)
  87. tempobj.style.MozOpacity=curpos/100
  88. }
  89. else{
  90. clearInterval(dropslide)
  91. nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
  92. tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
  93. tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
  94. nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
  95. setTimeout("rotateimage()",pause)
  96. }
  97. }
  98. function rotateimage(){
  99. if (ie4||dom){
  100. resetit(curcanvas)
  101. var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  102. crossobj.style.zIndex++
  103. var temp='setInterval("fadepic()",50)'
  104. dropslide=eval(temp)
  105. curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
  106. }
  107. else
  108. document.images.defaultslide.src=fadeimages[curimageindex]
  109. curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
  110. }
  111. function resetit(what){
  112. curpos=10
  113. var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
  114. if (crossobj.filters)
  115. crossobj.filters.alpha.opacity=curpos
  116. else if (crossobj.style.MozOpacity)
  117. crossobj.style.MozOpacity=curpos/100
  118. }
  119. function startit(){
  120. var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  121. crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
  122. rotateimage()
  123. }
  124. if (ie4||dom)
  125. window.onload= function () {
  126.     repetir();
  127.     startit();
  128. }
  129. else
  130. setInterval("rotateimage()",pause)
  131. </script>
  132.  
  133.  
  134. </TD>
  135. </TR>
  136. </CENTER>
  137. </TABLE>  
  138. </body>
  139. </html>
__________________
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.
  #8 (permalink)  
Antiguo 03/05/2013, 09:14
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 19 años, 7 meses
Puntos: 0
Respuesta: Dos javascript causan conflicto en una pagina.

Super mega gracias laratik, disculpa la demora por el trabajo.

OKay, entonces estaba escribiendo mal el "window.onload= function ()" porque no incluia la parte del "else" para rotar el bucle del javascript.

Código PHP:

if (ie4||dom)
window.onload= function () {
    
repetir();
    
startit();
}
else
setInterval("rotateimage()",pause)
</script> 
Ya no hay conflicto y los dos javascript jalan muy bien en todos los navegadores: Explore, Chrome, Firefox y Opera.

Gracias por todo, los dos displays de estos javascript se ven geniales en la pagina que estoy desarrollando.

Etiquetas: conflicto, funcion, html
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




La zona horaria es GMT -6. Ahora son las 22:38.