Javascript - : Slider On touch not working as expected - javascript

I am making a custom slider.
All the things works find. But as of now I also want to add ontouch, ontouchmove functionality. I have almost achieve but something is still wrong that's why I am not able to achieve it completely.
Code Snippet
function onDragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
caouselPosX2 = caouselPosX1 - e.touches[0].clientX;
caouselPosX1 = e.touches[0].clientX;
} else {
caouselPosX2 = caouselPosX1 - e.clientX;
caouselPosX1 = e.clientX;
}
carouselInneritems.style.transform = 'translateX(' + (carouselInneritems.offsetLeft - caouselPosX2) + 'px)';
}
Kindly try the demo on inspect with mobile resolution.
CodePen

I've had a play around with this and there are two main issues as far as I can see.
onDragAction() needs to call e.stopPropagation() - in the demo you posted it is being called every time a new slide enters underneath the mouse, but you only want it to be called once. This fixes a lot of the glitchiness for me.
You need to have some conditional logic to express what direction you want the slider to go in. At the moment it is calculated by subtraction in every case, which from what I've put together from reading your code means it will always go to the left.

Related

Disable mouse movement for Vanilla-tilt.js but keep gyroscope effect

I'm using the plugin Vanilla-tilt.js and on desktop it works great. On mobile the tilt effect responds to the device orientation which is great, but when the user taps somewhere on their device it makes the tilt areas jerk towards where the tap was then return to their original position. I'm using Chrome on Android, feel free to try it yourself with the link above.
I'd like to keep the gyroscope effect on mobile but disable user taps from affecting the tile position. I'm using the inline configuration, here's an example:
<div data-tilt data-tilt-full-page-listening data-tilt-reset="false">Tilt object goes here</div>
My first thought is to download the vanilla-tilt.js source code and modify it so it only looks for mouse events if the screen is a certain width. I don't mind switching to the jQuery version, Tilt.js if that makes this easier.
I built a minified code example that you can view here.
I think you could use something like this document.body.style.pointerEvents = 'none', I am unable to test it though, as I am on PC.
I just noticed that in case of a "tap" the event.movementX and event.movementY are equal to zero, so I believe an easy solution would require to slightly adapt the onMouseMove function, something like this:
onMouseMove(event) {
if(event.movementX == 0 && event.movementY == 0) return false;
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.event = event;
this.updateCall = requestAnimationFrame(this.updateBind);
}
In Your example, You are using the built-in autoinitialization. There is more work, this would require to monkey-patch the already attached listeners. Here is how I did it, as a proof of concept:
(function() {
var elements = document.querySelectorAll("[data-tilt]");
elements.forEach(function(item, index){
function onMouseMove(event) {
if(event.movementX == 0 && event.movementY == 0) return false;
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.event = event;
this.updateCall = requestAnimationFrame(this.updateBind);
}
var tiltObj = item.vanillaTilt;
tiltObj.elementListener.removeEventListener("mousemove", tiltObj.onMouseMoveBind);
tiltObj.onMouseMoveBind = onMouseMove.bind(tiltObj);
tiltObj.elementListener.addEventListener("mousemove", tiltObj.onMouseMoveBind);
});
})();
Just to be sure, I tested this hotfix with Your minified test-case and with the vanilla-tilt home page and it seems working, but the final solution may vary, depending from Your implementation.
Please, test it in Your mobile device and let me know.

How to re display tooltip after mouse move

I am using a canvas to present several UI components. I am setting canvas.title to present the help for each component.
...
if(mouse.y >= y && mouse.y <= y + w && mouse.over){
if(currentId !== tool.id){
canvas.title = tool.help;
}
currentId = tool.id;
...
The problem is that when the mouse moves the tool tip is hidden and will not re display until I move the mouse out and then move back onto the canvas.
I would like to change the behaviour so that the tool tip displays again when I hover over another UI component without leaving the canvas element?
Implementing your custom tooltip gives more freedom and control.
This is a simple example http://jsfiddle.net/mynetx/5qbP3/
You can take ideas and build from here. Another advantage is control over the CSS which in cases like yours, where you want to provide help.
window.addEventListener("load", function () {
var couponcodes = document.getElementsByClassName("couponcode");
for (var i = 0; i < couponcodes.length; i++) {
couponcodes[i].addEventListener("mouseover", function () {
var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
coupontooltip.removeAttribute("style");
});
couponcodes[i].addEventListener("mouseout", function () {
var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
coupontooltip.style.display = "none";
});
} });
Tooltips are part of the system the browser runs in and sadly aren't accessible in any way from JavaScript.
I would recommend implementing your own tooltip, which is not very hard (both on canvas and using an extra element).
If you are worried about accessibility—it's possible to give an element "tooltip" role: http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
You can use fabric.js. see this.

HTML scrolls simultaneously in page and Flash object

I have a flash object inside a div, that will zoom it's content when I scroll over it. the problem is that my page also scrolls and I don't know how to fix this problem. I need the page to stand still when I scroll over the flash.
I tried adding this
flashContainer.bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type === 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type === 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
but because of preventDefault, the flash object won't zoom anymore.
Do you have any suggestions?
may be this could work for you:
$("element").hover(function(){
var scrollT = $(document).scrollTop();
$(document).on("scroll", function(e){
$(document).scrollTop(scrollT);
});
}, function(){
$(document).off("scroll");
});
http://jsfiddle.net/ZFsDY/3/
I stumbled on this issue a few months ago (the old method we used to manage scrolling didn't work on the most recent browsers).
I'm not allowed to publish the code for it, but here a few note on how we did it.
Like in reyaner's answer, we use event listening and preventDefault() to disable the browser auto scrolling, and get the scroll value (but without scrollTop()).
Once we have the value, we send it to the Flash via ExternalInterface.
For it to be possible, the flash object must beforehand add a Callback, a Flash method that can be called by Javascript.
We added a couple of additional interaction between Flash and JS so that the scroll is locked only when the Flash has the focus.
A warning : all browser don't have the same scale for the wheelDelta, and you may find that the zoom speed can vary. To fix this we decided to always use a fixed step each time the event is dispatched, instead that using the delta as-is.
another try:
$("element").bind( 'mousewheel DOMMouseScroll', function ( e ) {
var d = e.wheelDelta || -e.detail;
var s;
if(d < 0) s = 1;
else s = -1;
this.scrollTop += s * 30;
e.preventDefault();
});
http://jsfiddle.net/ZFsDY/5/

Draggable Not Working in Chrome/Safari

I'm building this site in which I was asked to have the photographers images randomly sized, ordered and positioned with the capability to click and drag them around. All of this is going pretty smooth except for this one major issue.
Although everything works great in Firefox, when opened in Chrome or Safari (possibly other browsers) any image that isn't visible int the window on immediate load seems to disappear when you attempt to drag it. If you scroll back up after it "vanishes" you'll notice the image is actually being sent to the top of the page while still following your click and drag movements.
I had this error once before and I believe it was fixed by removing some javascript that was no longer necessary. But this time I seemed to have tried every combination of removing certain JS or links to jQuery libraries and still can't find a cure.
Anyone know how this problem can be resolved?
You can view the issue and the code I have in place here: http://www.coreytegeler.com/jb/oddfuture/
EDIT Seems to be solely reliant on the Draggable function. I removed all of the JavaScript codes other than the below and issue still occurs
$(function() {
$( ".vert" ).draggable();
$( ".horiz" ).draggable();
});
EDIT This just looks like it has to have something to do with the issue
var imgInit_x, imgInit_y, mouseInit_x, mouseInit_y, elem;
document.addEventListener('mousedown', startDrag, false);
document.addEventListener('mousedown', drag, false);
document.addEventListener('mousedown', endDrag, false);
function startDrag(e)
{
if (e.target.tagName.toUpperCase == "IMG")
{
elem = e.target;
imgInit_x = elem.style.left;
imgInit_y = elem.style.top;
mouseInit_x = e.layerX || e.offsetX;
mouseInit_y = e.layerX || e.offsetX;
}
}
function drag(e)
{
try
{
currMouse_x = e.layerX || e.offsetX;
currMouse_y = e.layerY || e.offsetY;
elem.style.left = imgInit_x + currMouse_x - mouseInit_x;
elem.style.top = imgInit_y + currMouse_y - mouseInit_y;
}
catch (err){}
}
function endDrag(e)
{
elem = null;
}
When I try to bug your code I get:
Uncaught ReferenceError: detector is not defined
The detector variable does not seems to have been initialized when the issue happens. Could you specify its usage? Also I skimmed through your last Javascript script and couldnt find any purpose to it? Try removing the Javascript, it might resolve your issue.

capture right click through Javascript, withouth wmode

Flash player has a bug in using anything other than wmode="window" in Firefox/Chrome when using any other language than English. This bug is reported and not fixed yet
http://bugs.adobe.com/jira/browse/FP-501
The issue can be seen better here -
http://www.5etdemi.com/blog/archives/2005/06/firefox-wmodetransparent-is-completely-screwy-and-breaks-textfields/
Now to my problem - im trying to use Uza's right click solution ( http://www.uza.lt/blog/2007/08/solved-right-click-in-as3 ) in my application, but am stuck with problem of wmode. The event capturing doesnt seem to work with wmode="window" and i need multiple languages to work on my app as well.
Is there any solution to this that anyone has identified? Or is there any way that the right click can be captured without setting wmode.
Any help will be greatly appreciated. Thanks!!
Fortunately you most often want to know if the right button has been clicked. Since W3C and Microsoft happen to agree on this one and give button a value of 2, you can still detect a right click.
function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
http://www.rgagnon.com/jsdetails/js-0061.html
http://www.quirksmode.org/js/events_properties.html
http://unixpapa.com/js/mouse.html
http://www.javascripter.net/faq/leftvsri.htm

Categories