Android App soft keyboard covers web page's textarea embedded in webview - javascript

I have an Android app which opens a website inside its web view that is embedded inside a fragment, the fragment is controlled by a bottom navigation bar. The app is not running in full screen mode. I have action tool bar on the top of web view.
The web page inside webview works fine.
However, the problem is if the web page contains a <textarea>, when user start typing the content inside Android pops up its soft keyboard which covers the Textarea, that makes the user unable to see what has been typed inside.
I have done a lot google search and tried with setting things like in AndroidManifest.xml file add the attribute:
android:windowSoftInputMode="adjustResize"
Or in my fragment Java code I put the following:
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
Or I even tried in the web page I put the following javascript:
<textarea rows="4" cols="50" maxlength="100" v-model="message" ref="message" onfocus="this.scrollIntoView();"></textarea>
But none of these resolve my problem. Could you please help?
Thank you.

Never mind. It turns out it is the bottom navigation bar that covered html <textarea>. Android OS does push the webview up when keyboard is displayed (It only shows the first line of <textarea> though). However, since I have navigation tab bar under the webview, it blocked the first line of <textarea> so <textarea> inside of my webview becomes completely invisible.
The fix is to add the following to my fragment.xml
android:paddingBottom="?attr/actionBarSize"

Related

How to hide Address bar of a responsive webapp when opening through mobile browser?

I have a responsive webApp which is accessible from both Web Browser and Mobile browser. I want to hide the address bar once the application loads and this will continue in every other page of the application so that it feels like an APP. Can it be achieved through Javascript?
Well if you are planning to add some extra config in your responsive web app, then you can do it. Take a look at Progressive Web App. In this type user have the option to "Add to homescreen" for any mobile device. Then the address bar will be hidden for this kind of app.
The main thing you have to add in the Manifest.
Hope this helps.
If by 'address bar' you mean the top bar where you enter the website url, then no: you cannot modify the appearance of the browser just by javascript.
You used to be able to open a window without the address bar through javascript, but for security reasons that is no longer possible as users should be able to see on what domain they're on.
Most mobile browsers already have this kind of behaviour by the way, where they hide the address bar once you're scrolling the web page...
You can set your website in full screen mode using this method your address bar will hide automatically.
You can set browser as full width using JQuery OR Meta Tags, Please refer this link.
It will help you.
Thanks

Webview in chrome packaged app cannot be full screen

I have two pages, one is "index.html". It is used by a chrome packaged app and it has a webview inside. The other one is a fullscreen.html and it has a button with function:
document.documentElement.webkitRequestFullScreen().
So I point webview to fullscreen.html. But when I wanted to click button to full screen both webview and app, nothing happened.
It sounds from your description that the request for full screen is being executed in the webview's DOM, not the top window's DOM. If so, what you describe sounds normal to me. What is in effect a child window can't be fullscreen.

How to animate book page turn effect in WebBrowser control in windows phone 8

I am working on windows phone 8 book reader application, i am showing my all html pages on a web browser control, so now when i page change by click next button it suddenly change the page and navigate to another page. I want page should flip like a real book page. If anything required for the answer please let me know, but help me in this.
If you are using a browser control the behavior is gonna be exactly as the website and you can't change it. but you can get a flip affect by using native windows8 xaml. Take a look at this:
http://msdn.microsoft.com/en-us/magazine/cc507644.aspx

How to open new screen on Samsung TV emulator?

I am working on Samsung TV application, so I made interning screen which tell the user some information about this application, after the user read the information he should click on welcome button to go to the main page.
So should I create a new html, then when I click on the button, a new page opening up?
Actually I was using this Technic in android applications!!!
So does this work on TV applications? If not, what should I do? Any advice will help, THANKS
Note: I study this code http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open4
but this function didn't work
I suggest you to have a base html like this:
<body>
<div id="popup"></div>
<div id="content"></div>
</body>
And have your "screens" in separate html documents, and when you push a button, refresh your base html according, this way:
//on click
$('#content').html('');
$('#content').load('mynewcontent.html');
Samsung applications work with single page web app philosophy, so you must refresh the base html dynamically.
If you need to create a popup, there are lots of tutorials about how to make a div looks like a popup (manipulating position absolute, width, height, adding a semi-transparent black background...).
Expect this give you a clue, there is a long time I worked with samsung tv's.
Samsung TV applications do not have windows or tabs, so you cannot use open to create a new one.
Render your message inside the existing page with DOM manipulation instead.

image served from another site won't open popup

I think I know the answer already is probably "No", but I'll ask anyway, (as there may be a work around like a "lightbox" option etc)
I wrote a banner exchange script, with a difference. When the banner is clicked, a new window opens appears inviting the user to subscribe to a newsletter first, (or go straight to site)
This works fine if I use a window.open() prompt, as effectively the text for the popup is pulled in from URL of the window ... but I want to use a (modal?) window without the location bar etc. But here's the problem: The script runs on siteA, and displays the banners on HTML page of siteB. When you click the banner, it cannot access the javascript/CSS modal window code on the host HTML page. I think even with a light box div, the image or link has to be "hard coded" into the HTML page first. Can anyone envisage a work-around?
Here is what I've tried thus far (in simplified form):
<script>
hide id 0
</script>
<div>
<object data=pop-up text pulled from Site A: visibility:hidden id=0 width="720" height="600">
</div>
<object data=banner code pulled from SiteA width="490" height="90">
(I tried running the javascript from site A, and calling the hide routine via parent.document... to get to the javascript hide routine within the HTML page. Adding an alert to this 'calling' javascript, I get "SiteA says: hallo" when I click the banner)
I also tried jumping the banner to a script that would redraw the code to "_top" of the browser, and display the pop-up code in a div on this new page. I tried window.history.back to get the HTML from the page we've just left ... but all that does is reload the same page and discard the new code
I made the second object code above 'almost' same size as banner so text above and below if on HTML page flows properly.
On a slight tangent, it there a way to print a "block" of code in Javasript. In PERL, you can use "print <<EOF", but at present, if I want to print a large amount of text via javascript, I'm using +'xxxx xxx xxx xx' +'xxx xxx xxx' and escaping each and every single quote and newline. Is there a better way to print a line of code that contains numerous newline feeds?

Categories