comments please on this code?

[Geoff Cox]

Hello,

The Javascript code at the URL below does work but no doubt there are
better ways of coding the app so would appreciate any comments!

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

The first page links to a second where most of the Javascript is to be
found.

The slider code is in a file called slider.js which is in the same
folder and can be downloaded if required ...

After the last questions have been answered the slider values are
emailed to me using formmail-nms.cgi.

Look forward to hearing of any (many!) possible improvements etc.

Many thanks,

Geoff

 

[Geoff Cox]

Hello,

The Javascript code at the URL below does work but no doubt there are
better ways of coding the app so would appreciate any comments!

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

The first page links to a second where most of the Javascript is to be
found.

The slider code is in a file called slider.js which is in the same
folder and can be downloaded if required ...

I should have added that the questions are in a file called
questions.js in the same folder and this file too can also be
downloaded if interested.

Cheers

Geoff

 

[Geoff Cox]

where do the questions appera on the page ? There is a heading and a bunch
of responses but what are the questions ?

Zoe,

when I said questions I should have said opposing or polar statements.
The first set being

"I would often be in this situation" and

"I would hardly ever be in this situation"

Fist page the slider bit doesn't float in teh right place - have you tested
on different res ?

it seems that if the browser window is maximised the thumb is in the
correct place. Do you find this?

Geoff

 

[Geoff Cox]

what situation ?

Zoe,

"the situation" refers to the context shown by the image, eg with
friends, with parents etc.

no, only when it was set to 800 * 600

It is fine with IE (v6) at 1024 x 768 for me but the thumb is at the
left hand end of the slider rail rather than in the middle when I use
Firefox at this resolution.

Which browser are you using?

Cheers

Geoff

 

[RobG]

Hello,

The Javascript code at the URL below does work but no doubt there are
better ways of coding the app so would appreciate any comments!

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

The first page links to a second where most of the Javascript is to be
found.

The slider code is in a file called slider.js which is in the same
folder and can be downloaded if required ...

After the last questions have been answered the slider values are
emailed to me using formmail-nms.cgi.

Look forward to hearing of any (many!) possible improvements etc.

Many thanks,

Geoff

Your 'sliders' only work properly when the window is at 1024 pixels
wide, reducing the window width causes the range of of the marker to be
misaligned with the slider.

There is an awful lot of repetitive code that could be replaced with
loops and you have a lot of global variables - are they all needed?

Have you thought of having the value displayed so that as the slider
moves, the selected value is visible?

I'd suggest that you look at implementing your sliders as objects, then
you only need one object that you create multiple instances of. Most of
your globals can then become properties of the object - your next step
in learning JavaScript?

Wouldn't it be easier all round to use radio buttons and values from say
1 to 10? Then you'd have a form that would work without scripting.

 

[Geoff Cox]

Rob,

Thanks for looking at this - my comments follow.

Your 'sliders' only work properly when the window is at 1024 pixels
wide, reducing the window width causes the range of of the marker to be
misaligned with the slider.

Any idea why that should be so? What controls this? Presumably the

mySlider1.placeSlider()

in the slider.js library? I have looked at this but cannot see how it
works?

I'm also finding a Firefox oddity - on the first page the slider thumb
is not in the centre of the rail whereas on the second page, with
multiple sliders, all the thumbs are in the centre. I cannot see any
difference in how the sliders are created ?!

To try to understand this I have made a very simple at

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

Are you able to look at this with IE and Firefox? In IE the thumb is
in the centre of the rail - with Firefox it is on the left hand side.
Why?!

There is an awful lot of repetitive code that could be replaced with
loops and you have a lot of global variables - are they all needed?

OK - will make the loops and check the global aspect.

Have you thought of having the value displayed so that as the slider
moves, the selected value is visible?

Yes but the idea is to keep the values from the user.

I'd suggest that you look at implementing your sliders as objects, then
you only need one object that you create multiple instances of. Most of
your globals can then become properties of the object - your next step
in learning JavaScript?

I thought the sliders were objects?!

var mySlider1 = new Slider( "Slider1" );

what am I missing? On the second page I have used the
Slider.isPrototype() function to simplify the creation of multiple
sliders. By the way the slider libray is the work of Christiaan Hofman
at

http://www.phys.uu.nl/~hofman/jsexp/jsviewer.html

He has been very helpful and I'm waiting for a response to my latest
email to him!

Wouldn't it be easier all round to use radio buttons and values from say
1 to 10? Then you'd have a form that would work without scripting.

again, yes it would, but the idea is to replicate online what is also
a paper based exercise which has been used for some time.

Cheers

Geoff

 

[RobG]

Rob,

Thanks for looking at this - my comments follow.




Any idea why that should be so? What controls this? Presumably the

mySlider1.placeSlider()

in the slider.js library? I have looked at this but cannot see how it
works?

I doesn't happen in the sample page, perhaps it's something to do with
how you are positioning the slider in your page that throws the range
calculation off.

It also doesn't handle changes to font sizes after the page loads - the
button stays where it was but the slider moves up/down the page (put
some text before the slider in your test page and change the size of it
using the browser text size controls).

I'm also finding a Firefox oddity - on the first page the slider thumb
is not in the centre of the rail whereas on the second page, with
multiple sliders, all the thumbs are in the centre. I cannot see any
difference in how the sliders are created ?!

To try to understand this I have made a very simple at

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

Are you able to look at this with IE and Firefox? In IE the thumb is
in the centre of the rail - with Firefox it is on the left hand side.
Why?!

Because when setting the position of the button the units are not
specified. Find the following line (about 404):

if (this.orientation == "h") this.button.left = pos;

add -- + 'px' -- to the end:

if (this.orientation == "h") this.button.left = pos + 'px';

OK - will make the loops and check the global aspect.




Yes but the idea is to keep the values from the user.




I thought the sliders were objects?!

var mySlider1 = new Slider( "Slider1" );

Hey, they are too! I didn't look closely enough.

[...]

 

[Geoff Cox]

Because when setting the position of the button the units are not
specified. Find the following line (about 404):

if (this.orientation == "h") this.button.left = pos;

add -- + 'px' -- to the end:

if (this.orientation == "h") this.button.left = pos + 'px';

Rob,

I passed on your comment to Christiaan - after which he made following
change, ie added the + 'px' to the following line

var pos = this.maxSlide * rangeValue /
(this.rightValue-this.leftValue) + this.offset + 'px';

It now works OK in both IE and Firefox

Thanks again!

Cheers

Geoff

 

[Geoff Cox]

On Sat, 15 Oct 2005 14:41:48 GMT, Geoff Cox

Thanks for the comments - will remove the pages now.

Cheers

Geoff