scroll-div-dmv-javascript
Gesponsorde koppelingen
PHP script bestanden
Voorbeeld
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<script type="text/javascript">
/**
* function move
*
* Scrollt de content van een div.
*
* @element: Id van het te laten scrollen div
* @direction: up of down
* @move: Scrollsnelheid / -hoeveelheid (20 is 1 regel)
**/
function move (element, direction, move)
{
var top = getScrollY(element);
var objDiv = document.getElementById(element);
if (!move)
{
var move = 20;
}
if (direction == "down")
{
move = top+move;
}
else if (direction == "up")
{
move = top-move;
}
//Netscape
if (typeof(objDiv.pageYOffset) == 'number')
{
objDiv.pageYOffset = move;
}
//DOM en IE6
else if (objDiv.scrollTop >= 0)
{
objDiv.scrollTop = move;
}
}
/**
* function getScrollY
*
* Haalt de positie op van de content van een div.
*
* @element: Id van het div
**/
function getScrollY (element)
{
var obj = document.getElementById(element);
var scrOfY = 0;
//Netscape
if (typeof(obj.pageYOffset) == 'number')
{
scrOfY = obj.pageYOffset;
}
//DOM en IE6
else if (obj.scrollTop >= 0)
{
scrOfY = obj.scrollTop;
}
return(scrOfY);
}
/**
* function by_url
*
* Genereert een redirect inclusief de laatste positie van de content van een div.
*
* @element: Id van het div
**/
function by_url (element)
{
window.location = <?php echo $PHP_SELF; ?>"?position=" + getScrollY(element);
}
</script>
</head>
<body <?php if (isset($_GET['position'])) {?> onload="move('moveable', 'down', <?php echo $_GET['position'] .")\""; }?>>
<a href="javascript: move('moveable', 'up', 40);">Scroll up</a> <a href="javascript: move('moveable','down');">Scroll down</a> <a href="javascript: by_url('moveable');">Jump by url, see the get variable</a><br /><br />
<div id="moveable" style="height: 100px; overflow-y: scroll;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod, lacus nec mattis hendrerit, urna ligula condimentum nunc, ut elementum tortor orci quis risus. Quisque ultrices, lacus in ultrices vehicula, magna arcu luctus leo, vel imperdiet augue dolor sit amet ante. Nunc eros tellus, malesuada id, sollicitudin et, pellentesque eget, orci. Ut ornare lectus non tortor. Nunc id tellus. Ut sed metus. Vivamus quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in nulla. Suspendisse orci ante, commodo vel, venenatis non, tristique eu, lectus. Pellentesque tincidunt. Sed ullamcorper.<br /><br />
Sed hendrerit, ante id suscipit suscipit, lorem neque viverra ante, molestie consequat orci mi a ante. Morbi fermentum dolor. Etiam pede tortor, ultricies a, molestie ut, consectetuer eu, augue. Etiam vel lectus. Donec volutpat vulputate dolor. In egestas est sagittis libero tincidunt dignissim. Cras tellus justo, commodo sed, dapibus in, auctor quis, nulla. In facilisis urna et magna. Nulla facilisi. Nunc leo nisi, convallis sed, porta non, venenatis at, diam. Nullam mollis metus id magna. Aliquam convallis. Ut fringilla consequat tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur in ipsum nec nunc rutrum elementum. Phasellus mattis urna ut pede. Praesent iaculis euismod nulla. Integer tempor nunc eu lorem. Etiam velit neque, pulvinar ac, iaculis sed, accumsan a, tellus. Phasellus quis nisi non est convallis dictum.<br /><br />
Duis id tortor. Proin faucibus consectetuer justo. Sed quis turpis. Phasellus augue nulla, varius malesuada, venenatis ac, blandit sit amet, magna. Aliquam erat volutpat. Duis ut tortor sed neque accumsan scelerisque. Nunc tincidunt, sem sagittis posuere consequat, est sapien egestas pede, in luctus purus mauris in lacus. Cras dolor mi, feugiat et, consectetuer sed, imperdiet sed, sem. Nunc ut sapien ac dui faucibus sagittis. Sed tristique venenatis nulla. Nam eleifend, tortor a vehicula vehicula, ante quam vehicula mi, vel aliquam magna leo eget nisi. Proin vel augue sed nisi tempor aliquet. Phasellus euismod, elit at molestie eleifend, nibh massa interdum turpis, et feugiat orci arcu sed felis. Curabitur lorem nisi, fermentum at, mollis a, consequat in, lorem. Nam nec nulla. Suspendisse ullamcorper, ligula a dapibus mollis, lorem ipsum vulputate orci, quis varius nisi pede at dolor. Morbi auctor dolor at purus. Aliquam cursus velit. Vestibulum aliquet mauris sollicitudin nulla. Phasellus ligula sapie
, odales eu, viverra quis, tempor vel, pede.<br /><br />
Suspendisse felis enim, convallis vitae, scelerisque in, dapibus ut, augue. Donec ac massa. Cras quis est nec justo mollis faucibus. Praesent rutrum nisl non elit. Curabitur vitae lorem. In eleifend suscipit mauris. Proin nec nisi. Nulla facilisi. Sed erat enim, vehicula in, scelerisque eget, scelerisque in, lorem. Nulla diam ligula, porta molestie, lacinia quis, suscipit porttitor, mi. Sed neque pede, ornare nec, condimentum non, tincidunt eu, justo. Donec nec erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed lorem sit amet risus mollis dictum. Phasellus auctor aliquam est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse egestas. Integer sem diam, mattis ut, pulvinar a, malesuada a, sem. Nulla mollis nunc et enim.
</div>
</body>
</html>
<head>
<script type="text/javascript">
/**
* function move
*
* Scrollt de content van een div.
*
* @element: Id van het te laten scrollen div
* @direction: up of down
* @move: Scrollsnelheid / -hoeveelheid (20 is 1 regel)
**/
function move (element, direction, move)
{
var top = getScrollY(element);
var objDiv = document.getElementById(element);
if (!move)
{
var move = 20;
}
if (direction == "down")
{
move = top+move;
}
else if (direction == "up")
{
move = top-move;
}
//Netscape
if (typeof(objDiv.pageYOffset) == 'number')
{
objDiv.pageYOffset = move;
}
//DOM en IE6
else if (objDiv.scrollTop >= 0)
{
objDiv.scrollTop = move;
}
}
/**
* function getScrollY
*
* Haalt de positie op van de content van een div.
*
* @element: Id van het div
**/
function getScrollY (element)
{
var obj = document.getElementById(element);
var scrOfY = 0;
//Netscape
if (typeof(obj.pageYOffset) == 'number')
{
scrOfY = obj.pageYOffset;
}
//DOM en IE6
else if (obj.scrollTop >= 0)
{
scrOfY = obj.scrollTop;
}
return(scrOfY);
}
/**
* function by_url
*
* Genereert een redirect inclusief de laatste positie van de content van een div.
*
* @element: Id van het div
**/
function by_url (element)
{
window.location = <?php echo $PHP_SELF; ?>"?position=" + getScrollY(element);
}
</script>
</head>
<body <?php if (isset($_GET['position'])) {?> onload="move('moveable', 'down', <?php echo $_GET['position'] .")\""; }?>>
<a href="javascript: move('moveable', 'up', 40);">Scroll up</a> <a href="javascript: move('moveable','down');">Scroll down</a> <a href="javascript: by_url('moveable');">Jump by url, see the get variable</a><br /><br />
<div id="moveable" style="height: 100px; overflow-y: scroll;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod, lacus nec mattis hendrerit, urna ligula condimentum nunc, ut elementum tortor orci quis risus. Quisque ultrices, lacus in ultrices vehicula, magna arcu luctus leo, vel imperdiet augue dolor sit amet ante. Nunc eros tellus, malesuada id, sollicitudin et, pellentesque eget, orci. Ut ornare lectus non tortor. Nunc id tellus. Ut sed metus. Vivamus quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in nulla. Suspendisse orci ante, commodo vel, venenatis non, tristique eu, lectus. Pellentesque tincidunt. Sed ullamcorper.<br /><br />
Sed hendrerit, ante id suscipit suscipit, lorem neque viverra ante, molestie consequat orci mi a ante. Morbi fermentum dolor. Etiam pede tortor, ultricies a, molestie ut, consectetuer eu, augue. Etiam vel lectus. Donec volutpat vulputate dolor. In egestas est sagittis libero tincidunt dignissim. Cras tellus justo, commodo sed, dapibus in, auctor quis, nulla. In facilisis urna et magna. Nulla facilisi. Nunc leo nisi, convallis sed, porta non, venenatis at, diam. Nullam mollis metus id magna. Aliquam convallis. Ut fringilla consequat tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur in ipsum nec nunc rutrum elementum. Phasellus mattis urna ut pede. Praesent iaculis euismod nulla. Integer tempor nunc eu lorem. Etiam velit neque, pulvinar ac, iaculis sed, accumsan a, tellus. Phasellus quis nisi non est convallis dictum.<br /><br />
Duis id tortor. Proin faucibus consectetuer justo. Sed quis turpis. Phasellus augue nulla, varius malesuada, venenatis ac, blandit sit amet, magna. Aliquam erat volutpat. Duis ut tortor sed neque accumsan scelerisque. Nunc tincidunt, sem sagittis posuere consequat, est sapien egestas pede, in luctus purus mauris in lacus. Cras dolor mi, feugiat et, consectetuer sed, imperdiet sed, sem. Nunc ut sapien ac dui faucibus sagittis. Sed tristique venenatis nulla. Nam eleifend, tortor a vehicula vehicula, ante quam vehicula mi, vel aliquam magna leo eget nisi. Proin vel augue sed nisi tempor aliquet. Phasellus euismod, elit at molestie eleifend, nibh massa interdum turpis, et feugiat orci arcu sed felis. Curabitur lorem nisi, fermentum at, mollis a, consequat in, lorem. Nam nec nulla. Suspendisse ullamcorper, ligula a dapibus mollis, lorem ipsum vulputate orci, quis varius nisi pede at dolor. Morbi auctor dolor at purus. Aliquam cursus velit. Vestibulum aliquet mauris sollicitudin nulla. Phasellus ligula sapie
, odales eu, viverra quis, tempor vel, pede.<br /><br />
Suspendisse felis enim, convallis vitae, scelerisque in, dapibus ut, augue. Donec ac massa. Cras quis est nec justo mollis faucibus. Praesent rutrum nisl non elit. Curabitur vitae lorem. In eleifend suscipit mauris. Proin nec nisi. Nulla facilisi. Sed erat enim, vehicula in, scelerisque eget, scelerisque in, lorem. Nulla diam ligula, porta molestie, lacinia quis, suscipit porttitor, mi. Sed neque pede, ornare nec, condimentum non, tincidunt eu, justo. Donec nec erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sed lorem sit amet risus mollis dictum. Phasellus auctor aliquam est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse egestas. Integer sem diam, mattis ut, pulvinar a, malesuada a, sem. Nulla mollis nunc et enim.
</div>
</body>
</html>