Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Imitating scrollbar buttons - Expert help please?

Status
Not open for further replies.
theniteowl

theniteowl

Programmer
May 24, 2005
1,975
US
Hi,
I am trying to imitate scrollbar buttons in Javascript and have run into an issue.

I am using onmousedown to first alter the button displayed to show a pressed image, then triggering an interval that will cause repeated scrolling of the display window in case the arrow button is held down.
I then use onmouseup to cancel the interval and stop the scrolling and toggle the button display to a non-pressed version.

The issue comes from the slow speed at which click events are registered. If someone is clicking rapidly on the button I want to screen to scroll rapidly as well, just as a normal Windows application would respond. The onmouse or onclick events are too slow to keep up with a burst of mouse clicks.
I tried using an ondblclick event to fire off a double set of scroll commands and that works well but then I run into problems with toggling of the up/down state of the button.

Since the ondblclick event inherantly means mousdown/click/mouseup/mousedown/click/mouseup the other events are firing as well and at some point portion of code that brings the button back UP is swamped so that a rapid double click always results in the button remaining in the DOWN position.

Is my approach bad? Is there a way to do this successfully?
I need the speed of double clicks and the repeats of holding down the mouse button. I would like to keep the 3d button action as well but so far cannot find a way to do it.

NOTE: A normal scrollbar will not work simply because I need to detect when the top or bottom of the data has been reached and then if the arrow is clicked again it will trigger an event to grab more data. Since I cannot detect button presses of a DHTML scrollbar I have no event trigger to grab more data when needed.
Using button objects let's me know when a button is clicked and I can check the scroll position of the window and the two pieces of data let me know when to trigger the additional event.

Anyone have a better approach?
I can post my code but I have to clean it up and shorten it to give a good sample.

Thanks.
 
Sort by date Sort by votes
Try this.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

scrollLeft = 100
scrollTop = 50
scrollNestLeft = 0
scrollNestTop = 0
scrollWidth = 300
scrollHeight = 280
scrollBarWidth = 19
scrollBoxHeight = 23
scrollArrowHeight = 15
scrollMarginLeft = 10
scrollMarginRight = 10
scrollMarginTop = 10
scrollMarginBottom = 10
scrollBorder = 2
scrollBorderColor = "#F47A00"
scrollBarColor = "#FFD1BB"
scrollBoxColor = "none"
scrollArrowColor = "#F47A00"
scrollTextBGColor = "none"
scrollFirstPage = "testo.html"

scrollLoaded = 0
scrollActive = 0
scrollArrowActive = 0
scrollDownActive = 0
scrollYold = 0
scrollClickY = 0
scrollBarHeight = scrollHeight-2*scrollBorder-scrollBoxHeight-scrollArrowHeight

function init() {
// attemped bug fix for IE
if (ie) document.all["scrollBoxDiv"].onmouseout = mouseUp
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
if ((n && e.which == 1) || ie) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
scrollMouseDown(x,y)
}
}

function mouseMove(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
if (scrollLoaded && scrollActive) {
scrollMouseMove(x,y)
}
if (scrollActive || scrollArrowActive) return false
}

function mouseUp(e) {
scrollActive = 0
scrollArrowActive = 0
scrollDownActive = 0
}

function scrollMouseDown(x,y) {
if (scrollLoaded && scrollFactor<0 && x>=scrollLeft+scrollNestLeft+scrollWidth-scrollBarWidth-scrollBorder && x<(scrollLeft+scrollNestLeft)+scrollWidth-scrollBorder && y>=(scrollTop+scrollNestTop)+scrollBorder && y<(scrollTop+scrollNestTop)+scrollHeight-scrollBorder) {
if (y>=scrollTop+scrollNestTop+scrollBorder+scrollbox.y && y<(scrollTop+scrollNestTop)+scrollBorder+scrollBoxHeight+scrollbox.y) { // scrollbox
scrollClickY = y-scrollbox.y
scrollYold = y
scrollActive = 1
}
else if (y<scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight) { // up arrow
scrollArrowActive = 1
scrollArrowDir = 1
scrollArrowSlide()
}
else if (y>=scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight) { // down arrow
scrollArrowActive = 1
scrollArrowDir = -1
scrollArrowSlide()
}
else {
if (y<=scrollTop+scrollNestTop+scrollBorder+scrollArrowHeight+scrollBoxHeight/2) { // jump top
scrollbox.moveTo(0,scrollArrowHeight)
}
else if (y>scrollTop+scrollNestTop+scrollHeight-scrollBorder-scrollArrowHeight-scrollBoxHeight/2) { // jump bottom
scrollbox.moveTo(0,scrollBarHeight)
}
else { // jump middle
scrollbox.moveTo(0,y-scrollTop-scrollNestTop-scrollBorder-scrollBoxHeight/2)
}
scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)
scrollClickY = y-scrollbox.y
scrollYold = y
scrollActive = 1
}
}
}

function scrollMouseMove(x,y) {
var diff = y-scrollYold
if ((scrollbox.y>scrollArrowHeight && scrollbox.y<scrollBarHeight) || (scrollbox.y==scrollArrowHeight && diff>=0) || (scrollbox.y==scrollBarHeight && diff<=0)) {
if ((scrollbox.y>scrollArrowHeight && scrollbox.y+diff<scrollArrowHeight) || (scrollbox.y<scrollBarHeight && scrollbox.y+diff>scrollBarHeight)) {
if (scrollbox.y+diff<scrollArrowHeight) scrollbox.moveTo(0,scrollArrowHeight)
else if (scrollbox.y+diff>scrollBarHeight) scrollbox.moveTo(0,scrollBarHeight)
scrollYold = scrollbox.y+scrollClickY
}
else {
scrollbox.moveTo(0,y-scrollClickY)
scrollYold = y
}
scrolltext.moveTo(scrolltext.x,scrollFactor*(scrollbox.y-scrollArrowHeight)+scrollMarginTop)
}
}

function scrollArrowSlide() {
if (scrollArrowActive) {
if ((scrollArrowDir==1 && scrolltext.y<scrollMarginTop-5) || (scrollArrowDir==-1 && scrolltext.y>-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight-5))) {
scrolltext.moveBy(0,scrollArrowDir*5)
scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)
setTimeout("scrollArrowSlide()",20)
}
else {
if (scrollArrowDir==1) scrolltext.moveTo(scrolltext.x,scrollMarginTop)
else if (scrollArrowDir==-1) scrolltext.moveTo(scrolltext.x,-(scrolltext.height+2*scrollBorder+scrollMarginBottom-scrollHeight))
scrollbox.moveTo(0,(scrolltext.y-scrollMarginTop)/scrollFactor+scrollArrowHeight)
}
}
}

function loadSource(page) {
scrollLoaded = 0
if (n) document.scrollWindow.document.scrollTextWindow.src = page
if (ie) parent.scrollTextFrame.document.location = page
}

function scrollResize() {
scrolltext = new dynLayer("scrollTextDiv","scrollWindow.document.scrollTextWindow","scrollTextFrame")
scrollbox = new dynLayer("scrollBoxDiv","scrollWindow.document.scrollBar")
scrollFactor = -(scrolltext.height+scrollMarginTop+scrollMarginBottom-scrollHeight+2*scrollBorder)/(scrollBarHeight-scrollArrowHeight)
scrollbox.moveTo(0,scrollArrowHeight)
scrollLoaded = 1
}

function dynLayer(id,nestref,frameref) {
if (n) {
if (nestref) {
this.css = eval("document." + nestref + ".document." + id)
this.ref = eval("document." + nestref + ".document." + id + ".document")
}
else {
this.css = document.layers[id]
this.ref = document.layers[id].document
}
this.x = this.css.left
this.y = this.css.top
this.width = this.ref.width
this.height = this.ref.height
}
else if (ie) {
if (frameref) {
this.css = parent.frames[frameref].document.all[id].style
this.ref = parent.frames[frameref].document
}
else {
this.css = document.all[id].style
this.ref = document
}
this.x = this.css.pixelLeft
this.y = this.css.pixelTop
this.width = this.ref.all[id].offsetWidth
this.height = this.ref.all[id].offsetHeight
}
this.obj = id + "Object"
eval(this.obj + "=this")
this.moveBy = dynLayerMoveBy
this.moveTo = dynLayerMoveTo
this.show = dynLayerShow
this.hide = dynLayerHide
}
function dynLayerMoveBy(x,y) {
this.x += x
this.css.left = this.x
this.y += y
this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
this.x = x
this.css.left = this.x
this.y = y
this.css.top = this.y
}
function dynLayerShow() {
if (n) this.css.visibility = "show"
else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
if (n) this.css.visibility = "hide"
else if (ie) this.css.visibility = "hidden"
}

//-->
</SCRIPT>

<TITLE>Dynamic HTML - demostración práctica </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onLoad="init()" background="sfondo.jpg">

<SCRIPT LANGUAGE="JavaScript">
document.writeln('<STYLE TYPE="text/css">');
document.writeln('<\!--');
document.writeln('#scrollWindow {position:absolute; left:'+scrollLeft+'; top:'+scrollTop+'; width:'+scrollWidth+'; height:'+scrollHeight+'; clip:rect(0,'+scrollWidth+','+scrollHeight+',0);}');
document.writeln('#scrollBorderTop {position:absolute; left:0; top:0; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderBottom {position:absolute; left:0; top:'+(scrollHeight-scrollBorder)+'; width:'+scrollWidth+'; height:'+scrollBorder+'; clip:rect(0,'+scrollWidth+','+scrollBorder+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderLeft {position:absolute; left:0; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
document.writeln('#scrollBorderRight {position:absolute; left:'+(scrollWidth-scrollBorder)+'; top:0; width:'+scrollBorder+'; height:'+scrollHeight+'; clip:rect(0,'+scrollBorder+','+scrollHeight+',0); background-color:'+scrollBorderColor+'; layer-background-color:'+scrollBorderColor+';}');
if (ie) document.writeln('#scrollTextWindow {position:absolute; left:'+scrollBorder+'; top:'+scrollBorder+'; width:'+(scrollWidth-scrollBarWidth-2*scrollBorder)+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollTextBGColor+'; layer-background-color:'+scrollTextBGColor+';}');
document.writeln('#scrollBar {position:absolute; left:'+(scrollWidth-scrollBarWidth-scrollBorder)+'; top:'+scrollBorder+'; width:'+scrollBarWidth+'; height:'+(scrollHeight-2*scrollBorder)+'; clip:rect(0,'+scrollBarWidth+','+(scrollHeight-2*scrollBorder)+',0); background-color:'+scrollBarColor+'; layer-background-color:'+scrollBarColor+';}');
if (scrollBoxColor=="none") document.writeln('#scrollBoxDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0);}');
else document.writeln('#scrollBoxDiv {position:absolute; left:0; top:'+scrollArrowHeight+'; width:'+scrollBarWidth+'; height:'+scrollBoxHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollBoxHeight+',0); background-color:'+scrollBoxColor+'; layer-background-color:'+scrollBoxColor+';}');
document.writeln('#scrollArrowUpDiv {position:absolute; left:0; top:0; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('#scrollArrowDownDiv {position:absolute; left:0; top:'+(scrollHeight-2*scrollBorder-scrollArrowHeight)+'; width:'+scrollBarWidth+'; height:'+scrollArrowHeight+'; clip:rect(0,'+scrollBarWidth+','+scrollArrowHeight+',0); background-color:'+scrollArrowColor+'; layer-background-color:'+scrollArrowColor+';}');
document.writeln('-->');
document.writeln('</STYLE>');
</SCRIPT>

<DIV ID="scrollWindow">
<DIV ID="scrollBar">
<DIV ID="scrollBoxDiv"><IMG SRC="scrollbox.gif" WIDTH=19 HEIGHT=23 ALT="Scroll Me" BORDER=0></DIV>
<DIV ID="scrollArrowUpDiv"><IMG SRC="scrollarrowup.gif" WIDTH=19 HEIGHT=15 BORDER=0></DIV>
<DIV ID="scrollArrowDownDiv"><IMG SRC="scrollarrowdown.gif" WIDTH=19 HEIGHT=15 BORDER=0></DIV>
</DIV>
<DIV ID="scrollBorderTop"></DIV>
<DIV ID="scrollBorderBottom"></DIV>
<DIV ID="scrollBorderLeft"></DIV>
<DIV ID="scrollBorderRight"></DIV>

<SCRIPT LANGUAGE="JavaScript">
if (n) document.writeln('<LAYER NAME="scrollTextWindow" SRC="'+scrollFirstPage+'" LEFT='+scrollBorder+' TOP='+scrollBorder+' WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' CLIP="0,0,'+(scrollWidth-scrollBarWidth-2*scrollBorder)+','+(scrollHeight-2*scrollBorder)+'" BGCOLOR="'+scrollTextBGColor+'"></LAYER>')
if (ie) document.writeln('<DIV ID="scrollTextWindow"><IFRAME NAME="scrollTextFrame" SRC="'+scrollFirstPage+'" WIDTH='+(scrollWidth-scrollBarWidth-2*scrollBorder)+' HEIGHT='+(scrollHeight-2*scrollBorder)+' MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No" SCROLLING="no"></IFRAME></DIV>')
</SCRIPT>
</DIV></BODY></HTML>
 
Upvote 0 Downvote
Unfortunately that code is not working for me.
I replaced the reference to the .html file with my own and added my own images for the scrollbar and it all displays but there is no reponse on any scroll functions.

My solution so far is working except that when a person clicks down on the arrow button and then moves the mouse off of that button while still holding the mouse button it screws up the script from detecting the onmouseup event.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
260
gmmastros
gmmastros
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
214
mayamanako
mayamanako
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
416
tyutghf
tyutghf
CoolBreeze007
  • Locked
  • Question
jquery ui radio buttons will not accept selected checkbox
Replies
1
Views
190
Offera
Offera
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
205
Smurfmania
Smurfmania

Part and Inventory Search

Sponsor

Back
Top