Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body onload="start()" style="margin:0px;">
<table style="margin:5px 3px 5px 3px;"><tr><td>
<iframe name="klein" id="klein" border="0" src="sortieren.html" height=200 width=400 scrolling="no" style="margin:0px;"></iframe>
</td>
<td style="position:relative;vertical-align:top;">
<div id="ausrichtung" style="position:relative;">
<img src="scrollbar_rauf.png" id="^" style="position:absolute;top:0px;" onmousedown="scrollen(-1)" onmouseout="javascript:clearInterval(sc);" onmouseup="javascript:clearInterval(sc);">
<div id="o" style="height:22px;width:12px;background-image:url(scrollbar.png);position:absolute;top:0px;z-index:10;" onmousedown="javascript:fest(this);"></div>
<img src="scrollbar_runter.png" id="v" style="position:absolute;bottom:0px;" onmousedown="scrollen(1)" onmouseout="javascript:clearInterval(sc);" onmouseup="javascript:clearInterval(sc);" ></td>
</div></tr></table><br><br><br><br>
</body>
<script>
var faktor;
document.onmousemove = Maus;
window.onscroll = mauss;
document.onscroll = mauss;
document.onmouseup = los;
function start(){
document.getElementById("o").style.top = document.getElementById("^").offsetHeight+"px";
document.getElementById("ausrichtung").style.height=document.getElementById("klein").offsetHeight+"px";
klein.window.scrollTo(0,1000000000);
faktor = scrollposition("klein")/(document.getElementById("klein").offsetHeight-(document.getElementById("v").offsetHeight+document.getElementById("^").offsetHeight+document.getElementById("o").offsetHeight));
klein.window.scrollTo(0,0);
klein.document.onmousemove = Maus;
klein.document.onmouseup = los;
//brauch' ich, da im IE aus unerfindlichen Gründen das manchmal gelöscht wird;
setInterval("klein.window.onscroll = scrollen_schieber",100);
}
var sc;
function scrollen(wert){
sc = setInterval("klein.window.scrollBy(0,"+wert+");",10);
}
function scrollen_schieber(){
document.getElementById("o").style.top = scrollposition("klein")/faktor + document.getElementById("^").offsetHeight+"px";
}
function scrollposition(frame){
var klein = window[frame];
var s=0;
if (klein.window.pageYOffset){
s = klein.window.pageYOffset;
}
else {
s = klein.document.body.scrollTop;
}
return s;
}
var maus = new Array (0,0);
var aktive=null;
var pos=new Array(0,0);
var scroll = new Array(0,0);
function bewegen(){
if (aktive){
if (maus[1]-pos[1]>document.getElementById("^").offsetHeight){
if (maus[1]-pos[1]<document.getElementById("klein").offsetHeight-document.getElementById("v").offsetHeight - document.getElementById("o").offsetHeight){
//aktive.style.top=maus[1]-pos[1]+"px";
klein.window.scrollTo(0,faktor*(maus[1]-pos[1]-document.getElementById("^").offsetHeight));
}
else {
//aktive.style.top=document.getElementById("klein").offsetHeight-document.getElementById("v").offsetHeight - document.getElementById("o").offsetHeight+"px";
klein.window.scrollTo(0,faktor*(document.getElementById("klein").offsetHeight-document.getElementById("v").offsetHeight - document.getElementById("o").offsetHeight - (document.getElementById("^").offsetHeight)));
}
}
else {
//aktive.style.top=document.getElementById("^").offsetHeight+"px";
klein.window.scrollTo(0,0);
}
}
}
function fest(objekt){
aktive=objekt
pos[0]=maus[0]-(aktive.style.left.substring(0,aktive.style.left.length-2));
pos[1]=maus[1]-(aktive.style.top.substring(0,aktive.style.top.length-2));
aktive.style.cursor='s-resize';
}
function los(){
if (aktive){
aktive.style.cursor='default';
aktive=null;
}
}
function Maus(Ereignis){
var plus = new Array(0,0);
if (!Ereignis){
Ereignis = window.event;
if (!Ereignis){
Ereignis = klein.window.event;
plus = xy_koord(document.getElementById("klein"));
}
}
if (Ereignis.clientX){
maus = new Array(Ereignis.clientX+plus[0], (Ereignis.clientY+plus[1]));
}
bewegen();
}
function mauss(Ereignis){
if (window.pageXOffset){
scroll[0] = window.pageXOffset;
scroll[1] = window.pageYOffset;
}
else {
scroll[0] = document.body.scrollLeft;
scroll[1] = document.body.scrollTop;
}
bewegen();
}
function xy_koord(node){
var ort=new Array(node.offsetLeft, node.offsetTop);
var Eltern = node.offsetParent;
while (Eltern) {
ort[0] += Eltern.offsetLeft;
ort[1] += Eltern.offsetTop;
Eltern=Eltern.offsetParent;
}
return ort;
}
</script>
</html>
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
// Scrolls the content element in x or y direction.
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
}
}).set(0);
if( !(ignoreMouse) ){
// Scroll the content element when the mousewheel is used within the
// content or the scrollbar element.
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
// Stops the handle dragging process when the mouse leaves the document body.
$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}
window.addEvent('domready', function(){
// -- first example, vertical scrollbar --
makeScrollbar( $('externalthumbs'), $('scrollbar1'), $('handle1') );
// -- second example, horizontal scrollbar --
makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
// -- third example, horizontal and vertical scrollbars
makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true );
});