469,927 Members | 1,835 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,927 developers. It's quick & easy.

preloading images not working?

Hello,

I am still having problems - apologies if the answer is in previous
postings!

I now have, in the header,

<sctipt>
var myimages=new Array();

function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
{
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
}
}
</script>

and

<body
onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7. jpg')">

The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.

The rest are displayed in the second page linked to the first and are
shown by using an array

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

and then displayed using typical code as follows

document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";

I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.

Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??

Cheers

Geoff

Sep 14 '05 #1
40 2612
Hi Geoff,

Geoff Cox wrote:
Hello,

I am still having problems - apologies if the answer is in previous
postings!

I now have, in the header,

<sctipt>
var myimages=new Array();

function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
{
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
}
}
</script>

and

<body
onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7. jpg')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.

The rest are displayed in the second page linked to the first and are
shown by using an array

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

and then displayed using typical code as follows

document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";

I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.

Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??

Cheers

Geoff


Try not to use the onload event to preload your images. Instead you
might want to try it this way:

<script type = "type/javascript">
//place this in between the HEAD tag

//preload images
var myImages = new Array();
var n_images = 7;

//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
//only useful if your pictures have a common name
myImages[i].src = "path/pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;
</script>

And in the body of your html, you should ensure you have an element
with the id "picture".

For example:

<body>
....
<div id = "picture"></div>
....
</body>

Sep 14 '05 #2
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gmail.com> wrote:
<body
onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7. jpg')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.


Hello,

I thought the above was pre-loading!! What is it doing?
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
I would certainly like to try your suggestions but when you write that
I should have
<div id = "picture"></div>
this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation", using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
Will you code work in this way?

Cheers

Geoff



<script type = "type/javascript">
//place this in between the HEAD tag

//preload images
var myImages = new Array();
var n_images = 7;

//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
//only useful if your pictures have a common name
myImages[i].src = "path/pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;
</script>

And in the body of your html, you should ensure you have an element
with the id "picture".

For example:

<body>
...
<div id = "picture"></div>
...
</body>


Sep 14 '05 #3

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:64********************************@4ax.com...
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gmail.com> wrote:
<body
onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7. jpg')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.


Hello,

I thought the above was pre-loading!! What is it doing?


the onload event triggers once the page has been loaded.
Try not to use the onload event to preload your images. Instead you
might want to try it this way:


I would certainly like to try your suggestions but when you write that
I should have
<div id = "picture"></div>


this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation", using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..


no problem just ammend your javascript which writes out the question to also
write out the div.
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";


Will you code work in this way?


Yes.
Sep 14 '05 #4
On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
no problem just ammend your javascript which writes out the question to also
write out the div.
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";


Zoe,

When you say "write out the div" - the above code for changing the
image depends on the ID of the <td> tag, ei

<td ID='picture' valign='top'></td>

Not clear how your ref to a div filts in here?

Cheers

Geoff
Sep 14 '05 #5

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:cg********************************@4ax.com...
On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
no problem just ammend your javascript which writes out the question to
also
write out the div.

document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";


Zoe,

When you say "write out the div" - the above code for changing the
image depends on the ID of the <td> tag, ei

<td ID='picture' valign='top'></td>

Not clear how your ref to a div filts in here?

Cheers

Geoff


post your code if that is ok. What I am saying is that the div doesnt
matter if you are changing content dynamically cos you can just reference
the image dynamically but it is hard when I dont know what you are trying to
do exactly.
Sep 14 '05 #6
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gmail.com> wrote:

Web dev

I have your code working but just another thought.

Is it possible to use Javascipt to put up a message saying "please
wait while images are downloaded" ? Or, make the questions and slider
appear after the images have been downlloaded?

The other thought I'd had was to preload the images for the second
page whilst the first page was on the screen but of couse the line

document.getElementById("picture").innerHTML = imgStr;

gives an error. Is there a way round this?

Cheers

Geoff



Sep 14 '05 #7

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:g8********************************@4ax.com...
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gmail.com> wrote:

Web dev

I have your code working but just another thought.

Is it possible to use Javascipt to put up a message saying "please
wait while images are downloaded" ?
Not a good idea will look rubbish.
Or, make the questions and slider
appear after the images have been downlloaded?
Yes you can check th eimage is there first but if you are preloading them
you wont need to do this.
The other thought I'd had was to preload the images for the second
page whilst the first page was on the screen but of couse the line

document.getElementById("picture").innerHTML = imgStr;


??? Why do you need this line ? this line is for displaying the image and
shouldnt be called until the image is in place. What page is this line on ?
Sep 14 '05 #8
On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

no problem just ammend your javascript which writes out the question to also
write out the div.
document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
Will you code work in this way?


Yes.


Zoe,

When I said to web dev that his code was working - afraid I made a
mistake! I still had

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

in the code so although the images were preloaded my code was using
the above arry names to show the images.

Can you explain how I would alter

document.getElementById('picture').innerHTML =
"<img src=" + window["picture"][situation_number] + ">";

to use web dev's code?

He has

document.getElementById("picture").innerHTML = imgStr;

but I'm not clear what this means. I need the images to be preloaded
but they are only displayed 1 at a time as the user progresses through
the app....

Cheers

Geoff




Sep 14 '05 #9

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:oj********************************@4ax.com...
On Wed, 14 Sep 2005 18:31:59 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

no problem just ammend your javascript which writes out the question to
also
write out the div.

document.getElementById('picture').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";

Will you code work in this way?


Yes.


Zoe,

When I said to web dev that his code was working - afraid I made a
mistake! I still had

var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";

in the code so although the images were preloaded my code was using
the above arry names to show the images.

Can you explain how I would alter

document.getElementById('picture').innerHTML =
"<img src=" + window["picture"][situation_number] + ">";

to use web dev's code?

He has

document.getElementById("picture").innerHTML = imgStr;


You would use something like this

document.getElementById('picture').innerHTML =
"<img src=" + imgStr + ">";

But without seeing all your code I can't see that it will work. If you have
just copied code you have been given by web dev then it is not likely to
work without a few changes.
Sep 14 '05 #10
On Wed, 14 Sep 2005 20:30:55 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
document.getElementById("picture").innerHTML = imgStr;


??? Why do you need this line ? this line is for displaying the image and
shouldnt be called until the image is in place. What page is this line on ?


Zoe,

It is difficult for you to see what I am trying to do so here is the
full code - most grateful for any further help in getting me to see
how to handle the preloading of the images! I have not worked out yet
how to dsiplay the images when required ... as you will see!
Previously I had used the array of picture (// out below).

Geoff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script></script>

<script type="text/javascript">

//preload images
var myImages = new Array();
var n_images = 8;

for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();

myImages[i].src = "pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;

var mySlider1 = new Slider( "Slider1" );
var count = 0;

var situation_number = 0;

var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";

var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";

// var picture = new Array(7);
// picture[0] = "pic1.jpg";
// picture[1] = "pic2.jpg";
// picture[2] = "pic3.jpg";
// picture[3] = "pic4.jpg";
// picture[4] = "pic5.jpg";
// picture[5] = "pic6.jpg";
// picture[6] = "pic7.jpg";
function next_question(button)
{

slider_value[situation_number][count] = this.mySlider1.getValue(0);

//totalreadings += ' ' + this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else {

situation_number++;

switch(situation_number)
{
case (1):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (2):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (3):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (4):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (5):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);
}
saveIt();
break;

}

}

}

function fillTable()
{
document.getElementById('title').innerHTML = "<h2>" +
title[situation_number] + "</h2>";
document.getElementById('picture').innerHTML = "<img src=" +
window["picture"][situation_number] + ">";

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

}

function saveIt()

{
document.getElementById("Slider1ValueText").innerH TML = "";

for (situation_number = 0; situation_number < 7;
situation_number++)
{
document.getElementById("Slider1ValueText").innerH TML
+= escape("\n") + "Situation: " + title[situation_number] + " ";

for (var i = 0; i <
slider_value[situation_number].length; i++)
{
document.getElementById("Slider1ValueText").innerH TML
+= this.slider_value[situation_number][i] + ' ';
}
}
var recipient = "extraemails";
var realname = "SPA Form";
var url = 'http://website/path/formmail-nms.cgi';
//var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
document.getElementById('Slider1ValueText').innerH TML;
var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
document.getElementById("Slider1ValueText").innerH TML

var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

</script>

</HEAD>

<body onload="mySlider1.placeSlider()">
<center>

<table border='0' width='100%'>
<tr>
<td>&nbsp;</td>
<td ID='title' valign='top' align='center'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td ID='picture' valign='top'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
</tr>

<tr>
<td ID='lhs_question' width='30%' valign='top' height='70'></td>
<td width='40%' align='center' valign='top' height='70'><IMG
SRC='sliderbg.gif' NAME='Slider1RailImg' ID='Slider1RailImg'></td>
<td ID='rhs_question' width='30%' valign='top' height='70'></td>
</tr>

<tr><td colspan='3' align='center' valign='top' height='100'>
<input type='button' name ='nextbutton' value='Next'
onclick='next_question(this)'>
<SPAN class='invisible' ID='Slider1ValueText'></SPAN>
<SPAN ID='Status'></SPAN></td>
</tr>
</table>
</center>

<script>
fillTable();
</script>
<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>
Sep 14 '05 #11
Geoff Cox wrote:
Hello,

I am still having problems - apologies if the answer is in previous
postings!

I now have, in the header,

<sctipt> I suggest you use "script", at least. var myimages=new Array();
"var" above is redundant

function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)

for(var i=0;i<arguments.length;i++) // "var" here highly recommended

{
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
myimages[i].src=arguments[i];
}
}
</script>

[...]
Mick
Sep 14 '05 #12
ASM
Geoff Cox wrote:

hi,

I'm not sure you can both have :
- window.onload = displayImages; (in header js script)
and
- <body onload="mySlider1.placeSlider()">

and I think you must choice a way to do (in script or in body tag)
I see :
<img src=" + window["picture"][situation_number] + ">";
what is window ?
and what is window['picture'] ?
On Wed, 14 Sep 2005 20:30:55 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

help in getting me to see
how to handle the preloading of the images! I have not worked out yet
how to dsiplay the images when required ... as you will see!
see below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
mas i mas complicado
<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script></script>

<script type="text/javascript">

//preload images
var myImages = new Array();
var n_images = 8;
it's here that would have to preload your images
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();

myImages[i].src = "pic" + i + ".jpg";
}
but, on my idea, it only memorizes paths to images

to be almost quite sure they are in cache :

var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;

--
Stephane Moriaux et son [moins] vieux Mac
Sep 14 '05 #13
On Thu, 15 Sep 2005 01:38:53 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:
var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();


Stephane,

I have used your code above (making var ig = 1 to start as the pics
are named pic1) .... but the problem seems to be that I cannot have 2
items in the <body onload etc>

I have

<body onload="preload_imgs()">

<script>
mySlider1.placeSlider();
</script>

which gives the error message "object needed" for the line with
mySlider1.placeSlider();

if I have

<body onload="mySlider1.placeSlider()"> this is OK but I then get an
error in putting the first pic in the table - I guess the creation of
the table is happening before the pics have been loaded.

Any thoughts?!

Geoff

Sep 15 '05 #14

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:d6********************************@4ax.com...
On Thu, 15 Sep 2005 01:38:53 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:
var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();


Stephane,

I have used your code above (making var ig = 1 to start as the pics
are named pic1) .... but the problem seems to be that I cannot have 2
items in the <body onload etc>

I have

<body onload="preload_imgs()">


just do this

<body onload="preload_imgs();mySlider1.placeSlider();">

I am still looking through the rest of the code.
more comments to follow, if you want to email me the included .js files I
can take a look. Thanks.
Sep 15 '05 #15
On Thu, 15 Sep 2005 08:12:54 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

just do this

<body onload="preload_imgs();mySlider1.placeSlider();">


Zoe,
I am using

<body onload="preload_imgs();mySlider1.placeSlider();">

but I keep getitng the error

'myImages[..].src' is null or not an object.

How do I test to see that the preload_imgs() is working?

Cheers

Geoff
Sep 15 '05 #16

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:el********************************@4ax.com...
On Thu, 15 Sep 2005 08:12:54 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

just do this

<body onload="preload_imgs();mySlider1.placeSlider();">
Zoe,
I am using

<body onload="preload_imgs();mySlider1.placeSlider();">


Actually the file you sent me had the preload_omgs() methid called after you
were creating the slider which is not going to work !

but I keep getitng the error

'myImages[..].src' is null or not an object.

How do I test to see that the preload_imgs() is working?
You need to start isolating code. So break down you page into smallish
tasks else you will never get anthing working, so if your page does 2 or 3
things write and test each one individually.

So write a method to preload images and test it works. Write a methid to
create a slider and check it works. Add the images to the slidr and check
it works. You are probably writing big chucks of code or copying and
pasting and then getting lost. I have been a developer for years and I
might still only write a few lines at a time and then test. I might write a
case statement for example and put an alert in each case before putting in
any code that I want executed. i have learnt that if you change too much
there is too large a margin for error. you should try and refrain from
cutting and pasting any code from this ng into your code. Just read it and
then rewrite it according to your needs.
Cheers

Geoff

Sep 15 '05 #17

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:o3********************************@4ax.com...
On Wed, 14 Sep 2005 20:30:55 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
document.getElementById("picture").innerHTML = imgStr;


??? Why do you need this line ? this line is for displaying the image and
shouldnt be called until the image is in place. What page is this line on
?


Zoe,

It is difficult for you to see what I am trying to do so here is the
full code - most grateful for any further help in getting me to see
how to handle the preloading of the images! I have not worked out yet
how to dsiplay the images when required ... as you will see!
Previously I had used the array of picture (// out below).

Geoff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script></script>

<script type="text/javascript">

//preload images
var myImages = new Array();
var n_images = 8;

for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();

myImages[i].src = "pic" + i + ".jpg";
}

function displayImages()
{
var imgStr = "";

for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src ='" + myImages[i].src + "/>";
}

document.getElementById("picture").innerHTML = imgStr;
}

window.onload = displayImages;

var mySlider1 = new Slider( "Slider1" );
var count = 0;

var situation_number = 0;

var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";

var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";

// var picture = new Array(7);
// picture[0] = "pic1.jpg";
// picture[1] = "pic2.jpg";
// picture[2] = "pic3.jpg";
// picture[3] = "pic4.jpg";
// picture[4] = "pic5.jpg";
// picture[5] = "pic6.jpg";
// picture[6] = "pic7.jpg";
function next_question(button)
{

slider_value[situation_number][count] = this.mySlider1.getValue(0);

//totalreadings += ' ' + this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else {

situation_number++;

switch(situation_number)
{
case (1):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (2):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (3):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (4):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (5):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):


What is this case statement about, each case executes the same code !!!
Sep 15 '05 #18
On Thu, 15 Sep 2005 09:11:28 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):


What is this case statement about, each case executes the same code !!!


Zoe,

I know but I thought that the vital difference was the value of the
situation_number varies!?

Geoff

Sep 15 '05 #19
On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
So write a method to preload images and test it works. Write a methid to
create a slider and check it works. Add the images to the slidr and check
it works. You are probably writing big chucks of code or copying and
pasting and then getting lost. I have been a developer for years and I
might still only write a few lines at a time and then test. I might write a
case statement for example and put an alert in each case before putting in
any code that I want executed. i have learnt that if you change too much
there is too large a margin for error. you should try and refrain from
cutting and pasting any code from this ng into your code. Just read it and
then rewrite it according to your needs.


Zoe,

I'm sure you are right - a lot less frantic changing required !

Geoff



Cheers

Geoff


Sep 15 '05 #20

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:2g********************************@4ax.com...
On Thu, 15 Sep 2005 09:11:28 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):
What is this case statement about, each case executes the same code !!!


Zoe,

I know but I thought that the vital difference was the value of the
situation_number varies!?


but you dont use situation_number for anything apart from deciding which
case to take, regadless of this value you execture the same code.
Geoff

Sep 15 '05 #21
On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

Zoe,

One aspect I do not understand is that if I use alert() to check the
value of

myImages[0].src

it gives http://website/pico.jpg

so when I use

myImages[0].src

later to display this image it seems to me that the image is being
taken from the website rather than from the cache? How does this work?

Geoff


Sep 15 '05 #22

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:12********************************@4ax.com...
On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

Zoe,

One aspect I do not understand is that if I use alert() to check the
value of

myImages[0].src

it gives http://website/pico.jpg

so when I use

myImages[0].src

later to display this image it seems to me that the image is being
taken from the website rather than from the cache? How does this work?

Geoff


The source of the image will not change, simply that the local machine has
allready got the image in its cache and when it sees a link for that image
will actually go to the cache instead.

Sep 15 '05 #23
On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

Zoe,

The code below works except that I would like to be able to only show
the "Next" button when either the first image or, perhaps better all
the images, have been downloaded.

I have tried

<script>
if (myImages[6].src)
{
sendButton();
}
</script>

but this does not work - the button is displayed before the first
image is displayed and so the user can click it and cause an error.

Any ideas?

Cheers

Geoff
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script>

<script type="text/javascript">
var myImages = new Array();

var numImages = 7;

for (var z=0; z<numImages; z++)
{
myImages[z]=new Image();
myImages[z].src="pic" + z + ".jpg";
}

var mySlider1 = new Slider( "Slider1" );

var count = 0;

var situation_number = 0;

var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";

var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";

function next_question(button)
{

slider_value[situation_number][count] = this.mySlider1.getValue(0);

//totalreadings += ' ' + this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else {

situation_number++;

switch(situation_number)
{
case (1):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (2):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (3):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (4):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (5):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case (6):
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
break;
case(7):
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);
}
saveIt();
break;

}

}

}

function fillTable()
{

document.getElementById('title').innerHTML = "<h2>" +
title[situation_number] + "</h2>";

document.getElementById('picture').innerHTML = "<img src ='" +
myImages[situation_number].src + "' />";

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

}

function saveIt()

{
document.getElementById("Slider1ValueText").innerH TML = "";

for (situation_number = 0; situation_number < 7;
situation_number++)
{
document.getElementById("Slider1ValueText").innerH TML
+= escape("\n") + "Situation: " + title[situation_number] + " ";

for (var i = 0; i <
slider_value[situation_number].length; i++)
{
document.getElementById("Slider1ValueText").innerH TML
+= this.slider_value[situation_number][i] + ' ';
}
}
var recipient = "extraemails";
var realname = "SPA Form";
var url = 'http://website/path/formmail-nmst.cgi';
//var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
document.getElementById('Slider1ValueText').innerH TML;
var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
document.getElementById("Slider1ValueText").innerH TML

var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

function sendButton()
{
document.write("<center>");
document.write("<table>");
document.write("<tr><td colspan='3' align='center' valign='top'
height='100'>");
document.write("<input type='button' name ='nextbutton' value='Next'
onclick='next_question(this)'>");
document.write("<SPAN class='invisible'
ID='Slider1ValueText'></SPAN>");
document.write("<SPAN ID='Status'></SPAN></td>");
document.write("</tr>");
document.write("</table>");
document.write("</center>");

}
</script>

</HEAD>

<body onload="mySlider1.placeSlider()">

<center>

<table border='0' width='100%'>
<tr>
<td>&nbsp;</td>
<td ID='title' valign='top' align='center'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td ID='picture' valign='top'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
</tr>

<tr>
<td ID='lhs_question' width='30%' valign='top' height='70'></td>
<td width='40%' align='center' valign='top' height='70'>
<IMG SRC='sliderbg.gif' NAME='Slider1RailImg'
ID='Slider1RailImg'></td>
<td ID='rhs_question' width='30%' valign='top' height='70'></td>
</tr>
</table>
</center>

<script>
if (myImages[6].src)
{
sendButton();
}

</script>
<script>
fillTable();
</script>
<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>

Sep 15 '05 #24
On Thu, 15 Sep 2005 10:44:01 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

The source of the image will not change, simply that the local machine has
allready got the image in its cache and when it sees a link for that image
will actually go to the cache instead.


OK - I see.

Geoff

Sep 15 '05 #25
On Thu, 15 Sep 2005 10:25:02 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
I know but I thought that the vital difference was the value of the
situation_number varies!?


but you dont use situation_number for anything apart from deciding which
case to take, regadless of this value you execture the same code.


Zoe,

OK - so I should have a function which just increments
situation_number etc?

Geoff

PS the Case code does work but presumably there is a lot of redundant
code?




Geoff


Sep 15 '05 #26

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:gr********************************@4ax.com...
On Thu, 15 Sep 2005 10:25:02 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
I know but I thought that the vital difference was the value of the
situation_number varies!?


but you dont use situation_number for anything apart from deciding which
case to take, regadless of this value you execture the same code.


Zoe,

OK - so I should have a function which just increments
situation_number etc?

Geoff

PS the Case code does work but presumably there is a lot of redundant
code?


yes.

Just replace the case code with this.

{

situation_number++;

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
}

what is the point is looking at the situation_number to decide what to do
and then just doingthe same regardless of this value ? I suspect you needed
the value for a previous version of this code, and now you have changed it
slightly it is now redundant. not good in any case.
Sep 15 '05 #27
On Thu, 15 Sep 2005 10:44:50 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
Just replace the case code with this.

{

situation_number++;

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
}

what is the point is looking at the situation_number to decide what to do
and then just doingthe same regardless of this value ? I suspect you needed
the value for a previous version of this code, and now you have changed it
slightly it is now redundant. not good in any case.


Zoe,

I have done as above the changed situation_number causes a new images
and a new question to be displayed ... that's the idea and that
happens so must be right?!!?

Geoff

Sep 15 '05 #28

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:22********************************@4ax.com...
On Thu, 15 Sep 2005 10:44:50 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
Just replace the case code with this.

{

situation_number++;

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
}

what is the point is looking at the situation_number to decide what to do
and then just doingthe same regardless of this value ? I suspect you
needed
the value for a previous version of this code, and now you have changed it
slightly it is now redundant. not good in any case.


Zoe,

I have done as above the changed situation_number causes a new images
and a new question to be displayed ... that's the idea and that
happens so must be right?!!?


?? Not sure what you are saying ? Does my suggestion work ?


Sep 15 '05 #29
ASM
Geoff Cox wrote:
On Thu, 15 Sep 2005 01:38:53 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

var ig=0;
function preload_imgs() {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + ig + ".jpg";
ig++ ;
}

preload_imgs();

Stephane,

I have used your code above (making var ig = 1 to start as the pics
are named pic1) .... but the problem seems to be that I cannot have 2
items in the <body onload etc>


did you see that :
preload_imgs();
was allready called
just after its own declaration ...

so, no need to call it once more (in body tag or otherwhere)
I have

<body onload="preload_imgs()">
delete that onload()
and let function preload_imgs() to run before (during ?) loading
<script>
mySlider1.placeSlider();
</script>

which gives the error message "object needed" for the line with
mySlider1.placeSlider();
I do not know what mySlider1.placeSlider()
attempt to do ...
If you can't (or don't know how) modify it
and *if* you prefer to launch preload_imgs() after loading (body tag)

you can try :

<script>
onload = Function ('mySlider1.placeSlider()');
</script>

but I'm afraid that will not work (if preload_imgs() haven't run before)

if I have

<body onload="mySlider1.placeSlider()"> this is OK but I then get an
error in putting the first pic in the table - I guess the creation of
the table is happening before the pics have been loaded.

Any thoughts?!


1) I think there was a little error in my proposition
(forgotten to stop images loading when last image has done)

var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
}
preload_imgs();

2) To run function creating tables after images are all loaded
I don't know ...
because placeSlider() or writeSlider() are unknown
Do they create and write table(s) ?

var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
else {
mySlider1.placeSlider(); // or mySlider1.writeSlider();
mySlider1.writeSlider(); // mySlider1.placeSlider();
document.getElementById('wait').style.display='non e';
}
}

and in space for script launching mySlider1.placeSlider()
in end of page

<h2 id="wait" style="color:red">Waiting end of loading ... </h2>
<script type="text/javascript">
preload_imgs();
</script>

of course : no more redondant onloads by otherway ! !

--
Stephane Moriaux et son [moins] vieux Mac
Sep 15 '05 #30
ASM
Geoff Cox wrote:
On Thu, 15 Sep 2005 08:12:54 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
just do this

<body onload="preload_imgs();mySlider1.placeSlider();">

Zoe,
I am using

<body onload="preload_imgs();mySlider1.placeSlider();">

but I keep getitng the error

'myImages[..].src' is null or not an object.


because
- 1 - preload_imgs() didn't finish it's job
as soon as mySlider1.placeSlider() is called
- 2 - perhaps preload_imgs() has no end ?
How do I test to see that the preload_imgs() is working?


var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
if(ig!=0) alert('image : '+ig+' loaded');
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
}
preload_imgs();
--
Stephane Moriaux et son [moins] vieux Mac
Sep 15 '05 #31
ASM
Geoff Cox wrote:
On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

Zoe,

One aspect I do not understand is that if I use alert() to check the
value of

myImages[0].src

it gives http://website/pico.jpg

so when I use

myImages[0].src

later to display this image it seems to me that the image is being
taken from the website rather than from the cache? How does this work?


to call myImages[1].src

document.images['Slider1RailImg'].src = eval(myImages[1]+'.src');

would if fix ?

Perhaps browser reaches site to only verify
if this image haven't be changed ?

--
Stephane Moriaux et son [moins] vieux Mac
Sep 15 '05 #32
ASM
Geoff Cox wrote:
On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

Zoe,

The code below works except that I would like to be able to only show
the "Next" button when either the first image or, perhaps better all
the images, have been downloaded.

I have tried

<script>
if (myImages[6].src)
{
sendButton();
}
</script>

but this does not work - the button is displayed before the first
image is displayed and so the user can click it and cause an error.

Any ideas?


this page changing every second doesn't help to understand whatever in your code

how sendButton() is called ?
if you now the row of array, you must test on this row (index)

if(index_of_my_call <=6 ) sendButton();

if you do what I did give and if mySlider1.writeSlider();
does write this button : no problemo

var myImages = new Arrray();
var ig = 0;
var ig_max = 7;

function preload_imgs() {
if(ig <= ig_max) {
myImages[ig] = new Image();
myImages[ig].onload = preload_imgs;
myImages[ig].src = "pic" + (+ig+1) + ".jpg";
ig++ ;
}
else {
mySlider1.placeSlider(); // or mySlider1.writeSlider();
mySlider1.writeSlider(); // mySlider1.placeSlider();
document.getElementById('wait').style.display='non e';
}
}

--
Stephane Moriaux et son [moins] vieux Mac
Sep 15 '05 #33
On Thu, 15 Sep 2005 11:33:30 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:22********************************@4ax.com.. .
On Thu, 15 Sep 2005 10:44:50 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
Just replace the case code with this.

{

situation_number++;

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
}

what is the point is looking at the situation_number to decide what to do
and then just doingthe same regardless of this value ? I suspect you
needed
the value for a previous version of this code, and now you have changed it
slightly it is now redundant. not good in any case.

Zoe,

I do need the situation_number to be incremented so that the new image
associated with the new situation and the new question can be
displayed ... that's all.

Cheers

Geoff




Zoe,

I have done as above the changed situation_number causes a new images
and a new question to be displayed ... that's the idea and that
happens so must be right?!!?


?? Not sure what you are saying ? Does my suggestion work ?


Sep 15 '05 #34

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:b7********************************@4ax.com...
On Thu, 15 Sep 2005 11:33:30 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:22********************************@4ax.com. ..
On Thu, 15 Sep 2005 10:44:50 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

Just replace the case code with this.

{

situation_number++;

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) /
2 );
count=0;
fillTable();
}

what is the point is looking at the situation_number to decide what to
do
and then just doingthe same regardless of this value ? I suspect you
needed
the value for a previous version of this code, and now you have changed
it
slightly it is now redundant. not good in any case.
Zoe,

I do need the situation_number to be incremented so that the new image
associated with the new situation and the new question can be
displayed ... that's all.


it is !!! see below !!! The situation_number was not even in the case
statement but if you replace the whole lot with the code below things will
be working abit better for you.
{
situation_number++;
mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) /
2 );
count=0;
fillTable();
}

Sep 15 '05 #35
On Thu, 15 Sep 2005 13:51:19 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

My aplogies for changing the code so much. The code below is the
latest. You will see the preload code is different and don't think all
is well yet as it still takes a while for the pic0.jpg to display and
whilst that is happening the user can click on the "Next" button and
cause an error.

Probably I need to reinsert your preload code but could you just look
to see if that would follow through OK.

Cheers

Geoff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script>

<script type="text/javascript">
var myImages = new Array();

var numImages = 7;

for (var z=0; z<numImages; z++)
{
myImages[z]=new Image();
myImages[z].src="pic" + z + ".jpg";
}
var mySlider1 = new Slider( "Slider1" );

var count = 0;

var situation_number = 0;

var slider_value = new Array(8);
for (var n = 0; n < slider_value.length; n++ ) {
slider_value[n] = new Array(8);
}

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";

var title = new Array(7);
title[0] = "Social Individual";
title[1] = "Formal Individual";
title[2] = "Social Group";
title[3] = "Formal Group";
title[4] = "Parents";
title[5] = "Telephone";
title[6] = "'Scripted' Conversations";

function next_question(button)
{

slider_value[situation_number][count] = this.mySlider1.getValue(0);

//totalreadings += ' ' + this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else {

situation_number++;

if (situation_number < 7)
{
mySlider1.setValue(
(mySlider1.leftValue + mySlider1.rightValue) / 2 );
count=0;
fillTable();
} else {
if (button.parentNode
&& button.parentNode.removeChild) {

button.parentNode.removeChild(button);
}
saveIt();
}

}
}

function fillTable()
{

document.getElementById('title').innerHTML = "<h2>" +
title[situation_number] + "</h2>";

document.getElementById('picture').innerHTML = "<img src ='" +
myImages[situation_number].src + "' />";

document.getElementById('lhs_question').innerHTML = window["lhs_" +
situation_number][count];
document.getElementById('rhs_question').innerHTML = window["rhs_" +
situation_number][count];

}

function saveIt()

{
document.getElementById("Slider1ValueText").innerH TML = "";

for (situation_number = 0; situation_number < 7;
situation_number++)
{
document.getElementById("Slider1ValueText").innerH TML
+= escape("\n") + "Situation: " + title[situation_number] + " ";

for (var i = 0; i <
slider_value[situation_number].length; i++)
{
document.getElementById("Slider1ValueText").innerH TML
+= this.slider_value[situation_number][i] + ' ';
}
}
var recipient = "extraemails";
var realname = "SPA Form";
var url = 'http://website/path/formmail-nmst.cgi';
//var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
document.getElementById('Slider1ValueText').innerH TML;
var pars = 'recipient=' + recipient + '&' + 'realname=' +
realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
document.getElementById("Slider1ValueText").innerH TML

var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

function sendButton()
{
document.write("<center>");
document.write("<table>");
document.write("<tr><td colspan='3' align='center' valign='top'
height='100'>");
document.write("<input type='button' name ='nextbutton' value='Next'
onclick='next_question(this)'>");
document.write("<SPAN class='invisible'
ID='Slider1ValueText'></SPAN>");
document.write("<SPAN ID='Status'></SPAN></td>");
document.write("</tr>");
document.write("</table>");
document.write("</center>");

}
</script>

</HEAD>

<body onload="mySlider1.placeSlider()">

<center>

<table border='0' width='100%'>
<tr>
<td>&nbsp;</td>
<td ID='title' valign='top' align='center'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td ID='picture' valign='top'></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="3">&nbsp;</td>
</tr>

<tr>
<td ID='lhs_question' width='30%' valign='top' height='70'></td>
<td width='40%' align='center' valign='top' height='70'>
<IMG SRC='sliderbg.gif' NAME='Slider1RailImg'
ID='Slider1RailImg'></td>
<td ID='rhs_question' width='30%' valign='top' height='70'></td>
</tr>
</table>
</center>

<script>
fillTable();
sendButton();
</script>
<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>
Sep 15 '05 #36
On Thu, 15 Sep 2005 12:57:20 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
{
situation_number++;
mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) /
2 );
count=0;
fillTable();
}

Zoe,

I think I have what you suggest except that I have to take account of
the idea that when the last situation has been answered
(situation_number being 7), then I need to remove the Neext button and
call the saveIt() function in order to send the slide values to the
cgi script ... so

} else {

situation_number++;

if (situation_number < 7)
{
mySlider1.setValue( (mySlider1.leftValue +
mySlider1.rightValue) / 2 );
count=0;
fillTable();
if (button.parentNode && button.parentNode.removeChild)
{
button.parentNode.removeChild(button);
}
saveIt();
}

}

Geoff

Sep 15 '05 #37
ASM
Geoff Cox wrote:
On Thu, 15 Sep 2005 13:51:19 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

My aplogies for changing the code so much.
will ypu, at least one time,
tell me what do :
- mySlider1.placeSlider()
and
- mySlider1.writeSlider()

could you download that :
http://perso.wanadoo.fr/staphane.mor...uc/slider4.htm
and tell me if that would work
You seem to want treate on hundred problems together ...

Each time something begins to appear fixed
hop! you go to break it with changes otherwhere
or
changing some code otherwhere, forgetting fiew code was working
and re-inserting insteed old code we know it causes problem.
The code below is the
latest. You will see the preload code is different and don't think all
is well yet as it still takes a while for the pic0.jpg to display and
whilst that is happening the user can click on the "Next" button and
cause an error.
it is not so difficult you can't fix it by yourself ?

myImages[z].src="pic" + (+z+1) + ".jpg";

gives :

myImages[0].src="pic1.jpg";

Probably I need to reinsert your preload code but could you just look
to see if that would follow through OK.


as I allways don't know what is : mySlider1.writeSlider();
and because your code is so much tortured
I'm lost

I do not understand you have to write sendButton by javascript
while
it's so easy to hidde or undisplay this button
(correctly writted directly in html on the page)
when your counter of questions reaches last question ...

for all your job you need only two parameters
(or four with these categories added)

max_categories = 7;
actual_category = 0;
max_questions = 8;
actual_question = 0;

actual_question is :
- onload : index of first image, question, response
- during work : is the index the step we are
and same for 'actual_category' regardless to categories sub array

and only these 2 parameters are used in callings to
preload_images
display_question
display_response
display_image
allowing_display_new_question_button
allowing_display_send_button

changing the only variable 'max_question' and/or 'max_categories'
explain in one time to your code how many questions + responses + images
you'll want

The thing to do now is to clearly organize differents actions
along time
- declaration of global variables
actual_question, max_questions, questions_array, responses_array
- preload image : contain in end next action (feed table)
- feed the table (allready in hard html code) with
- 1st image
- 1st question
- 1st response (I didn't understand why response is displayed)
function to fedd the table, when its index reaches max_questions value
- un-display next question button if last question
- display send-button on last question

we have 2 quite very simple functions
I did stay here :

function next_question(button) {
slider_value[count] = lhs_questions[count];
count++;
if (count < max_questions)
{
document.getElementById('lhs_question').innerHTML = lhs_questions[count];
document.getElementById('rhs_question').innerHTML = rhs_questions[count];
document.images['Slider1RailImg'].src = Imgs[count].src;
}
else
blah ...
--
Stephane Moriaux et son [moins] vieux Mac
Sep 15 '05 #38
On Thu, 15 Sep 2005 17:42:56 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

I have uploaded a version which works OK - so you can get a better
idea of what in meant to happen - but it has no preload of the images.

http://www.micro-active.com/test/spa.htm

I tried your stephane4.htm - I needed to change the position of the
mySlider1.placeSlider() in order to get the slider images in the right
place - anyway hopefully the above link will help?!

Cheers

Geoff
Sep 15 '05 #39
ASM
Geoff Cox wrote:
On Thu, 15 Sep 2005 17:42:56 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

I have uploaded a version which works OK - so you can get a better
idea of what in meant to happen - but it has no preload of the images.

http://www.micro-active.com/test/spa.htm
in your function fillTable some errors with ' and "

document.getElementById('picture').innerHTML = "<img src='" + window["picture"][situation_number] + "'>";

and it is more much better like that :

document.getElementById('picture').src = window["picture"][situation_number].src;

but ... that need you re-arange the table to be filled

get back your spa file with its images pre-loaded :
http://perso.wanadoo.fr/stephane.moriaux/truc/spa.htm
(which can run from there ;-) )

I didn't fix all the little missing
use FireFox and its Add-on : Web Developer
I tried your stephane4.htm - I needed to change the position of the
mySlider1.placeSlider() in order to get the slider images in the right
place -


and .. does it run ?

anyway hopefully the above link will help?!

yes, like that I can see what happens
--
Stephane Moriaux et son [moins] vieux Mac
Sep 15 '05 #40
On Fri, 16 Sep 2005 01:28:09 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

Many thanks - your code

var picture = new Array(7);
picture[0] = new Image(400,265); picture[0].src = "pic0.jpg";

etc

looks much neater!

Just one thought - is it possible to make the Next button appear after
the pic0.jpg image has been downloaded?

Cheers

Geoff
Sep 16 '05 #41

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

22 posts views Thread by Fabian | last post: by
6 posts views Thread by michaaal | last post: by
2 posts views Thread by Stevio | last post: by
2 posts views Thread by windandwaves | last post: by
3 posts views Thread by giladg22 | last post: by
2 posts views Thread by sachaburnett | last post: by
3 posts views Thread by littleark | last post: by
7 posts views Thread by Keith Hughitt | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.