Hello,
(Pardon for the previous topic-less post...)
Im trying to set up a scrollbar inside my widget, but I have run
into lots of
problems. For some reason, I can get the old calculateAndShowThumb
() method
working. However, I want to use the AppleScrollArea.js and
AppleScrollbar.js,
since they are the "correct" way of doing it + they provide added
functionality.
My widget is divided in 3 parts, and the middle one stretches out
and presents
a table of information. This table can be bigger than the stretch-
part, so I
need a scrollbar on the middle part.
I set up the stretcher, scrollbar and scrollArea like this in the
javascript:
stretcher = new Stretcher(document.getElementById('front'), 150,
500, null);
scrollbar = new
AppleVerticalScrollbar(document.getElementById("myScrollBar"));
scrollArea = new AppleScrollArea(document.getElementById("middle"),
scrollbar);
The relevant HTML part:
<div id='front' onmouseover='mousemove(event);'
onmouseout='mouseexit(event);'
<div id='topEdge'>
</div>
<div id='center'>
<div id='table'></div>
<div id='myScrollBar'></div>
</div>
<div id='bottomEdge'>
</div>
</div>
The relevant CSS part:
#table {
color: white;
text-shadow: grey 0px 1px 0px;
font: 11px "Helvetica Neue";
text-align: center;
position: absolute;
left: 20px;
width: 170px;
overflow:hidden;
/*white-space:nowrap;*/
/*text-overflow:ellipsis; */
}
#myScrollBar {
position: absolute;
top: 5px;
bottom: 5px;
right: 15px;
width: 19px;
display: block;
}
#topEdge {
position:absolute;
top:0;
left:0;
width:220px;
height:89px;
background-image: url("Images/Widget_top.png");
background-repeat: no-repeat;
}
#bottomEdge {
position:absolute;
bottom:0;
left:0;
width:220px;
height:30px;
background-image: url("Images/Widget_bottom.png");
background-repeat: no-repeat;
}
#center {
position:absolute;
top:89px; /* set to topEdge.bottom, or (topEdge.top +
topEdge.height) */
bottom:30px; /* set to bottomEdge.top, or (bottomEdge.bottom +
bottomEdge.height) */
right:0;
left:0;
background-image:url("Images/Widget_middle.png");
background-repeat:repeat-y;
overflow:hidden;
}
And after the table is generated and shown in the middle part, I call
scrollbar.refresh(); The scrollArea works using the mousewheel,
and so does
the scrollBar - however the scrollbar image/slider doesnt update
eg. the
scrollbar doesnt scroll. Its like the images doesnt get updated,
and the
scrollbar track and nob just disappears out of the middle part
when I scroll
using either the scrollArea or by moving the scrollbar.
I thought calling scrollbar.refresh() was supposed to be the
equivalent of
calculateAndShowThumb() ? Any ideas why Im experiencing this
problem? I have
struggled for a solution for days now, so any feedback is
appreciated.
Thank you.
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Dashboard-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
http://lists.apple.com/mailman/options/dashboard-dev/email@hidden
This email sent to email@hidden
