[JS] scroll in div
Heeft iemand zoiets liggen toevallig?
edit:
Stuk code die ik al had:
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css" media="screen">
body
{
padding: 0;
margin: 0;
background-color: #666;
color: #000;
text-align: center;
}
#contents
{
margin-top: 10px;
margin-bottom: 10px;
margin-right:auto;
margin-left:auto;
width: 700px;
padding: 10px;
background-color: #FFF;
color: #000;
text-align: center;
}
em
{
color: #333;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
fieldset .ol-wrapper {
margin: 0 auto;
text-align: center;
}
fieldset #attributen{
float: left;
}
fieldset #attributen li{
list-style: none;
}
fieldset #links, #rechts, #midden {
margin: 0;
padding: 0;
display: inline;
float: left;
text-align: center;
}
#midden {
margin: 40px 25px;
}
fieldset #links li, #rechts li {
color: #fff;
background-color: #333;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
width: 70px;
margin: 5px 0;
text-align: center;
vertical-align: top;
}
fieldset #links li img, #rechts li img{
width: 70px;
height: 70px;
}
.clearfloat {
clear:both;
font-size:1px;
height:0pt;
line-height:0px;
}
li{
list-style: none;
}
</style>
<script type="text/javascript">
function scrollTo(id){
document.getElementById('scroll').scrollTop = document.getElementById(id).offsetTop;
}
</script>
</head>
<body>
<div id="contents">
<fieldset>
<legend> <em>Maak je keuze</em> </legend>
<strong>25 punten</strong>
<div class="ol-wrapper">
<ol class="players" style="float:left;text-align:left" >
<li>
<label for="naam" onmouseover="scrollTo('1')" >to 1</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('2')">to 2</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('3')">to 3</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('4')">to 4</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('5')">to 5</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('6')">to 6</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('7')">to 7</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('8')">to 8</label>
</li>
</ol>
<div id="links">
<h4 style="background-color:#FFAE00;">
H4
</h4>
<ol style="overflow:auto;height:400px;margin: 0;padding:0px;" id="scroll">
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="1" >Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="2">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="3">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="4">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="5" >Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="6">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="7">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="8">Block</label>
</li>
</ol>
</div>
<br class="clearfloat"/>
</div>
</fieldset>
</div>
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css" media="screen">
body
{
padding: 0;
margin: 0;
background-color: #666;
color: #000;
text-align: center;
}
#contents
{
margin-top: 10px;
margin-bottom: 10px;
margin-right:auto;
margin-left:auto;
width: 700px;
padding: 10px;
background-color: #FFF;
color: #000;
text-align: center;
}
em
{
color: #333;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
fieldset .ol-wrapper {
margin: 0 auto;
text-align: center;
}
fieldset #attributen{
float: left;
}
fieldset #attributen li{
list-style: none;
}
fieldset #links, #rechts, #midden {
margin: 0;
padding: 0;
display: inline;
float: left;
text-align: center;
}
#midden {
margin: 40px 25px;
}
fieldset #links li, #rechts li {
color: #fff;
background-color: #333;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
width: 70px;
margin: 5px 0;
text-align: center;
vertical-align: top;
}
fieldset #links li img, #rechts li img{
width: 70px;
height: 70px;
}
.clearfloat {
clear:both;
font-size:1px;
height:0pt;
line-height:0px;
}
li{
list-style: none;
}
</style>
<script type="text/javascript">
function scrollTo(id){
document.getElementById('scroll').scrollTop = document.getElementById(id).offsetTop;
}
</script>
</head>
<body>
<div id="contents">
<fieldset>
<legend> <em>Maak je keuze</em> </legend>
<strong>25 punten</strong>
<div class="ol-wrapper">
<ol class="players" style="float:left;text-align:left" >
<li>
<label for="naam" onmouseover="scrollTo('1')" >to 1</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('2')">to 2</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('3')">to 3</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('4')">to 4</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('5')">to 5</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('6')">to 6</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('7')">to 7</label>
</li>
<li>
<label for="naam" onmouseover="scrollTo('8')">to 8</label>
</li>
</ol>
<div id="links">
<h4 style="background-color:#FFAE00;">
H4
</h4>
<ol style="overflow:auto;height:400px;margin: 0;padding:0px;" id="scroll">
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="1" >Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="2">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="3">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="4">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="5" >Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="6">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="7">Block</label>
</li>
<li>
<img src="images/block.gif" alt="" />
<label for="naam" id="8">Block</label>
</li>
</ol>
</div>
<br class="clearfloat"/>
</div>
</fieldset>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Kalle P
Of wil je iets hebben ZOALS googlemaps ?
Alleen een linkje waar je overheen gaat (onmouseover) waar je dan naar het bijhorende id gaat in de scrollende div.
Is zoiets niet op te lossen door euhm ja ik kan het niet van buiten maar vaak zie je staan Terug naar boven en bij een klik springt hij naar boven. dus ik denk op zo'n manier dat het wel kan lukken maar dan geef je gewoon elk div'je zoiets mee !
Begrijp je wat ik bedoel ?
(ofja hoe je het ook wilt)
Code (php)
1
document.getElementById("div").scroll(0, document.getElementById("doel").scrollTop);
Zoiets?..
jQuery.
Alleen wanneer ik local de 2 js files neerzet werkt het niet. Wanneer ik naar de 2 js files op het web refereer dan doet ie het wel.
Iemand ervaring met jQuery?
edit:
@Djemo
Zo heb je nooit een mooie scroll met vertraging e.d. Iig bedankt voor je moeite.
Gewijzigd op 01/01/1970 01:00:00 door Kalle P