[Jquery] Probleem met .html()
Quote:
Topic verplaats naar OOP omdat je het topic niet kan zien in webdesign
Beste php'ers,
Ik heb een stukje code die een div leeg maakt als ik ergens op klik,
Hier moet weer een plaatje in komen te staan als hij opnieuw start, maar dat doet hij niet.
Weet iemand wat hier niet aan klopt?
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
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
$(function() {
var left = 0;
var step = 50;
var count = 1;
var max = 8;
var left2 = 500;
var step2 = 75;
var count2 = 1;
var max2 = 7;
var width = 500;
var height = 150;
var arr = new Array(50,33,25,33,25,33,50,25);
for (num=0;num<arr.length;num++) {
$("#float").animate({height: arr[num]+'px',"left": "0px","top": "0px"},0);
$("#float2").animate({height: arr[num]+'px',"left": "500px","top": "500px"},0);
$('#float').html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,\'float\');"/>');
$('#float2').html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,\'float2\');"/>');
$("#float").animate({width: arr[num]+'px'},300);
$("#float2").animate({width: arr[num]+'px'},300);
for(i=0; i<width/step;i++) {
$("#float").animate({
"left": left+"px",
"top": (Math.random()*height)+"px"
}, 500);
left = left + step;
count++;
if(count2 <= max2) {
$("#float2").animate({
"left": left2+"px",
"top": (Math.random()*height)+"px"
}, 500);
left2 = left2 - step2;
count2++;
}
}
left = 0;
left2 = 500;
count = 1;
count2 = 1;
$("#float").animate({width: '0px', height: '0px'},0);
$("#float2").animate({width: '0px', height: '0px'},0);
}
});
var score2 = 0;
function hit(addscore,div) {
$('#score').html((score2 + addscore) + ' punten');
$('#'+div).html('');
score2++;
}
var left = 0;
var step = 50;
var count = 1;
var max = 8;
var left2 = 500;
var step2 = 75;
var count2 = 1;
var max2 = 7;
var width = 500;
var height = 150;
var arr = new Array(50,33,25,33,25,33,50,25);
for (num=0;num<arr.length;num++) {
$("#float").animate({height: arr[num]+'px',"left": "0px","top": "0px"},0);
$("#float2").animate({height: arr[num]+'px',"left": "500px","top": "500px"},0);
$('#float').html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,\'float\');"/>');
$('#float2').html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,\'float2\');"/>');
$("#float").animate({width: arr[num]+'px'},300);
$("#float2").animate({width: arr[num]+'px'},300);
for(i=0; i<width/step;i++) {
$("#float").animate({
"left": left+"px",
"top": (Math.random()*height)+"px"
}, 500);
left = left + step;
count++;
if(count2 <= max2) {
$("#float2").animate({
"left": left2+"px",
"top": (Math.random()*height)+"px"
}, 500);
left2 = left2 - step2;
count2++;
}
}
left = 0;
left2 = 500;
count = 1;
count2 = 1;
$("#float").animate({width: '0px', height: '0px'},0);
$("#float2").animate({width: '0px', height: '0px'},0);
}
});
var score2 = 0;
function hit(addscore,div) {
$('#score').html((score2 + addscore) + ' punten');
$('#'+div).html('');
score2++;
}
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
<html>
<head>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/schiettraining.js"></script>
<style type="text/css">
#float {
width: 0px;
position: absolute;
background-color:#FF0000;
}
#float2 {
width: 0px;
position: absolute;
background-color:#FF0000;
}
</style>
</head>
<body>
<div id="float"><img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,'float');"/></div>
<div id="float2"><img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,'float2');"/></div>
<div id="score"></div>
</body>
</html>
<head>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/schiettraining.js"></script>
<style type="text/css">
#float {
width: 0px;
position: absolute;
background-color:#FF0000;
}
#float2 {
width: 0px;
position: absolute;
background-color:#FF0000;
}
</style>
</head>
<body>
<div id="float"><img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,'float');"/></div>
<div id="float2"><img style="width:100%; height:100%;"; src="images/schietschijf.png" alt="" onclick="hit(1,'float2');"/></div>
<div id="score"></div>
</body>
</html>
En onclick="hit(1,'float');" kan je vervangen door een jquery onclick event
Dus gewoon hier lekker verder gaan.
Tom schreef op 06.02.2010 11:06:
Klopt, veel slimmer om het zo te doen..krijg je nog javascript errors? Tip: gebruik firebug.
En onclick="hit(1,'float');" kan je vervangen door een jquery onclick event
En onclick="hit(1,'float');" kan je vervangen door een jquery onclick event
Weet iemand hoe ik dit probleem kan oplossen, het plaatje komt niet terug als de div opnieuw aan de zijkant start?
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
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
$(function() {
var score2 = 0;
$('#float').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float").html('');
});
$('#float2').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float2").html('');
});
var left = 0;
var step = 50;
var count = 1;
var max = 8;
var left2 = 500;
var step2 = 75;
var count2 = 1;
var max2 = 9;
var score2 = 0;
$('#float').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float").animate({width: '0px', height: '0px'},0);
});
$('#float2').click(function(){
$('#score').html((score2 + 10) + ' punten');
});
var width = 500;
var height = 150;
var arr = new Array(50,33,25,33,25,33,50,25);
for (num=0;num<arr.length;num++) {
$("#float").animate({height: arr[num]+'px',"left": "0px","top": "0px"},0);
$("#float2").animate({height: arr[num]+'px',"left": "500px","top": "500px"},0);
$("#float").animate({width: arr[num]+'px'},300);
$("#float2").animate({width: arr[num]+'px'},300);
$("#float").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
$("#float2").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
for(i=0; i<width/step;i++) {
if(count <= max) {
$("#float").animate({
"left": left+"px",
"top": (Math.random()*height)+"px"
}, 500);
left = left + step;
count++;
}
if(count2 <= max2) {
$("#float2").animate({
"left": left2+"px",
"top": (Math.random()*height)+"px"
}, 500);
left2 = left2 - step2;
count2++;
}
}
left = 0;
left2 = 500;
count = 1;
count2 = 1;
$("#float").animate({width: '0px', height: '0px'},0);
$("#float2").animate({width: '0px', height: '0px'},0);
}
});
var score2 = 0;
$('#float').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float").html('');
});
$('#float2').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float2").html('');
});
var left = 0;
var step = 50;
var count = 1;
var max = 8;
var left2 = 500;
var step2 = 75;
var count2 = 1;
var max2 = 9;
var score2 = 0;
$('#float').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float").animate({width: '0px', height: '0px'},0);
});
$('#float2').click(function(){
$('#score').html((score2 + 10) + ' punten');
});
var width = 500;
var height = 150;
var arr = new Array(50,33,25,33,25,33,50,25);
for (num=0;num<arr.length;num++) {
$("#float").animate({height: arr[num]+'px',"left": "0px","top": "0px"},0);
$("#float2").animate({height: arr[num]+'px',"left": "500px","top": "500px"},0);
$("#float").animate({width: arr[num]+'px'},300);
$("#float2").animate({width: arr[num]+'px'},300);
$("#float").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
$("#float2").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
for(i=0; i<width/step;i++) {
if(count <= max) {
$("#float").animate({
"left": left+"px",
"top": (Math.random()*height)+"px"
}, 500);
left = left + step;
count++;
}
if(count2 <= max2) {
$("#float2").animate({
"left": left2+"px",
"top": (Math.random()*height)+"px"
}, 500);
left2 = left2 - step2;
count2++;
}
}
left = 0;
left2 = 500;
count = 1;
count2 = 1;
$("#float").animate({width: '0px', height: '0px'},0);
$("#float2").animate({width: '0px', height: '0px'},0);
}
});
Karl schreef op 06.02.2010 11:09:
Het is niet verplaatst, het is gewoon een nieuw topic.
Dus gewoon hier lekker verder gaan.
Dus gewoon hier lekker verder gaan.
Het staat niet eens in de juiste categorie.
Karl schreef op 06.02.2010 12:01:
Het staat niet eens in de juiste categorie.
Karl schreef op 06.02.2010 11:09:
Het is niet verplaatst, het is gewoon een nieuw topic.
Dus gewoon hier lekker verder gaan.
Dus gewoon hier lekker verder gaan.
Het staat niet eens in de juiste categorie.
In het webdesign categorie kan ik de topics niet openen omdat het menu erover staat en er staan er maar 4.
Dat ze er maar voor zorgen dat ik daar weer normaal mijn topics neer kan zetten..
Ziet er heel normaal uit daar hoor?
demo: [worldwidemaffia][.]com/schiettraining.php
Code (php)
1
2
2
$("#float").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
$("#float2").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
$("#float2").html('<img style="width:100%; height:100%;"; src="images/schietschijf.png" alt=""/>');
wat doet die ; er na style="width:100%; height:100%;"?
Eruitgehaald, maar het veranderd verder nog niets..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$('#float').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float").html('');
});
$('#float2').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float2").html('');
});
$('#score').html((score2 + 10) + ' punten');
$("#float").html('');
});
$('#float2').click(function(){
$('#score').html((score2 + 10) + ' punten');
$("#float2").html('');
});
Haal die $("#float").html(''); en $("#float2").html(''); is weg:P
Tom schreef op 06.02.2010 13:10:
Haal die $("#float").html(''); en $("#float2").html(''); is weg:P
Haal die $("#float").html(''); en $("#float2").html(''); is weg:P
Dat is eigenlijk niet de bedoeling, als je erop hebt geklikt moet hij weg gaan en als die weer opnieuw start moet hij terugkomen.
Iemand?