[jquery] dialog verschijnt niet bij muis
Ik probeer een bioscoop programma weergave te maken. Ik heb een knopje "trailer" bij iedere film maar wanneer je erop klikt verspringt de pagina en hij gaat terug na het klikken op het kruisje.
Voorbeeld: http://moviechecker.be/widget/programma/
Dit werkt dus niet:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
/*=== trailer weergeven ===*/
$(document).on("click", ".trailer", function() {
var yt_id = $(this).attr('id');
$("span.ui-dialog-title").text('Trailer');
$("#popup_body").html('<iframe type="text/html" width="100%" height="500px" src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0"/>');
$("#popup").dialog("open").dialog('option', 'position',[e.pageX,e.pageY]); <== werkt dus niet.
});
$(document).on("click", ".trailer", function() {
var yt_id = $(this).attr('id');
$("span.ui-dialog-title").text('Trailer');
$("#popup_body").html('<iframe type="text/html" width="100%" height="500px" src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0"/>');
$("#popup").dialog("open").dialog('option', 'position',[e.pageX,e.pageY]); <== werkt dus niet.
});
Hoe kan het nog?
Mvg. Christophe
Gewijzigd op 07/04/2014 12:25:06 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
Die variabelen kun je dan in je eigen script weer gebruiken
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
/*=== trailer weergeven ===*/
$(document).on("click", ".trailer", function() {
var yt_id = $(this).attr('id');
$("span.ui-dialog-title").text('Trailer');
$("#popup_body").html('<iframe type="text/html" width="100%" height="500px" src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0"/>');
$("#popup").dialog("open").dialog('option', 'position',[mouseX,mouseY]);
});
$(document).on("click", ".trailer", function() {
var yt_id = $(this).attr('id');
$("span.ui-dialog-title").text('Trailer');
$("#popup_body").html('<iframe type="text/html" width="100%" height="500px" src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0"/>');
$("#popup").dialog("open").dialog('option', 'position',[mouseX,mouseY]);
});
Kan ik er voor zorgen dat hij center in het scherm en niet in de pagina?
dus in het midden horizontaal en verticaal op het scherm en niet weg scrollend.
Je zou het met CSS kunnen doen of een combinatie met jQuery om je positie/hoogte/breedte te bepalen.
Gewijzigd op 07/04/2014 14:04:04 door Michael -