...

View Full Version : Help with my scrollBar. Div keeps scrolling after the bar is at it's farthest point



Single Paradox
05-27-2006, 04:35 PM
I made this scrollbar a while ago, but I never perfected it. I feel like going back and looking at my old codes to perfect them, but I just can't seem to get this to work. Here is my scrollbar (http://singleparadox.com/codes/ScrollBar). Notice when you grab the bar and drag it all the way down, it still has some content area to scroll? Why is this? Can someone help please?

vwphillips
05-27-2006, 05:12 PM
Quick look indicates that the ratio between scroll travel and content height is not correct

Content height= raw content height - panel height

Scroll travel is bar height-slider height

Content travel = Content height*slider position/scroll travel

but you already know that?

so your maths need checking

Single Paradox
05-27-2006, 05:58 PM
Alright. Thanks I'll play with it.

vwphillips
05-27-2006, 07:11 PM
I will look(calulate) if you are still stuck

fleshth
05-27-2006, 07:13 PM
When dealing with things like this, i like to think of it in percents.
i.e. lets say the scroll bar is scrolled 50px top. the scroll track is 200px in height. 50/200 : thats 25%.
so now, you scroll the content. which has an offsetheight of say... 500. .25 * 500 = 125. so scroll the content top to -125. I hope this helps....

Single Paradox
05-28-2006, 12:01 AM
Thank you both. Vic if you wouldn't mind I would love to have another set of eyes on this. Feel free to take some ideas because I know you have a scrollbar too. I have an A in math at the moment, but I just can't grasp this for some reason. I am a visual guy. I really don't want someone to do all the work for me, but I'm loving the pointers. Thanks a lot Flesh and Vic!

Edit: Flesh - I will try working with percentages, and that really put it into perspective for me. The problem I had was that I started with a scrolltrack the height of the content area, therefore I just changed a bunch of stuff to fit the up and down arrows in.

vwphillips
05-28-2006, 12:53 AM
hmm

your content height is 2698px;
your content panel 400px;
so the max scroll 2298

never thougth of doing it this way.

cant see how you calculate the content height in your code but with this data
then the bar slider travel can be converted into content scroll.


function scrollBar(e){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
var overlapNum=(contd.scrollHeight/contd.clientHeight);
mosY=(IE)?event.clientY:e.pageY;
if(boolu==true&&(tempt+mosY-tmpY)>=bartop&&(tempt+mosY-tmpY)<=barheiht-parseInt(scrolld.style.height)){
scrolld.style.top=(tempt+mosY-tmpY)+"px";
// contd.scrollTop=(tempt+mosY-tmpY)*overlapNum-bartop*overlapNum;
}
else if(boolu==true&&(tempt+mosY-tmpY)<=bartop){
scrolld.style.top=bartop+"px";
// contd.scrollTop=0+"px";
}
else if(boolu==true&&(tempt+mosY-tmpY)>=barheiht-parseInt(scrolld.style.height)){
scrolld.style.top=barheiht-parseInt(scrolld.style.height);
// contd.scrollTop=(tempt+mosY-tmpY)*overlapNum-bartop*overlapNum;
}
var ratio=Math.max((scrolld.offsetTop-102)/286,.0001);
contd.scrollTop=2298*ratio;
}



I will find how best to obtain the 102,286 and 2298 tomorrow

but you are using 370(-102?=268) as the slider travel, I make the travel 286, as I make the top position 102, this is a big difference

Think I see whats going on, would be a lot easier if you put the slider in the bar,
At the moment while the style top is 30px; the offsetTop is 102, this I think because the parent is the BODY(margins?)

observation
seems akward to keep using gEBId when the objects could be linked by properties to start with.

Single Paradox
05-28-2006, 12:57 AM
Thank you Vic, I need to see how you are doing this. Lemme take a look at your code and maybe I can figure it out. Thanks again.

vwphillips
05-28-2006, 09:21 AM
<html>
<head>
<title>Scrollbar</title>
<script language="javascript" type="text/javascript">


//scrollbar
var barheiht=370;
var contentheiht=400;
var bartop=30;
//arrows
var increm=10;
var speed=10;



//No need to edit below here

var IE=(document.all)?true:false;
if(!IE){document.captureEvents(Event.MOUSEMOVE);}
var boolu=false;
var Timer;

function setScroll(){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
var overlapNum=(contd.scrollHeight/contd.clientHeight);

if(contd.scrollHeight>contd.clientHeight){
contd.scrollTop="0";
scrolld.style.height=barheiht/overlapNum;
}else{
scrolld.style.display="none";
bard.style.display="none";
}
}

function enableScroll(e){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');

if(boolu==true){
tempt=parseInt(scrolld.style.top);
tmpY=(IE)?event.clientY:e.pageY;
document.onmousemove=scrollBar;
}
}

function scrollBar(e){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
var overlapNum=(contd.scrollHeight/contd.clientHeight);
mosY=(IE)?event.clientY:e.pageY;
if(boolu==true&&(tempt+mosY-tmpY)>=bartop&&(tempt+mosY-tmpY)<=barheiht-parseInt(scrolld.style.height)){
scrolld.style.top=(tempt+mosY-tmpY)+"px";
// contd.scrollTop=(tempt+mosY-tmpY)*overlapNum-bartop*overlapNum;
}
else if(boolu==true&&(tempt+mosY-tmpY)<=bartop){
scrolld.style.top=bartop+"px";
// contd.scrollTop=0+"px";
}
else if(boolu==true&&(tempt+mosY-tmpY)>=barheiht-parseInt(scrolld.style.height)){
scrolld.style.top=barheiht-parseInt(scrolld.style.height);
// contd.scrollTop=(tempt+mosY-tmpY)*overlapNum-bartop*overlapNum;
}
document.Show.Show0.value=contd.scrollTop;
document.Show.Show1.value=scrolld.offsetTop;
var ratio=Math.max((scrolld.offsetTop-102)/286,.0001);
contd.scrollTop=2298*ratio;
}

function scrll(dir){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
var overlapNum=(contd.scrollHeight/contd.clientHeight);

contd.scrollTop+=(increm*dir);
scrolld.style.top=contd.scrollTop/overlapNum+bartop;
Timer=setTimeout(function(){scrll(dir)},speed);
}



document.onmousedown=enableScroll;
document.onmouseup=function(){boolu=false;clearTimeout(Timer);};
document.onblur=function(){boolu=false};
window.onload=setScroll;
</script>
<style>
#scrollbar{background:#999;height:60px;width:15px;float:left;position:relative;left:15px;z-index:1;}
#bar{background:#DDD;height:340px;width:15px;float:left;position:relative;top:30px;z-index:0;}
#content{background:#DDD;height:400px;width:400px;float:left;overflow:hidden;}
</style>
</head>
<body>
<br><BR><BR>
<div id="content">
<P>Once upon a midnight dreary, while I pondered, weak and weary,<BR>Over many a
quaint and curious volume of forgotten lore,<BR>While I nodded, nearly napping,
suddenly there came a tapping,<BR>As of someone gently rapping, rapping at my
chamber door.<BR>" 'Tis some visitor," I muttered, "tapping at my chamber
door;<BR>Only this, and nothing more."<BR></P>

<P>Ah, distinctly I remember, it was in the bleak December,<BR>And each separate
dying ember wrought its ghost upon the floor.<BR>Eagerly I wished the morrow;
vainly I had sought to borrow<BR>From my <A href="library.html">books</A>
surcease of sorrow, sorrow for the lost Lenore,.<BR>For the rare and radiant
maiden whom the angels name <A href="lenore.html">Lenore,</A><BR>Nameless here
forevermore.<BR></P>
<P>And the silken sad uncertain rustling of each purple curtain<BR>Thrilled
me---filled me with fantastic terrors never felt before;<BR>So that now, to
still the beating of my heart, I stood repeating,<BR>" 'Tis some visitor
entreating entrance at my chamber door,<BR>Some late visitor entreating entrance
at my chamber door.<BR>This it is, and nothing more."<BR></P>

<P>Presently my soul grew stronger; hesitating then no longer,<BR>"Sir," said I,
"or madam, truly your forgiveness I implore;<BR>But the fact is, I was napping,
and so gently you came rapping,<BR>And so faintly you came tapping, tapping at
my chamber door,<BR>That I scarce was sure I heard you." Here I opened wide the
door;---<BR>Darkness there, and nothing more.<BR></P>
<P>Deep into the darkness peering, long I stood there, wondering,
fearing<BR>Doubting, dreaming dreams no mortals ever dared to dream
before;<BR>But the silence was unbroken, and the stillness gave no token,<BR>And
the only word there spoken was the whispered word,<BR><A
href="lenore.html">Lenore?</A>, This I whispered, and an echo murmured back the
word,<BR>"Lenore!" Merely this, and nothing more.<BR></P>
<P>Back into the chamber turning, all my soul within me burning,<BR>Soon again I
heard a tapping, something louder than before,<BR>"Surely," said I, "surely,
that is something at my window lattice.<BR>Let me see, then, what thereat is,
and this mystery explore.<BR>Let my heart be still a moment, and this mystery
explore.<BR>" 'Tis the wind, and nothing more."<BR></P>

<P>Open here I flung the shutter, when, with many a flirt and flutter,<BR>In
there stepped a stately raven, of the saintly days of yore.<BR>Not the least
obeisance made he; not a minute stopped or stayed he;<BR>But with mien of lord
or lady, perched above my chamber door.<BR>Perched upon a bust of Pallas, just
above my chamber door,<BR>Perched, and sat, and nothing more.<BR></P>
<P>Then this ebony bird beguiling my sad fancy into smiling,<BR>By the grave and
stern decorum of the countenance it wore,<BR>"Though thy crest be shorn and
shaven thou," I said, "art sure no craven,<BR>Ghastly, grim, and ancient raven,
wandering from the nightly shore.<BR>Tell me what the lordly name is on the
Night's Plutonian shore."<BR>Quoth the raven, "Nevermore."<BR></P>
<P>Much I marvelled this ungainly fowl to hear discourse so plainly,<BR>Though
its answer little meaning, little relevancy bore;<BR>For we cannot help agreeing
that no living human being<BR>Ever yet was blessed with seeing bird above his
chamber door,<BR>Bird or beast upon the sculptured bust above his chamber
door,<BR>With such name as "Nevermore."<BR></P>

<P>But the raven, sitting lonely on that placid bust, spoke only<BR>That one
word, as if his soul in that one word he did outpour.<BR>Nothing further then he
uttered; not a feather then he fluttered;<BR>Till I scarcely more than muttered,
"Other friends have flown before;<BR>On the morrow he will leave me, as my hopes
have flown before."<BR>Then the bird said, "Nevermore."<BR></P>
<P>Startled at the stillness broken by reply so aptly spoken,<BR>"Doubtless,"
said I, "what it utters is its only stock and store,<BR>Caught from some unhappy
master, whom unmerciful disaster<BR>Followed fast and followed faster, till his
songs one burden bore,---<BR>Till the dirges of his hope that melancholy burden
bore<BR>Of "Never---nevermore."<BR></P>
<P>But the raven still beguiling all my sad soul into smiling,<BR>Straight I
wheeled a cushioned seat in front of bird, and bust and door;<BR>Then, upon the
velvet sinking, I betook myself to linking<BR>Fancy unto fancy, thinking what
this ominous bird of yore --<BR>What this grim, ungainly, ghastly, gaunt and
ominous bird of yore<BR> Meant in croaking
"Nevermore." </P>

<P>Thus I sat engaged in guessing, but no syllable expressing<BR>To the fowl,
whose fiery eyes now burned into my bosom's core;<BR>This and more I sat
divining, with my head at ease reclining<BR>On the cushion's velvet lining that
the lamplight gloated o'er,<BR>But whose velvet violet lining with the lamplight
gloating o'er<BR>She shall press, ah, nevermore!<BR></P>
<P>Then, methought, the air grew denser, perfumed from an unseen censer<BR>Swung
by seraphim whose footfalls tinkled on the tufted floor.<BR>"Wretch," I cried,
"thy God hath lent thee -- by these angels he hath<BR>Sent thee
respite---respite and nepenthe from thy memories of Lenore!<BR>Quaff, O quaff
this kind nepenthe, and forget this lost Lenore!"<BR>Quoth the raven,
"Nevermore!"<BR></P>
<P>"Prophet!" said I, "thing of evil!--prophet still, if bird or
devil!<BR>Whether tempter sent, or whether tempest tossed thee here
ashore,<BR>Desolate, yet all undaunted, on this desert land enchanted--<BR>On
this home by horror haunted--tell me truly, I implore:<BR>Is there--is there
balm in Gilead?--tell me--tell me I implore!"<BR>Quoth the raven,
"Nevermore."<BR></P>

<P>"Prophet!" said I, "thing of evil--prophet still, if bird or devil!<BR>By
that heaven that bends above us--by that God we both adore--<BR>Tell this soul
with sorrow laden, if, within the distant Aidenn,<BR>It shall clasp a sainted
maiden, whom the angels name Lenore---<BR>Clasp a rare and radiant maiden, whom
the angels name Lenore?<BR>Quoth the raven, "Nevermore."<BR></P>
<P>"Be that word our sign of parting, bird or fiend!" I shrieked,
upstarting--<BR>"Get thee back into the tempest and the Night's Plutonian
shore!<BR>Leave no black plume as a token of that lie thy soul hath
spoken!<BR>Leave my loneliness unbroken! -- quit the bust above my door!<BR>Take
thy beak from out my heart, and take thy form from off <A href="mydoor.html">my
door!</A>"<BR>Quoth the raven, "Nevermore."<BR></P>
<P>And the raven, never flitting, still is sitting, still is sitting<BR>On the
pallid bust of Pallas just above my chamber door;<BR>And his eyes have all the
seeming of a demon's that is dreaming.<BR>And the lamplight o'er him streaming
throws his shadow on the floor;<BR>And my soul from out that shadow that lies
floating on the floor<BR>Shall be lifted---nevermore!<BR></P>

</div>


<div onmousedown="boolu=true" unselectable="on" style="top:30px;" id="scrollbar"></div>
<div id="bar"></div>

<br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div>
<a href="http://en.wikipedia.org/wiki/The_Raven">The Raven</a> by <cite><a href="http://en.wikipedia.org/wiki/Edgar_Allen_Poe">Edgar Allen Poe</a></cite>
</div>
<div style="background:#999;height:15px;width:15px;position:absolute;top:72px;left:425px;" onmousedown="scrll(-1);" onmouseup="clearTimeout(Timer);"></div>
<div style="background:#999;height:15px;width:15px;position:absolute;top:453px;left:425px;" onmousedown="scrll(1);" onmouseup="clearTimeout(Timer);"></div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:0px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 >
</form>


</body>
</html>

vwphillips
05-28-2006, 10:07 AM
this shows what I meen by attaching properties, so much easier?
much more can be done but I will let you consider this before I complete


<html>
<head>
<title>Scrollbar</title>
<script language="javascript" type="text/javascript">


//scrollbar
var barheiht=370;
var contentheiht=400;
var bartop=30;
//arrows
var increm=10;
var speed=10;



//No need to edit below here

var IE=(document.all)?true:false;
if(!IE){document.captureEvents(Event.MOUSEMOVE);}
var boolu=false;
var Timer;

function setScroll(){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
var overlapNum=(contd.scrollHeight/contd.clientHeight);

if(contd.scrollHeight>contd.clientHeight){
contd.scrollTop="0";
scrolld.style.height=barheiht/overlapNum;
}else{
scrolld.style.display="none";
bard.style.display="none";
}
}


function enableScroll(e){
if(!boolu){ return; }
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
if (!scrolld.data){ scrolld.data=[scrolld.offsetTop,bard.offsetHeight-scrolld.offsetHeight,contd,contd.scrollHeight-contd.offsetHeight ]; }
tempt=parseInt(scrolld.style.top);
tmpY=(IE)?event.clientY:e.pageY;
document.onmousemove=scrollBar;
}

function scrollBar(e){
if (!boolu){ return; }
var scrolld=document.getElementById('scrollbar');
mosY=(IE)?event.clientY:e.pageY;
if((tempt+mosY-tmpY)>=bartop&&(tempt+mosY-tmpY)<=barheiht-parseInt(scrolld.style.height)){
scrolld.style.top=(tempt+mosY-tmpY)+"px";
}
else if((tempt+mosY-tmpY)<=bartop){
scrolld.style.top=bartop+"px";
}
else if((tempt+mosY-tmpY)>=barheiht-parseInt(scrolld.style.height)){
scrolld.style.top=barheiht-parseInt(scrolld.style.height);
}
var ratio=Math.max((scrolld.offsetTop-scrolld.data[0])/scrolld.data[1],.0001);
scrolld.data[2].scrollTop=scrolld.data[3]*ratio;
}

function scrll(dir){
var bard=document.getElementById('bar');
var contd=document.getElementById('content');
var scrolld=document.getElementById('scrollbar');
var overlapNum=(contd.scrollHeight/contd.clientHeight);

contd.scrollTop+=(increm*dir);
scrolld.style.top=contd.scrollTop/overlapNum+bartop;
Timer=setTimeout(function(){scrll(dir)},speed);
}



document.onmousedown=enableScroll;
document.onmouseup=function(){boolu=false;clearTimeout(Timer);};
document.onblur=function(){boolu=false};
window.onload=setScroll;
</script>
<style>
#scrollbar{background:#999;height:60px;width:15px;float:left;position:relative;left:15px;z-index:1;}
#bar{background:#DDD;height:340px;width:15px;float:left;position:relative;top:30px;z-index:0;}
#content{background:#DDD;height:400px;width:400px;float:left;overflow:hidden;}
</style>
</head>
<body>
<br><BR><BR>
<div id="content">
<P>Once upon a midnight dreary, while I pondered, weak and weary,<BR>Over many a
quaint and curious volume of forgotten lore,<BR>While I nodded, nearly napping,
suddenly there came a tapping,<BR>As of someone gently rapping, rapping at my
chamber door.<BR>" 'Tis some visitor," I muttered, "tapping at my chamber
door;<BR>Only this, and nothing more."<BR></P>

<P>Ah, distinctly I remember, it was in the bleak December,<BR>And each separate
dying ember wrought its ghost upon the floor.<BR>Eagerly I wished the morrow;
vainly I had sought to borrow<BR>From my <A href="library.html">books</A>
surcease of sorrow, sorrow for the lost Lenore,.<BR>For the rare and radiant
maiden whom the angels name <A href="lenore.html">Lenore,</A><BR>Nameless here
forevermore.<BR></P>
<P>And the silken sad uncertain rustling of each purple curtain<BR>Thrilled
me---filled me with fantastic terrors never felt before;<BR>So that now, to
still the beating of my heart, I stood repeating,<BR>" 'Tis some visitor
entreating entrance at my chamber door,<BR>Some late visitor entreating entrance
at my chamber door.<BR>This it is, and nothing more."<BR></P>

<P>Presently my soul grew stronger; hesitating then no longer,<BR>"Sir," said I,
"or madam, truly your forgiveness I implore;<BR>But the fact is, I was napping,
and so gently you came rapping,<BR>And so faintly you came tapping, tapping at
my chamber door,<BR>That I scarce was sure I heard you." Here I opened wide the
door;---<BR>Darkness there, and nothing more.<BR></P>
<P>Deep into the darkness peering, long I stood there, wondering,
fearing<BR>Doubting, dreaming dreams no mortals ever dared to dream
before;<BR>But the silence was unbroken, and the stillness gave no token,<BR>And
the only word there spoken was the whispered word,<BR><A
href="lenore.html">Lenore?</A>, This I whispered, and an echo murmured back the
word,<BR>"Lenore!" Merely this, and nothing more.<BR></P>
<P>Back into the chamber turning, all my soul within me burning,<BR>Soon again I
heard a tapping, something louder than before,<BR>"Surely," said I, "surely,
that is something at my window lattice.<BR>Let me see, then, what thereat is,
and this mystery explore.<BR>Let my heart be still a moment, and this mystery
explore.<BR>" 'Tis the wind, and nothing more."<BR></P>

<P>Open here I flung the shutter, when, with many a flirt and flutter,<BR>In
there stepped a stately raven, of the saintly days of yore.<BR>Not the least
obeisance made he; not a minute stopped or stayed he;<BR>But with mien of lord
or lady, perched above my chamber door.<BR>Perched upon a bust of Pallas, just
above my chamber door,<BR>Perched, and sat, and nothing more.<BR></P>
<P>Then this ebony bird beguiling my sad fancy into smiling,<BR>By the grave and
stern decorum of the countenance it wore,<BR>"Though thy crest be shorn and
shaven thou," I said, "art sure no craven,<BR>Ghastly, grim, and ancient raven,
wandering from the nightly shore.<BR>Tell me what the lordly name is on the
Night's Plutonian shore."<BR>Quoth the raven, "Nevermore."<BR></P>
<P>Much I marvelled this ungainly fowl to hear discourse so plainly,<BR>Though
its answer little meaning, little relevancy bore;<BR>For we cannot help agreeing
that no living human being<BR>Ever yet was blessed with seeing bird above his
chamber door,<BR>Bird or beast upon the sculptured bust above his chamber
door,<BR>With such name as "Nevermore."<BR></P>

<P>But the raven, sitting lonely on that placid bust, spoke only<BR>That one
word, as if his soul in that one word he did outpour.<BR>Nothing further then he
uttered; not a feather then he fluttered;<BR>Till I scarcely more than muttered,
"Other friends have flown before;<BR>On the morrow he will leave me, as my hopes
have flown before."<BR>Then the bird said, "Nevermore."<BR></P>
<P>Startled at the stillness broken by reply so aptly spoken,<BR>"Doubtless,"
said I, "what it utters is its only stock and store,<BR>Caught from some unhappy
master, whom unmerciful disaster<BR>Followed fast and followed faster, till his
songs one burden bore,---<BR>Till the dirges of his hope that melancholy burden
bore<BR>Of "Never---nevermore."<BR></P>
<P>But the raven still beguiling all my sad soul into smiling,<BR>Straight I
wheeled a cushioned seat in front of bird, and bust and door;<BR>Then, upon the
velvet sinking, I betook myself to linking<BR>Fancy unto fancy, thinking what
this ominous bird of yore --<BR>What this grim, ungainly, ghastly, gaunt and
ominous bird of yore<BR> Meant in croaking
"Nevermore." </P>

<P>Thus I sat engaged in guessing, but no syllable expressing<BR>To the fowl,
whose fiery eyes now burned into my bosom's core;<BR>This and more I sat
divining, with my head at ease reclining<BR>On the cushion's velvet lining that
the lamplight gloated o'er,<BR>But whose velvet violet lining with the lamplight
gloating o'er<BR>She shall press, ah, nevermore!<BR></P>
<P>Then, methought, the air grew denser, perfumed from an unseen censer<BR>Swung
by seraphim whose footfalls tinkled on the tufted floor.<BR>"Wretch," I cried,
"thy God hath lent thee -- by these angels he hath<BR>Sent thee
respite---respite and nepenthe from thy memories of Lenore!<BR>Quaff, O quaff
this kind nepenthe, and forget this lost Lenore!"<BR>Quoth the raven,
"Nevermore!"<BR></P>
<P>"Prophet!" said I, "thing of evil!--prophet still, if bird or
devil!<BR>Whether tempter sent, or whether tempest tossed thee here
ashore,<BR>Desolate, yet all undaunted, on this desert land enchanted--<BR>On
this home by horror haunted--tell me truly, I implore:<BR>Is there--is there
balm in Gilead?--tell me--tell me I implore!"<BR>Quoth the raven,
"Nevermore."<BR></P>

<P>"Prophet!" said I, "thing of evil--prophet still, if bird or devil!<BR>By
that heaven that bends above us--by that God we both adore--<BR>Tell this soul
with sorrow laden, if, within the distant Aidenn,<BR>It shall clasp a sainted
maiden, whom the angels name Lenore---<BR>Clasp a rare and radiant maiden, whom
the angels name Lenore?<BR>Quoth the raven, "Nevermore."<BR></P>
<P>"Be that word our sign of parting, bird or fiend!" I shrieked,
upstarting--<BR>"Get thee back into the tempest and the Night's Plutonian
shore!<BR>Leave no black plume as a token of that lie thy soul hath
spoken!<BR>Leave my loneliness unbroken! -- quit the bust above my door!<BR>Take
thy beak from out my heart, and take thy form from off <A href="mydoor.html">my
door!</A>"<BR>Quoth the raven, "Nevermore."<BR></P>
<P>And the raven, never flitting, still is sitting, still is sitting<BR>On the
pallid bust of Pallas just above my chamber door;<BR>And his eyes have all the
seeming of a demon's that is dreaming.<BR>And the lamplight o'er him streaming
throws his shadow on the floor;<BR>And my soul from out that shadow that lies
floating on the floor<BR>Shall be lifted---nevermore!<BR></P>

</div>


<div onmousedown="boolu=true" unselectable="on" style="top:30px;" id="scrollbar" style="background-color:blue;"></div>
<div id="bar" style="background-color:green;" ></div>

<br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div>
<a href="http://en.wikipedia.org/wiki/The_Raven">The Raven</a> by <cite><a href="http://en.wikipedia.org/wiki/Edgar_Allen_Poe">Edgar Allen Poe</a></cite>
</div>
<div style="background:#999;height:15px;width:15px;position:absolute;top:72px;left:425px;" onmousedown="scrll(-1);" onmouseup="clearTimeout(Timer);"></div>
<div style="background:#999;height:15px;width:15px;position:absolute;top:453px;left:425px;" onmousedown="scrll(1);" onmouseup="clearTimeout(Timer);"></div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:0px;left:0px;" >
<input size=50 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 >
</form>


</body>
</html>

vwphillips
05-28-2006, 01:10 PM
DONT look at this



<html>
<head>
<title>Scrollbar</title>
<script language="javascript" type="text/javascript">


//scrollbar
var barheiht=370;
//arrows
var speed=10;



//No need to edit below here

var IE=(document.all)?true:false;
if(!IE){document.captureEvents(Event.MOUSEMOVE);}

var boolu;
var Timer;

function zxcScrollInit(){
var zxcargs=zxcScrollInit.arguments;
var scrolld=document.getElementById(zxcargs[0]);
var bard=scrolld.parentNode;
var contd=document.getElementById(zxcargs[1]);
if(contd.scrollHeight>contd.clientHeight){
contd.scrollTop="0";
scrolld.style.height=barheiht/(contd.scrollHeight/contd.clientHeight);
}
else {
scrolld.style.display="none";
bard.style.display="none";
}
if (!scrolld.data){ scrolld.data=[parseInt(scrolld.style.top),bard.offsetHeight-parseInt(scrolld.style.height),contd,contd.scrollHeight-contd.offsetHeight ]; }
}

function zxcSrtScroll(zxcevt,zxcobj){
boolu=zxcobj;
zxcobj.data[0]=parseInt(zxcobj.style.top);
}

function enableScroll(e){
if(!boolu){ return; }
tmpY=(IE)?event.clientY:e.pageY;
}

function scrollBar(e){
if (!boolu){ return; }
mosY=(IE)?event.clientY:e.pageY;
document.Show.Show0.value=boolu.data;
zxcpos=mosY-tmpY;
if (boolu.data[0]+zxcpos>0&&boolu.data[0]+zxcpos<boolu.data[1]){
boolu.style.top=(boolu.data[0]+zxcpos)+'px';
}
zxcScrollContent(boolu,boolu.data[0],zxcpos);
}

function zxcScrollContent(zxcobj,zxcdata,zxcpos){
if (zxcdata+zxcpos>0&&zxcdata+zxcpos<zxcobj.data[1]){
zxcobj.style.top=(zxcdata+zxcpos)+'px';
}
var zxcratio=Math.max((parseInt(zxcobj.style.top))/zxcobj.data[1],.0001);
zxcobj.data[2].scrollTop=zxcobj.data[3]*zxcratio;
if (zxcobj.data[2].scrollTop<10){ zxcobj.data[2].scrollTop=0; }
}

function scrll(zxcobj,dir){
var scrolld=document.getElementById(zxcobj);
var zxcpos=parseInt(scrolld.style.top)+dir;
zxcScrollContent(scrolld,0,zxcpos)
Timer=setTimeout(function(){scrll(zxcobj,dir)},speed);
}



document.onmousemove=scrollBar;
document.onmousedown=enableScroll;
document.onmouseup=function(){
boolu=false;
clearTimeout(Timer);
};
document.onblur=function(){boolu=false};

</script>

<style>
#scrollbar{background:#999;height:60px;width:15px;float:left;position:relative;left:15px;z-index:1;}
#bar{background:#DDD;height:340px;width:15px;float:left;position:relative;top:30px;z-index:0;}
#content{background:#DDD;height:400px;width:400px;float:left;overflow:hidden;}
#scrollbar1{background:#999;height:60px;width:15px;float:left;position:relative;left:15px;z-index:1;}
#bar1{position:absolute;left:20px;top:500px;background:#DDD;height:340px;width:15px;z-index:0;}
#content1{position:absolute;background:#DDD;height:400px;width:400px;left:100px;top:500px;overflow:h idden;}
</style>
</head>
<body onload="zxcScrollInit('scrollbar','content');zxcScrollInit('scrollbar1','content1')">
<br><BR><BR>
<div id="content">
<P>Once upon a midnight dreary, while I pondered, weak and weary,<BR>Over many a
quaint and curious volume of forgotten lore,<BR>While I nodded, nearly napping,
suddenly there came a tapping,<BR>As of someone gently rapping, rapping at my
chamber door.<BR>" 'Tis some visitor," I muttered, "tapping at my chamber
door;<BR>Only this, and nothing more."<BR></P>

<P>Ah, distinctly I remember, it was in the bleak December,<BR>And each separate
dying ember wrought its ghost upon the floor.<BR>Eagerly I wished the morrow;
vainly I had sought to borrow<BR>From my <A href="library.html">books</A>
surcease of sorrow, sorrow for the lost Lenore,.<BR>For the rare and radiant
maiden whom the angels name <A href="lenore.html">Lenore,</A><BR>Nameless here
forevermore.<BR></P>
<P>And the silken sad uncertain rustling of each purple curtain<BR>Thrilled
me---filled me with fantastic terrors never felt before;<BR>So that now, to
still the beating of my heart, I stood repeating,<BR>" 'Tis some visitor
entreating entrance at my chamber door,<BR>Some late visitor entreating entrance
at my chamber door.<BR>This it is, and nothing more."<BR></P>

<P>Presently my soul grew stronger; hesitating then no longer,<BR>"Sir," said I,
"or madam, truly your forgiveness I implore;<BR>But the fact is, I was napping,
and so gently you came rapping,<BR>And so faintly you came tapping, tapping at
my chamber door,<BR>That I scarce was sure I heard you." Here I opened wide the
door;---<BR>Darkness there, and nothing more.<BR></P>
<P>Deep into the darkness peering, long I stood there, wondering,
fearing<BR>Doubting, dreaming dreams no mortals ever dared to dream
before;<BR>But the silence was unbroken, and the stillness gave no token,<BR>And
the only word there spoken was the whispered word,<BR><A
href="lenore.html">Lenore?</A>, This I whispered, and an echo murmured back the
word,<BR>"Lenore!" Merely this, and nothing more.<BR></P>
<P>Back into the chamber turning, all my soul within me burning,<BR>Soon again I
heard a tapping, something louder than before,<BR>"Surely," said I, "surely,
that is something at my window lattice.<BR>Let me see, then, what thereat is,
and this mystery explore.<BR>Let my heart be still a moment, and this mystery
explore.<BR>" 'Tis the wind, and nothing more."<BR></P>

<P>Open here I flung the shutter, when, with many a flirt and flutter,<BR>In
there stepped a stately raven, of the saintly days of yore.<BR>Not the least
obeisance made he; not a minute stopped or stayed he;<BR>But with mien of lord
or lady, perched above my chamber door.<BR>Perched upon a bust of Pallas, just
above my chamber door,<BR>Perched, and sat, and nothing more.<BR></P>
<P>Then this ebony bird beguiling my sad fancy into smiling,<BR>By the grave and
stern decorum of the countenance it wore,<BR>"Though thy crest be shorn and
shaven thou," I said, "art sure no craven,<BR>Ghastly, grim, and ancient raven,
wandering from the nightly shore.<BR>Tell me what the lordly name is on the
Night's Plutonian shore."<BR>Quoth the raven, "Nevermore."<BR></P>
<P>Much I marvelled this ungainly fowl to hear discourse so plainly,<BR>Though
its answer little meaning, little relevancy bore;<BR>For we cannot help agreeing
that no living human being<BR>Ever yet was blessed with seeing bird above his
chamber door,<BR>Bird or beast upon the sculptured bust above his chamber
door,<BR>With such name as "Nevermore."<BR></P>

<P>But the raven, sitting lonely on that placid bust, spoke only<BR>That one
word, as if his soul in that one word he did outpour.<BR>Nothing further then he
uttered; not a feather then he fluttered;<BR>Till I scarcely more than muttered,
"Other friends have flown before;<BR>On the morrow he will leave me, as my hopes
have flown before."<BR>Then the bird said, "Nevermore."<BR></P>
<P>Startled at the stillness broken by reply so aptly spoken,<BR>"Doubtless,"
said I, "what it utters is its only stock and store,<BR>Caught from some unhappy
master, whom unmerciful disaster<BR>Followed fast and followed faster, till his
songs one burden bore,---<BR>Till the dirges of his hope that melancholy burden
bore<BR>Of "Never---nevermore."<BR></P>
<P>But the raven still beguiling all my sad soul into smiling,<BR>Straight I
wheeled a cushioned seat in front of bird, and bust and door;<BR>Then, upon the
velvet sinking, I betook myself to linking<BR>Fancy unto fancy, thinking what
this ominous bird of yore --<BR>What this grim, ungainly, ghastly, gaunt and
ominous bird of yore<BR> Meant in croaking
"Nevermore." </P>

<P>Thus I sat engaged in guessing, but no syllable expressing<BR>To the fowl,
whose fiery eyes now burned into my bosom's core;<BR>This and more I sat
divining, with my head at ease reclining<BR>On the cushion's velvet lining that
the lamplight gloated o'er,<BR>But whose velvet violet lining with the lamplight
gloating o'er<BR>She shall press, ah, nevermore!<BR></P>
<P>Then, methought, the air grew denser, perfumed from an unseen censer<BR>Swung
by seraphim whose footfalls tinkled on the tufted floor.<BR>"Wretch," I cried,
"thy God hath lent thee -- by these angels he hath<BR>Sent thee
respite---respite and nepenthe from thy memories of Lenore!<BR>Quaff, O quaff
this kind nepenthe, and forget this lost Lenore!"<BR>Quoth the raven,
"Nevermore!"<BR></P>
<P>"Prophet!" said I, "thing of evil!--prophet still, if bird or
devil!<BR>Whether tempter sent, or whether tempest tossed thee here
ashore,<BR>Desolate, yet all undaunted, on this desert land enchanted--<BR>On
this home by horror haunted--tell me truly, I implore:<BR>Is there--is there
balm in Gilead?--tell me--tell me I implore!"<BR>Quoth the raven,
"Nevermore."<BR></P>

<P>"Prophet!" said I, "thing of evil--prophet still, if bird or devil!<BR>By
that heaven that bends above us--by that God we both adore--<BR>Tell this soul
with sorrow laden, if, within the distant Aidenn,<BR>It shall clasp a sainted
maiden, whom the angels name Lenore---<BR>Clasp a rare and radiant maiden, whom
the angels name Lenore?<BR>Quoth the raven, "Nevermore."<BR></P>
<P>"Be that word our sign of parting, bird or fiend!" I shrieked,
upstarting--<BR>"Get thee back into the tempest and the Night's Plutonian
shore!<BR>Leave no black plume as a token of that lie thy soul hath
spoken!<BR>Leave my loneliness unbroken! -- quit the bust above my door!<BR>Take
thy beak from out my heart, and take thy form from off <A href="mydoor.html">my
door!</A>"<BR>Quoth the raven, "Nevermore."<BR></P>
<P>And the raven, never flitting, still is sitting, still is sitting<BR>On the
pallid bust of Pallas just above my chamber door;<BR>And his eyes have all the
seeming of a demon's that is dreaming.<BR>And the lamplight o'er him streaming
throws his shadow on the floor;<BR>And my soul from out that shadow that lies
floating on the floor<BR>Shall be lifted---nevermore!<BR></P><br>

</div>

<div id="bar" style="left:15px;background-color:green;" >
<div onmousedown="zxcSrtScroll(event,this);" unselectable="on" id="scrollbar" style="left:0px;top:0px;background-color:blue;"></div>
</div>


<div id="content1">

<P>Ah, distinctly I remember, it was in the bleak December,<BR>And each separate
dying ember wrought its ghost upon the floor.<BR>Eagerly I wished the morrow;
vainly I had sought to borrow<BR>From my <A href="library.html">books</A>
surcease of sorrow, sorrow for the lost Lenore,.<BR>For the rare and radiant
maiden whom the angels name <A href="lenore.html">Lenore,</A><BR>Nameless here
forevermore.<BR></P>
<P>And the silken sad uncertain rustling of each purple curtain<BR>Thrilled
me---filled me with fantastic terrors never felt before;<BR>So that now, to
still the beating of my heart, I stood repeating,<BR>" 'Tis some visitor
entreating entrance at my chamber door,<BR>Some late visitor entreating entrance
at my chamber door.<BR>This it is, and nothing more."<BR></P>

<P>Presently my soul grew stronger; hesitating then no longer,<BR>"Sir," said I,
"or madam, truly your forgiveness I implore;<BR>But the fact is, I was napping,
and so gently you came rapping,<BR>And so faintly you came tapping, tapping at
my chamber door,<BR>That I scarce was sure I heard you." Here I opened wide the
door;---<BR>Darkness there, and nothing more.<BR></P>
<P>Deep into the darkness peering, long I stood there, wondering,
fearing<BR>Doubting, dreaming dreams no mortals ever dared to dream
before;<BR>But the silence was unbroken, and the stillness gave no token,<BR>And
the only word there spoken was the whispered word,<BR><A
href="lenore.html">Lenore?</A>, This I whispered, and an echo murmured back the
word,<BR>"Lenore!" Merely this, and nothing more.<BR></P>
<P>Back into the chamber turning, all my soul within me burning,<BR>Soon again I
heard a tapping, something louder than before,<BR>"Surely," said I, "surely,
that is something at my window lattice.<BR>Let me see, then, what thereat is,
and this mystery explore.<BR>Let my heart be still a moment, and this mystery
explore.<BR>" 'Tis the wind, and nothing more."<BR></P>



<br>

</div>
<div id="bar1" style="left:15px;background-color:green;" >
<div onmousedown="zxcSrtScroll(event,this);" unselectable="on" id="scrollbar1" style="left:0px;top:0px;background-color:blue;"></div>
</div>

<br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<br><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div>
<a href="http://en.wikipedia.org/wiki/The_Raven">The Raven</a> by <cite><a href="http://en.wikipedia.org/wiki/Edgar_Allen_Poe">Edgar Allen Poe</a></cite>
</div>
<div style="background:#999;height:15px;width:15px;position:absolute;top:72px;left:425px;" onmousedown="scrll('scrollbar',-1);" onmouseup="clearTimeout(Timer);"></div>
<div style="background:#999;height:15px;width:15px;position:absolute;top:453px;left:425px;" onmousedown="scrll('scrollbar',1);" onmouseup="clearTimeout(Timer);"></div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:0px;left:0px;" >
<input size=50 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 >
</form>


</body>
</html>

Single Paradox
05-28-2006, 07:13 PM
Thank you Vic. I still notice some bugs but at least I can see what is going on. I will play with this today. Thank you very much for all your time :)

Single Paradox
05-29-2006, 07:49 PM
observation
seems akward to keep using gEBId when the objects could be linked by properties to start with.



I am working on the bar right now, I was just curious what you meant by this?

vwphillips
05-29-2006, 08:58 PM
as previously posted


if (!scrolld.data){ scrolld.data=[parseInt(scrolld.style.top),bard.offsetHeight-parseInt(scrolld.style.height),contd,contd.scrollHeight-contd.offsetHeight ]; }


scrolld.data is a property of the slider scrolld

field 2 is the cotent object

no need to gEBId that object any more

when clicking the slider you can use the event object and get both the slider and content object

now if you make the slider object a property of the buttons say .slider

buttonobject.slider is the slider object

and buttonobject.slider.data[2] is the content object



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum