Mailing Lists: Apple Mailing Lists

Image of Mac OS face in stamp
 
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: Scrollbar using AppleScrollbar/AppleScrollArea and Slider.js



Yeah the example was a tad complex.  Here is some simple html which
basically does the same.

Hope this helps,
jl

>> 
>> To start with, the ScrollArea should be your "table" div, *not* the
>> "center" div. The "table" div is the one you want to be scrolled.
>> The "center" div is just a div you created which contains both the
>> table div and the scrollbar.
>> 
>> However, once I change your JavaScript to use the "table" div
>> instead of the "center" one, the scrollbar no longer appears at
>> all. I assume this has something to do with the Stretcher and the
>> display state of your scrollbar, but I didn't look very far into it.
>> 
> 
> Yes, Ive tried this myself over the last few days - and I had the
> same experience as you have. I could only make it work using the
> method I provided. The scroller on the nonworking_debug.wdgt is
> actually working, it just doesnt "update" the slider and thumb
> graphics. Also try moving the <div>myScrollBar</div> almost anywhere
> else in the widget, and you get a scrollbar which is working as it
> should (only it is misplaced of course). So the problem might
> actually be in the Stretcher.js file, like you suggest?
> 
> Thanks for the input.
> 
> -Frank
> 
>  _______________________________________________
> 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>scrolltest.html</title>
	<script type='text/javascript' src='file:///System/Library/WidgetResources/AppleClasses/AppleScrollArea.js'></script>
	<script type='text/javascript' src='file:///System/Library/WidgetResources/AppleClasses/AppleScrollbar.js'></script>		
	<script type='text/javascript' src='file:///System/Library/WidgetResources/AppleClasses/AppleAnimator.js'></script>
<style>

#top {
	width:200px;
	height:20px;
	background-color:red;
}

#center {
	position:relative;
	width:200px;
	height:0px;
	
	background-color:green;
	overflow:hidden;
	color: white;
	text-shadow: grey 0px 1px 0px;
	font: 11px "Helvetica Neue";
  	text-align: center;

}

#bottom {
	position: relative;
	width:200px;
	height:20px;
	background-color:blue;
}

#contents {
	position:absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 30px;
	overflow:hidden;
}

#scrollbar {
	position: absolute;
	top:5px;
	bottom: 5px;
	right:5px;
	width:22px;
}

#action {
	position:absolute;
	top: 3px;
	left: 3px;
	color: white;
	text-shadow: black 0px 1px 0px;
	font: 12px "Helvetica Neue";
	font-weight:bold;
}

#action:hover {
	text-decoration:underline;
	cursor:pointer;
}
</style>

<script>

var scrollbar, scroller;
function load () {
	scrollbar = new AppleVerticalScrollbar(document.getElementById('scrollbar'));
	scrollArea = new AppleScrollArea(document.getElementById('contents'), scrollbar);

}

var expand = false;
function openclose (event, text) {
	expand = !expand;

	var anim = new AppleAnimator (event.shiftKey ? 2500 : 250, 13);
	var animation;
	
	if (expand)
	{
		
		animation = new AppleAnimation (0, 200, animate);
		text.innerText = 'Close';
	}
	else
	{
		animation = new AppleAnimation (200, 0, animate);
		text.innerText = 'Open';
	}
	
	anim.addAnimation (animation);
	anim.start();
	
	
}

function animate (animation, now, first, done)
{
	document.getElementById('center').style.height = parseInt (now, 10) + "px";
}

</script>

</head>

<body onload='load();'>

<div id='top'></div>
<div id='center'>
	<div id='contents'>
				<p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.</p>
	
				<p>Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. 
				We are met on a great battlefield of that war. We have come to dedicate a portion of it as a final resting place for those who died here that the nation might live. 
				This we may, in all propriety do. But in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow this ground. 
				The brave men, living and dead who struggled here have hallowed it far above our poor power to add or detract. 
				The world will little note nor long remember what we say here, but it can never forget what they did here.</p>

				<p>It is rather for us the living, we here be dedicated to the great task remaining before us--
				that from these honored dead we take increased devotion to that cause for which they here gave the last full measure of devotion--
				that we here highly resolve that these dead shall not have died in vain, that this nation shall have a new birth of freedom, and that government of the people, 
				by the people, for the people shall not perish from the earth."</p>
	</div>
	<div id='scrollbar'></div>
</div>
<div id='bottom'>
	<div id='action' onclick='openclose(event, this);'>Open</div>
</div>


</body>
</html>
 _______________________________________________
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

References: 
 >Re: Scrollbar using AppleScrollbar/AppleScrollArea and Slider.js (From: Frank Aune <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.