Topic awaiting preservation: Custom scrollbars Problem.... (Page 1 of 1)

Folks,

I'm having a bit of trouble with the last aspect of a script I'm working on.
I have created dynamic custom scrollbars for the edge of a content area (iFrame), but as I am so CRAP at maths and the like, I can't work out how to get the scrollbar handle to accurately move according to the content ares client/scroll height. I can do it by using a defined value (called 'xFactor' in script), but I need this value to be dynamic as the frame that the scrollbar will be used with is resizable.

It is easier if you view the source code for the script at the following location:
http://www.pwhitrow.com/widgets/crap.html

I know this description is brief, but if you view the script, you will see what is going on.

PLEASE HELP..this is driving me insane...

www.pwhitrow.com

Each time the scroll bar is moved, do this:

1. Find out how far down the scroll bar is. You should know what its minimum possible top value is (all the way up), and what its maximum possible top value is (all the way down). Take its current top value, subtract the minimum possible top value, and divide by (the maximum possible top value minus the minimum possible top value). This will give you a number between zero and one that represents how far down the scrollbar is. Call this "x".

2. Take the top value that is considered "all the way up" for the actual content. This will most likely be zero if you're absolutely positioning the content inside another "container" element. Call this "a". Take also the top value considered "all the way down". This is probably the negative (height of the content element minus the height of the display area). Call this "b".

3. Set the top value of the content to a + x*(b-a).

[This message has been edited by Slime (edited 07-09-2002).]

Hmmm......still having a bit of trouble.
Slime, I know this is a bit cheeky, but could you 'show' me ..?

www.pwhitrow.com

That would require reading and understanding a lot of code that I didn't write, which is always a hassle =)

Do you have a single function which does this task of updating the content's position with respect to the scroll bar's position? If so, let me see it...

OK...

------------------------------
<iframe id="scrollArea1" src="pooh.html" frameborder="0" scrolling="no" style="position:absolute;top:100;left:100;height:300;width:300;"></iframe>
<div id="slideBar1">
<script>
scrollNum=0
sa=document.getElementById('scrollArea1')
barTop=sa.offsetTop
barLeft=sa.offsetLeft+sa.offsetWidth
barWidth=10
barHeight=sa.offsetHeight-(barWidth*2)
barTravel=barHeight-barWidth
ch=sa.document.body.clientHeight
sh=sa.document.body.scrollHeight

xFactor=10.2

scrollMux=((ch+sh)/barTravel)+xFactor
createSlider('slideBar1',barTop,barLeft,barHeight,barWidth,'vertical','picture','vbar.gif','slider2.gif','arrowup.gif','arrowdn.gif','arrows','pointer','','','click')


// this function returns the value of the slider (from slidebars.js)
function slideVal(slideBarNum,val){
num=Math.abs(val*scrollMux)
scrollArea1.scrollTo(0,num)
}

</script>
<div>

-------------------------------------

The slidebar itself is created in the slidebars.js file.
The value of teh slidebar is returned from that script to the function 'slideVal' above

Hope this helps...

www.pwhitrow.com

Anyone.....?????

www.pwhitrow.com

Hmm, it appears that scrollMux is being calculated improperly. Could you explain the logic behind its calculation? I'm confused as to how you're arriving at the expression you are, and perhaps by explaining it you'll realize what's wrong on your own.

Slime,

scrollMux (scroll multiplier) is basically the number that multiplies the returned number from the slidebar. ie...
if scrollMux = 10, and the returned slidebar value = 10, then the content scroll pos would = 100 (or that's show it should work in theory). But, as you say, scrollMux is not being calculated correctly.
I know what the problem is, but not how to fix it...!


www.pwhitrow.com

Try removing "sh" and "xFactor" from the expression and see what happens.

it does scrll, but not to the bottom..

Can I send you the files I'm using...?

www.pwhitrow.com

No thanks, I'm not going to do it for you =)

Are you sure that document.body.clientHeight is giving you the value you expect (the height of the document)? Perhaps it should be document.body.offsetHeight or something similar?

Damn....can't blame a guy for trying..

This is REALLY beginning to piss me off. I just CANNOT get it to work.

---------------------------
<iframe id="scrollArea1" src="pooh.html" frameborder="0" scrolling="no" style="position:absolute;top:100;left:100;height:300;width:200;"></iframe>
<div id="slideBar1">
<script>
scrollNum=0
sa=document.getElementById('scrollArea1')
barTop=sa.offsetTop
barLeft=sa.offsetLeft+sa.offsetWidth
barWidth=10
barHeight=sa.offsetHeight-(barWidth*2)
barTravel=barHeight-barWidth
oh=sa.offsetHeight
ch=sa.document.body.clientHeight
sh=sa.document.body.scrollHeight

scrollMux=23.3

createSlider('slideBar1',barTop,barLeft,barHeight,barWidth,'vertical','picture','vbar.gif','slider2.gif','arrowup.gif','arrowdn.gif','arrows','default','','','click')


// this function returns the value of the slider (from slidebars.js)
function slideVal(slideBarNum,val){
scrollArea1.scrollTo(0,val*scrollMux)
}

</script>
<div>
---------------------------

I know that theorectically scrollMux needs to be a changing number to reflect the fact that the document veiwing area will be resizable, so it needs to take into account the height and width of the area, and the width of the scrollbar.
This is the last thing I need to do so that I can bolt the code onto a larger script.
PLEASE PLEASE PLEASE....someone help me sort it out before I go completely insane.

www.pwhitrow.com

[This message has been edited by pwhitrow (edited 07-11-2002).]

[This message has been edited by pwhitrow (edited 07-11-2002).]

Oh, I'm sorry, I'm not accusing you of being lazy or anything, it's just that you've gotten this far, you'll be really happy if you figure out the right way yourself. On top of that, this is one of those things that isn't quick for someone who hasn't seen the code before. I myself am really not sure what the answer is.

Well, let's see. You're multiplying scrollMux by the top value of the scrollbar itself. First thing you need to do is get the scrollbar's maximum possible top value. If that value can be changed, you'll have to figure it out dynamically; otherwise, let's say it's just 300 pixels or something.

What you want to get is a number between zero and one that represents the amount the document should be scrolled from top to bottom. You can get that number by dividing the scrollbar's top value (which appears to be inside "val") by the maximum top value (which i'm assuming is 300). So so far, scrollMux is 1/300.

Now we need to take that number and multiply by the largest amount that the IFRAME can be scrolled by. That's the part that seems to be difficult to figure out. Theoretically, that value should be sa.document.body.clientHeight, but it might be sa.document.body.offsetHeight or maybe something else.

So scrollMux should be able to be something like sa.document.body.clientHeight/300. Try that (replacing the 300 with the scrolling area of the scrollbar). If it doesn't work, test different things to see what might be wrong - maybe sa.document.body.clientHeight isn't really the height of the document content, or maybe the 300 isn't really the height of the scrollbar, and if you're positive they're both right, but it's not having the effect you expected, you need to find out what effect it *is* having. You can't really understand the right way to do it until you've understood what's wrong about the wrong way to do it.