469,602 Members | 1,747 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,602 developers. It's quick & easy.

This script works in IE. How to port to Netscape, Firefox, Opera?

6
I am needing, and would appreciate expert assistance for a Javascript program that I am using in a Website. The script is a Text and Image Fader, which only works on IE, but what I am trying to do is get it to work across the NS, FF and OPR browsers. What I have done is added global variables at the beginning of the existing script, however, I am not sure where to go from there. Even though the script is not showing any errors, and is still working in IE with the added code, I know there still needs to be a reference within the script to call the variables, but I am not sure how to add them.

I am providing the full code below for the script. This is not time sensitive, however, I am hoping that I can receive a response back in 3 days.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5. <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  6. <meta name="ProgId" content="FrontPage.Editor.Document">
  7. <title>Wear Gear Text Fader</title>
  8.  
  9. <SCRIPT LANGUAGE="JavaScript">
  10.  
Expand|Select|Wrap|Line Numbers
  1. <!-- Begin
  2. var isDOM = (document.getElementById ? true : false);
  3. var isIE4 = ((document.all && !isDOM) ? true : false);
  4. var isNS4 = (document.layers ? true : false);
  5. function getRef(id) {
  6. if (isDOM) return document.getElementById(id);
  7. if (isIE4) return document.all[id];
  8. if (isNS4) return document.layers[id];
  9. }
  10. function getSty(id) {
  11. return (isNS4 ? getRef(id) : getRef(id).style);
  12. }
  13.  
  14. // add as many or as few messages as you would like
  15. var msg=new Array()
  16. msg[0]="<CENTER>You can see more scripts like this one...</CENTER>";
  17. msg[1]="<CENTER>...when you visit the JavaScript Source.</CENTER>";
  18. msg[2]="<CENTER>Just type in \"<A href='http://javascript.internet.com/'>javascript.internet.com</A>\"</CENTER>";
  19. msg[3]="<CENTER>Your computer can handle the rest.</CENTER>";
  20.  
  21. // set your first set of colors.  Use as many or as few as you wish.
  22. var colors1=new Array("ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff",
  23. "8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff","2222ff", "1111ff", "0000ff")
  24.  
  25. //set your second set of colors
  26. // *** must have exactly the same number of colors as the array above ***
  27. var colors2=new Array("ffffff", "ffeeee", "ffdddd", "ffcccc", "ffbbbb", "ffaaaa", "ff9999",
  28. "ff8888", "ff7777", "ff6666", "ff5555", "ff4444", "ff3333", "ff2222", "ff1111", "ff0000")
  29.  
  30. //set the height of the display in pixels
  31. high=60;
  32.  
  33. //set the width of the display in pixels
  34. wide=350;
  35.  
  36. //set the pixel coordinates for the upper left hand corner of the display
  37. Xpos=220;
  38. Ypos=180;
  39.  
  40. // move the display away from the edges of the background
  41. pad=15;
  42.  
  43. // set the background color of the display
  44. bgcol="ffffff";
  45.  
  46. //add a background image if you want.
  47. // *** for no image, just leave empty quotes (ex. cellbg=""; ) ***
  48. cellbg="faderbg.jpg";
  49.  
  50. // set the font
  51. fntFam="verdana,helvetica,arial";
  52. fntSize=14;
  53.  
  54. // set how how many seconds you want the message to stay remain at totality.
  55. pause=2.5;
  56.  
  57.  
  58. // Do not edit these values below!!!
  59.  
  60. icolor=0;
  61. mcolor=1;
  62. imsg=0;
  63. spWidth=wide-(2*pad);
  64. totality=false;
  65. glowing=true;
  66. var theMsg="";
  67. var cellcontent="";
  68. pause=pause*1000;
  69. if(cellbg.length>4){cellbg=" background="+cellbg}
  70. else{cellbg="";}
  71.  
  72. function doPause(){
  73.    totality=false; t=setTimeout("changecolor()",pause);
  74.    }
  75. function initiate(){
  76.    getContentColor();
  77.    getMsg();
  78.    getCellContent();
  79.    if(document.all){
  80.    msgbg.innerHTML=cellcontent;
  81.    msgfade.innerHTML=theMsg;
  82.    msgbg.style.posLeft=Xpos;
  83.    msgbg.style.posTop=Ypos;
  84.    msgfade.style.posLeft=Xpos+pad;
  85.    msgfade.style.posTop=Ypos+pad;
  86.    t=setTimeout("changecolor()",50);}
  87.    if(document.layers ? true : false){
  88.    document.msgbg.document.write(cellcontent);
  89.    document.msgbg.document.close();
  90.    document.msgfade.document.write(theMsg);
  91.    document.msgfade.document.close();
  92.    document.msgbg.left=Xpos;
  93.    document.msgbg.top=Ypos;
  94.    document.msgfade.left=Xpos+pad;
  95.    document.msgfade.top=Ypos+pad;
  96.    t=setTimeout("changecolor()",100);}
  97.    }
  98. function changecolor(){
  99.    if(totality==true){doPause();}
  100.    else{
  101.    getMsg();
  102.    getContentColor();
  103.    if(document.all){
  104.    msgfade.innerHTML=theMsg;
  105.    t=setTimeout("changecolor()",50);}
  106.    if(document.layers){
  107.    document.msgfade.document.write(theMsg);
  108.    document.msgfade.document.close();
  109.    t=setTimeout("changecolor()",70);}
  110.    }
  111.    }
  112. function getFadeColor(){
  113.    icolor=icolor-1;
  114.    if(mcolor==1){contentcolor=colors1[icolor];}
  115.    else{contentcolor=colors2[icolor];}
  116.    }
  117. function getGlowColor(){
  118.    icolor=icolor+1;
  119.    if(mcolor==1){contentcolor=colors1[icolor];}
  120.    else{contentcolor=colors2[icolor];}
  121.    }
  122. function changemsg(){
  123.    if(imsg==msg.length-1){imsg=0; mcolor=1;}
  124.    else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
  125.    else{imsg=imsg+1; mcolor=1;}
  126.    }
  127. function getContentColor(){
  128.    if(icolor==colors1.length-1 && glowing==true){
  129.    getFadeColor(); glowing=false; totality=true;}
  130.    else if(icolor < colors1.length && glowing==true){
  131.    getGlowColor();}
  132.    else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
  133.    else{getFadeColor();}
  134.    }
  135. function getMsg() {
  136.    theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+"; width:"+spWidth+";'>"
  137.    theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B> "
  138.    theMsg+="</span>"
  139.    }
  140. function getCellContent(){
  141.    cellcontent="<TABLE height="+high+
  142.    " width="+wide+" bgcolor="+bgcol+" cellpadding=0 cellspacing=0><TR><TD"+cellbg+"> </TD></TR></TABLE>"}
  143.  
  144. //  End -->
Expand|Select|Wrap|Line Numbers
  1. </script>
  2.  
  3. </head>
  4.  
  5.  
  6. <BODY onLoad="initiate()">
  7.  
  8. <DIV id=msgbg style="position: absolute;"></DIV>
  9. <DIV id=msgfade style="position: absolute;"></DIV>
  10.  
  11. </body>
  12.  
  13. </html>
Thank you in advance for your efforts, and I look forward to your expertise in this matter and will credit your contribution within the script.

Sincere regards,
Michael M.
Sep 28 '07 #1
10 1498
pbmods
5,821 Expert 4TB
Heya, Muir. Welcome to TSDN!

Changed thread title to better describe the problem (did you know that threads whose titles do not follow the Posting Guidelines actually get FEWER responses?).

Please use CODE tags when posting source code:

[CODE=javascript]
JavaScript code goes here.
[/CODE]
Sep 28 '07 #2
gits
5,390 Expert Mod 4TB
hi ...

moved from the js-articles section to the forum ... please don't post questions in the articles sections ...

kind regards
Sep 28 '07 #3
acoder
16,027 Expert Mod 8TB
You're using document.all and document.layers. That sort of testing is 10 years old when IE4 and NS4 were battling it out.

Use document.getElementById. It is supported in all modern browsers. Get rid of references to 'all' and 'layers' and have one set of code for all browsers.
Sep 28 '07 #4
Muir
6
hi ...

moved from the js-articles section to the forum ... please don't post questions in the articles sections ...

kind regards

Thank you, gits, for the heads-up.

Muir
Sep 28 '07 #5
Muir
6
Heya, Muir. Welcome to TSDN!

Changed thread title to better describe the problem (did you know that threads whose titles do not follow the Posting Guidelines actually get FEWER responses?).

Please use CODE tags when posting source code:

Expand|Select|Wrap|Line Numbers
  1. JavaScript code goes here.
  2.  
Thank you, pbmods, this is my first time posting (I am a Newbie), and from now on I will try to follow the guidelines.

Muir
Sep 28 '07 #6
Muir
6
You're using document.all and document.layers. That sort of testing is 10 years old when IE4 and NS4 were battling it out.

Use document.getElementById. It is supported in all modern browsers. Get rid of references to 'all' and 'layers' and have one set of code for all browsers.
Acoder, what about the older browsers? A lot of clients the Website is geared towards may be using older versions. However, I will definitely use the doc.getElement reference, but, how do I accomodate older versions?

Sincere regards,

Muir
Sep 28 '07 #7
drhowarddrfine
7,435 Expert 4TB
Older browsers? Both of those guys? As mentioned, you will probably have a hard time finding anyone using browsers that old. And if you try and support them by using code that old, you are ignoring the majority of your viewers.
Sep 29 '07 #8
acoder
16,027 Expert Mod 8TB
Acoder, what about the older browsers? A lot of clients the Website is geared towards may be using older versions. However, I will definitely use the doc.getElement reference, but, how do I accomodate older versions?
Older browsers such as IE4 and NS4 are almost extinct. You can degrade gracefully for them if you want, but if you try and provide support for them, you're holding yourself back. All the effort for what gain?

In your code, to make it work in newer browsers, use the part which checks for document.all as your code. Discard the document.layers part because that won't work. In the code that's left, replace "pos*" with the *, e.g. posLeft becomes left.

Make those changes and see if that works.
Sep 29 '07 #9
Muir
6
Older browsers? Both of those guys? As mentioned, you will probably have a hard time finding anyone using browsers that old. And if you try and support them by using code that old, you are ignoring the majority of your viewers.

Thank you, drhowarddrfine, and I have come to the conclusion that most definitely you are right. I am trying to accommodate everyone, but the coding can become very ambiguous (creating errors), and unnecessary if I want to reach the majority.

Thanks, again.

Sincerely,
Muir
Oct 1 '07 #10
Muir
6
Older browsers such as IE4 and NS4 are almost extinct. You can degrade gracefully for them if you want, but if you try and provide support for them, you're holding yourself back. All the effort for what gain?

In your code, to make it work in newer browsers, use the part which checks for document.all as your code. Discard the document.layers part because that won't work. In the code that's left, replace "pos*" with the *, e.g. posLeft becomes left.

Make those changes and see if that works.
Acoder, I definitely do not want to limit the reach and effectiveness of the site or what we want to present by offering something that is nearly obsolete. I will utilize your suggestions, and see how it turns out.

Thank you for your assistance.

Sincerely,
Muir
Oct 1 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

By using this site, you agree to our Privacy Policy and Terms of Use.