como se puede ver en firefox un script javascript

jcouoh · #1 (**permalink**) 18/08/2009, 09:17

Hola, encontre un script que me gustó como idea de banner para mi sitio y me funciona muy bien en IE pero no asi en Firefox, me gustaria implementarlo en los dos navegadores, creo que es posible pero aunque lo he modificado no encuentro que hacer para que aparezca el resultado en firefox.

Este es mi codigo:

Código HTML:


<html>
<!-- THREE STEPS TO INSTALL COLORFUL TEXT FADER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>
<title> Example</title>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Ken Tholke, [email protected]. -->

<!-- Begin
// add as many or as few messages as you would like
var msg=new Array()
msg[0]="<CENTER>You can see more scripts like this one...</CENTER>";
msg[1]="<CENTER>...when you visit the JavaScript Source.</CENTER>";
msg[2]="<CENTER>Just type in \"<A href='http://javascript.internet.com/'>javascript.internet.com</A>\"</CENTER>";
msg[3]="<CENTER>Your computer can handle the rest.</CENTER>";

// set your first set of colors.  Use as many or as few as you wish.
var colors1=new Array("ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff",
"8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff","2222ff", "1111ff", "0000ff")

//set your second set of colors
// *** must have exactly the same number of colors as the array above ***
var colors2=new Array("ffffff", "ffeeee", "ffdddd", "ffcccc", "ffbbbb", "ffaaaa", "ff9999",
"ff8888", "ff7777", "ff6666", "ff5555", "ff4444", "ff3333", "ff2222", "ff1111", "ff0000")

//set the height of the display in pixels
high=60;

//set the width of the display in pixels
wide=350;

//set the pixel coordinates for the upper left hand corner of the display
Xpos=220;
Ypos=180;

// move the display away from the edges of the background
pad=15;

// set the background color of the display
bgcol="ffffff";

//add a background image if you want.
// *** for no image, just leave empty quotes (ex. cellbg=""; ) ***
cellbg="faderbg.jpg";

// set the font
fntFam="verdana,helvetica,arial";
fntSize=14;

// set how how many seconds you want the message to stay remain at totality.
pause=2.5;


// Do not edit these values below!!!

icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}

function doPause(){
   totality=false; t=setTimeout("changecolor()",pause);
   }
function initiate(){
   getContentColor();
   getMsg();
   getCellContent();
   if(document.all){
   msgbg.innerHTML=cellcontent;
   msgfade.innerHTML=theMsg;
   msgbg.style.posLeft=Xpos;
   msgbg.style.posTop=Ypos;
   msgfade.style.posLeft=Xpos+pad;
   msgfade.style.posTop=Ypos+pad;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgbg.document.write(cellcontent);
   document.msgbg.document.close();
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   document.msgbg.left=Xpos;
   document.msgbg.top=Ypos;
   document.msgfade.left=Xpos+pad;
   document.msgfade.top=Ypos+pad;
   t=setTimeout("changecolor()",100);}
   }
function changecolor(){
   if(totality==true){doPause();}
   else{
   getMsg();
   getContentColor();
   if(document.all){
   msgfade.innerHTML=theMsg;
   t=setTimeout("changecolor()",50);}
   if(document.layers){
   document.msgfade.document.write(theMsg);
   document.msgfade.document.close();
   t=setTimeout("changecolor()",70);}
   }
   }
function getFadeColor(){
   icolor=icolor-1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function getGlowColor(){
   icolor=icolor+1;
   if(mcolor==1){contentcolor=colors1[icolor];}
   else{contentcolor=colors2[icolor];}
   }
function changemsg(){
   if(imsg==msg.length-1){imsg=0; mcolor=1;}
   else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
   else{imsg=imsg+1; mcolor=1;}
   }
function getContentColor(){
   if(icolor==colors1.length-1 && glowing==true){
   getFadeColor(); glowing=false; totality=true;}
   else if(icolor < colors1.length && glowing==true){
   getGlowColor();}
   else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
   else{getFadeColor();}
   }
function getMsg() {
   theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+"; width:"+spWidth+";'>"
   theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B> "
   theMsg+="</span>"
   }
function getCellContent(){
   cellcontent="<TABLE height="+high+
   " width="+wide+" bgcolor="+bgcol+" cellpadding=0 cellspacing=0><TR><TD"+cellbg+"> </TD></TR></TABLE>"}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY onLoad="initiate()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<DIV id=msgbg style="position: absolute;"></DIV>
<DIV id=msgfade style="position: absolute;"></DIV>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  5.17 KB -->

</body></html>

si me pueden ayudar se los agradeceré

Jorge

goyo_ · #2 (**permalink**) 18/08/2009, 09:36

Tienes un ejemplo de el en accion?

jcouoh · #3 (**permalink**) 18/08/2009, 10:06

Si,

en www.hospedarweb.net/error.html

se puede ver bien en IE pero no asi en Firefox.

Gracias

goyo_ · #4 (**permalink**) 18/08/2009, 11:09

Decidi utilizar jquery, un cross browser framework, si te animas juega con lo siguiente:

Código HTML:

<style>
#texto {font: 18px arial; display: none}
.opcion-1 {color: red;}
.opcion-2 {color: blue;}
.opcion-3 {color: green;}
</style>

<div id="texto"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var texto = ['VIVA', 'LA', 'REVOLUCION!'], l = texto.length, i = 0,

timer = setInterval(function() {
	if (i >= l) clearInterval(timer);
	
	var node = $('#texto');
		     
	node.fadeOut(1000, function() {
		node.removeClass('opcion-' + i)
		    .html(texto[i])
		    .addClass('opcion-' + i++)
		    .fadeIn(1000);  
	});
}, 2000);
</script>

jcouoh · #5 (**permalink**) 18/08/2009, 11:19

Muy bueno, ya lo verifique con firefox y funciona muy bien, lo voy a tratar de implementar en mi sitio

muchas gracias