fixed position broken on contentEditable ios webkit safari - ios

I want to create a wysiwyg-editor for ipad and have a toolbar with position:fixed - so that it's always available.
However, when I focus on div with contentEditable="true" the toolbar is not fixed any more.
Is this a bug?
Is there a workaround?

just found this while looking for the same thing - for the same reason...
we have a half-way solution to the toolbar, but it sort of wanders off-page and then resets to the correct position when the scroll finally stops. The solution isnt pushed to github yet, but it will be in the next couple of days. Best approach we have so far is a chunk of JS that forces the div back in place if we recognise we are working on iOS :-(
But you might want to check the editor we built in any case :-) http://www.quink.mobi or https://github.com/IMD-Business-School/Quink.

Related

Scrolling issue with fixed divs in iframe on IOS

I am having a problem with iOS scrolling on an iPad. Every other platform tested works just fine. I love iOS, but hate it too. I was able to get the entire iframe contents scrolling within the parent, but there are two DIVs that are fixed that shouldn’t scroll within the iframe.
Before I spend a lot of time trying to work this out, I am just looking to leverage everyone’s experience for whether it, in fact, CAN be done. If it IS possible, then I will proceed to trying to work out a simple model and report it back for others. If experience shows that it can NOT be done, then you will all have saved me a lot of headache, not to mention time.
Here’s a drawing of what works on all other platforms but NOT iOS:
Simple question: Is it possible?
The simple answer is, in fact, YES.

IOS prev/next button close keyboard unexpectedly

I'm currently using PhoneGap (Cordova) to build an App on iPad/iPhone.
One of my page in the app (in html/css/js), have more than 100 input type Number.
When i use finger to target each of them, it's working like a charm.
But when i use the prev/next button from IOS Keyboard, sometime, i don't know why, keyboard slide to down and when i try to open it again with targeting a input with my finger keyboard just blink... Impossible to fixe it without a scroll to release all event.
I've clean my code, refactored some part, look on google and stackoverflow if someone had the same problem but i found nothing...
Did someone know if it's a UIWebView problem ? Or phoneGap? or something else?
Thank's for reading.
If you are happy to just remove the next/previous buttons from your app entirely, the new Phonegap/Cordova 2.6.0rc1 has made this incredibly simple.
In your config.xml file, just set the HideKeyboardFormAccessoryBar preference to true.
In order for those two buttons to work you need to specify their behavior and it seems that it is not specified. Made some research and I think you have two options. Either you get rid of the next/previous buttons at all like explained here or you override textFieldShouldReturn: in a way similar to what is described in this post.

iScroll4, iPad, fixed element. How to attach element to the top. Example included

I'm making a website using iScroll4 (cuz I need animations while scrolling on iOS devices) and at a some point, element becomes fixed but it won't work with iScroll4 or I doing something wrong.
So, I used jQuery transit for translateY and I just moving element at the actual scroll position, but this making my element flicker.
Look (scroll a little down) http://danielsitarz.pl/tests/iwanttobefixed/
And I need help, maybe somebody know how to make position:fixed working or make translateY more smooth.
On desktops I don't using iScroll4 but I need this on iPad etc.
Thank you!
Okay, after many travels to work in bus I found an answer.
Just throw element outside iScroll wrapper and then set fixed position to him.
Like that:
$('#wrapper').after(elementThatWantsToBeFixed);
$(elementThatWantsToBeFixed).css({position: 'fixed'});

iOS: CSS3 animation breaks scrolling on div

I'm developing a web-app, based on the Dribbble API. In this app I have a div which shows all comments with a max-height of 200px, so if there's more than 200px worth on comments, the div gets scrollable. So far so good, works as intended on iOS.
However, when I add a Scale transfrm to this div (to mimic iOS's folder opening animation), scrolling the div breaks entirely. You can see the live version here: http://maxsteenbergen.com/longshot/
Is this fixable by setting a a new style using jQ's webkitAnimationEnd or is this without solution?
EDIT: In the meantime I found that using two fingers to scroll the div works but obviously, this is not how it's supposed to work.
It's also worth noting that scrolling DIV's don't work on older versions of iOS - it might be worth having a look at iScroll.
You can implement native iOS UI and achieve much better UI feedback. especially on scroll view. To obtain data from Dribbble API you may use 3rd-party Dribbble iOS SDK: https://github.com/agilie/dribbble-ios-sdk

TTLauncherView move item to other page

I have a TTLauncherView in my ios app. I have allowed users to edit and move their items around, however it does not appear that you can move the item from one screen to another, does anyone know how to do this?
that's looks like another a bug in three20 library. I just checked an old app of mine and moving items from page to page works fine. It means it might be another iOS 5 issue.
You can open a bug for it in http://github.com/facebook/three20, hopefully someone will fix it.
If I'll get around to it, i'll check it and fix it. I have a few apps using it, so I might need to do that.
I experienced a similar problem. It seems to be a bug just for the first icon on that page (i.e. creating a new page) - adding just add another icon to that page works fine (at least for me).
You can get around this bug by dragging the icon to the new page and releasing it on the first row (on the top of the page!). This isn't really satisfying, but perhaps a good starting point.

Resources