HAY GUYS

takeru · 12:09 PM

Hi, I'm gonna paste you the code of a web page I'm creating. It works well on firefox 2.0 but not on Opera 9.02. My biggest problem is the JS (you'll see the code at the end). In general, it runs a function which modifies styles to make a pseudo-pre-loader bar effect :grin: (it's still on developing). What I see on Opera is the bar fixed (we could say, at 100%), where is supposed to grow (from 0% to 100%), I dunno if you understand what I say. Is problem of JS, problem of styles...?

One more question for you, because google is not my friend in this case and doesn't help, neither wookiepedia :P. I don't understand the difference when you use JS and defines the script as 'javascript' and 'javascript 1.x'. Does it have differences for browsers? In addiction, if I used a function defined just as 'javascript', would browser 'understand' which version of JS to use? I don't know if I'm saying nonsenses. Maybe yes :P

Give it a try, and thank you guys

::CODE::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.:: Welcome to My Site ::.</title>
</head>

<body style="background-color: #000000; font-family: Arial, Helvetica, sans-serif;">
<div style="top: 0; left: 0; width: 100%; height: 100%; position: fixed; display: table;">
<div style="display: table-cell; vertical-align: middle;">
<div style="margin: 0 auto; width: 496px;">
<table cellspacing="0" style="background-image:url(gra/fondo.gif); border: none; padding: 0px 0px 0px 0px;">

<tr id="loading_bar_row1" style="width:496px;">
<td id="loading_bar_1x1" style="height: 15px; width: 13px;" ></td>
<td id="loading_bar_1x2" style="height: 15px; width: 469px;"></td>
<td id="loading_bar_1x3" style="height: 15px; width: 14px;" ></td>
</tr>

<tr id="loading_bar_row2" style="width:496px">
<td id="loading_bar_2x1" style="height: 34px; width: 13px;" ></td>
<td id="loading_bar_2x2" style="height: 34px; width: 469px;">
<table style="background-image:url(gra/fondo.gif); border: none; padding: 0px 0px 0px 0px; width:469px"
cellspacing="0">
<tr>
<td id="bar_1x1" style="background-color: #dbdbdb; height: 1px; width: 1px;"></td>
<td id="bar_1x2" style="background-color: #dbdbdb; height: 1px; width: 0%;"></td>
<td id="bar_1x3" style="background-color: #000000; height: 1px; width: 100%;"></td>
</tr>
<tr>
<td id="bar_2x1" style="background-color: #dbdbdb; height: 32px; width: 1px;"></td>
<td id="bar_2x2" style="background-color: #777777; height: 32px; width: 0%;">
<div style="height: 32px; text-align: center; width: 469px;">
<span id="bar_text" style="text-transform: uppercase;
color: White; font-size: 10px; line-height: 250%;"></span>
</div>
</td>
<td id="bar_2x3" style="background-color: #000000; height: 32px; width: 100%;"></td>
</tr>
<tr>
<td id="bar_3x1" style="background-color: #000000; height: 1px; width: 1px;"></td>
<td id="bar_3x2" style="background-color: #000000; height: 1px; width: 0%;"></td>
<td id="bar_3x3" style="background-color: #000000; height: 1px; width: 100%;"></td>
</tr>
</table>
</td>
<td id="loading_bar_2x3" style="height: 15px; width: 14px;"></td>
</tr>

<tr id="loading_bar_row3">
<td id="loading_bar_3x1" style="height: 14px; width: 13px;"></td>
<td id="loading_bar_3x2" style="height: 14px; width: 469px;"></td>
<td id="loading_bar_3x3" style="height: 14px; width: 14px;"></td>
</tr>
</table>
<table cellspacing="0" style="border: none; padding: 0px 0px 0px 0px; width:496px;">
<tr>
<td style="font-size:xx-small; text-align:right; width:496px;">
<a href"#" id="text_skip">Skip >>></a>
</td>
</tr>
</table>
</div>
</div>
</div>
<script language="javascript">
/* var img_matrix = new Array();
var i;

for (i=0; i<=10; i++) {
img_matrix[i] = i;
}

if (x.src.complete) --- siendo x la imagen en sí

alert (img_matrix.length);
*/
var i = 0, j = 0, direc = 3;
var text_change = 10;
carga();
gradiente();

function carga() {
document.getElementById('bar_1x2').style.width='' + i + '%';
document.getElementById('bar_2x2').style.width='' + i + '%';
document.getElementById('bar_3x2').style.width='' + i + '%';
if (i<100) {
i++;
cambia_texto();
setTimeout ("carga();",100);
}
}

function gradiente() {
document.getElementById('text_skip').style.color=' rgb('+j+','+j+','+j+');';
j=j+direc;
if (j>254) {
direc=-3;
}
if (j<1) {
direc=3;
}
setTimeout ("gradiente();",1);
}

function cambia_texto() {
document.getElementById('bar_text').innerHTML = i+'% COMPLETADO';
}
</script>
</body>
</html>

Jam it back in, in the dark.