I have created my application using IBM Worklight in Eclipse. I have added the iPhone environment and installed successfully my application on my device, but I have noticed that in some screens numbers appear with an underline and when tapped it shows a dialog box with call function.
I have tried using text-decoration:none so that underline does not appear, but it is still appearing. I have tried:
HTML
<span class="bluelink" data-dojo-type="dojox.mobile.TabBarButton">40562231</span>
CSS
.bluelink {
color:#1238a6; text-decoration:none;
}
Another issue I am facing is that when using alert(), it shows the title title as the HTML filename like MyApp.html. Anybody know how to fix this?
Instead of alert() use the WL.SimpleDialog API. Explained here.
WL.SimpleDialog.show(
"My Title",
"My Text",
[{
text: "First Button",
handler: function() {
WL.Logger.debug("First button tapped");
}
}]
)
As for the phone number, try the option here:
http://razoredgelabs.com/2013/03/how-to-stop-apple-ios-devices-from-styling-phone-numbers/
There are also the following questions:
How do I remove the blue styling of telephone numbers on iPhone/iOS?
Mobile HTML rendering numbers
Prevent Phone Number recognition on JqueryMobile
How to disable phone number linking in Mobile Safari?
https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html
Related
I decided to write the name of this plugin of mine as vim↪softwrap rather than vim-softwrap, but, to my surprise, GitHub shows the ↪ as an icon:
What can I do to avoid that?
I'm not sure whether it's GitHub that is doing it or it's the Markdown specification to require it.
It looks like it's using these fonts (the css selector being the <g-emoji> tag that it inserts around emoji unicode):
g-emoji {
font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
If you save this as an html file an open it, you will see the same thing:
<p style='font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'>↪</p>
I have an app with Meteor React using TinyMce through react-tinymce (as per instructions at https://www.tinymce.com/docs/integrations/react/
I have a form component with TinyMCE which is called from an orderedlist to allow users to add comments. It works as expected except in the following situation:
When using either an iPad or iPhone (works fine on desktops and Android mobile).
The first instance of the form works as expected, however with subsequent attempts to add comments the cursor does not show up in TinyMCE and the user cannot enter their comments.
Without an external keyboard, when the form is opened the keyboard pops up - I have found that by manually closing the keyboard, then tapping in the textarea again it works.
With an external keyboard (on iPad), clinking the link in the menubar (I am using the link plugin) and then closing it and tapping in the textarea again it works.
I have attached code to show how TinyMCE is initiated (and removed), as well as how it is called in the form.
Any suggestions as to what I can try to get this to work properly on an iPad/iPhone would be greatly appreciated.
componentDidMount() {
tinymce.remove();
tinymce.init({
selector: '.addComments,
plugins: "autoresize link paste",
paste_as_text: true,
autoresize_bottom_margin: 10,
relative_urls: false,
link_title: false,
default_link_target: "_blank",
height: 200,
autoresize_max_height: 200,
toolbar: 'underline italic numlist link',
menubar: '',
skin: "lightgray",
statusbar: false,
content_css : '/css/content.css'
});
}
componentWillUnmount() {
tinymce.remove();
}
And it is rendered as follows:
<div className="AddComments" id={`background${this.props.meetingId}`} onChange={this.handleEditorChange}></div>
I found that others are having problems with TinyMCE on an iPad https://github.com/tinymce/tinymce/issues/2699 so I have switched to react-quill and it works fine across all platforms.
Am using http://creator.ionic.io to create a hybrid iOS/Android app.
Have added cordova-plugin-smooch as a plugin in Code Settings.
Have added ionic-native.min.js.
Have added smoochio.js with following code...
Smooch.init({
"appToken": "MY-TOKEN",
"soundNotificationEnabled": "true",
"imageUploadEnabled": "true",
});
The smooch.io button appears in the app but I think it's not 'native' because when user tries to type in message field, the iOS keyboard goes on top of the message input field so user can't see what they are typing. Also, in the smooch.io message window header, the 'X' or close icon doesn't show up...
Not sure what I'm missing to activate the 'native' plugin so it functions correctly on the phone. Thanks for any help.
our app loads profile pages from our website INSIDE the app. They have been optimized for iPhone css, but they are still an html page. Our mailto link isnt working as expected.
When clicked, nothing happens. However, when clicked and held (tap and hold), the menu slides up with "new message", "create new contact", "copy", etc.
How should this be formatted to get the Mail.app to automatically launch?
<a class="action_bubble" target="_blank" rel="external" href="mailto:bob#bob.com">Send Email</a>
The "call" link works as expected.
<a class="action_bubble" href="tel:1234567890">Call</a>
So, not sure what to do with this...
Here is a project on GitHub that addresses your issue. Basically, when you use a UIWebView controller, you need to decide how to manage the links using the delegate handler for UIWebView. In Interface Builder you can have it automatically recognize phone numbers which is probably why your phone numbers work and it will recognize http links as default behavior. However, mailto and some of the other special href options will need to be handled manually.
make sure "Detection" property is set for your UIWebView like "Phone","Address". you can set it from your IB.
or from code
self.webView.dataDetectorTypes = UIDataDetectorTypeAll;
Could it be, that you have just tried within the simulator? The simulator does not have a mail app, so it couldn't be opened. Try on a device. I think your code actually works.
I've just tested on a device: your code works.
A little late to the party but I've found out the following:
iOS has some weird ways to deal with web content
DON'T encapsulate your email address within an A tag, just put it there as plain text
Make sure that in your storyboard (if using one) the webView has the Addresses property checked and you're done ... same goes for phone numbers
I'm using jQTouch to develop a version of a website optimized for safari on the iphone. The jQTouch demo helpfully shows how to show an "install this" message for users not using full screen mode and hide it for those who are. When in fullscreen mode, the body should have the class "fullscreen." So you can hide the "install this" message for people who have already added your app to their home page by adding this css rule to your stylesheet:
body.fullscreen #home .info {
display: none;
}
What I'd like to do is require users to use the app in fullscreen mode only. When viewed from the regular browser, they should only see a message asking them to install the app. That message should of course be hidden otherwise.
This ought to be really, really easy, so I must just be missing something obvious.
I thought one way to do this would be to simply test for the class "fullscreen" on the body: if it's not there, use goTo to get to another div, or hide the other divs, or something like that.
Strangely, however, this doesn't work. As a test, I've still got the original "info" message, as in the jQTouch demo, and it doesn't show up when I launch in fullscreen mode. So the body must have the fullscreen class. And yet I can't find any other trace of it: when I put this alert to test things after the document has loaded, I get nothing when launching in fullscreen mode:
alert($("body").attr("class"));
I also thought I might test for fullscreen mode by checking for the value of the fullScreen boolean. But this doesn't seem to work either. What am I missing? What is the best way to do this?
Well, I couldn't figure out why the standard way wasn't working, but someone on the jQTouch Google Group suggested this, which works:
if (window.navigator.standalone) {
alert ('Thanks for launching this app your home screen')
} else {
alert('Add this app to your home screen for the best experience')
}