FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Looks crappy in Firefox

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


MrBaseball34
I've got this javascript scroller and it really looks crappy in FF.

What needs to be done to get it working correctly in FF as well as IE?

Will award 200 $Fri to working solution.

scoresscroller.js:
Code:

// Initialise settings
// First set the left and top positions of each detail so that it is outside the
// displayable area. Then set the first area and score details so they can be seen.
// After a delay start the first score moving.
function init() {
  eval("areas.style.clip = 'rect(0," + detailswidth + "," + divisionheight + ",0)'")
  eval("scores.style.top = " + divisionheight)
  eval("scores.style.clip = 'rect(0," + detailswidth + "," + scoreheight + ",0)'")
  for (a=0;a<thedetails.length;a++) {
    eval("area" + a + ".style.left=" + detailswidth)
    eval("area" + a + ".style.width=" + detailswidth)
    eval("area" + a + ".style.height=" + divisionheight)
    for (s=1;s<thedetails[a].length;s++) {
      eval("score" + a + "_" + s + ".style.top=scoreheight")
      eval("score" + a + "_" + s + ".style.width=detailswidth")
      eval("score" + a + "_" + s + ".style.height=scoreheight")
    }
  }
  areanum = 0
  scorenum = 1
  eval("area" + areanum + ".style.left = 0")
  eval("score" + areanum + "_" + scorenum + ".style.top = 0")
  scoreismoving = false
  setTimeout("startmovescore()",startmovedelay)
}

// Starts the movement of the area by checking and setting the necessary variables.
function startmovearea() {
  if ((lastarea)>=thedetails.length) {lastarea = 0}
  if ((lastarea+1)>=thedetails.length) {newarea = 0}
  else {newarea = (lastarea+1)}
  movingarea = setInterval("movearea()",contmovedelay)
  movingscore = setInterval("movescorenewarea()",contmovedelay)
}
// Moves the area section from from to left.
// Runs over and over until the area appearing reaches the left most point.
function movearea() {
  if (parseInt(eval("area" + newarea + ".style.left"))>(divisionmove-1)) {
    eval("area" + lastarea + ".style.left=" + (parseInt(eval("area" + lastarea + ".style.left")) -divisionmove))
    eval("area" + newarea + ".style.left=" + (parseInt(eval("area" + newarea + ".style.left")) -divisionmove))
  } else {
    eval("area" + lastarea + ".style.left=" + detailswidth)
    eval("area" + newarea + ".style.left=0")
    clearInterval(movingarea)
  }
}

// Starts the movement of the score by checking and setting the necessary variables.
function startmovescore() {
  if ((scorenum+1)>=thedetails[areanum].length) {
    newscore = 1
    lastarea = areanum
    areanum+=1
    startmovearea()
  } else {
    newscore = (scorenum+1)
    movingscore = setInterval("movescore()",contmovedelay)
  }
}
// Moves the score section from bottom to top.
// Runs over and over until the score appearing reaches the top most point.
function movescore() {
  if (parseInt(eval("score" + areanum + "_" + newscore + ".style.top"))>(scoremove-1)) {
    scoreismoving = true
    eval("score" + areanum + "_" + scorenum + ".style.top=" + (parseInt(eval("score" + areanum + "_" + scorenum + ".style.top")) -scoremove))
    eval("score" + areanum + "_" + newscore + ".style.top=" + (parseInt(eval("score" + areanum + "_" + newscore + ".style.top")) -scoremove))
  } else {
    eval("score" + areanum + "_" + scorenum + ".style.top=" + scoreheight)
    eval("score" + areanum + "_" + newscore + ".style.top=0")
    clearInterval(movingscore)
    scorenum += 1
    scoreismoving = false
    setTimeout("startmovescore()",startmovedelay)
  }
}
// Moves the score section from top to bottom as above but accomodates a new area change as well.
// This requires moving the first score from the new area and the last score from the last area.
function movescorenewarea() {
  if (areanum>=thedetails.length) {areanum = 0}
  if (parseInt(eval("score" + areanum + "_" + newscore + ".style.top"))>(scoremove-1)) {
    scoreismoving = true
    eval("score" + lastarea + "_" + scorenum + ".style.top=" + (parseInt(eval("score" + lastarea + "_" + scorenum + ".style.top")) -scoremove))
    eval("score" + areanum + "_" + newscore + ".style.top=" + (parseInt(eval("score" + areanum + "_" + newscore + ".style.top")) -scoremove))
  } else {
    eval("score" + lastarea + "_" + scorenum + ".style.top=" + scoreheight)
    eval("score" + areanum + "_" + newscore + ".style.top=0")
    clearInterval(movingscore)
    scorenum = 1
    scoreismoving = false
    setTimeout("startmovescore()",startmovedelay)
  }
}
// Build the holder for the areas and scores
function buildscoreboard() {
  document.write('<div id="detailsholder">');
  buildareas();
  buildscores();
  document.write('</div><img src="images/main_menu_filler.gif" width="' + detailswidth + '" height="' + (divisionheight+scoreheight) + '">')
}
// Build all the area sections
function buildareas() {
  document.write('<div id="areas">')
  for (t=0;t<thedetails.length;t++) {
    if ( thedetails[t][0].indexOf('Playoffs', 1) == 0 ) {
    strHTML = '  <div id="area' + t + '" class="anarea"><table border="0" cellpadding="0" cellspacing="0" width="' + (detailswidth-4) + '" height="' + (divisionheight-4) + '"><tr><td class="thearea">' + thedetails[t][0] + '  Division</td></tr></table></div>'
   } else {
    strHTML = '  <div id="area' + t + '" class="anarea"><table border="0" cellpadding="0" cellspacing="0" width="' + (detailswidth-4) + '" height="' + (divisionheight-4) + '"><tr><td class="thearea">' + thedetails[t][0] + '</td></tr></table></div>'
   }
    document.write(strHTML)
  }
  document.write('</div>')
}
// Build all the score sections.
// thedetails array elements:
// 0: date
// 1: home team
// 2: home team score
// 3: home team win count
// 4: home team loss count
// 5: home team ties count
// 6: away team
// 7: away team score
// 8: away team win count
// 9: away team loss count
// 10:away team ties count

function buildscores() {
  document.write('<div id="scores">')
  // These are displayed as tables to accommodate lines and text positioning.
  for (sa=0;sa<thedetails.length;sa++) {
    for (ss=1;ss<thedetails[sa].length;ss++) {
      strHTML = '  <div id="score' + sa + '_' + ss + '" class="ascore">'
      strHTML += '    <table border="0" cellpadding="0" cellspacing="0" '
      strHTML += '           width="' + (detailswidth-9) + '" height="' + (scoreheight-4) + '">'
      strHTML += '      <tr>'
      strHTML += '        <td colspan="3" class="thedate">' + thedetails[sa][ss][0] + '</td>'
      strHTML += '        <td class="thedate"><img src="spacer.gif" width="1" height="14"></td>';
      strHTML += '      </tr>'
      strHTML += '      <tr>'
      strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="' + (((detailswidth-9)/3)*2) + '" height="2"></td>'
      strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="5" height="2"></td>'
      strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="' + (((detailswidth-9)/3)*1) + '" height="2"></td>'
      strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="2"></td>'
      strHTML += '      </tr>'
      strHTML += '      <tr>'
      strHTML += '        <td class="scoredetails" width="' + (((detailswidth-10)/3)*2) + '">'
      strHTML += '          <table border="0" cellpadding="0" cellspacing="0" width="' + (((detailswidth-10)/3)*2) + '">'
      strHTML += '          <tr>'
      if (thedetails[sa][ss][2] =='ppd' || thedetails[sa][ss][2] =='canc') { // game ppd rain or cancelled
          strHTML += '            <td class="scoreloser" width="75%">' + thedetails[sa][ss][1] + '</td>'
          strHTML += '            <td align="right" class="scoreloser" width="25%">' + thedetails[sa][ss][2] + '&nbsp;</td>'
          strHTML += '          </tr>'
          strHTML += '        </table></td>'
          strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
          strHTML += '        <td class="scorerecordl" align="center">'
          strHTML += '          (' + thedetails[sa][ss][3] + '-' + thedetails[sa][ss][4] + '-' + thedetails[sa][ss][5] + ')</td>'
          strHTML += '        <td class="scoreloser"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
          strHTML += '      </tr>'
          strHTML += '      <tr>'
          strHTML += '        <td class="scoreloser" width="' + (((detailswidth-10)/3)*2) + '">'
          strHTML += '          <table border="0" cellpadding="0" cellspacing="0" width="' + (((detailswidth-10)/3)*2) + '">'
          strHTML += '          <tr>'
          strHTML += '            <td class="scoreloser" width="75%">' + thedetails[sa][ss][6] + '</td>'
          strHTML += '            <td align="right" class="scoreloser" width="25%">' + thedetails[sa][ss][7] + '&nbsp;</td>'
          strHTML += '          </tr>'
          strHTML += '        </table></td>'
          strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
          strHTML += '        <td class="scorerecordl" align="center">'
          strHTML += '          (' + thedetails[sa][ss][8] + '-' + thedetails[sa][ss][9] + '-' + thedetails[sa][ss][10] + ')</td>'
          strHTML += '        <td class="scoredetails"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
          strHTML += '      </tr>'
          strHTML += '    </table>'
      } else {
        hs = parseInt(thedetails[sa][ss][2]);
        vs = parseInt(thedetails[sa][ss][7]);
        if ( hs > vs) { // home team won     
          strHTML += '            <td class="scorewinner" width="75%">' + thedetails[sa][ss][1] + '</td>'
          strHTML += '            <td align="right" class="scorewinner" width="25%">' + thedetails[sa][ss][2] + '&nbsp;</td>'
          strHTML += '          </tr>'
          strHTML += '        </table></td>'
          strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
          strHTML += '        <td class="scorerecordw" align="center">'
          strHTML += '          (' + thedetails[sa][ss][3] + '-' + thedetails[sa][ss][4] + '-' + thedetails[sa][ss][5] + ')</td>'
          strHTML += '        <td class="scorewinner"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
          strHTML += '      </tr>'
          strHTML += '      <tr>'
          strHTML += '        <td class="scorewinner" width="' + (((detailswidth-10)/3)*2) + '">'
          strHTML += '          <table border="0" cellpadding="0" cellspacing="0" width="' + (((detailswidth-10)/3)*2) + '">'
          strHTML += '          <tr>'
          strHTML += '            <td class="scoreloser" width="75%">' + thedetails[sa][ss][6] + '</td>'
          strHTML += '            <td align="right" class="scoreloser" width="25%">' + thedetails[sa][ss][7] + '&nbsp;</td>'
          strHTML += '          </tr>'
          strHTML += '        </table></td>'
          strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
          strHTML += '        <td class="scorerecordl" align="center">'
          strHTML += '          (' + thedetails[sa][ss][8] + '-' + thedetails[sa][ss][9] + '-' + thedetails[sa][ss][10] + ')</td>'
          strHTML += '        <td class="scoredetails"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
          strHTML += '      </tr>'
          strHTML += '    </table>'
        } else {
          if (hs == vs) {  // tie
            strHTML += '            <td class="scoreloser" width="75%">' + thedetails[sa][ss][1] + '</td>'
            strHTML += '            <td align="right" class="scoreloser" width="25%">' + thedetails[sa][ss][2] + '&nbsp;</td>'
            strHTML += '          </tr>'
            strHTML += '        </table></td>'
            strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
            strHTML += '        <td class="scorerecordl" align="center">(' + thedetails[sa][ss][3] + '-' + thedetails[sa][ss][4] +  '-' + thedetails[sa][ss][5] +')</td>'
            strHTML += '        <td class="scorewinner"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
            strHTML += '      </tr>'
            strHTML += '      <tr>'
            strHTML += '        <td class="scoreloser" width="' + (((detailswidth-10)/3)*2) + '">'
            strHTML += '          <table border="0" cellpadding="0" cellspacing="0" width="' + (((detailswidth-10)/3)*2) + '">'
            strHTML += '          <tr>'
            strHTML += '            <td class="scoreloser" width="75%">' + thedetails[sa][ss][6] + '</td>'
            strHTML += '            <td align="right" class="scoreloser" width="25%">' + thedetails[sa][ss][7] + '&nbsp;</td>'
            strHTML += '          </tr>'
            strHTML += '        </table></td>'
            strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
            strHTML += '        <td class="scorerecordl" align="center">(' + thedetails[sa][ss][8] + '-' + thedetails[sa][ss][9] +  '-' + thedetails[sa][ss][10] +')</td>'
            strHTML += '        <td class="scoredetails"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
            strHTML += '      </tr>'
            strHTML += '    </table>'
          } else { // Home team lost
            strHTML += '            <td class="scoreloser" width="75%">' + thedetails[sa][ss][1] + '</td>'
            strHTML += '            <td align="right" class="scoreloser" width="25%">' + thedetails[sa][ss][2] + '&nbsp;</td>'
            strHTML += '          </tr>'
            strHTML += '        </table></td>'
            strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
            strHTML += '        <td class="scorerecordl" align="center">(' + thedetails[sa][ss][3] + '-' + thedetails[sa][ss][4] +  '-' + thedetails[sa][ss][5] +')</td>'
            strHTML += '        <td class="scorewinenr"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
            strHTML += '      </tr>'
            strHTML += '      <tr>'
            strHTML += '        <td class="scorewinner" width="' + (((detailswidth-10)/3)*2) + '">'
            strHTML += '          <table border="0" cellpadding="0" cellspacing="0" width="' + (((detailswidth-10)/3)*2) + '">'
            strHTML += '          <tr>'
            strHTML += '            <td class="scorewinner" width="75%">' + thedetails[sa][ss][6] + '</td>'
            strHTML += '            <td align="right" class="scorewinner" width="25%">' + thedetails[sa][ss][7] + '&nbsp;</td>'
            strHTML += '          </tr>'
            strHTML += '        </table></td>'
            strHTML += '        <td class="scoreborder"><img src="spacer.gif" width="1" height="1"></td>'
            strHTML += '        <td class="scorerecordw" align="center">(' + thedetails[sa][ss][8] + '-' + thedetails[sa][ss][9] +  '-' + thedetails[sa][ss][10] +')</td>'
            strHTML += '        <td class="scoredetails"><img src="spacer.gif" width="1" height="' + ((scoreheight-6)/3) + '"></td>'
            strHTML += '      </tr>'
            strHTML += '    </table>'
          }
        }
      }
      strHTML += '  </div>'
      document.write(strHTML)
    }
  }
 document.write('</div>')
}


CSS:
Code:

/* #areas and #scores are boxes to hold and clip all the details.
These boxes are so that content that would be displayed outside
their set area is hidden. */
#detailsholder {
  position:relative;
}
#areas {
  position:absolute;
  top:0;
  left:0;
  clip:rect(0,150,30,0);
  height:30;
  width:150;
}
#scores {
  position:absolute;
  top:30;
  left:0;
  clip:rect(0,150,66,0);
}
/* .anarea and .ascore are classes for the details boxes.
These sit within #areas and #scores and their position of 0,0
are relative to #areas and #scores. */
.anarea {
  position:absolute;
  top:0;
  left:150;
  height:22;
  width:150;
  background-color:#F9DFB2;
  border:2 solid #cb0017;
}
.ascore {
  position:absolute;
  top:66;
  left:0;
  height:66;
  width:146;
  background-color:#00318C;
  border:2 solid #cb0017;
}
/* .thearea, .thedate, .scoreborder, and .scoredetails are classes to set
colors and fonts for the details. */
.thearea {
  color:#CB0017;
  font-size:10pt;
  font-weight:bold;
  font-family:verdana;
}
.thedate {
  color:#ffffff;
  background-color:#CB0017;
  font-size:8pt;
  font-weight:bold;
  font-family:arial;
}
.scoreborder {
  background-color:#CB0017;
}

.scoreloser {
  color:#ffffff;
  background-color:#00318C;
  font-size:10pt;
  font-weight:bold;
  font-family:arial;
}

.scorewinner {
  color:#f9dfb2;
  background-color:#00318C;
  font-size:10pt;
  font-weight:bold;
  font-family:arial;
}

.scorerecordl {
  color:#ffffff;
  background-color:#000000;
  font-size:10pt;
  font-weight:bold;
  font-family:arial;
}

.scorerecordw {
  color:#f9dfb2;
  background-color:#000000;
  font-size:10pt;
  font-weight:bold;
  font-family:arial;
}


Sample Data:
Code:

{austin.js}

austin = new Array("Austin Playoffs",
  new Array("Wednesday, Aug 16",
            "Thunder","6","0","1","0",
            "Devil Rays","15","1","0","0"),
           
  new Array("Thursday, Aug 17",
            "White Sox","2","0","1","0",
            "Rangers","4","1","0","0"),

  new Array("Friday, Aug 18",
            "Devil Rays","2","1","1","0",
            "Thunder","3","1","1","0"),

  new Array("Sunday, Aug 20",
            "Thunder","0","1","2","0",
            "Devil Rays","9","2","1","0"),

  new Array("Wednesday, Aug 23",
            "Rangers","5","0","1","0",
            "Devil Rays","12","1","0","0"),

  new Array("Friday, Aug 25",
            "Rangers","6","0","2","0",
            "Devil Rays","8","2","0","0")
)

{capitol.js}
capitol = new Array("Capitol Playoffs",
  new Array("Saturday, Aug 19",
            "Braves","7","1","0","0",
            "Bombers","6","0","1","0"),

  new Array("Saturday, Aug 19",
            "Zephyrs","3","0","1","0",
            "Cardinals","6","1","0","0"),

  new Array("Wednesday, Aug 23",
            "Bombers","4","1","1","0",
            "Braves","2","1","1","0"),

  new Array("Thursday, Aug 24",
            "Cardinals","6","1","1","0",
            "Zephyrs","7","1","1","0"),

  new Array("Friday, Aug 25",
            "Braves","1","1","2","0",
            "Bombers","6","2","1","0"),
           
  new Array("Saturday, Aug 26",
            "Zephyrs","0","1","2","0",
            "Cardinals","5","2","1","0"),
           
  new Array("Sunday, Aug 27",
            "Bombers","3","0","1","0",
            "Cardinals","4","1","0","0"),
           
  new Array("Tuesday, Aug 29",
            "Braves","18","2","0","0",
            "Bombers","11","0","2","0")
)
Diablosblizz
Quote:
Next time: Post your web link - People can read source you know


Please post the URL like I said above, nobody wants to copy and paste and see what it does. We need an example first.
MrBaseball34
http://www.austinmetrobaseball.com
Look on the left hand side of the page.

js files are:
http://www.austinmetrobaseball.com/scoresscroller.js
http://www.austinmetrobaseball.com/austin.js
http://www.austinmetrobaseball.com/capitol.js
http://www.austinmetrobaseball.com/lonestar.js
http://www.austinmetrobaseball.com/mabl.js
http://www.austinmetrobaseball.com/texas.js

and the css file is
http://www.austinmetrobaseball.com/scoresscroller.css
MrBaseball34
BTW, I clicked on the link in your sig and got an error:
"Cannot find server or DNS Error"
mariohs
From what I can see, the problem is not the scroll itself, it's how it's diplayed, right? the red borders and stuff? The scroller itself played nice in IE6, Opera9 and Firefox2. But the borders look awful in Opera and even worse in Firefox, I guess this is the problem, right?

I have no time now to take a deeper look, but I'll do it tomorrow if nobody else does and if I get a spare time here at work.
mariohs
I'm sorry, I took a look and the code is huge. Too big for a fast understanding and It will take a long time to see where the problem is. But my bet is that it's a css problem, not a javascript one. Or maybe both (the css set by the javascript is messy or something).

I'm sorry again Embarassed
Related topics
why Firefox isn't answer 4 every webpage displayed?
xMPACT.com is alive!! - And Updated 7-17-2008!!!!
(official) IE 7 Topic
My Website
Flash is for...?
The Butterfly Effect 2
*OFFICIAL* Which Browser do you use?
Netscape		I've Setup a Radio Station :D
Firefox vs IE
Your Experiences with Google Chrome!
Firefox does not like my webpage...
Firefox
css in firefox vs. ie
Firefox/IE compatibility problem, need some help
firefox problems		Firefox...what's the big deal? please enlighten me!
Firefox Profile
Firefox 2 RC1 is Ready
Favorite FireFox Themes?
which is better firefox or IE7?
Seriously need help please. Looks good in FF and not in IE
Site not displaying properly in FireFox
IE and FireFox: CSS
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.