I've stuck a problem which appears to occur only with 64 bit browsers under Win7 and 8.
My application uses "JQuery Slider" (see http://egorkhmelev.github.io/jslider/) which works fine under all the test environments available to me--I develop under OS-X testing on Chrome, Safari, and Firefox on that platform, the same three on XP-SP3, and Safari under IOS.
Some users (and the customer) have demonstrated that the slider does not move under the Chrome, Firefox, and Safari under Windows 7. Using Opera however, the slider behaves as expected. It appears that the common factor is 64 bit browsers and 64 bit MS OS's. Strangely, the sliders work under IE, but the application, developed for a University, is not required to support any version of IE.
I've instrumented the function which responds to mousemove events and determined that it does not fire on the problem systems.
The bind code is :
this._bindEvent( $( document ), "move", function( event ){
if( self.is.drag ){
event.stopPropagation();
event.preventDefault();
self._mousemove( event );
}
});
Which looks reasonable to me (apart from the spacing ;-), and certainly works well under all my test environments.
My question: has anyone experienced similar problems, or know of special requirements under 64 bit browsers?
My application is located at PaperMiner.org.au and you can try the sliders without registering or anything.
The problem has been located. JQuery Slider responds to either clicks and touch events. The code looks like this:
this.supportTouches_ = 'ontouchend' in document;
this.events_ = {
"click": this.supportTouches_ ? "touchstart" : "click",
"down": this.supportTouches_ ? "touchstart" : "mousedown",
"move": this.supportTouches_ ? "touchmove" : "mousemove",
"up" : this.supportTouches_ ? "touchend" : "mouseup"
};
On 64 bit versions of Chrome, Firefox, and Safari running under a MS Windows 7 and 8, this test reports "true", so the code then waits for events which will never trigger. The real problem is the test which needs to be more rigorous so only actual touch driven devices bind the "touch*" events. Question 4817029 has some answers, but testing suggests recent browser releases have negated the solutions found there. Testing for IOS or Android might be more reliable...
Related
This is the online demo suggested by MDN:
https://mdn.github.io/dom-examples/pointer-lock/
It works on desktop, but not on mobile (Chrome, Edge, FF).
Meanwhile, the pointer lock API is listed as widely supported on mobile:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
more demos:
Quake 3 WebGL demo
http://media.tojicode.com/q3bsp/
http://www.smartjava.org/examples/pointerlock/
I implemented it myself too, and when I used JSON.stringify(e) to read the contents of the error event, I got: '{isTrusted:true}'
UPDATE:
I used a more complex function to serialize the whole event object, so after adding the suggested by MDN event listeners:
document.addEventListener('pointerlockerror', lockError, false);
document.addEventListener('mozpointerlockerror', lockError, false);
and
function lockError(e) {
serializeEvent(e)
}
I got from the serialize function:
UPDATE #2:
I included FF as it doesn't work either, it just doesn't raise an error, while it follows pointer erratically (at high speed), without locking it and while firing the pointerlockchange event!
Scheduler Version: v.3.3.11
IE Version: 11.666 or Emulator IE11 windows 8.1 Update
Windows: 10
Jquery Version: 1.5
I'm trying to display lightbox when drag ends but it's not working on IE specific version but it works on all other browsers and other IE browser versions.
I tried binding with onDragEnd & onBeforeEventChanged, but both events are not getting triggered
But when I target IE browser to IE 9 everything, works fine , don't know what is causing the issue
Code as follow :
scheduler.attachEvent("onDragEnd", function(id, mode, e){
console.log(id);
scheduler.showLightbox(id);
});
scheduler.attachEvent("onBeforeEventChanged", function (event_object, native_event, is_new, original) {
scheduler.showLightbox(event_object.event_pid);
});
when i run this code block from console directly
scheduler.showLightbox(12235654);
lightbox gets dispalyed
I'm not sure that this issue can be solved in another way, except for installing a different version of IE. Since this is a very specific problem that is related to the browser version and not to DHTMLX Scheduler events.
I'm creating a chat app, and I tried to implement autoscroll feature for it.
But it's not working on Samsung Internet(It's worked on Firefox Dev Edition(normal mode and interactive design mode) and Chrome Mobile), especially when I used the submit button on the keyboard. Here's the screenshots:
Firefox Dev Edition Interactive Design Mode Screenshot(gif)
Samsung Internet Screenshot(gif)
And here's the code:
let chatview = document.querySelector('#chatview')
if (chatview.scrollTop >= chatview.scrollHeight - chatview.clientHeight)
setTimeout(() => chatview.scrollTo(0, chatview.scrollHeight), 50)
Oh, and the reason why I added 50ms delay is to wait for element addition(powered by Vue's v-for).
Just for those who are still looking for an answer: I had the same problem with Samsung Internet version 7.4.00.70. I've tried several scroll-methods (see below). Seems to be an implementation issue.
Functions i've tested:
// Throws an error saying the method is not defined
window.scrollTo(ScrollToOptions)
// Throws an error saying the method is not defined
window.scroll(ScrollToOptions)
// Throws no error (!) but doesn't work either
window.scroll(x, y)
Links: window.scrollTo(), window.scroll(ScrollToOptions), window.scroll(x, y)
Since version 7.4 reached stable state in August 2018, i would have expected it to work.
EDIT: Working solution
I've found a solution in this thread using jQuery.animate(( properties [, duration][, easing][, complete]))
$(element).animate(
{ scrollTop: scrolling }, // Object of CSS properties
250, // Duration
'easeOutQuad', // jQuery's Easing
() => { $(element).stop(true, true); } // Callback function
);
Here element is the HTML elemente the animation is to be applied on. For detailed explanation of animate() please follow the link. The specified callback function is executed when the animation has been completed. Calling $(element).stop(true, true) (see) prevents the scrollbar of being locked. This happened in Chrome when the window was resized. In my case the resize event triggered execution of animate() and i wasn't able to scroll neither by mouse wheel nor by dragging the scrollbar.
This workaround is working on latest Firefox, Chrome, Opera, Edge, Firefox mobile, Chrome mobile, Samsung Internet Browser and Opera mobile.
I wasn't able to test it on safari. You need at least jQuery 1.8.
I was working upon a website with a flipbook kind of jQuery effect provided by turn.js.
It was working very well on my development environment. Suddenly have found out that the mouseover effect and mouseclick has stopped working on browser Chrome V29.0.1547.66m.
It works perfectly with V26.0.1410.63 and on other browsers (Firefox).
Need to know the reason and some workaround solution for the same.
Here is the link to my webpage.
I had checked your link, I think there is some problem in turn.min.js script. Use turn.js script in place of turn.min.js it is working fine on your link.
As per issue no 399 posted on blasten/github https://github.com/blasten/turn.js/issues/399 change your turn.min.js to latest version of turn.js. This will surely solve your issue with chrome browsers' latest version on windows.
helloi was using the unminified version of turnjs and still had problems with some browsers, i read the code and discovered that mouse move events were not dispatched
i tested with 2 computers :
old Toshiba laptop with 1st-gen i7, Windows 7 Pro SP1, Opera 35.0.2066.68, Firefox 44.0.2 64Bits
brand new Intel NUC5i7RYH, Windows 8.1 Pro, same browser versions
mouse events
working properly on NUC + Firefox and Toshiba + Opera
NOT working on NUC + Opera and Toshiba + Firefox
uh ?
mouse || touch callbacks are set at line 28
touch capacity is detected at line 26
the isTouch test at line 26 returns true on some desktop browsers, which causes the mouse controls not to work
i noticed many tests provided on forum an blog posts didn't detect touch capacity properly, because they often check if touch APIs exist, which seems to be true in some Opera and Firefox browsers (i read some posts about people having the same problem with Chrome, mine works well)
i ended up using this test, which is far from perfect but does the job for now :
!(window.screenX != 0) && ('ontouchstart' in window || 'onmsgesturechange' in window);
i have no more problems, but this solution should be tested on many devices and the isTouch test must be improved
also, i got a bug in the zoom (line 90) while using latest version of jQuery, which i fixed by unchaining the two listeners as follows :
this.mousedown(zoomMethods._mousedown); // what ? chaining bug ?
this.click(zoomMethods._tap);
This question is outdated
The problem doesn't exist in newer versions of Chrome
I'm working on a drag-to-select jQuery plugin, which is working. The problem, is that on the touch screen, it just scrolls the page.
Chrome doesn't implement touchstart and other touch events, so I would assume mousedown would be triggered. Here's a simplified example:
fullscreen demo [ code ]
A coffeescript snippet:
$(document).on 'mousemove', (e) ->
$('.follow').css
left: e.pageX
top: e.pageY
How can I get this to respond to touching the screen in Chrome on Windows 8?
Not sure where you got your information, and your CodePen examples are not there to check what the problem may be, but Chrome not only implements touchstart, touchmove, touchend etc but I have found it to have the nicest touch support of all browsers I have used in the last year.
The only thing to ensure is that if you have two monitors, you start up the browser page on the touch screen.
I am using Windows 8.1 with a touch-screen for JQuery plugin development (to ensure it is all tablet enabled).
Test existence of touch with:
var hasTouch = (typeof TouchEvent !== "undefined");
alert(hasTouch);
This is some working TypeScript code straight out of one of my plugins (which works best on Chrome. IE is the problem-child for touch):
THIS.$element.on("touchstart", function (e)
{
THIS.momentum.touchstart(e.originalEvent.touches[0].pageY);
});
THIS.$element.on("touchmove", function (e)
{
THIS.momentum.touchMoveTo(e.originalEvent.touches[0].pageY);
});
THIS.$element.on("touchend", function (e)
{
THIS.momentum.touchEnd();
});
This seems to be fixed in the latest versions of chrome. It's an evergreen browser, which mean nearly every user is on the current, or previous release of chrome.