Hulp met veranderen Div eigenschappen in Javascript.
Het is de bedoeling om via een tabel met textfields de eigenschappen van een div aan te passen.
Denk aan hoogte,breedte,kleur etc.
Javascript is niet m'n sterkste kant dus ik vroeg me af of iemand me op weg kan helpen.
Dit is wat ik tot nu toe heb.
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div aanpassen</title>
</head>
<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
<tr>
<td>Left:</td>
<td>
<label for="textfield"></label>
<input type="text" name="left" id="textfield" />
</td>
</tr>
<tr>
<td>Top:</td>
<td>
<label for="textfield2"></label>
<input type="text" name="top" id="textfield2" />
</td>
</tr>
<tr>
<td>Width:</td>
<td><label for="textfield3"></label>
<input type="text" name="width" id="textfield3" /></td>
</tr>
<tr>
<td>Height:</td>
<td><label for="textfield4"></label>
<input type="text" name="height" id="textfield4" /></td>
</tr>
<tr>
<td>Color:</td>
<td><label for="textfield5"></label>
<input type="text" name="color" id="textfield5" /></td>
</tr>
<tr>
<td>Text:</td>
<td><label for="textfield6"></label>
<input type="text" name="text" id="textfield6" /></td>
</tr>
<tr>
<td> </td>
<td><label for="textfield6">
<input type="submit" name="button" id="button" value="KLIK" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div aanpassen</title>
</head>
<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
<tr>
<td>Left:</td>
<td>
<label for="textfield"></label>
<input type="text" name="left" id="textfield" />
</td>
</tr>
<tr>
<td>Top:</td>
<td>
<label for="textfield2"></label>
<input type="text" name="top" id="textfield2" />
</td>
</tr>
<tr>
<td>Width:</td>
<td><label for="textfield3"></label>
<input type="text" name="width" id="textfield3" /></td>
</tr>
<tr>
<td>Height:</td>
<td><label for="textfield4"></label>
<input type="text" name="height" id="textfield4" /></td>
</tr>
<tr>
<td>Color:</td>
<td><label for="textfield5"></label>
<input type="text" name="color" id="textfield5" /></td>
</tr>
<tr>
<td>Text:</td>
<td><label for="textfield6"></label>
<input type="text" name="text" id="textfield6" /></td>
</tr>
<tr>
<td> </td>
<td><label for="textfield6">
<input type="submit" name="button" id="button" value="KLIK" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
Gewijzigd op 13/01/2013 12:49:49 door Hendrik Wit
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div aanpassen</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.property').keyup(function() {
var value = $(this).val();
var property = this.id;
if(property == 'width') {
$('#testDiv').width(value);
}
else if(property == 'height') {
$('#testDiv').height(value);
}
else {
$('#testDiv').text(value);
}
});
});
</script>
</head>
<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
<tr>
<td>Left:</td>
<td>
<label for="textfield"></label>
<input type="text" name="left" class="property" id="left" />
</td>
</tr>
<tr>
<td>Top:</td>
<td>
<label for="textfield2"></label>
<input type="text" name="top" class="property" id="top" />
</td>
</tr>
<tr>
<td>Width:</td>
<td><label for="textfield3"></label>
<input type="text" name="width" class="property" id="width" /></td>
</tr>
<tr>
<td>Height:</td>
<td><label for="textfield4"></label>
<input type="text" name="height" class="property" id="height" /></td>
</tr>
<tr>
<td>Color:</td>
<td><label for="textfield5"></label>
<input type="text" name="color" class="property" id="color" /></td>
</tr>
<tr>
<td>Text:</td>
<td><label for="textfield6"></label>
<input type="text" name="text" class="property" id="text" /></td>
</tr>
<tr>
<td> </td>
<td><label for="textfield6">
<input type="submit" name="button" id="button" value="KLIK" />
</label></td>
</tr>
</table>
</form>
<div id="testDiv" style="width: 100px; height: 100px; background-color: #ff0000"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div aanpassen</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.property').keyup(function() {
var value = $(this).val();
var property = this.id;
if(property == 'width') {
$('#testDiv').width(value);
}
else if(property == 'height') {
$('#testDiv').height(value);
}
else {
$('#testDiv').text(value);
}
});
});
</script>
</head>
<body>
<form id="form2" name="form2" method="post" action="">
<table width="200" border="1">
<tr>
<td>Left:</td>
<td>
<label for="textfield"></label>
<input type="text" name="left" class="property" id="left" />
</td>
</tr>
<tr>
<td>Top:</td>
<td>
<label for="textfield2"></label>
<input type="text" name="top" class="property" id="top" />
</td>
</tr>
<tr>
<td>Width:</td>
<td><label for="textfield3"></label>
<input type="text" name="width" class="property" id="width" /></td>
</tr>
<tr>
<td>Height:</td>
<td><label for="textfield4"></label>
<input type="text" name="height" class="property" id="height" /></td>
</tr>
<tr>
<td>Color:</td>
<td><label for="textfield5"></label>
<input type="text" name="color" class="property" id="color" /></td>
</tr>
<tr>
<td>Text:</td>
<td><label for="textfield6"></label>
<input type="text" name="text" class="property" id="text" /></td>
</tr>
<tr>
<td> </td>
<td><label for="textfield6">
<input type="submit" name="button" id="button" value="KLIK" />
</label></td>
</tr>
</table>
</form>
<div id="testDiv" style="width: 100px; height: 100px; background-color: #ff0000"></div>
</body>
</html>
neem hier anders ff een kijkje: http://api.jquery.com/css/
Aanvulling: misschien is het geen slecht idee om de input van de gebruiker ook nog ff te valideren bijvoorbeeld of er bij width wel een getal is ingevuld enz..
Gewijzigd op 13/01/2013 13:14:32 door Bo Ter Ham
Bij color is het inderdaad wel lastig omdat gebruikers dan een kleurcode in moeten typen, maar niemand weet natuurlijk welke code welke kleur is.
je zou zoiets kunnen implementeren: http://www.eyecon.ro/colorpicker/ of: http://labs.abeautifulsite.net/jquery-miniColors/
Gewijzigd op 13/01/2013 13:49:46 door Bo Ter Ham
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
$(document).ready(function() {
$('.property').keyup(function() {
var value = $(this).val();
var property = this.id;
var position = $(this).position();
if(property == 'width') {
$('#testDiv').width(value);
}
else if(property == 'height') {
$('#testDiv').height(value);
}
if(property == 'text') {
$('#testDiv').text(value);
}
else if(property =='color'){
$('#testDiv').css("background-color","value")
}
});
});
</script>
$(document).ready(function() {
$('.property').keyup(function() {
var value = $(this).val();
var property = this.id;
var position = $(this).position();
if(property == 'width') {
$('#testDiv').width(value);
}
else if(property == 'height') {
$('#testDiv').height(value);
}
if(property == 'text') {
$('#testDiv').text(value);
}
else if(property =='color'){
$('#testDiv').css("background-color","value")
}
});
});
</script>
Iemand een idee?
Edit: Ah ik zie het al, dit stukje:
Code (php)
1
$('#testDiv').css("background-color","value")
Moest zo:
Code (php)
1
$('#testDiv').css("background-color",(value))
Toevoeging op 13/01/2013 14:42:58:
Nou heb ik de positionering zo staan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
if(property == 'top') {
$('#testDiv').css("top",(value))
}
else if(property == 'left') {
$('#testDiv').css("left",(value))
}
$('#testDiv').css("top",(value))
}
else if(property == 'left') {
$('#testDiv').css("left",(value))
}
Maar die pakt hij niet, kan het zijn dat ik geen .css moet gebruiken? Zou wel raar zijn want het zijn toch CSS properties.
Toevoeging op 13/01/2013 15:15:28:
Iemand een idee?
Gewijzigd op 13/01/2013 14:32:06 door Hendrik Wit
Het is een combinatie van position: relative/absolute; en van z-index.
Test eerst een uit wat je wil bereiken, puur met css.
Als dat lukt, kan je die gegevens vertalen naar javascript.
Probeer dit eens (geef de container ook een width en height):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
#container {
position: relative;
}
#container {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
}
</style>
<div id="container">
<div id="testdiv"></div>
</div>
#container {
position: relative;
}
#container {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
}
</style>
<div id="container">
<div id="testdiv"></div>
</div>
Binnen deze situatie zou die javascript kunnen werken
Gewijzigd op 14/01/2013 11:36:43 door Kris Peeters