Thread-topic: Scrollbar using AppleScrollbar/AppleScrollArea and Slider.js
User-agent: Microsoft-Entourage/11.2.1.051004
Sending a sample widget would be the best approach.
jl
> Hello,
>
> First of all, thank you for replying. Ive never used CSS before, so
> pardon me if my questions are stupid. To clear things up, my widget
> is divided in 3 parts. Ive got a 220x89px top picture labeled
> #topEdge, a 220x1px middel part labeled #center, which has a repeat-y
> property and a bottom picture at 220x30px.
>
> I use the Stretcher.js class to stretch the middle part to 150px, and
> I place a table displaying the results of the widget in this
> stretchable part. But since the result can be bigger than 150px, I
> want a scrollbar also in the middle part. It is perhaps equal to
> Apples Dictionary widget shipped with Tiger (except the bottom picture).
>
> I was under the impression I had to provide top: and bottom:
> properties for the middle part, in order to let WebCore know where to
> place the element being "stretched" eg. repeated along the y-axis.
> Bear in mind, I can make this work using the old scrollbar code
> provided by Apple - but I would rather use AppleScrollbar and
> AppleScrollArea.
>
> If I place my <div>myScrollBar</div> anywhere else in the widget eg.
> outside the middle stretchable part, it works as Id expect with
> AppleScrollbar/AppleScrollArea - however the scrollbar is of course
> misplaced. This is why Im beginning to think there is a bug in the
> AppleClasses provided with 10.4.3. I can provide sample widgets if it
> helps you better understand my problem.
>
> Again, pardon me if I misunderstood your reply. Im quite new to this
> stuff.
>
> Thank you.
>
>
> Den 23. nov. 2005 kl. 17.31 skrev John Louch:
>
>> Looks like you are trying to scroll something of fixed height.
>>
>>
>> #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) */
>> ...
>>
>> You have a top and a bottom so it will not get any bigger then the
>> size set
>> here.
>>
>> Also generally you do not want to put your scrollbar element inside
>> of the
>> element that is scrolling.
>>
>> Thanks,
>> jl
>>
>>
>>> 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
>>
>>
>> --------------------------------------------------
>> John Louch Internet #: email@hidden
>>
>>
>
--------------------------------------------------
John Louch Internet #: email@hidden
_______________________________________________
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
