By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,837 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,837 IT Pros & Developers. It's quick & easy.

Javascript, works good in IE but in Firefox Mozilla it gives problems

P: n/a
Hello everyone,

I have a script that runs in IE great, but in firefox it has problems.
I understand that there are some objects that are accessed differently
in IE and Mozilla. Can anybody let me know what I need to change in the
file to make a copy that would run fine on Firefox?

Here is the link to the file:
http://people.emich.edu/srehman2/study/polls.html click on the 'Build
Bars' link displayed at the top-right corner. I am copying the source
code here also,

================================================== =======
<script language="javascript">
function BuildResults()
{
var str;
var imageWidths = new Array();
var imageName = new Array();
var labelName = new Array();
var imageSize = 140;
var BarImage = "images/poll_yellow.gif";
var t = new Array();
var color = new Array();
t[0] = 60;
t[1] = 30;
t[2] = 50;
t[3] = 112;

color[0] = 'red';
color[1] = 'blue';
color[2] = 'silver';
color[3] = 'green';

str = str + '<table cellspacing=2 cellpadding=0 border=0><tr><td>';
for(var i=0;i<t.length;i++)
{
imageWidths[i] = Math.round(imageSize * (Math.round(t[i])/100));
imageName[i] = "imageResult" + i;
labelName[i] = "spanPercentage" + i;
str = str + '<table cellspacing=2 cellpadding=0 border=0 height=4>';
str = str + '<tr><td bgcolor=' + color[i] + '><img name=' +
imageName[i] + ' id=' + imageName[i] + 'src="images/pixel.gif" width=1
height=1 border=0></td><td><span id=' + labelName[i] + '>' +
Math.round(t[i]) + '%</span></td></tr>';
str = str + '</table>';

}
str = str + "</td></tr></table>";
document.getElementById('divText').innerHTML = str;
for(var x = 0; x< imageWidths.length; x++)
{
var name = "imageResult" + x;
var image = document.getElementById(imageName[x]);

setTimeout("Wait()", 10);
if(image != null)
{
for(var i = 0; i <= imageWidths[x]; i++)
{
string = "IncreaseSize("+i+", '"+imageName[x]+"', '" +
labelName[x]+"', '" + imageSize + "')";
setTimeout(string, 40 * i);
}
}
}
}
function Wait()
{
//Wait for a second
}

function IncreaseSize(Size, ImageName, LabelName, ImageSize)
{
var image = document.getElementById(ImageName);
var label = document.getElementById(LabelName);

if(image != null)
{
image.width = Size;
image.height = 1;
label.innerHTML = Math.round((Size/ImageSize) * 100) + "%";
}
}
</script>
<span style="cursor: pointer; text-decoration: underline"
onclick="BuildResults()">
Build bars
</span>

<span name="divText" id="divText"></span>
================================================== =======

It displays bars in IE but in firefox it do not display anything.

Thanks in advance.

-Shafiq.

Apr 3 '06 #1
Share this Question
Share on Google+
12 Replies


P: n/a
sh*******@gmail.com said on 04/04/2006 7:07 AM AEST:
Hello everyone,

I have a script that runs in IE great, but in firefox it has problems.
I understand that there are some objects that are accessed differently
in IE and Mozilla. Can anybody let me know what I need to change in the
file to make a copy that would run fine on Firefox?

Here is the link to the file:
http://people.emich.edu/srehman2/study/polls.html click on the 'Build
Bars' link displayed at the top-right corner. I am copying the source
code here also,

================================================== =======
<script language="javascript">
The language attribute is deprecated, type is required:

<script type="text/javascript">

function BuildResults()
{
var str;
var imageWidths = new Array();
When posting code, use spaces for indentation rather than tabs, with 2
or 4 spaces per level.

You can initialise an array with:

var imageWidths = [];

var imageName = new Array();
var labelName = new Array();
var imageSize = 140;
var BarImage = "images/poll_yellow.gif";
var t = new Array();
var color = new Array();
t[0] = 60;
t[1] = 30;
t[2] = 50;
t[3] = 112;
You can initialise this array as:

var t = [60, 30, 50, 112];

color[0] = 'red';
color[1] = 'blue';
color[2] = 'silver';
color[3] = 'green';
And this one:

var color['red', 'blue', 'silver', 'green'];

str = str + '<table cellspacing=2 cellpadding=0 border=0><tr><td>';
for(var i=0;i<t.length;i++)
{
imageWidths[i] = Math.round(imageSize * (Math.round(t[i])/100));
imageName[i] = "imageResult" + i;
labelName[i] = "spanPercentage" + i;
str = str + '<table cellspacing=2 cellpadding=0 border=0 height=4>';
str = str + '<tr><td bgcolor=' + color[i] + '><img name=' +
imageName[i] + ' id=' + imageName[i] + 'src="images/pixel.gif" width=1 ----------------------^^-----------------^^^

You have not quoted the value of the id attribute and there is no
whitespace bewteen the end of the value and the start of the name of the
src attribute, so the HTML looks like:

... id='imageResult0src="images/pixel.gif"' ...

It is always a good idea to quote attributes even when not strictly
necessary. Inserting a space before the src attribute fixes the problem
for now...

If you use a strict doctype, Firefox will show the changing percentages
but not the growing bars. Trip it into quirksmode (remove any reference
to doctype) and you'll see the same results as IE.

Investigate these issues in a CSS forum:

news:comp.infosystems.www.authoring.stylesheets

Incidentally, a much more efficient result could be achieved by using
divs for the bars and simply modifying their style attributes, there is
absolutely no need to generate a mass of nested tables every single time.

height=1 border=0></td><td><span id=' + labelName[i] + '>' +
Math.round(t[i]) + '%</span></td></tr>';
Don't allow posted code to auto-wrap, manually wrap it at about 70
characters to allow for a few replies.
[...] setTimeout("Wait()", 10); [...]
function Wait()
{
//Wait for a second
}


How do you intend to do that?
[...]
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
Apr 4 '06 #2

P: n/a
IE 5+ is what 95 per cent of paying cutomers use. Who cares what
FireFox, Netscape or Opera does. Go for the winner!

Apr 4 '06 #3

P: n/a
el*********@electrician.com wrote:
IE 5+ is what 95 per cent of paying cutomers use. Who cares what
FireFox, Netscape or Opera does. Go for the winner!

Are you replying to something, or simply trolling?

--
Ian Collins.
Apr 4 '06 #4

P: n/a
el*********@electrician.com wrote:
IE 5+ is what 95 per cent of paying cutomers use. Who cares what
FireFox, Netscape or Opera does. Go for the winner!


Here is the newsgroup troll again: electrician.

If memory serves me well you were the one giving very bad code with hundreds
of validationerror for that embedded video script, right?

I am still waiting for you to respond to that, 'electrician'.

And because I am today in a very trollable mood, I might also add:
"IE5/6 are both broken, don't code for them, don't use them!"

Maybe you better stick with pulling electrical wires, you are probably good
at that, and let the the programmers give advise about programming, ok?

Why-oh-why do I take that bait? :P

Regards,
Erwin Moller
Apr 4 '06 #5

P: n/a
Awesome Rob, you have solved my problem.

I am not a javascript programmer, but I knew some javascript some years
back ... thats why you might see my code is old fashioned and slow may
be.

I would think into changing the code to implement divs and changing its
style properties (I guess you mean width by that)

for function Wait(), this function is doing nothing i guess, I will
remove it also when I will be purifying my code for efficiency.

Once again, thanks for the help .. I really appriciate your detailed
and informative reply!

-Shafiq.

Apr 4 '06 #6

P: n/a
Ian Collins said the following on 4/4/2006 2:34 AM:
el*********@electrician.com wrote:
IE 5+ is what 95 per cent of paying cutomers use. Who cares what
FireFox, Netscape or Opera does. Go for the winner!

Are you replying to something, or simply trolling?


He's trolling again. But, you knew that :)

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Apr 4 '06 #7

P: n/a
Erwin Moller said the following on 4/4/2006 7:27 AM:
el*********@electrician.com wrote:
IE 5+ is what 95 per cent of paying cutomers use. Who cares what
FireFox, Netscape or Opera does. Go for the winner!
Here is the newsgroup troll again: electrician.

If memory serves me well you were the one giving very bad code with hundreds
of validationerror for that embedded video script, right?

I am still waiting for you to respond to that, 'electrician'.

And because I am today in a very trollable mood, I might also add:
"IE5/6 are both broken, don't code for them, don't use them!"

Maybe you better stick with pulling electrical wires, you are probably good
at that, and let the the programmers give advise about programming, ok?


If he pulls wires like he programs, I wouldn't even want him pulling
wires :)
Why-oh-why do I take that bait? :P


Because it's so much fun f**king with a moron :)

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Apr 4 '06 #8

P: n/a
electrician,

I am going for the winner, FireFox is gaining market share IE is losing
it. More and more serious companies have firefox as their standard web
browser. Even some SIG conferences have FireFox as official browser and
they recommend it.

this was about its winning, it is more efficient and secure than IE, It
provides more features to users than IE. Altough opera is even more
efficient than FireFox

that was about its functionality, Now try to open
http://internetexplorer.com they even do not have their matching name
website ... lol

there is more, but google is there for your answers ... I have spent
enough time.

Apr 4 '06 #9

P: n/a
el*********@electrician.com wrote:
IE 5+ is what 95 per cent of paying cutomers use. Who cares what
FireFox, Netscape or Opera does. Go for the winner!

Except that IE customers *don't* pay - it comes with Windoze (and
Microsoft pays, as fines to the EU. Again).

Also, according to MarketShare who do a wonderful thing called actually
*counting* who uses what, IE accounts for only 84% of browser use and is
dropping like a stone!

Of course, there are other people who count usage, such as Janco
Associates (IE, 82%) or Best Practice.com (IE 79%), but the general
figure is pretty well agreed at around the 80% to 85% mark.

Trolls like yourself do nothing but highlight the dramatically falling
market share of Microsoft's frankly dreadful browser. So keep it up!!
Apr 4 '06 #10

P: n/a
sh*******@gmail.com writes:
Now try to open
http://internetexplorer.com they even do not have their matching name
website ... lol


Why would they? Nobody needs to download it anyway.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Apr 4 '06 #11

P: n/a
sh*******@gmail.com said on 05/04/2006 12:02 AM AEST:
Awesome Rob, you have solved my problem.

I am not a javascript programmer, but I knew some javascript some years
back ... thats why you might see my code is old fashioned and slow may
be.

I would think into changing the code to implement divs and changing its
style properties (I guess you mean width by that)

for function Wait(), this function is doing nothing i guess, I will
remove it also when I will be purifying my code for efficiency.

Once again, thanks for the help .. I really appriciate your detailed
and informative reply!


Just to prove a point, here's a modern version that is fully standards
compliant and works with IE 6+ (and maybe 5+ too, I dunno) and other
browsers. Note that is does not require any special tricks or silliness
to be standards compliant and get the job done with the minimum of fuss.

Of course, users without script may be disappointed in the results.

A number of variations are possible to optimise it for particular
situations, it all depends on how you want to implement it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>Bars</title>
<style type="text/css">
#div01 {background-color: red; width: 30%;}
#div02 {background-color: blue; width: 80%;}
#div03 {background-color: green; width: 57%;}
#div04 {background-color: silver; width: 15%;}
</style>
</head><body>
<script type="text/javascript">

var stretchEm = (function()
{
var divRefs = [];
var doAgain = false;
var timer;

return {

init : function(id){
var d, div, divs;
if ( document.getElementById
&& (div = document.getElementById(id))
&& div.style
&& div.getElementsByTagName
&& (divs = div.getElementsByTagName('div'))){
for (var i=0, len=divs.length; i<len; ++i){
d = divs[i];
if (d.className && /\bexpandable\b/.test(d.className)){
divRefs.push(d);
d.style.width = '0%';
}
}
}
stretchEm.all();
},

all : function(){
var d, p, w;
for(var i=0, len=divRefs.length; i<len; ++i){
d = divRefs[i];
p = d.className.match(/pw_.*\b/)[0].match(/\d+/)[0];
w = parseInt(d.style.width,10) || 0;
if( w < p){
d.style.width = ++w + '%';
doAgain = true;
d.firstChild.nodeValue = w + '%';
}
}
if (doAgain){
doAgain = false;
if (timer) clearTimeout(timer);
timer = setTimeout('stretchEm.all()', 200);
}
}
}
})();

window.onload = function (){stretchEm.init('bars');}

</script>
<div id="bars">
<div id="div01" class="expandable pw_30">30%</div>
<div id="div02" class="expandable pw_80">80%</div>
<div id="div03" class="expandable pw_57">57%</div>
<div id="div04" class="expandable pw_15">15%</div>
</div>
<button onclick="
document.getElementById('div02').style.width = '0%';
stretchEm.all();
">Re-do blue one</button>

</body></html>

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
Apr 5 '06 #12

P: n/a
JRS: In article <hY******************@news.optus.net.au>, dated Wed, 5
Apr 2006 02:29:33 remote, seen in news:comp.infosystems.www.authoring.st
ylesheets, RobG <rg***@iinet.net.au> posted :

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>


That could be misleading here ...

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Apr 6 '06 #13

This discussion thread is closed

Replies have been disabled for this discussion.