designMode or contentEditable on mobile safari [duplicate] - javascript

Safari HTML Reference: Supported Attributes says:
contenteditable
If true, the element can be edited on
the fly; if false, it cannot.
Availability
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
However, on my iPhone, I can't get it to work. Anyone have success with this?
You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.

contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.
If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.
Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/

It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.

If you wanted to, you could make a virtual keyboard using
clever css and javascript, and make it into a bookmarklet.

If you cannot focus the contenteditable element try adding this to your css
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}

The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post
http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/

I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.

Related

Ionic Framework react Deeplinking with hashlinks and IDs

How is it possible with Ionic Framework/react to deeplink to a certain position marked with an ID on a page with long content with a hashlink?
For example on tab2 I have a long text and some positions are marked with IDs
<p id="foo"></p>
Now I want to link from another Tab to this one on exactly this position in the text
<Link to"/route#foo"><IonButton>Link to #foo</IonButton></Link>
With normal Link from react-router-dom it`s not possible, so I tried “react-router-hashlink” and it
worked in the browser and on android, but NOT on iOS and mobile devices.
<HashLink to"/route#foo"><IonButton>Link to #foo</IonButton></HashLink>
So I found out, it is the same problem on MacOS Safari (Firefox and Chrome are working) and on every mobile browser on iOS.
And: when I am testing it on a testapp, sometimes its working and sometimes not. On Safari mobile maybe every 10th try its working.
What I`m doing wrong here?
Thanks for answering.

window.focus() does not work for existing tabs in ALL IOS browsers

I'm trying to create a "re-launch" button that should bring the user to an existing opened tab. So far, this is how it's implemented:
Using window.open() initially to create the tab and focusing to that tab using window.focus().
The relaunch button should basically call window.focus() and redirect to that tab.
This has been asked in $window.focus() doesn't work on existing tabs in iOS Safari but I'd like to get a more general overview on this question. I've looked everywhere but I couldn't find any lead to this question.
Apparently, it works in android browsers but I can't get it to work in ios browsers (safari, chrome). Does anyone have any clue about this issue?
This seems to be a bug in iOS browsers. As a workaround you may replace
focus() by a sequence of close() and open(...).

adding bookmark to mobile browser using javascript

There exist javascript APIs for adding bookmarks to browser using javascript, but it works only on Desktop
Firefox
window.sidebar.addPanel(location.href,document.title,"");
IE
window.external.AddFavorite(location.href,document.title);
http://www.hostingfanatic.com/webdev/add-to-bookmarks-javascript/
The above site hosts the code for it, the functionality works in Desktop FireFox and InternetExplorer but not in Desktop chrome or Safari.
The add bookmark also doesnt work on android default browser or android FireFox browser.
It also doesnt work on IOS Safari, on IPad 1 and IPad 2
Is there any javascript API that allows the add bookmark functionality programmatically via javascript in mobile browsers?
If not, is there any other way to achieve this programmatically in mobile browsers?
Also will Phonegap or rooting the android phone, help in any way to achieve this?
I am open to all views.

Raphaeljs library and SmartPhones

I used the worderfull javascript library called raphaeljs on my website to draw maps, animations and animated functionalities. I have noticed that the script using this library work perfectly with iPhone but not with Android.
Can someone confirm this (just going on the demo page of raphaeljs will tell you if it works of not) and if it doesn't, does someone has any idea why, and what could be tested.
Thanks
The default Android browser did not support SVG until they recently re-introduced it with Android 2.3. One workaround is to use Opera Mobile (free from the Android Market) which will work whatever the Android version.
EDIT: My mistake, it's Android 3.0 (Honeycomb) that added SVG support in the default browser.
2ND EDIT: Better add a disclaimer that I work for Opera. There may be other non-default browsers that support SVG (but I haven't tried them).
Actually SVG is supported by Android since 2.0 I think (with WebKit, default browser), it's just not enabled by default : http://jindroid.com/2010/02/15/svg-support-on-android-webkit/
There's a patch you can apply (quite hard to do though) to enable it but I would advice you to download Opera or Mozilla Firefox for Android (via Market), which also supports svg quite well (I tested FF4 with Raphael JS).
Regards

debugging css ipad

I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.

Categories