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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Muir
    New Member
    • Sep 2007
    • 6
    #1

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

    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.
    [code=html]
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR " content="Micros oft FrontPage 4.0">
    <meta name="ProgId" content="FrontP age.Editor.Docu ment">
    <title>Wear Gear Text Fader</title>

    <SCRIPT LANGUAGE="JavaS cript">
    [/code][code=javascript]
    <!-- Begin
    var isDOM = (document.getEl ementById ? true : false);
    var isIE4 = ((document.all && !isDOM) ? true : false);
    var isNS4 = (document.layer s ? true : false);
    function getRef(id) {
    if (isDOM) return document.getEle mentById(id);
    if (isIE4) return document.all[id];
    if (isNS4) return document.layers[id];
    }
    function getSty(id) {
    return (isNS4 ? getRef(id) : getRef(id).styl e);
    }

    // add as many or as few messages as you would like
    var msg=new Array()
    msg[0]="<CENTER>Yo u can see more scripts like this one...</CENTER>";
    msg[1]="<CENTER>...wh en you visit the JavaScript Source.</CENTER>";
    msg[2]="<CENTER>Ju st type in \"<A href='http://javascript.inte rnet.com/'>javascript.in ternet.com</A>\"</CENTER>";
    msg[3]="<CENTER>Yo ur 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","2222f f", "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,aria l";
    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*100 0;
    if(cellbg.lengt h>4){cellbg=" background="+ce llbg}
    else{cellbg=""; }

    function doPause(){
    totality=false; t=setTimeout("c hangecolor()",p ause);
    }
    function initiate(){
    getContentColor ();
    getMsg();
    getCellContent( );
    if(document.all ){
    msgbg.innerHTML =cellcontent;
    msgfade.innerHT ML=theMsg;
    msgbg.style.pos Left=Xpos;
    msgbg.style.pos Top=Ypos;
    msgfade.style.p osLeft=Xpos+pad ;
    msgfade.style.p osTop=Ypos+pad;
    t=setTimeout("c hangecolor()",5 0);}
    if(document.lay ers ? true : false){
    document.msgbg. document.write( cellcontent);
    document.msgbg. document.close( );
    document.msgfad e.document.writ e(theMsg);
    document.msgfad e.document.clos e();
    document.msgbg. left=Xpos;
    document.msgbg. top=Ypos;
    document.msgfad e.left=Xpos+pad ;
    document.msgfad e.top=Ypos+pad;
    t=setTimeout("c hangecolor()",1 00);}
    }
    function changecolor(){
    if(totality==tr ue){doPause();}
    else{
    getMsg();
    getContentColor ();
    if(document.all ){
    msgfade.innerHT ML=theMsg;
    t=setTimeout("c hangecolor()",5 0);}
    if(document.lay ers){
    document.msgfad e.document.writ e(theMsg);
    document.msgfad e.document.clos e();
    t=setTimeout("c hangecolor()",7 0);}
    }
    }
    function getFadeColor(){
    icolor=icolor-1;
    if(mcolor==1){c ontentcolor=col ors1[icolor];}
    else{contentcol or=colors2[icolor];}
    }
    function getGlowColor(){
    icolor=icolor+1 ;
    if(mcolor==1){c ontentcolor=col ors1[icolor];}
    else{contentcol or=colors2[icolor];}
    }
    function changemsg(){
    if(imsg==msg.le ngth-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==colo rs1.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{getFadeCol or();}
    }
    function getMsg() {
    theMsg="<span style='font-size:"+fntSize+ "pt; font-family:"+fntFam +"; width:"+spWidth +";'>"
    theMsg+="<B><fo nt color="+content color+">"+msg[imsg]+"</font></B> "
    theMsg+="</span>"
    }
    function getCellContent( ){
    cellcontent="<T ABLE height="+high+
    " width="+wide+" bgcolor="+bgcol +" cellpadding=0 cellspacing=0>< TR><TD"+cellbg+ "> </TD></TR></TABLE>"}

    // End -->[/code][code=html]
    </script>

    </head>


    <BODY onLoad="initiat e()">

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

    </body>

    </html>[/code]

    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.
    Last edited by pbmods; Sep 28 '07, 07:31 AM. Reason: Added CODE tags.
    Tags: None
    • pbmods
      Recognized Expert Expert
      • Apr 2007
      • 5821
      #2
      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:

      &#91;CODE=javas cript]
      JavaScript code goes here.
      &#91;/CODE]

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5388
          #3
          hi ...

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

          kind regards

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              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.getEle mentById. It is supported in all modern browsers. Get rid of references to 'all' and 'layers' and have one set of code for all browsers.

                Comment

                • Muir
                  New Member
                  • Sep 2007
                  • 6
                  #5
                  Originally posted by gits
                  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

                    Comment

                    • Muir
                      New Member
                      • Sep 2007
                      • 6
                      #6
                      Originally posted by pbmods
                      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]
                      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

                        Comment

                        • Muir
                          New Member
                          • Sep 2007
                          • 6
                          #7
                          Originally posted by acoder
                          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.getEle mentById. 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

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              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.

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  Originally posted by Muir
                                  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.

                                    Comment

                                    • Muir
                                      New Member
                                      • Sep 2007
                                      • 6
                                      #10
                                      Originally posted by drhowarddrfine
                                      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

                                        Comment

                                        • Muir
                                          New Member
                                          • Sep 2007
                                          • 6
                                          #11
                                          Originally posted by acoder
                                          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

                                            Comment

                                            Previous template Next
                                            Working...