...

View Full Version : JS doesn't work with Mozilla



wejee
11-15-2003, 06:01 AM
Hi,

I have a random image script that works great in IE, but not with Mozilla. Three images with matching text are supposed to come up. Can anyone see why it's not working? You can see it in action here: http://www.wejees.net/yourtarotreading.html (http://)

Here is the script:

<!-- The bellow is the border setting of the images, you can set the width, style and color.
The style can be "solid" or "dashed". The color is in hexadecimal (black is "#000000")-->

<STYLE TYPE="text/CSS">
.imgtag {border-width:5px; border-style:solid; border-color:#000000;}
</STYLE>


<!-- You can change the bellow border tag for the table and also the width of the table.-->

<table border="0" width="100%">
<tr><td align=center><B>Past</B></td></tr>
<tr><td align=center><div id="img1"></div></td></tr>
<tr><td align=center><div id="text1"></div></td></tr>

<tr><td height=25></td></tr>


<tr><td align=center><B>Present</B></td></tr>
<tr><td align=center><div id="img2"></div></td></tr>
<tr><td align=center><div id="text2"></div></td></tr>

<tr><td height=25></td></tr>

<tr>
<tr><td align=center><B>Future</B></td></tr>
<tr><td align=center><div id="img3"></div></td></tr>
<tr><td align=center><div id="text3"></div></td></tr>
</table>


<script language="JavaScript">
var numOfImages = 8; // The maximum number of images you want to use

var theTime = 100; // Load the images after how many milli-seconds

// The bellow is the pre-set list of all the images,
// please note that it should contain the same number of items as "numOfImages"
imgNames = new Array(
"img1.gif",
"img2.gif",
"img3.gif",
"img4.gif",
"img5.gif",
"img6.gif",
"img7.gif",
"img8.gif" // The last item in the array does NOT need a comma
)


// The bellow is the pre-set list of all the image titles,
// please note that it should contain the same number of items as "numOfImages"
// PLEASE NOTE: when using html tags in the bellow titles, make sure you use
// single quotes (') instead of double quotes ("). E.g. you want to change the
// font color, use <FONT COLOR='red'>...</FONT> (notice the use of single quotes)

imgTexts = new Array(
"<B>Text Title</B> For Image 1",
"Text Title For Image 2",
"Text Title For Image 3",
"<FONT COLOR='red'>Text Title For</FONT> Image 4",
"Text Title For Image 5",
"Text Title For Image 6",
"Text Title For Image 7",
"Text Title For Image 8" // The last item in the array does NOT need a comma
)



// ##### No need to edit bellow this line #####
var i1 = 0;
var i2 = 0;
var i3 = 0;

function fGenerateRandomNumbers(lLowerBound, lUpperBound, lHowMany)
{
var i=0, j=0;
var laNumbers = new Array();
var lBoolUnique = true;
var lRandomNum = 0;
while(i<lHowMany)
{
lBoolUnique = true;
lRandomNum = parseInt((lUpperBound - lLowerBound +1)* Math.random() + lLowerBound);

for(j=0; j<lHowMany-1; j++)
if(lRandomNum==laNumbers[j])
lBoolUnique = false;

if(lBoolUnique == true)
{
laNumbers[i]=lRandomNum;
i++;
if (i1 == 0){i1 = lRandomNum;}
else {
if (i2 == 0){i2 = lRandomNum;}
else {
if (i3 == 0){i3 = lRandomNum;}}}
}

}

document.all.img1.innerHTML = "<img src='" + imgNames[i1] + "' class='imgtag'>";
document.all.text1.innerHTML = imgTexts[i1];

document.all.img2.innerHTML = "<img src='" + imgNames[i2] + "' class='imgtag'>";
document.all.text2.innerHTML = imgTexts[i2];

document.all.img3.innerHTML = "<img src='" + imgNames[i3] + "' class='imgtag'>";
document.all.text3.innerHTML = imgTexts[i3];
}
setTimeout("fGenerateRandomNumbers(0, numOfImages - 1, 3)",theTime);
</script>

adios
11-15-2003, 06:09 AM
No 'document.all' anywhere but IE & Opera.

Change, erm, all of these:

document.all.img1.innerHTML = "<img src='" + imgNames[i1] + "' class='imgtag'>";

...to:

document.getElementById('img1').innerHTML = "<img src='" + imgNames[i1] + "' class='imgtag'>";

wejee
11-15-2003, 09:10 AM
Hola Adios!

I tried changing it to this:

document.getElementById('img1').innerHTML = "<img src='" + imgNames[i1] + "' class='imgtag'>";
document.getElementById.text1.innerHTML = imgTexts[i1];
document.getElementById('img2').innerHTML = "<img src='" + imgNames[i2] + "' class='imgtag'>";
document.getElementById.text2.innerHTML = imgTexts[i2];
document.getElementById('img3').innerHTML = "<img src='" + imgNames[i3] + "' class='imgtag'>";
document.getElementById('img3').text3.innerHTML = imgTexts[i3];

It sort of worked, but not quite- the first image came up on both Mozilla and IE, but nothing else- no other images, and no text at all. Any other suggestions? Anyone else?

Jane:confused:

adios
11-15-2003, 06:22 PM
How come you did this...

document.getElementById('img1').innerHTML = "<img src='" + imgNames + "' class='imgtag'>";

...and followed it with this?

document.getElementById.text1.innerHTML = imgTexts[i1];

You're replacing one way of referencing objects (document.all.[i]element_id) with another (document.getElementById(element_id)). Not much point in going halfway...:o

Couldn't check the rest of your page, bad link...

wejee
11-15-2003, 08:57 PM
For some reason, the link comes up with http:/// (3/'s) Here's it again- http://www.wejees.net/yourtarotreading.html

Are you saying I should just have one line
document.getElementById('img1').innerHTML = "<img src='" + imgNames[i1] + "' class='imgtag'>";

Rather than two?

adios
11-15-2003, 09:15 PM
}
imgPath = 'http://wejees.web.aplus.net/sitebuildercontent/sitebuilderpictures/';

document.getElementById('img1').innerHTML = "<img src='" + imgPath + imgNames[i1] + "' class='imgtag'>";
document.getElementById('text1').innerHTML = imgTexts[i1];

document.getElementById('img2').innerHTML = "<img src='" + imgPath + imgNames[i2] + "' class='imgtag'>";
document.getElementById('text2').innerHTML = imgTexts[i2];

document.getElementById('img3').innerHTML = "<img src='" + imgPath + imgNames[i3] + "' class='imgtag'>";
document.getElementById('text3').innerHTML = imgTexts[i3];
}

Modified it a bit to save space. Just remove everything but the file name ("fool.gif") from all of the imgNames elements.
Make sure those strings (imgTexts) are each strung out on a single line - no line feeds. Turn off wrap in your editor to check.

wejee
11-18-2003, 05:08 AM
Hi Adios,

I changed all the images tags, and patched in the new code- it works, sort of. The images are coming up on Mozilla now, but they are not random- you only get the first image in the array on all three images. Here's the test page:

http://www.wejees.net/tarottest.html

Any suggestions on how to get three different random images in each space?

Wejee

adios
11-18-2003, 05:52 AM
Well...you defined the function fGenerateRandomNumbers...but you forgot to call it (:o). Always helps:


..........
function fGenerateRandomNumbers(lLowerBound, lUpperBound, lHowMany)
{
var i=0, j=0;
var laNumbers = new Array();
var lBoolUnique = true;
var lRandomNum = 0;
while(i<lHowMany)
{
lBoolUnique = true;
lRandomNum = parseInt((lUpperBound - lLowerBound +1)* Math.random() + lLowerBound);
for(j=0; j<lHowMany-1; j++)
if(lRandomNum==laNumbers[j])
lBoolUnique = false;
if(lBoolUnique == true)
{
laNumbers[i]=lRandomNum;
i++;
if (i1 == 0){i1 = lRandomNum;}
else {
if (i2 == 0){i2 = lRandomNum;}
else {
if (i3 == 0){i3 = lRandomNum;}}}
}
}
}

fGenerateRandomNumbers(0, numOfImages - 1, 3);

imgPath = 'http://wejees.web.aplus.net/sitebuildercontent/sitebuilderpictures/';
............

I'm guessing at the parameters there; look at the documentation/commenting to see how it works. Not sure where you got it from.

wejee
11-18-2003, 08:09 AM
Ummm, I don't know. No documentation or comments, I got it from a guy online, but he didn't answer back about the Mozilla problem (probably didn't know anyway). :confused:

adios
11-18-2003, 08:28 AM
:confused: So?

wejee
11-20-2003, 09:14 AM
:) Yeah! It works! You are a genius adios!:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum