javascript slider
Ik heb dit scriptje geschreven:
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
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
<script language="JavaScript">
function doSizeUp_1() {
var foo = document.getElementById('content_1');
var curr_width=parseInt(foo.style.width);
var max_width=500;
if( curr_width <= max_width){
foo.style.width = (curr_width + 10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doSizeUp_1,10); // call doMove() in 20 msec
};
}
function doSizeDown_1() {
var foo = document.getElementById('content_1');
var curr_width=parseInt(foo.style.width);
var min_width=0;
if( curr_width >= min_width){
foo.style.width = (curr_width - 10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doSizeDown_1,10); // call doMove() in 20 msec
};
}
function doSizeUp_2() {
var foo = document.getElementById('content_2');
var curr_width=parseInt(foo.style.width);
var max_width=500;
if( curr_width <= max_width){
foo.style.width = (curr_width + 10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doSizeUp_2,10); // call doMove() in 20 msec
};
}
</script>
<body>
<div id="cat_1" onclick="doSizeUp_1()">1</div>
<div id="content_1" style="width:0px;">Dit is content van div 1
</div>
<div id="cat_2" onclick="doSizeDown_1()" >2</div>
<div id="content_2" style="width:0px;">Dit is content van div 2</div>
<div id="cat_3">3</div>
<div id="content_3">Dit is content van div 3</div>
</body>
</html>
function doSizeUp_1() {
var foo = document.getElementById('content_1');
var curr_width=parseInt(foo.style.width);
var max_width=500;
if( curr_width <= max_width){
foo.style.width = (curr_width + 10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doSizeUp_1,10); // call doMove() in 20 msec
};
}
function doSizeDown_1() {
var foo = document.getElementById('content_1');
var curr_width=parseInt(foo.style.width);
var min_width=0;
if( curr_width >= min_width){
foo.style.width = (curr_width - 10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doSizeDown_1,10); // call doMove() in 20 msec
};
}
function doSizeUp_2() {
var foo = document.getElementById('content_2');
var curr_width=parseInt(foo.style.width);
var max_width=500;
if( curr_width <= max_width){
foo.style.width = (curr_width + 10)+'px'; // pseudo-property code: Move right by 10px
setTimeout(doSizeUp_2,10); // call doMove() in 20 msec
};
}
</script>
<body>
<div id="cat_1" onclick="doSizeUp_1()">1</div>
<div id="content_1" style="width:0px;">Dit is content van div 1
</div>
<div id="cat_2" onclick="doSizeDown_1()" >2</div>
<div id="content_2" style="width:0px;">Dit is content van div 2</div>
<div id="cat_3">3</div>
<div id="content_3">Dit is content van div 3</div>
</body>
</html>
Als ik op 1 klik, gaat ie open, klik op twee gaat ie dicht. Tot zo ver netjes
Maar klik ik dan weer op 1 om te openen, dan lijken twee scripts elkaar tegen te werken.
Hij gaat iets open en je zit m steeds heen en weer gaan alsof het open en dicht script tegen elkaar vechten... iemand een idee hoe ddat komt??
Alvast bedankt!
Gebruik anders gewoon een framework bijvoorbeeld Mootools!
Dat scheeld je veel moeite en gekut met javascripts die niet werken.
@joey Ik hou er van te weten hoe de scripts werken. Ik ben beizg javascript goed onder knie te krijgen, en daar was dit een onderdeel van.
Nogmaals bedankt!
http://www.youtube.com/watch?v=hQVTIJBZook
Wand als je naar een script kijkt en je kan meteen zien wat het doet en hoe het werkt, dan vind ik het niet nodig.
Dacht dat de mensen hier het wel begreepen maar blijkbaar hebbensomigen meer tekstnodig
Van daar ik hier effe duidelijk mijn verhaal doe.
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling