I have a simple JSFiddle here: http://jsfiddle.net/cvCWc/2/
The basic code looks like:
window.player = videojs("movie_container", { techOrder: ["html5", "slash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.on("click", function(event){
event.preventDefault();
alert('click');
});
videojs_player.play();
});
I am trying to capture all click events on the video for future processing, but I don't want the video to pause when clicked. Any ideas?
I found the answer for HTML5... but I don't get click events in the flash fallback. Updated jsfdl: http://jsfiddle.net/cvCWc/3/
window.player = videojs("movie_container", { techOrder: ["html5", "flash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.off('click');
videojs_player.on("click", function(event){
event.preventDefault();
console.log("click", event.clientX, event.clientY, videojs_player.currentTime());
});
videojs_player.play();
});
Just an alternative if someone drops to this. When you wanna bypass the stop play functionality when user clicks the stream(or view, whatever you call it), not the control bar, one can comment out somelines in videojs..
Player.prototype.handleTechClick_ = function handleTechClick_(event) {
// We're using mousedown to detect clicks thanks to Flash, but mousedown
// will also be triggered with right-clicks, so we need to prevent that
if (event.button !== 0) return;
// When controls are disabled a click should not toggle playback because
// the click is considered a control
if (this.controls()) {
if (this.paused()) {
//this.play(); // COMMENTED OUT
} else {
//this.pause(); // COMMENTED OUT
}
}
};
Control bar will still work...
Related
Example of a problem:
The click event inside the form is not triggered
$(document).on('click', function(e) {
console.log('ok');
});
The most interesting thing is that the change event works correctly
What could be the problem at all ?
In General, I found a problem, maybe someone will be useful:
$(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
$('input[name^="shipping_method"]').on('click', function(e) {
console.log('ok');
});
});
Instead of input[name^="shipping_method, you can add any class that is inside the form
I am currently using bootstrap date picker downloaded from eyecon.ro
On clicking the input field the datepicker popup opens, where i am showing the date.
However, on scrolling the browser's window, the datepicker's popup disappears. I have also created an issue for this in github but haven't got any answer yet. Can anyone help me with this, please ?
When you click in any location on windows the event "onblur" is fired, so this is not a bug. Otherwise you can modify this coding a event for onblur to not 'hide' the datepicker window.
Edit:
Ok, make this modification on bootstrap-datepicker.JS, on Datepicker prototype (line 88):
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.place();
var t = this;
$(window).on('resize', $.proxy(this.place, this));
$(window).on("scroll", this.place, function() {
t.show();
});
if (e ) {
e.stopPropagation();
e.preventDefault();
}
if (!this.isInput) {
}
var that = this;
$(document).on('mousedown', function(ev){
if ($(ev.target).closest('.datepicker').length == 0) {
that.hide();
}
});
this.element.trigger({
type: 'show',
date: this.date
});
},
I just include a trigger for 'scroll', below the trigger for 'rezise' (line 6 here).
Following the example here I've tried doing the same but the query doesnt work for me.
http://jsfiddle.net/qDbd5/
require(["dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (parser, ToolBar, ToggleButton, query, domClass, on) {
on(query(".dijitToggleButton"), "click", function (e) {
query(".dijitToggleButton").forEach(function (node) {
console.log('Captured clicked event');
domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
});
I'm trying to make only 1 button toggle at a time.
Why the click event not triggered?
Wrapping everything in a ready() callback solves the problem.
See http://jsfiddle.net/cFQGq/
require(["dojo/ready", "dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (ready, parser, ToolBar, ToggleButton, query, domClass, on) {
ready(function() {
on(query(".dijitToggleButton"), "click", function (e) {
query(".dijitToggleButton").forEach(function (node) {
console.log('Captured clicked event');
domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
});
});
If you look at the explanation of domReady!, it mentions that it is insufficient for working with dojo widgets, because it executes after the DOM has loaded instead of after the widget has finished initializing. dojo/ready executes the callback after the widgets have finished loading.
I have an infoBox that opens when clicking on a google maps marker. Inside the infoBox there is a button '#open-popup' that when clicked should to open a magnificPopup modal window but nothing happens.
As a test I have put the same button outside the div containing the google map, which opens the modal window but only on the second click! What is going on?
I have tried all sort of things for days but all have worst side effects.
Any help will be much appreciated.
HTML for button inside infoBox:
<div style=...>
<centre>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
</center>
</div>
HTML for button outside google maps div:
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">Inline popup</div>
JS:
myapp.triggerClick = function (){
google.maps.event.trigger(gmarkers[id],"click")
};
var infoboxOptions = {
content: ''
,disableAutoPan: false
,alignBottom: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(0, 0)
,zIndex: 1000
,boxStyle: {
background:''
,opacity: 0.9
}
,closeBoxMargin: "4px 4px 0 0"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1,1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(infoboxOptions);
function createMarker(latlng, html, id) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map
//zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
ib.setContent(contentString);
ib.open(map,marker);
});
gmarkers[id] = marker;
}
$(document).on('click', '#open-popup', function () {
$(this).magnificPopup({
items: {
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
},
type: 'image' // this is default type
});
});
Try placing your jQuery click event inside a map event listener, that is set to fire when an infobox is clicked. A map event listener is needed because click events inside a google map are handled by the Google Map API.
So for you, something like:
window.google.maps.event.addListener(ib, "domready", function () {
$('#open-popup').on('click', function () {
$(this).magnificPopup({
items: {
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg'
},
type: 'image' // this is default type
});
});
});
Notice that I updated the selector for your on click event also. You may want to play around with that as the usual on selector syntax wouldn't work in my case, e.g. $('.preExistingElementSelector').on('click', '.dynamicElementSelector', function(){});
The infobox is dynamically added and removed from the dom every time it is shown and
closed. So what the function above is essentially doing is, after the new infobox instance has been added to the dom (i.e. is visible), add this new click event to it. Once you close that infobox, it is removed from the dom which also means that the event handler you attached to it is gone also. Which is why we add a new one each time.
I'm sure there's probably a neater solution out there, I just haven't had time to find one!
Also, make sure to keep enableEventPropagation: false in the infobox options so that the click event doesn't get swallowed by Google maps.
UPDATE
Here is a working example: http://jsfiddle.net/gavinfoley/4WRMc/10/
What you really need to be able to open the magnific popup through the API. So the only change I made was changing
$(this).magnificPopup({...});
to
$.magnificPopup.open({...});
And that solved it.
window.google.maps.event.addListener(ib, "domready", function () {
$('.open-popup').on('click', function () {
// Open magnificPopup through API
// See http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type
$.magnificPopup.open({
items: {
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg/180px-0418_-_Palermo%2C_Museo_archeologico_-_Testa_dal_tempo_E_di_Selinunte_-_Foto_Giovanni_Dall%27Orto.jpg'
},
type: 'image' // this is default type
});
});
});
I have the following situation:
A polyline is added on the map and when the user clicks over it its state changes to editable. Also i have event where if the user clicks the last vertext of the polyline and starts moving the mouse to be able to extend the polyline with the mouse path the user is drawing.
However it seems that when i have an event and inside this event i try to add another one it simply does not work and i don't kwow why.
Just in case to make things simpler to undrstand i will paste a part of my code.
google.maps.event.addListener(polyLine, "mousedown", function(event){
if(polyLine.getEditable() === true)
{
if(typeof event.vertex !== "undefined")
{
if(event.vertex === polyLine.getPath().getLength() - 1)
{
polyLine.setEditable(false);
if(mouseMoveDrawingEvent === null)
{
map.setOptions({draggable:false});
polyLine.setOptions({clickable:false});
mouseMoveDrawingEvent = google.maps.event.addListener(map, "mousemove", function(event)
{
alert("1"); // <== this never fires
polyLine.getPath().push(event.latLng);
drawingLabel.setPoint(event.latLng);
drawingLabel.setContents("<div style='background-color:white'>" + (google.maps.geometry.spherical.computeLength(polyLine.getPath()) / 1000).toFixed(2) + " ΠΊΠΌ.</div>");
});
}
map.getDiv().onmouseup = function(ev) {
polyLine.setOptions({clickable:true});
map.getDiv().onmousedown = null;
map.getDiv().onmouseup = null;
google.maps.event.removeListener(mouseMoveDrawingEvent);
mouseMoveDrawingEvent = null;
};
}
}
}
});
.....
thre is another event here that listens for 'mouseup'....
Do you guys have any idea how to make this peace of code works.
I found a solution to my questions.
The problem was that when i set the polyline {clickable:false} the api removes the event ( and obviously everyhing inside it:)