Wat is het verschil?
Wat is het verschil in JQUERY dat de eerste code wel werkt en de tweede niet:
(Het enigste verschil is de append functie)
Werkende code:
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
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
HTML:
<div class="help">Help</div>
<div class="help_popup" id="help_popup">
<div class="help_close" id="help_close"></div>
</div>
<div class="overlay"></div>
CSS:
overlay{
z-index:4;
display:none;
background-color:#333333;
opacity:0.7;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.help_popup{
position:absolute;
display:none;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
z-index:6;
width:300px;
height:400px;
background-color:#FFFFFF;
-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
border-radius: 4px;
}
.help_close{
width:10px;
height:10px;
display:block;
border:1px solid #CCC;
}
JQUERY:
$(document).ready(function(){
help();
});
function help(){
$('.help').click(function(){
$('.overlay').fadeIn(500, function(){
$('#help_popup').fadeIn(300);
});
});
$('#help_close').click(function(){
$('#help_popup').fadeOut();
});
}
<div class="help">Help</div>
<div class="help_popup" id="help_popup">
<div class="help_close" id="help_close"></div>
</div>
<div class="overlay"></div>
CSS:
overlay{
z-index:4;
display:none;
background-color:#333333;
opacity:0.7;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.help_popup{
position:absolute;
display:none;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
z-index:6;
width:300px;
height:400px;
background-color:#FFFFFF;
-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
border-radius: 4px;
}
.help_close{
width:10px;
height:10px;
display:block;
border:1px solid #CCC;
}
JQUERY:
$(document).ready(function(){
help();
});
function help(){
$('.help').click(function(){
$('.overlay').fadeIn(500, function(){
$('#help_popup').fadeIn(300);
});
});
$('#help_close').click(function(){
$('#help_popup').fadeOut();
});
}
Niet werkende code:
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
HTML:
<div class="help">Help</div>
<div class="help_popup" id="help_popup">
<div class="help_close" id="help_close"></div>
</div>
<div class="overlay"></div>
CSS:
overlay{
z-index:4;
display:none;
background-color:#333333;
opacity:0.7;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.help_popup{
position:absolute;
display:none;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
z-index:6;
width:300px;
height:400px;
background-color:#FFFFFF;
-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
border-radius: 4px;
}
.help_close{
width:10px;
height:10px;
display:block;
border:1px solid #CCC;
}
JQUERY:
$(document).ready(function(){
help();
});
function help(){
var overlay = '<div class="overlay"></div>';
var popup ='<div class="help_popup" id="help_popup"><div class="help_close" id="help_close"></div></div>';
$('.help').click(function(){
$('body').append(overlay);
$('body').append(popup);
$('.overlay').fadeIn(500, function(){
$('#help_popup').fadeIn(300);
});
});
$('#help_close').click(function(){
$('#help_popup').fadeOut();
});
}
<div class="help">Help</div>
<div class="help_popup" id="help_popup">
<div class="help_close" id="help_close"></div>
</div>
<div class="overlay"></div>
CSS:
overlay{
z-index:4;
display:none;
background-color:#333333;
opacity:0.7;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.help_popup{
position:absolute;
display:none;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
z-index:6;
width:300px;
height:400px;
background-color:#FFFFFF;
-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 10px 25px;
border-radius: 4px;
}
.help_close{
width:10px;
height:10px;
display:block;
border:1px solid #CCC;
}
JQUERY:
$(document).ready(function(){
help();
});
function help(){
var overlay = '<div class="overlay"></div>';
var popup ='<div class="help_popup" id="help_popup"><div class="help_close" id="help_close"></div></div>';
$('.help').click(function(){
$('body').append(overlay);
$('body').append(popup);
$('.overlay').fadeIn(500, function(){
$('#help_popup').fadeIn(300);
});
});
$('#help_close').click(function(){
$('#help_popup').fadeOut();
});
}
Gr. Jop
Gewijzigd op 06/11/2015 12:45:33 door Jop B
Edit: Dit is je tweede code: http://codepen.io/anon/pen/NGLVoV
Gewijzigd op 06/11/2015 13:32:16 door DavY -
Inderdaad hier werkt de code wel. Op JSFIDDLEen op mijn site werk de code niet.
Dat snap ik eerlijk gezegd niet.
de eerste functie, het tonen van de popup werkt wel maar de sluit functie niet.
Gewijzigd op 06/11/2015 14:02:56 door Jop B
en na de append heb je ook meerdere elementen met hetzelfde id (help_popup)
De close actie zit alleen op het element met id help_close dat al bestond op het moment dat je op regel 60 komt.
Die close-functie moet dan van jou een element met id=help_popup out-faden.
welke? Geen idee of het de bestaande pakt of de toegevoegde, of dat javascript zegt: ik weet niet welke dus ik doe beide niet?
Probeer het eens zonder de vaste elementen in je html.
en op regel 60 :
Code (php)
1
2
3
2
3
$(document).on('click', '#help_close', function(){
$('#help_popup').fadeOut();
});
$('#help_popup').fadeOut();
});
Ik zie nu dat ik in de voorbeeld code 2 ook deze zelfde html heb getypt waar dus eigenlijk alleen
Code (php)
1
<div class="help">Help</div>
had moeten staan in de topic.
In jullie voorbeeld gebruiken jullie het onderstaande:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).on('click', '#help_close', function(){
$('#help_popup').fadeOut( function(){
$('.overlay').fadeOut();
});
});
$('#help_popup').fadeOut( function(){
$('.overlay').fadeOut();
});
});
Maar dan zou toch een gewone click(function() ook moeten werken?
hier mijn Fiddle
Waarom gebruik je nou dan document?
Code (php)
1
2
3
4
5
2
3
4
5
$(document).on('click', '#help_close', function(){
$('#help_popup').fadeOut( function(){
$('.overlay').fadeOut();
});
});
$('#help_popup').fadeOut( function(){
$('.overlay').fadeOut();
});
});
en niet ''help_popup''
Code (php)
1
2
3
4
5
2
3
4
5
$('#help_popup').on('click', '#help_close', function(){
$('#help_popup').fadeOut( function(){
$('.overlay').fadeOut();
});
});
$('#help_popup').fadeOut( function(){
$('.overlay').fadeOut();
});
});
Edit: want het element #help_close zit toch in #help_popup?
Gewijzigd op 07/11/2015 12:59:06 door Yoeri Achterbergen
Maar zou in dit geval mogelijk niet uitmaken