Mailing Lists: Apple Mailing Lists
Image of Mac OS face in stamp
 
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Scrollbar using AppleScrollbar/AppleScrollArea and Slider.js

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' >
<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


Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Contact Apple | Terms of Use | Privacy Policy

Copyright © 2007 Apple Inc. All rights reserved.