Bekijk de onderstaande video om te zien hoe je onze site als een web app op je startscherm installeert.
Opmerking: Deze functie is mogelijk niet beschikbaar in sommige browsers.
<html><body>
<script type="text/javascript">
function showSbarVal(){
p=document.getElementById('sbar')
alert(p.scrollTop)
}
</script>
<div id="sbar" style="width:20px;height:100px;overflow:auto" onmouseleave="showSbarVal()">
<img width="1" height="400" alt="" />
</div><body></html>
var Slider = new Class({
options: {
onChange: Class.empty,
onComplete: Class.empty,
onTick: function(pos){
this.knob.setStyle(this.p, pos);
},
mode: 'horizontal',
steps: 10,
offset: 0
},
initialize: function(el, knob, options){
this.element = $(el);
this.knob = $(knob);
this.setOptions(options);
this.previousChange = -1;
this.previousEnd = -1;
this.step = -1;
this.element.addEvent('mousedown', this.clickedElement.bindWithEvent(this));
var mod, offset;
switch(this.options.mode){
case 'horizontal':
this.z = 'x';
this.p = 'left';
mod = {'x': 'left', 'y': false};
offset = 'offsetWidth';
break;
case 'vertical':
this.z = 'y';
this.p = 'top';
mod = {'x': false, 'y': 'top'};
offset = 'offsetHeight';
}
this.max = this.element[offset] - this.knob[offset] + (this.options.offset * 2);
this.half = this.knob[offset]/2;
this.getPos = this.element['get' + this.p.capitalize()].bind(this.element);
this.knob.setStyle('position', 'relative').setStyle(this.p, - this.options.offset);
var lim = {};
lim[this.z] = [- this.options.offset, this.max - this.options.offset];
this.drag = new Drag.Base(this.knob, {
limit: lim,
modifiers: mod,
snap: 0,
onStart: function(){
this.draggedKnob();
}.bind(this),
onDrag: function(){
this.draggedKnob();
}.bind(this),
onComplete: function(){
this.draggedKnob();
this.end();
}.bind(this)
});
if (this.options.initialize) this.options.initialize.call(this);
},
set: function(step){
this.step = step.limit(0, this.options.steps);
this.checkStep();
this.end();
this.fireEvent('onTick', this.toPosition(this.step));
return this;
},
setDefault: function(step){
if (step > this.options.steps) step = this.options.steps;
else if (step < 0) step = 0;
this.step = step;
this.checkStep();
this.end();
this.knob.setStyle(this.p, this.toPosition(this.step)+'px');
return this;
},
scrolledElement: function(event){
if (event.wheel < 0) this.set(this.step + 1);
else if (event.wheel > 0) this.set(this.step - 1);
event.stop();
},
clickedElement: function(event){
var position = event.page[this.z] - this.getPos() - this.half;
position = position.limit(-this.options.offset, this.max -this.options.offset);
this.step = this.toStep(position);
this.checkStep();
this.end();
//this.fireEvent('onTick', position);
this.set(this.step);
},
draggedKnob: function(){
this.step = this.toStep(this.drag.value.now[this.z]);
this.checkStep();
this.setDefault(this.step);
},
checkStep: function(){
if (this.previousChange != this.step){
this.previousChange = this.step;
this.fireEvent('onChange', this.step);
}
},
end: function(){
if (this.previousEnd !== this.step){
this.previousEnd = this.step;
this.fireEvent('onComplete', this.step + '');
}
},
toStep: function(position){
return Math.round((position + this.options.offset) / this.max * this.options.steps);
},
toPosition: function(step){
return this.max * step / this.options.steps;
}
});
Slider.implement(new Events);
Slider.implement(new Options);
<script type="text/javascript">
window.addEvent('domready', function(){
var slider1 = new Slider('slideContainer1', 'slideHandle1',{onComplete: function(val){$('pos1').setHTML(val);}});
});
</script>
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.