I have a case where I use an event listener to resize a div :
window.addEventListener('resize', (event) => {
var responsiveWidth = document.querySelector(".responsive").offsetWidth;
var resumeWidth = node.offsetWidth;
if(responsiveWidth<resumeWidth){
node.style.scale = responsiveWidth/resumeWidth;
targetNode.style.height = `${node.offsetHeight*responsiveWidth/resumeWidth}px`;
}
});
Though I have a problem when user grab the browser top handle, undocks the browser and dock it back up. The resize event doesn't trigger in this case and my resized DIV stays in an undesired size.
I have been trying to use fullscreenchange listener as per https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event with no luck
Would there be an event that triggers when the browser is docked/undocked from edge of screen ?
Related
I trying to achieve drag and drop functionality using RxJS. It works, almost, but the drag event gets triggered on mousedown, and I don't understand why.
Here's simplified version of the code, I'm listening on document just to make the example easier.
const down = Rx.Observable.fromEvent(document, 'mousedown');
const up = Rx.Observable.fromEvent(document, 'mouseup');
const move = Rx.Observable.fromEvent(document, 'mousemove');
const drag = down.switchMap(() => move.takeUntil(up).take(1));
const dragging = drag.switchMap(() => move.takeUntil(up));
const drop = drag.switchMap(() => up.take(1));
down, up, dragging and drop works as expected, but drag gets triggered directly on mousedown, why?
JSBin:
http://jsbin.com/rafurudofe/1/edit?js,console,output
Edit:
Seems like it works as expected in IE, but not in Chrome.
I am using html5 drag and drop.
When I drag an image or link from any given webpage, the browser-window is recognizing the dragover event.
For example dragging an image over a browser tab, makes the browser switching the window. Same works for example with dragging links to bookmarks.
Now when I drag my custom draggable element, there is no reaction from the browser. Is there a way to change this behavior?
I don't understand what you want to achieve, but it seems that you want to make something happens when you move your custom element outside the document or the window.
You should try binding a handler with a dragleave or something like that. Here is an example from another question:
var dropTarget = $('.dropTarget'),
html = $('html'),
showDrag = false,
timeout = -1;
html.bind('dragenter', function () {
dropTarget.addClass('dragging');
showDrag = true;
});
html.bind('dragover', function(){
showDrag = true;
});
html.bind('dragleave', function (e) {
showDrag = false;
clearTimeout( timeout );
timeout = setTimeout( function(){
if( !showDrag ){ dropTarget.removeClass('dragging'); }
}, 200 );
});
I think that could work for you, but for further help you should extend your issue's description.
Also I ll leave some HTML5 drag and drop docs here
I am making a Flash Photogallery and I have a problem with my preloader. My gallery works fine offline(in simulating download) but the problem is when it's online the loading percentage won't show up. So far I figured out that the ProgressEvent is not triggering when gallery loads full size image. Sometimes it triggers on 100%, sometimes it triggers on time but usually it don't trigger. Here is the link of my gallery and some code: solarratko.netii.net
public function kreni(f:String) //function that start when user click on thumbnail
{
URLrequest=new URLRequest(f); //URLrequest for image in full size
dspLoader.load(URLrequest); //loading the image
preloader.visible = true;//prelaoder that shows up is visible
h.visible=true;//text area for percentage is visible
dspLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progres);//adding progress event
dspLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, kraj);//adding complete event
}
public function progres(e:Event):void
{
var perc:Number = e.target.bytesLoaded / e.target.bytesTotal;//calculatin percentage
h.text = Math.ceil(perc*100).toString();//displaying percentage wich is not working online or it start too late
}
public function kraj(e:Event):void
{
h.text="";
preloader.visible = false;
h.visible=false;
}
I placed the html5 canvas in the background using the following
style="position:fixed;top:0;left:0;z-index:-1;"
On my window.onload(), I am adding a mouse event listener to the canvas as follows
canvas.addEventListener('mousemove', onMouseMove, false)
but unfortunately my canvas is not receiving any mouse events. How do you propagate events down the z-axis? Is it possible to do it without using any external library(if exist)?
I tried searching for it but couldn't found anything relevant so far.
You want to "bubble" a mousemove event from a none-fixed element to a fixed element with different parents? I think you have to check and trigger for your own:
Build a wrapper for the none fixed element(s). This gets also a mousemove event listener. If the mousemove is over the fixed element (check clientX and clientY), trigger the mousemove event on the fixed element.
E.g. tested with firefox:
function onCanvasMouseMove(oEvent) {
console.log(oEvent);
}
// wrapper mousemove handler:
// if the mouse is over the canvas, trigger mousemove event on it.
function onWrapperMouseMove(oEvent) {
if (
oEvent.clientX <= oCanvas.offsetWidth
&& oEvent.clientY <= oCanvas.offsetHeight
) {
oEvent.stopPropagation();
var oNewEvent = document.createEvent("MouseEvents");
oNewEvent.initMouseEvent("mousemove", true, true, window, 0, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, false, false, false, false, 0, null);
oCanvas.dispatchEvent(oNewEvent);
}
}
var oCanvas;
window.onload = function() {
oCanvas = document.getElementById('canvas');
oCanvas.addEventListener('mousemove', onCanvasMouseMove, false);
// add mousemove listener to none-fixed wrapper
var oWrapper = document.getElementById('wrapper');
oWrapper.addEventListener('mousemove', onWrapperMouseMove, false);
};
Also see this example.
P.s.: bubbling is not the right word, it normaly means bubbling the event to the parent elements.
You could try setting the overlaid elements to pointer-events: none but this will only work in Firefox, Chrome and Safari. It might also cause you some issues if there are some elements and mouse events you do want to handle before they hit the canvas.
I am using an html5 video player on a website.
When the user starts playing it, the player goes into fullscreen mode and plays the video.
When the video has ended, I catch the ended event and close the video player via myvideo.webkitExitFullScreen();.
Now, I need another event when the player actually gets closed either if the user taps the "done" button in top bar or if the player gets closed via video.webkitExitFullScreen();.
Is there a way to do this?
Updated Answer
You can use the webkitendfullscreen and webkitenterfullscreen events:
var vid = document.getElementById("some-vid");
vid.addEventListener('webkitendfullscreen', function (e) {
// handle end full screen
});
vid.addEventListener('webkitenterfullscreen', function (e) {
// handle enter full screen
});
Previous Answer
A similar question was asked here: How do I capture keyboard events while watching an HTML5 video in fullscreen mode? - not sure how to link these 2 questions.
I'm just going to assume you use jQuery for ease of writing this code. You just need to know when the video has changed modes from full-screen to not-full-screen... so on Resize you can check the video.webkitDisplayingFullscreen; property.
var isVideoFullscreen = video.webkitDisplayingFullscreen;
$(window).bind("resize", function (e) {
// check to see if your browser has exited fullscreen
if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
isVideoFullscreen = video.webkitDisplayingFullscreen;
if (isVideoFullscreen) {
// you have just ENTERED full screen video
} else {
// you have just EXITED full screen video
}
}
});
Hope this helps or points you in the right direction
$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullscreenOn' : 'FullscreenOff';
// Now do something interesting
alert('Event: ' + event);
});