Scrollbar UI emulation

ralphonzo · Aug 18, 2009

I recently found this online:

and tried to implement it. I'm not sure if I'm just making a mess of it, or whether it needs more files that I can't get hold of, but I can't get it to even display a scrollbar!!

Has anyone come across this method before and got it to work? Or does anyone know of an alternative way of altering the look and nature of a scrollbar (rather than the hit and miss CSS version)?

ElJayWilson · Aug 19, 2009

Show what you have coded. Would be next to impossible to help you figure something out without knowing what you have done.

ralphonzo · Aug 25, 2009

Sorry for the delay, I've been away!!

Here's the (rather long) code that I'm trying to fathom out. Not being very good at fathoming doesn't help:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype</title>
<link href="/styles.css" media="screen" rel="stylesheet" type="text/css" />
<script src="all.js" type="text/javascript"></script>
<script>
document.observe('dom:loaded',function(){
	var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
	$('scroll_down_50').observe('click',function(event){
		scrollbar.scrollBy(-50);
		event.stop();
	});
	
	$('scroll_up_50').observe('click',function(event){
		scrollbar.scrollBy(50);
		event.stop();
	});
	
	$('scroll_top').observe('click',function(event){
		scrollbar.scrollTo('top');
		event.stop();
	});
	
	$('scroll_bottom').observe('click',function(event){
		//to animate a scroll operation you can pass true
		//or a callback that will be called when scrolling is complete
		scrollbar.scrollTo('bottom',function(){
			if(typeof(console) != "undefined")
				console.log('Finished scrolling to bottom.');
		});
		event.stop();
	});
	
	$('scroll_second').observe('click',function(event){
		//you can pass a number or element to scroll to
		//if you pass an element, it will be centered, unless it is
		//near the bottom of the container
		scrollbar.scrollTo($('second_subhead'));
		event.stop();
	});
	
	$('scroll_third').observe('click',function(event){
		//passing true will animate the scroll
		scrollbar.scrollTo($('third_subhead'),true);
		event.stop();
	});
	
	$('scroll_insert').observe('click',function(event){
		$('scrollbar_content').insert('&lt;p><b>Inserted: ' + $('repeat').innerHTML + '</b>&lt;/p&gt;');
		//you only need to call this if ajax or dom operations modify the layout
		//this is automatically called when the window resizes
		scrollbar.recalculateLayout();
		event.stop();
	});
});
</script>
<style>
		
#scrollbar_container {
	position:relative;
	width:500px;
}

#scrollbar_track {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:10px;
	background-color:transparent;
	cursor:move;
}

#scrollbar_handle {
	width:10px;
	background-color:#5c92e7;
	cursor:move;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	opacity:0.9;
    -moz-opacity:0.9;
}

#scrollbar_content {
	overflow:hidden;
	width:485px;
	height:250px;
}

	</style>

	</head>
	<body class="control">
		
		<div id="outer_container">
			<div id="container">
				<div id="header">
					<h2><a href="[URL unfurl="true"]http://livepipe.net/"><span>LivePipe&trade;[/URL] : User Interface Components for Prototype</span></a></h2>
					<ul id="navigation">

						<li><a href="[URL unfurl="true"]http://livepipe.net/">Home</a></li>[/URL]
						<li><a href="[URL unfurl="true"]http://livepipe.net/core">Core</a></li>[/URL]
						<li class="active"><a href="[URL unfurl="true"]http://livepipe.net/control">Controls</a></li>[/URL]
						<li><a href="[URL unfurl="true"]http://livepipe.net/extra">Extras</a></li>[/URL]
						<li><a href="[URL unfurl="true"]http://livepipe.net/download">Download[/URL] &amp; Contribute</a></li>

					</ul>
				</div>
				<div id="main">
					<div id="main_container">
						<a href="[URL unfurl="true"]http://personalgrid.com/"[/URL] id="personal_grid"><span>Get 2GB of free storage at PersonalGrid</span></a>
						<ul id="subnavigation">
	<li class="first"><a href="[URL unfurl="true"]http://livepipe.net/control/contextmenu">ContextMenu</a></li>[/URL]
	<!--<li><a href="[URL unfurl="true"]http://livepipe.net/control/pagination">Pagination</a></li>-->[/URL]

	<li><a href="[URL unfurl="true"]http://livepipe.net/control/progressbar">ProgressBar</a></li>[/URL]
	<li><a href="[URL unfurl="true"]http://livepipe.net/control/rating">Rating</a></li>[/URL]
	<li class="active"><a href="[URL unfurl="true"]http://livepipe.net/control/scrollbar">ScrollBar</a></li>[/URL]
	<li><a href="[URL unfurl="true"]http://livepipe.net/control/selectmultiple">SelectMultiple</a></li>[/URL]
	<li><a href="[URL unfurl="true"]http://livepipe.net/control/selection">Selection</a></li>[/URL]
	<li><a href="[URL unfurl="true"]http://livepipe.net/control/tabs">Tabs</a></li>[/URL]

	<li><a href="[URL unfurl="true"]http://livepipe.net/control/textarea">TextArea</a></li>[/URL]
	<li><a href="[URL unfurl="true"]http://livepipe.net/control/window">Window</a></li>[/URL]
</ul>





<h1>Control.ScrollBar</h1>
<p class="introduction">Pure JavaScript/CSS scroll bars for Prototype.</p>


	
	
	
<ul class="subsection_tabs" id="main_tabs" style="clear:none;">

	<li class="source_code"><a href="[URL unfurl="true"]http://github.com/syntacticx/livepipe-ui/tree/master/src/scrollbar.js">scrollbar.js[/URL] source</a></li>


	<li class="tab"><a href="#tutorial">Tutorial</a></li>

	<li class="tab"><a href="#api">API</a></li>

</ul>
<script>
	document.observe('dom:loaded',function(){
		new Control.Tabs('main_tabs',{
			linkSelector: 'li.tab a'
		});
	});
</script>


<div id="tutorial">
	<div style="float:right;">
		<h3>Scroll To...</h3>
		<ul>
			<li><a href="#" id="scroll_down_50">Up 50 Pixels</a></li>
			<li><a href="#" id="scroll_up_50">Down 50 Pixels</a></li>
			<li><a href="#" id="scroll_top">Top</a></li>
			<li><a href="#" id="scroll_bottom">Bottom (Animated)</a></li>

			<li><a href="#" id="scroll_second">Second Subhead</a></li>
			<li><a href="#" id="scroll_third">Third Subhead (Animated)</a></li>
		</ul>
	</div>
	<div id="scrollbar_container">
		<div id="scrollbar_track">
			<div id="scrollbar_handle">
			</div>
		</div>
		<div id="scrollbar_content">
			<h3>Use the Mouse Wheel or Handle to Scroll</h3>
	
			<p>Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer. Phasellus molestie, sem vel laoreet pretium, arcu arcu rutrum eros, ac mattis felis ante at orci. Vivamus vel mauris. Ut porttitor, nunc eu tincidunt gravida, orci odio luctus mi, id venenatis dui nunc sit amet turpis. Mauris urna nisl, feugiat a, ultrices id, ultrices et, est. Nam eu felis non tortor luctus congue. Mauris consequat malesuada augue. Donec eu nibh in libero tempor aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien erat, imperdiet tincidunt, vestibulum eget, fringilla vel, odio. Ut risus. Ut pretium neque ac velit. Vivamus diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Nunc luctus fringilla mi. Nunc ultrices nisi ac urna.</p>
			<h3 id="second_subhead">Convallis Felis ac Massa Accumsan</h3>
			<p id="repeat">Phasellus faucibus adipiscing quam. Maecenas gravida, diam sit amet mollis accumsan, risus diam ornare leo, non sollicitudin lorem mi vitae ante. In at mi. In vestibulum nunc eleifend justo. Nullam semper. Nulla venenatis ornare ipsum. Phasellus pharetra. Suspendisse molestie. Fusce porta vulputate quam. Etiam vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vulputate magna nec diam. Aliquam sagittis lectus a pede. Sed fermentum, risus non sollicitudin posuere, erat arcu iaculis nibh, eu faucibus sapien velit dapibus ipsum. Proin fringilla sapien sed dui.</p>
				<h3 id="third_subhead">Eleifend Justo Nullam Semper</h3>
				<p>Cras eros tellus, posuere at, condimentum eget, fringilla nec, lectus. Mauris ut enim. Quisque imperdiet rutrum elit. Curabitur in nunc. Sed pretium. Aliquam convallis. Proin venenatis. Proin sed magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt. Nam vitae leo at urna dictum venenatis.</p>
				<p>Cras iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisl. Duis quis enim at justo euismod accumsan. Duis mollis. Curabitur sed ante. Morbi bibendum iaculis ligula. Suspendisse aliquet est. Sed velit orci, sagittis non, posuere vitae, aliquet in, massa. Vestibulum egestas.</p>
			</div>
		</div>
	</div>
	<div id="api">
		<h3>Instance</h3><table cellpadding="0" cellspacing="0" width="100%" class="api_table">
	<thead>
		<tr><td>Return</td><td>Name</td><td class="description">Description</td></tr>
	</thead>
	<tbody>

		
			<tr class="even"><td class="type first">Control.ScrollBar</td><td class="signature"><b>initialize(Element container, Element track [,Hash options])</b></td><td class="last">Automatically calls recalculateLayout(). The handle will be obtained via track.firstDescendant()</td></tr>
		
			<tr class="odd"><td class="type first">null</td><td class="signature"><b>destroy()</b></td><td class="last"></td></tr>
		
			<tr class="even"><td class="type first">null</td><td class="signature"><b>disable()</b></td><td class="last"></td></tr>
		
			<tr class="odd"><td class="type first">null</td><td class="signature"><b>enable()</b></td><td class="last"></td></tr>

		
			<tr class="even"><td class="type first">null</td><td class="signature"><b>recalculateLayout()</b></td><td class="last">Call this if the page layout changes from dynamic content. Recalculates track length, handle length and wether or not the scrollbar should be hidden or visible.</td></tr>
		
			<tr class="odd"><td class="type first">null</td><td class="signature"><b>reset()</b></td><td class="last"></td></tr>
		
			<tr class="even"><td class="type first">null</td><td class="signature"><b>scrollBy(number y)</b></td><td class="last"><b>y</b> can be a positive or negative integer.</td></tr>
		
			<tr class="odd"><td class="type first">null</td><td class="signature"><b>scrollTo(mixed y [,mixed animate])</b></td><td class="last"><b>y</b> can be an Element, a number (offsetTop), or the string 'top' or 'bottom'. <b>animate</b> (smooth scrolling) can be a boolean, or can be a callback to execute when the scroll is complete. If a callback is passed the it is always called, even if scrolling is not necessary.</td></tr>

		
			<tr class="even"><td class="type first">Element</td><td class="signature"><b>container</b></td><td class="last"></td></tr>
		
			<tr class="odd"><td class="type first">Element</td><td class="signature"><b>handle</b></td><td class="last"></td></tr>
		
			<tr class="even"><td class="type first">Element</td><td class="signature"><b>track</b></td><td class="last"></td></tr>
		
	</tbody>
</table>	
	
		
		
		
		
		
		
		
		
	<h3>Options</h3><table cellpadding="0" cellspacing="0" width="100%" class="api_table">

	<thead>
		<tr><td>Type</td><td>Name</td><td>Default</td><td class="description">Description</td></tr>
	</thead>
	<tbody>
		
			<tr class="even"><td class="type first">string</td><td><b>active_class_name</b></td><td class="default">'scrolling'</td><td class="last"></td></tr>

		
			<tr class="odd"><td class="type first">Element</td><td><b>apply_active_class_name_to</b></td><td class="default">this.container</td><td class="last"></td></tr>
		
			<tr class="even"><td class="type first">number</td><td><b>handle_minimum_height</b></td><td class="default">25</td><td class="last">If <b>proportional</b> is true, this is the minimum height in pixels. </td></tr>
		
			<tr class="odd"><td class="type first">number</td><td><b>notification_timeout_length</b></td><td class="default">125</td><td class="last">Milliseconds between change() events when scrolling.</td></tr>

		
			<tr class="even"><td class="type first">bool</td><td><b>proportional</b></td><td class="default">true</td><td class="last">Draw the handle proportional to (container height / length of track).</td></tr>
		
			<tr class="odd"><td class="type first">number</td><td><b>scroll_to_smoothing</b></td><td class="default">0.01</td><td class="last"></td></tr>
		
			<tr class="even"><td class="type first">number</td><td><b>scroll_to_steps</b></td><td class="default">15</td><td class="last"></td></tr>
		
			<tr class="odd"><td class="type first">Hash</td><td><b>slider_options</b></td><td class="default">{}</td><td class="last">Will be passed to Control.Slider</td></tr>

		
	</tbody>
</table>

	
		
		
		
	<h3>Events</h3><table cellpadding="0" cellspacing="0" width="100%" class="api_table">
	<thead>
		<tr><td>Name</td><td class="description">Description</td></tr>
	</thead>
	<tbody>

		
			<tr class="even"><td class="first"><b>change(number delta)</b></td><td class="last">Forwarded from slider.onSlide and slider.onChange, but will fire at a maximum interval of options.notification_timeout_length for performance.</td></tr>
		
			<tr class="odd"><td class="first"><b>disabled()</b></td><td class="last"></td></tr>
		
			<tr class="even"><td class="first"><b>enabled()</b></td><td class="last"></td></tr>
		
	</tbody>	
</table>	

				</div>
			</div>
		</div>
	</div>
</div>   
</body>
</html>

The all.js file is definately being found and is as follows:

Code:

/**this.slider.trackLength = Math.max(this.slider.maximumOffset(), this.slider.track.getHeight()) - this.slider.minimumOffset();
/**
* @author Ryan Johnson <[URL unfurl="true"]http://syntacticx.com/>[/URL]
* @copyright 2008 PersonalGrid Corporation <[URL unfurl="true"]http://personalgrid.com/>[/URL]
* @package LivePipe UI
* @license MIT
* @url [URL unfurl="true"]http://livepipe.net/control/scrollbar[/URL]
* @require prototype.js, slider.js, livepipe.js
*/
 
if(typeof(Prototype) == "undefined")
    throw "Control.ScrollBar requires Prototype to be loaded.";
if(typeof(Control.Slider) == "undefined")
    throw "Control.ScrollBar requires Control.Slider to be loaded.";
if(typeof(Object.Event) == "undefined")
    throw "Control.ScrollBar requires Object.Event to be loaded.";
 
Control.ScrollBar = Class.create({
    initialize: function(container,track,options){
        this.enabled = false;
        this.notificationTimeout = false;
        this.container = $(container);
        this.boundMouseWheelEvent = this.onMouseWheel.bindAsEventListener(this);
        this.boundResizeObserver = this.onWindowResize.bind(this);
        this.track = $(track);
        this.handle = this.track.firstDescendant();
        this.options = Object.extend({
            active_class_name: 'scrolling',
            apply_active_class_name_to: this.container,
            notification_timeout_length: 125,
            handle_minimum_height: 25,
            scroll_to_smoothing: 0.01,
            scroll_to_steps: 15,
            proportional: true,
            slider_options: {}
        },options || {});
        this.slider = new Control.Slider(this.handle,this.track,Object.extend({
            axis: 'vertical',
            onSlide: this.onChange.bind(this),
            onChange: this.onChange.bind(this)
        },this.options.slider_options));
        this.recalculateLayout();
        Event.observe(window,'resize',this.boundResizeObserver);
        this.handle.observe('mousedown',function(){
            if(this.auto_sliding_executer)
                this.auto_sliding_executer.stop();
        }.bind(this));
    },
    destroy: function(){
        Event.stopObserving(window,'resize',this.boundResizeObserver);
    },
    enable: function(){
        this.enabled = true;
        this.container.observe('mouse:wheel',this.boundMouseWheelEvent);
        this.slider.setEnabled();
        this.track.show();
        if(this.options.active_class_name)
            $(this.options.apply_active_class_name_to).addClassName(this.options.active_class_name);
        this.notify('enabled');
    },
    disable: function(){
        this.enabled = false;
        this.container.stopObserving('mouse:wheel',this.boundMouseWheelEvent);
        this.slider.setDisabled();
        this.track.hide();
        if(this.options.active_class_name)
            $(this.options.apply_active_class_name_to).removeClassName(this.options.active_class_name);
        this.notify('disabled');
        this.reset();
    },
    reset: function(){
        this.slider.setValue(0);
    },
    recalculateLayout: function(){
        if(this.container.scrollHeight <= this.container.offsetHeight)
            this.disable();
        else{
            this.slider.trackLength = this.slider.maximumOffset() - this.slider.minimumOffset();
            if(this.options.proportional){
                this.handle.style.height = Math.max(this.container.offsetHeight * (this.container.offsetHeight / this.container.scrollHeight),this.options.handle_minimum_height) + 'px';
                this.slider.handleLength = this.handle.style.height.replace(/px/,'');
            }
            this.enable();
        }
    },
    onWindowResize: function(){
        this.recalculateLayout();
        this.scrollBy(0);
    },
    onMouseWheel: function(event){
        if(this.auto_sliding_executer)
            this.auto_sliding_executer.stop();
        this.slider.setValueBy(-(event.memo.delta / 20)); //put in math to account for the window height
        event.stop();
        return false;
    },
    onChange: function(value){
        this.container.scrollTop = Math.round(value / this.slider.maximum * (this.container.scrollHeight - this.container.offsetHeight));
        if(this.notification_timeout)
            window.clearTimeout(this.notificationTimeout);
        this.notificationTimeout = window.setTimeout(function(){
            this.notify('change',value);
        }.bind(this),this.options.notification_timeout_length);
    },
    getCurrentMaximumDelta: function(){
        return this.slider.maximum * (this.container.scrollHeight - this.container.offsetHeight);
    },
    getDeltaToElement: function(element){
        return this.slider.maximum * ((element.positionedOffset().top + (element.getHeight() / 2)) - (this.container.getHeight() / 2));
    },
    scrollTo: function(y,animate){
        var current_maximum_delta = this.getCurrentMaximumDelta();
        if(y == 'top')
            y = 0;
        else if(y == 'bottom')
            y = current_maximum_delta;
        else if(typeof(y) != "number")
            y = this.getDeltaToElement($(y));
        if(this.enabled){
            y = Math.max(0,Math.min(y,current_maximum_delta));
            if(this.auto_sliding_executer)
                this.auto_sliding_executer.stop();
            var target_value = y / current_maximum_delta;
            var original_slider_value = this.slider.value;
            var delta = (target_value - original_slider_value) * current_maximum_delta;
            if(animate){
                this.auto_sliding_executer = new PeriodicalExecuter(function(){
                    if(Math.round(this.slider.value * 100) / 100 < Math.round(target_value * 100) / 100 || Math.round(this.slider.value * 100) / 100 > Math.round(target_value * 100) / 100){
                        this.scrollBy(delta / this.options.scroll_to_steps);
                    }else{
                        this.auto_sliding_executer.stop();
                        this.auto_sliding_executer = null;
                        if(typeof(animate) == "function")
                            animate();
                    }
                }.bind(this),this.options.scroll_to_smoothing);
            }else
                this.scrollBy(delta);
        }else if(typeof(animate) == "function")
            animate();
    },
    scrollBy: function(y){
        if(!this.enabled)
            return false;
        this.slider.setValueBy(y / this.getCurrentMaximumDelta());
    }
});
Object.Event.extend(Control.ScrollBar);

I'm sure there's some simple, fundamental issue that I'm missing, but if it's anything more sinister I'll be struggling to understand, so layman's speak pleeeeeease?

ralphonzo · Aug 31, 2009

Does nobody know how to edit an iFrame scrollbar's aesthetics?

jpadie · Sep 1, 2009

where in your code do you load the required javascript libraries of prototype, slider and livepipe?

Code:
Code:

@require prototype.js, slider.js, livepipe.js

ralphonzo · Sep 1, 2009

I've ditched the previous lot and moved on, but still no go. This is what I've got now:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<link rel="stylesheet" type="text/css" href="scrollstyle.css" >
<script src="prototype.js" type="text/javascript"></script>
<script src="livepipe.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script src="scrollbar.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Scroll Site</title>
<script>
document.observe('dom:loaded',function(){
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');  
   
$('scroll_down_50').observe('click',function(event){  
    scrollbar.scrollBy(-50);  
    event.stop();  
});  
  
$('scroll_up_50').observe('click',function(event){  
    scrollbar.scrollBy(50);  
    event.stop();  
});  
  
$('scroll_top').observe('click',function(event){  
    scrollbar.scrollTo('top');  
    event.stop();  
});  
  
$('scroll_bottom').observe('click',function(event){  
    //to animate a scroll operation you can pass true  
    //or a callback that will be called when scrolling is complete  
    scrollbar.scrollTo('bottom',function(){  
        if(typeof(console) != "undefined")  
            console.log('Finished scrolling to bottom.');  
    });  
    event.stop();  
});  
  
$('scroll_second').observe('click',function(event){  
    //you can pass a number or element to scroll to  
    //if you pass an element, it will be centered, unless it is  
    //near the bottom of the container  
    scrollbar.scrollTo($('second_subhead'));  
    event.stop();  
});  
  
$('scroll_third').observe('click',function(event){  
    //passing true will animate the scroll  
    scrollbar.scrollTo($('third_subhead'),true);  
    event.stop();  
});  
  
$('scroll_insert').observe('click',function(event){  
    $('scrollbar_content').insert('<p><b>Inserted: ' + $('repeat').innerHTML + '</b></p>');  
    //you only need to call this if ajax or dom operations modify the layout  
    //this is automatically called when the window resizes  
    scrollbar.recalculateLayout();  
    event.stop();  
});
</script>


<style type="text/css">
<!--
body {
	background-color: #f2f2f2;
}
-->
</style></head>

<body>
<div id="scrollbar_container">  
    <div id="scrollbar_track">
	<div id="scrollbar_handle" class="selected" style="top: 8px; position: relative; height: 92.5926px;"/></div></div>  
    <div id="scrollbar_content" class="scrolling">
	<iframe name="iwindow" style="border:0px" scrolling=auto width=800 height=450 align=top frameborder=0 src="../inc_home.asp">Your browser does not support iFrames. Please download and install a newer version.</iframe>
	</div>  
</div> 
</body>
</html>

I had to manually source all the relevent .js and .css files, so they might be the wrong ones. Everything looks right, but the bar refuses to move!! Is there a definitive place to download the support files?

I'm assuming that as I have the <script src"..."> I don't need the "@require" business? Tell me if I'm wrong, I'm crap with JS!!

jpadie · Sep 1, 2009

how about downloading them from the site that you originally referenced? in this case they are stored as a single file and very easily accessible by viewing the source of the page you posted.

http://livepipe.net/javascripts/all.js?1243552819

ralphonzo · Sep 1, 2009

The all.js file just gives the same output - aesthetics but no mechanics. It's live (hardly) at:

http://www.socoolh.com/sb/slidebar.html.

I'm sure that I'm just missing one fundamental component, but I just don't know what it is!

vacunita · Sep 1, 2009

When I open the page you linked, I get this error:

Code:

Error: missing } after function body
Source File: [URL unfurl="true"]http://www.socoolh.com/sb/slidebar.html[/URL]
Line: 64, Column: 3
Source Code:
});

From the Firefox Error console, along with a bunch of warning about font-weight and font-style.

For whatever its worth.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

ralphonzo · Sep 3, 2009

Thanks Phil. I've been playing around and have hit a nice brick wall that states that "$('scroll_down_50') is null". I'm presuming that this is an initialisation issue, but I can't get around it. Any further ideas? How does anyone ever just set this up and get it to work??!!

jpadie · Sep 3, 2009

of course it's null. you have no element called scroll_down_50 or any of the others.

apart from the libraries, this is all you need

Code:

document.observe('dom:loaded',function(){
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');  
});

however, i don't think you are going to get this to play nice with an iFrame.

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!

Scrollbar UI emulation

ralphonzo

Programmer

ElJayWilson

Programmer

ralphonzo

Programmer

ralphonzo

Programmer

jpadie

Technical User

ralphonzo

Programmer

jpadie

Technical User

ralphonzo

Programmer

vacunita

Programmer

ralphonzo

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor