PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Wat is het verschil?

Door Jop B op 06-11-2015 12:44 gewijzigd op 06-11-2015 12:45
2.358 views
Hallo,

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:

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();
});

}


Niet werkende code:

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();
});

}





Gr. Jop
DavY -
06-11-2015 13:31 gewijzigd op 06-11-2015 13:32
Ik zie het verschil niet. Hij pakt beide op of je moet wat anders bedoelen.

Edit: Dit is je tweede code: http://codepen.io/anon/pen/NGLVoV
J
Jop B
06-11-2015 14:01 gewijzigd op 06-11-2015 14:02
Dank voor de reactie.

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.
Ivo P
06-11-2015 14:34
in situatie 2 heb je 2 divs met class="overlay"

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 :


$(document).on('click', '#help_close', function(){
   $('#help_popup').fadeOut();
});
J
Jop B
06-11-2015 18:30
deze werkt inderdaad.
Ik zie nu dat ik in de voorbeeld code 2 ook deze zelfde html heb getypt waar dus eigenlijk alleen
 <div class="help">Help</div>

had moeten staan in de topic.

In jullie voorbeeld gebruiken jullie het onderstaande:

$(document).on('click', '#help_close', function(){
		$('#help_popup').fadeOut( function(){
			$('.overlay').fadeOut();
		});
	});


Maar dan zou toch een gewone click(function() ook moeten werken?

hier mijn Fiddle
Y
Yoeri Achterbergen
06-11-2015 20:33 gewijzigd op 07-11-2015 12:59
@Ivo,


Waarom gebruik je nou dan document?

$(document).on('click', '#help_close', function(){
        $('#help_popup').fadeOut( function(){
            $('.overlay').fadeOut();
        });
    });


en niet ''help_popup''


$('#help_popup').on('click', '#help_close', function(){
        $('#help_popup').fadeOut( function(){
            $('.overlay').fadeOut();
        });
    });


Edit: want het element #help_close zit toch in #help_popup?
Ivo P
07-11-2015 19:31
omdat op het moment dat ik dat definee die #help_popup mogelijk nog niet bestaat.

Maar zou in dit geval mogelijk niet uitmaken

Reageren

Inloggen om te reageren