javascript,android,css,html5,canvas , HTML canvas breaking when keyboard is shown at landscape orientation

HTML canvas breaking when keyboard is shown at landscape orientation


Tag: javascript,android,css,html5,canvas

have tried all these questions and answers listed, and nothing works for me!

How to center canvas in html5 Resize HTML5 canvas to fit window

HTML5 Canvas 100% Width Height of Viewport?

Make canvas fill the whole page

Make Html5 Canvas and Its contained image responsive across browsers

jQuery to make HTML5 Canvas Responsive

How to make canvas responsive according to the div parent width

so here's it,

I was playing around with html canvas, it works great on my pc, phone and tablet. The code I'm working on,

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href='' rel='stylesheet' type='text/css'>
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 0;
    canvas { 
        display: block;
        height: 100%; 
        width: 100%; 

        color: #fff;
        top: 150px;
        padding: 20px;
        position: relative;
        z-index: 10;
        font-family: Roboto;
        height: 20px;
<div class="container">
    <canvas id="myCanvas" style="border:1px solid #000000; background: url('');background-attachment: fixed;background-size: cover;">

<div class="details">
    Enter your details:
      First name: <input type="text"><br>
      Last name: <input type="text"><br>
      <input type="submit">

When the orientation of the tablet is changed and tried to enter some text into the textbox, the canvas element is resized to something strange.

The screenshots:

on tablet portrait

1. in portrait mode, when keyboard is shown, the canvas shrinks to the viewport height!

on tablet landscape

2. in landscape mode, canvas is rendered well,

on tablet landscape with keyboard on

3. in landscape mode, when the keyboard is shown the canvas shrinks to something weird!.

How do I fix the canvas re-sizing when the keyboard is pressed on.

Environment: Chrome 42.0.x on Android 5.1.1

Thanks PS: Background image is just used for demonstration, the actual plan is to canvas and graphic.


Try using fixed position for it:

canvas { 
    position: fixed;
    height: 100%; 
    width: 100%;
    z-index: -1;  /* place in background */


Dagger 2 Custom Scope for each Fragment

I'm a little confused about how to best use the custom scoping in Dagger 2. I've looked at a couple different articles which seem to suggest two different ways of doing it: MVP Presenters that Survive Configuration Changes Part-2 (Github repo): Uses unique custom scopes for each fragment, e.g. @Hello1Scope...

Android Implicit Intent for Viewing a Video File

In my Android app, I have a button that when clicked, launches the external application of my choice to play a video (I gather that this is called an "implicit intent"). Here is the relevant Java code from my onCreate method. Button button = (Button) findViewById(; button.setOnClickListener ( new Button.OnClickListener()...

How to get my node.js mocha test running?

I have developed a service in node.js and looking to create my first ever mocha test for this in a seperate file test.js, so I can run the test like this: mocha test I could not figure out how to get the reference to my app, routes.js: var _ =...

Angular $http and Fusion Tables in IE9

I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

Javscript Replace Text in tags without changing children element HTML and Content

I have a script where I'd like to replace the text anywhere in the body visible to the user like so: $("body").html($("body").html().replace(/replaced word/g,'HELLO')); This works but it works to well. Whenever "replaced word" is within a tag, like a href, or span, or div, or anything it throws off all...

Not able to access variables in required file

I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

Automatically calling server side class without

I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

Problems implementing ViewHolder pattern

I'm working on an android app from a book. I'm getting errors : "crimeHolder cannot be resolved" and I can't understand why.. public View getView(int poisition, View convertView , ViewGroup parent) { //If we weren't given a view, inflate one if (convertView == null) { convertView = getActivity().getLayoutInflater().inflate(R.layout.list_item_crime, null); ViewHolder...

How to find the days b/w two long date values

I have two long dates value. For Ex: 1433097000000 1434479400000 Here i have to find the days between these two by jquery For Ex: 15/06/2015 - 22/06/2015 If it is more than 5 days, I want to get from is 15/06/2016, to is 19/06/2015. It is based on long values...

Javascript function to validate contents of an array

Here's what is asked: validItems(items) – this function receives a string array of items which are to be for a customer. The function returns an empty string indicating all item codes in the array are valid; otherwise the function returns the first invalid item code in the array. All item...

How to set speaker phone off when the app is killed by the “Recent App drawer”

I implemented an app which has a button speaker, which is manually set "on" by myAudioManager.setSpeakerphoneOn(true) and "off" vice-versa. But the bug is when you close the application while the speaker is on, it forgets the speaker was on. The next time, the speaker remains on and the call is...

Android String if-statement

I have a if-statement in the start of my app if (ready.equals("yes")){ ... } and later on my code I have ready="yes"; but the if statement is never called, why? The ready="yes"; is called from a background thread, is that why? public void DownloadFromUrl(final String fileName) { //this is the...

Can't call fetch directly in Backbone model listenTo

I'm trying to have a model listen to a collection and fetch itself when the collection changes: class Team extends Backbone.Model urlRoot: '/team', initialize: function(attributes, options) { this.listenTo(members, 'change', this.fetch) The fetch does seem to trigger, but the url is all messed up, and to get it to work I...

Google map infowindow position

Here is a sample google map with three polygons. I am setting the infowindow for each polygon as, for (var i in coordinates) { arr = []; for (var j=0; j < coordinates[i].length; j++) { arr.push( new google.maps.LatLng( parseFloat(coordinates[i][j][0]), parseFloat(coordinates[i][j][1]) )); bounds.extend(arr[arr.length-1]) } // Construct the polygon. polygons.push(new google.maps.Polygon({ paths:...

Parsing XML array using Jquery

I have stuck up with an issue of passing XML using Jquery. I am getting empty array while traversing to jquery.Please help me how to get datas from XML array. I have mentioned my code below. XML <?xml version="1.0" encoding="UTF-8"?> <json> <json> <CustomerName>999GIZA MID INSURANCEAND SERVICES PVT LTD</CustomerName> <mobiLastReceiptDate>null</mobiLastReceiptDate> </json>...

how does android ImageView resize my image?

I have some 100*100 icons and I cannot find better resolution icons so I put them inside drawable folder. The width and height of the image view are set to wrap_content. When the image is shown on a xhdpi screen will the image be scaled to 200*200 automatically? or should...

Floating Action Button in Xamarin.Forms

I had completed my App's home page in Xamarin.Forms Portable. Now i want to add a Flotation Action Button In my Android Project ! Is there any way to add FAB for Android in my existing home page, which was coded in Xamarin.Forms Portable. OR I want to create a...

Teechart HTML5, line color and thickness

How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

Sockets make no sense?

I'm using the 'ws' library for Node.js. I can write code that sends data from my server to my client, posting a date and time update, and closes the socket when I click a button; var wss = new WebSocketServer({server: server}); console.log("WebSocket server created"); wss.on('connection', function(socket) { // SEND DATE...

want to show and hide text using “this” jquery

I want to achieve this effect with this because I have several paragraphs like this so I don't wanna use id for each paragraph <p class="desc_services_subheading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,...

Login Signup PopUp

When I Open Login and signUp Portal it open with the both tab contents and then when I click on Login tab it open login tab content and on click register tab it open register tab page. But again after refresh the page popup showing both tabs content together![enter image...

Converting “i+=n” for-loop to $.each

I have the below html structure: <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> Now to group/wrap each 4 items in a separate div I did as below: var div=$('.thumbnail'); for(var i = 0; i < div.length; i+=4) { div.slice(i, i+4).wrapAll("<div...

Set value for Spinner with custom Adapter in Android

I am developing a android application with spinner in a form. The spinner items and spinner values are different. I want to collect all the value from the from including spinner and set a rest api service to web back end. here is the response array. {"Status":true,"errorType":null,"countryList":[{"Code":"US","Name":"United States"},{"Code":"CA","Name":"Canada"},{"Code":"AU","Name":"Australia"},{"Code":"GB","Name":"United Kingdom"}]} I...

Getting particular view from expandable listview

In my list view I have an textview in expandable group and I want to open the dialog when textview is clicked to fill the information through edittext and update textview. Problem: how could I get the groupview textview item in my fragment oncreateview() method....

Keep HashMap with object data while app is idle - Android

I have a HashMap that contains data relevant to a specific Activity. The problem is that when the app is opened after being idle for some time, the HashMap is empty. I am fetching all the data in the main activity and storing the corresponding objects in a HashMap in...

Get elements containing text from array

I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

Is there any way to use a pre-existing database from Xamarin without copying it from Assets?

I have a rather large SQLite database (~20 mb) I need to access from my Android Xamarin-Forms app. Everything online I've read says you can read the database by copying it to the filesystem first. For example, this question. However, won't that mean the large database is duplicated, wasting users'...

BitmapFont class does not have getBound(String) method

Previously I used getBound method for BitmapFont class in libgdx, but now, I am unable to use it. I cannot find the changes in latest version. Any help is appreciated. Thank you...

Javascript sort array of objects in reverse chronological order

I have an array of objects which holds a list of jobs and I would like to sort them in reverse chronological order as they would appear on a resume for example. I came up with the below solution which 'seems' to work but I was wondering if there is...

Cant submit form

Basically I've got a form with 5 radio buttons. No submit button. I want the form to run when the user clicks on any of the radio buttons, so this is what I did. <input id="5" type="radio" name="star" onchange="this.form.submit();" <?php if ($row["star"] =="5") echo "checked";?> value="5"/> a querystring is required...

Unfortunately, (My app) has stopped. Eclipse Android [duplicate]

This question already has an answer here: What is a Null Pointer Exception, and how do I fix it? 12 answers I'm a beginner in android developing and I'm trying to build a simple app but I'm getting this error in the emulator.(Unfortunately,(App) has unexpectedly stopped). LogCat package...

Is there any sdk to log exceptions, events and errors in production app?

I want to catch all the un expected/undesirable events in my app during production. I want something which can send a error log file to server and I can easily read it through a web application. Do you know anything of this sort ?

Get all prices with $ from string into an array in Javascript

var string = 'Our Prices are $355.00 and $550, down form $999.00'; How can I get those 3 prices into an array?...

Get current latitude and longitude android

Requirement: 1.Sometimes(not everytime) I am getting latitude and longitude 0.0. 2.I want to know how to get the location update after user has enabled the gps from the settings. Here is my code public class GPSTracker extends Service implements LocationListener { private final Context mContext; // flag for GPS status...

Why i get can not resolve method error in class android?

I use this tutorial: JSON and part of code to this: protected String doInBackground(String... urls) { TextView lbl=(TextView) findViewById(; person = new Person(); person.setName(lbl.getText().toString()); //person.setCountry("1853"); //person.setTwitter("1892"); return POST(urls[0],person); } but in the this line: person.setName(lbl.getText().toString()); i get this error: Can not resolve method. How can i solve that?what happen? my...

Saving data using promises

On I have the following function, and my question follows: function myFunction(array, value) { var logMessage; logMessage = "array: " + array.length.toString(); console.log(logMessage); if (!array.length) return; if (!value) value = Math.min(10, array.length); if (array[array.length - 1].get("advertisePointNumber") >= value) return; var classPromise; array[array.length - 1].set("advertisePointNumber", value); logMessage = "(BIS)array: "...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

Replacing elements in an HTML file with JSON objects

I am writing some Javascript to: Read in and Parse a JSON file Read in an HTML file (created as a template file) Replace elements in the HTML file with elements from the JSON file. It is only replacing the first element obj.verb. Can someone please help me figure out...

show div only when printing

Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

How To Check Value Of String

<span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

submitting form then showing loading image by javascript

I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

Twitter4j - cannot resolve method - setUsessl(boolean)

I'm using twitter4j 4.0.3 core I have this code: public final class TwitterUtil { private RequestToken requestToken = null; private TwitterFactory twitterFactory = null; private Twitter twitter; private TwitterUtil() { ConfigurationBuilder configurationBuilder = new ConfigurationBuilder(); configurationBuilder.setOAuthConsumerKey(ConstantValues.TWITTER_CONSUMER_KEY); configurationBuilder.setOAuthConsumerSecret(ConstantValues.TWITTER_CONSUMER_SECRET); configurationBuilder.setUseSSL(true); Configuration configuration =...

Javascript change the souce of all images present inside a string

I have a message or string which contain both text as well as images as below. var text = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif"> <img src="path../files/stickers/416397278.gif" title=":happy"></span>'; Before appending this to the the chat div i want to replace the src of the images to a default image. How can...

why is Android app publishing taking several days [on hold]

I have uploaded my app on the store 3 days ago and it status still : PENDING PUBLICATION I have uploaded all the app listing needed : description, screen shots ... and google didn't contact me on E-mail. does anyone had the same case before ???...

slideToggle state not working with multiple boxes

I'm trying to save the toggle state of collapsable boxes using cookies. Here's my code: HTML: <div class="box_container"> <div class="box_handle"> Title </div> <div class="box" data-title="admin_actions"> Content </div> </div> Javascript: $('div.box_container div.box_handle').click(function() { $(this).next('.box').slideToggle('fast'); }); $.each($('div.box_container div.box_handle'), function(index,value){ if ($.cookie('show_box_' + $(value).next('.box').attr('data-title')) != 'closed'){...

Javascript: Forloop Difference between i++ and (i+1)

I was building a javascript for loop and I want to compare the value of an array to the next value in the array. If both values are not equal, I want to return true, otherwise I want to return false. In the code below I pass the string "aba",...

session value in javascript cannot be set

I am quite new to javascript, I wonder why my session value in javascript wont be set to 1 even I tried. When call this function again, the value of the session will change again. My javascript code as below. <script type="text/javascript"> function Confirm() { alert(<%=Session["Once"]%> != 1); var value...

Android set clickable text to go one fragment to another fragment

I need to do something like this. Suppose I have 2 fragments A and B.There is a text which can be clickable in fragment A and when user click this text , he can go to fragment B. This example helped me to do it but I think it does...

How to resolve Out of Memory Error on Bitmap in Android?

I want to set an image in image view,I am retrieving the image path in my first activity and I am passing it via intent as a String to second activity.In the second activity I set the path to an image view,It is working properly , and I need to...

Fixed element in android?

I am using a FAB(Floating action button) and a ViewPager that has a list inside a fragment. The ViewPager stops due to the FAB block and each are blocks the ViewPager being on top of the FAB activity_main.xml <LinearLayout xmlns:android="" xmlns:tools="" xmlns:fab="" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:fitsSystemWindows="true">...