I am using mouse wheel zoom in my d3 Map.Following Code am using.
.on("wheel.zoom", function() {
var currScale = projection41039.scale();
var newScale = currScale - 1 * event.deltaY;
if (newScale >= 150) {
var currTranslate = projection41039.translate();
var coords = projection41039.invert([event.offsetX, event.offsetY]);
projection41039.scale(newScale);
var newPos = projection41039(coords);
projection41039.translate([currTranslate[0] + (event.offsetX - newPos[0]),
currTranslate[1] + (event.offsetY - newPos[1])
]);
updateContents();
}
})
This works fine for Chrome, but throws an error in Firefox:
ReferenceError: event is not defined
The issue here is that Chrome follows the Internet Explorer feature of Window.event, while Firefox doesn't:
For instance, given a button or any other element, the following snippet will work on Chrome, but not on Firefox:
d3.select("button").on("click", function() {
console.log(event)
})
Try it here: https://jsfiddle.net/b9h4ntn0/ (I normally use Stack Snippets, but the snippet will freeze in that particular example)
Solution
Use d3.event. That way, you don't rely on Window.event:
d3.select("button").on("click", function() {
console.log(d3.event)
})
The following code works both on Chrome and Firefox: https://jsfiddle.net/qj787zmj/
Related
I am trying to tilt an image based on HTML5 DeviceOrientation event. However, I am seeing that the event is getting continuously fired even when the device is stable i.e non rotating/non moving. In the following code snippet, the console log is printed continuously. What is the possible reason, how can I stop it.
I tried both capturing and bubbling,
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(eventData) {
var tiltLR = eventData.gamma;
console.log("tiltLR..........",tiltLR);
}, false);
}
I havent needed to use this type of event listener before so I am not familiar with the output.
However, I believe you would need to compare the old tilt with the new tilt. If the new tilt is substantially greater or less then... execute code.
if (window.DeviceOrientationEvent) {
var originalTilt = undefined,
tolerance = 5;
window.addEventListener('deviceorientation', function(eventData) {
if (eventData.gamma > originalTilt + tolerance ||
eventData.gamma < originalTilt - tolerance){
var tiltLR = eventData.gamma;
console.log("tiltLR..........",tiltLR);
originalTilt = tiltLR;
}
}, false);
}
I have an HTML5 canvas based Javascript component that needs to capture and release mouse events. In the control the user clicks an area inside it and drags to affect a change. On PC I would like the user to be able to continue dragging outside of the browser and for the canvas to receive the mouse up event if the button is released outside of the window.
However, according to my reading setCapture and releaseCapture aren't supported on Chrome.
Is there a workaround?
An article written in 2009 details how you can implement cross-browser dragging which will continue to fire mousemove events even if the user's cursor leaves the window.
http://news.qooxdoo.org/mouse-capturing
Here's the essential code from the article:
function draggable(element) {
var dragging = null;
addListener(element, "mousedown", function(e) {
var e = window.event || e;
dragging = {
mouseX: e.clientX,
mouseY: e.clientY,
startX: parseInt(element.style.left),
startY: parseInt(element.style.top)
};
if (element.setCapture) element.setCapture();
});
addListener(element, "losecapture", function() {
dragging = null;
});
addListener(document, "mouseup", function() {
dragging = null;
}, true);
var dragTarget = element.setCapture ? element : document;
addListener(dragTarget, "mousemove", function(e) {
if (!dragging) return;
var e = window.event || e;
var top = dragging.startY + (e.clientY - dragging.mouseY);
var left = dragging.startX + (e.clientX - dragging.mouseX);
element.style.top = (Math.max(0, top)) + "px";
element.style.left = (Math.max(0, left)) + "px";
}, true);
};
draggable(document.getElementById("drag"));
The article contains a pretty good explanation of what's going on, but there are a few gaps where knowledge is assumed. Basically (I think), in Chrome and Safari, if you handle mousemove on the document then, if the user clicks down and holds the mouse, the document will continue receiving mousemove events even if the cursor leaves the window. These events will not propagate to child nodes of the document, so you have to handle it at the document level.
Chrome supports setPointerCapture, which is part of the W3C Pointer events recommendation. Thus an alternative would be to use pointer events and these methods.
You might want to use the jquery Pointer Events Polyfill to support other browsers.
I'm trying to detect when a video file has completed loading. i made it work successfully on firefox and safari but on chrome, buffered event behaves strange..
so,
in my local host chrome works fine but when i upload to server;
buffer percentage stops about %50 but buffers %100,
when page refreshed, percentage stay at %0 but it continues to buffering..
here is my javascript
function loaded()
{
var v = document.getElementById('myVideo');
var r = v.buffered;
var total = v.duration;
var current=v.currentTime;
var start = r.start(0);
var end = r.end(0);
var downloadPercent= Math.round((end / total)*100)
$("#loadProgress").css('width',downloadPercent+ '%');
if(downloadPercent==100){
$("#preloaderWrapper").fadeOut(function(){
document.getElementById('myVideo').play();
clearInterval(ratoteLoad);
$(this).remove();
});
}
}
$('#myVideo').bind('progress', function()
{
loaded();
});
any idea?
thank you
try this instead:
myVideoTag = document.getElementById('video');
myVideoTag.addEventListener('progress', function(e) {
var percent = null;
// FF4+, Chrome
if (myVideoTag && myVideoTag.buffered && myVideoTag.buffered.length > 0 && myVideoTag.buffered.end && myVideoTag.duration) {
percent = myVideoTag.buffered.end(0) / myVideoTag.duration;
}
// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
// to be anything other than 0. If the byte count is available we use this instead.
// Browsers that support the else if do not seem to have the bufferedBytes value and
// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
else if (myVideoTag && myVideoTag.bytesTotal != undefined && myVideoTag.bytesTotal > 0 && myVideoTag.bufferedBytes != undefined) {
percent = myVideoTag.bufferedBytes / myVideoTag.bytesTotal;
}
if (percent !== null) {
percent = 100 * Math.min(1, Math.max(0, percent));
// ... do something with var percent here (e.g. update the progress bar)
}
}, false);
... comments copied from mediaelement.js, code as well but adjusted for easier display here. I omitted the code for Firefox 3.0 as it's less than relevant.
working fine in all current browsers
PS: thx to John Dyer for mejs - great stuff ;)
The following function works perfectly for me with Chrome and Firefox, while it fails with Internet Explorer. I added the the the obj_* assignments to debug it in IE, the .height() or .width methods do not work.
Is the jpgmulti stream not usable for IE? Do I have to call it different for IE? Below is confirmed working with Chrome and FF on MacOSX.
function append-base64image(jpgmulti) {
var object = jQuery.parseJSON('{'+jpgmulti+'}');
for (var content in object) {
// create element for image
var image_roll = document.createElement("img");
// ad attributes to element
image_roll.setAttribute("src", "data:image/jpeg;base64,"+object[content]);
// calculate aspect ratio for preview:
var obj_height = object[content].height;
var obj_width = object[content].width;
var div_obj_width = obj_width/150;
var height_resize = obj_height/div_obj_width;
image_roll.setAttribute("width", 150);
image_roll.setAttribute("height", height_resize);
document.getElementById("previews").appendChild(image_roll);
}
}
I read this article regarding creating popup notes with javascript and css
The problem is that this one works only in IE since window.event is undefined in Firefox.
// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;
So could you point me a fully working example? Or at least, how could i modify the javascript code to make it work in both internet browsers?
There are more than two browsers, but the following should work in most of them (adapted from the function on the page you linked to):
showNote = function(evt) {
evt = evt || window.event;
// gets note1 element
var note1=document.getElementById('note1');
// assigns X,Y mouse coordinates to 'note1' element
note1.style.left=evt.clientX;
note1.style.top=evt.clientY;
// makes note1 element visible
note1.style.visibility='visible';
};
The problem is that not all browsers have an event property of window and instead use an event object implicitly passed in as a parameter to an event handler function such as showNote. The evt = evt || window.event; line assigns window.event to the evt variable if no event parameter was passed into the function (which is what happens in Internet Explorer).
You can separate the two branches when you define the method.
It takes more characters than bundling them together,
but you do not have to check for support on every every call.
//
window.whereAt= (function(){
var fun;
if(typeof pageXOffset== 'number'){
fun= function(e){
var pX, pY, sX, sY;
pX= e.clientX || 0;
pY= e.clientY || 0;
sX= window.pageXOffset;
sY= window.pageYOffset;
return [(pX+sX), (pY+sY)];
}
}
else{
fun= function(e){
e= (e && e.clientX)? e: window.event;
var pX, pY, sX, sY;
pX= (e.clientX);
pY= (e.clientY);
var d= document.documentElement;
var b= document.body;
sX= Math.max(d.scrollLeft, b.scrollLeft);
sY= Math.max(d.scrollTop, b.scrollTop);
var pwot= [(pX+sX), (pY+sY)];
return pwot;
}
}
return fun;
})()
//test case
document.ondblclick= function(ev){
alert(whereAt(ev))
};
I finally found a solution, but using canvas.addEventListener instead of onclick funion bind in attributes of canvas. And it works in IE, FF, Chrome.
canvas.addEventListener('mousedown', ev_canvas, false);
function ev_mousedown(ev){
var posx=0;posy=0;
if (e.offsetX > 0) { // IE, Chrome
posx = e.offsetX;
posy = e.offsetY;
} else{ // Firefox
posx = e.layerX;
posy = e.layerY;
}
} // This also works correctly while zoom!=100%
<div style="position: relative;">
<canvas id="canvas" width="600" height="600" onClick="newClick()" style="position: relative;"></canvas>
</div>
See reference: http://dev.opera.com/articles/view/html5-canvas-painting/
The following codes doesn't work in Firefox.
showNote = function(evt) {
evt = evt || window.event;
// gets note1 element
var note1=document.getElementById('note1');
// assigns X,Y mouse coordinates to 'note1' element
note1.style.left=evt.clientX;
note1.style.top=evt.clientY;
// makes note1 element visible
note1.style.visibility='visible'
}
I have google for many solutions and referenced the relatively official site for browers differs: http://www.quirksmode.org/dom/w3c_cssom.html#mousepos
But still have not found a solution in Firefox 20.
window.event has no definition in FF. But works well in IE and Chrome.
I wonder have I misunderstood something in this point?