jQuery UI Slider jumps weirdly when pressed - javascript

I'm trying to simulate the iPhone's lock screen and the slider on the front is working mostly but when I click it it jumps forward weirdly. Also if I drag it from the right side it does the same thing but then it stops going and I actually stop dragging the slider and it's really annoying. I have an example of what's goin on here:
Slider Test
I've looked a lot of places and similar questions, but the answers were sadly unhelpful for me, one of those being setting the margin-left:-35px;. Thanks in advance

It works lika a charm in latest Chrome. The weird behavior of jQuery scripts is usually caused by a relatively slow PC or web browser.
What is your PC's configuration and which browser are you using?
Update
I would definitely remove arrow image and instead use that image as an background of the link (id="unlock-handle"). This fixes "drag and drop" issue in Chrome.

Related

how to avoid scroll jumps in android

I have an application with a photo gallery which is presented in one line, and the user can scroll left & right between the images.
When I perform the scrolling I can see (in chrome when I debug the code) in the console the following error:
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
This error causes the scroll to jump and not look smooth.
How can I solve this error?
I couldn't find a good answer for this.
UPDATE: it happens only in phonegap. not in mobile web.
Thanks!
Not sure if that error is the one making the animation work poorly. As far as I saw on this answer, returning true will remove the warning.
Javascript animations on smartphones tend to have worse performance since they aren't hardware accelerated. You can try and find a photo gallery that uses CSS3 transitions, which are hardware-accelerated.

HTML/CSS for mobile app. Footer with input behaves wrong when opening keyboard

I have a really tricky problem I have been trying to solve for weeks now.
I want to make a web chat for mobile devices. I have some speech bubbles and a footer that has an input box. The footer should always be on the bottom. And when the keyboard opens, it should move just above the keyboard that the user sees when what he writes.
That works so far. The tricky thing is to have the view with the speech bubbles scrollable so that I can scroll to the first message WITHOUT THE FOOTER MOVING ALONG.
I had a version which only worked in Google Chrome (tested on iOS), but not in Safari:
http://marcback.es/work/sparkassenchat/v7
It is an ugly solution which involves Javascript Code etc.
Does any of you guys have a solution for that? The solution doesn't have to be pretty, it just needs to work. Please help :/

Jquery touch punch works for Chrome and Firefox but not IE

I am using the jquery touch punch library to enable users to move images around via touch. This works fine in Chrome and Firefox but will not work in IE.
I find if I hold down on the image in IE a small square appears and I am able to drag the image within the boundaries of this square but no further. I guess this is the right click function kicking in.
I have looked around and most people are saying to add '-ms-touch-action: none' to the css of the draggable div. So I added that to the style attribute of the draggable div and it did nothing. I am still unable to drag in IE.
I've looked around for another alternative but am unable to find one. I have included jquery 1.8.1, jquery ui 1.8.23 and touch punch 0.2.2. Any help will be greatly appreciated.
I noticed the htm page I was launching containing the draggable div contained a meta tag which was emulating the page in IE9. 2 and a half days I spent on that! -ms-touch-action:none will definitely work in IE.
If you have come here and are experiencing the same issue but the above paragraph didnt fix it for you, try this:
In IE click the cog and go to Compatabilty View Settings and uncheck the box for Display intranet sites in Compatability View.

Android Phonegap Scroll is Very Choppy

I'm building a very basic webapp that displays ferry schedules.
I'm using phonegap to port it to a "native" app on Android and I'm have a bit of trouble with the scrolling.
It works perfectly in Chrome on the device, as well as on the android browser. I've tested on several devices and they all work great in browser. As soon as I put the project into Phonegap however the scroll becomes very "choppy" and skips and sticks. I've added a video link to show you the behaviour:
http://youtu.be/D18s9kgnD7g
I'll give you a brief explanation of how it works:
We're using translate3d CSS methods for transitions when we switch content in view so that we avoid using page transitions. Because of this we're not scrolling the actual page we're scrolling individual content divs so that we avoid weird scrolling bugs when switching between content views. Basically we have three "content views" on one page that switch out when we want to switch views.
Here's a link to the app:
http://ferriesapp.ca/app/
Things I've tried
We're using "overscroll: scroll;" one these content divs, which I know had some incompatibilty with Android pre 2.3 but should be good now.
We've tried a few big libraries, like iScroll and Scrollable, and things like that to no avail.
I've tried preventing default actions for touchmove.
We've coded correct touch events using Zepto's touch module.
I've tested on devices from the Nexus one (4.0.4) to the Nexus 7 (4.3) and it's the same story on all those devices.
Any help would be STRONGLY appreciated
I've been struggling with this for a while now and I can't seem to find anything on the internet that hits on this "choppy" scrolling bug.
EDIT: Here's a logcat from installation to when the scrolling bug happens:
http://pastebin.com/Aa7mDeAX
You got a pretty nasty style sheet there. First, you do not want any box shaddow because mobile does not like that. Then, since you have a lot of blank spaces, you want to help touch to work better with those blanks with user-select: html.
* {
margin: 0;
padding: 0;
-webkit-user-select:html;
-khtml-user-select:html;
-moz-user-select:html;
-ms-user-select:html;
user-select:html;
}
That should help with your scrolling, but you still have tons of thing to clean up with that CSS. Another issue is that you don't even have cordova loaded correctly, but that probably doesn't really matter for scrolling.
Actually, what is zepto_002.js? That seem to be the one that is causing the main scrolling issue.
As a fellow google play developer, having "three "content views" on one page that switch out when we want to switch views" is not a good idea. my only input though if you want to go this path would be to check this out http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

jQuery animations not working / behaving strangely in Internet Explorer

I'm developing a personal website, http://www.miketurley.com.
In any Webkit browser (Chrome, Safari) or Firefox, when you mouse-over the text on my site's opening screen, you get a slick animation which slides the text around and reveals the menu ("waking up" my website.) This may not be too necessary, but I like it and I think it's appropriate to showcase skills like that on my portfolio website.
Anyway, if you go to my website in Internet Explorer, the animations do not appear at all. The same duration of time goes by, and then the page "snaps" into the post-animation state in one frame, with no motion in between.
How can I fix this?
An explanation of this particular animation along with source code is available here: http://www.miketurley.com/index_explain.html
Leaving eval aside, you site is failing to quirks mode in IE. Using dev tools I switched to different Document Mode and the animations ran just nice. Can't find out what activates quirks right now but you have an issue to investigate. Start with passing the strict validation or moving to transitional or html5 <!doctype html>

Categories