Canvas creates copy of itself - jquery-mobile

I have a HTML5 canvas that I'm trying to draw clouds on. It works fine when running in Chrome when testing in Ripple, and when running in the emulator, but fails when running on actual device (10" Samsung Galaxy Tab).
For testing purposes I commented out almost all code and just drew a colored rectangle on the entire canvas so I could see the borders of the canvas. I want to see one yellow rectangle near the upper-left corner of the screen with a bit of whitespace on the left (comes out to about 15px) and some whitespace below the header (total distance from the top of the rectangle to the top of the window is 42px). Call the upper left corner of the rectangle at position (15,42).
However, the tablet draws the rectangle but also draws a copy of itself starting at the very upper left corner of the screen -- position (0,0). The 'correct' rectangle overlaps and appears on top of the 'bad' rectangle.
Here's an image of what I want it to look like.
Here's the HTML:
<div data-role="page" id="makeClouds">
<div data-role="header">
Menu
<h1>Make clouds</h1>
Journal
</div>
<div data-role="content">
<div id="coverageButtons">
Less clouds
More clouds
<p id="cloudCoverageDisplay"></p>
</div>
<div id="canvasDiv">
<canvas id="canvasClouds">Sorry, your browser is not supported.</canvas>
</div>
</div>
</div>
Here's the javascript:
$(document).delegate("#makeClouds", "pageshow", function() {
console.log("Loading page makeClouds.");
//drawClouds();
var canvas = document.getElementById('canvasClouds');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
});
And here's the CSS:
#canvasDiv {
z-index: 2;
}
#canvasClouds {
background-color: blue;
z-index: 20;
}
I'm at a loss here, any help would be greatly appreciated.

Had to set 'position: absolute' on the canvas (which is inside the div) and this fixed the issue.
Fixed from details in link from #AnupChaudhari.
https://code.google.com/p/android/issues/detail?id=35474

Related

Ionic2 footer toolbar text doesn't take up full width on IOS

I have a footer toolbar on my ionic2 app that has a center-aligned text, but the text only seems to take the center 50% or so of the width of the toolbar and then cuts off with an ellipses (see image). The width seems to correspond to the same width of the text allowed for the header toolbar (which I've grayed out in the image). Is there a way to override this and make the text take up the full space? So far I've only noticed this issue on an iPhone 6, although I haven't tried that many devices.
<ion-content class="no-scroll">
<ion-tabs [selectedIndex]="mySelectedIndex">
tabs omitted..
</ion-tabs>
</ion-content>
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center>
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
You can apply below SCSS change only for iOS platform.
.scss
.ios,
{
your-page {
.padding-0 {
padding-left: 0;
padding-right: 0;
}
}
}
.html
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center class="padding-0">
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>

jQuery animate() on Chrome 37.0.2062.120 m / Webkit?

This is my first question here on SO, so bear with me. I am developing a small project and I recently discovered one particular problem that I did not have before.
In my project I have a small map used for selection of different regions of my country, Romania. I implemented this with Raphael.js library and jQuery/UI. It looks like this:
http://s28.postimg.org/pzg3gaiod/output_Cuap_Ye.gif
The idea is when you select a region it gets dynamically coloured and added to a vector of regions. Simple. So for every region (that is declared as a path for the Raphael library to understand and paint) I have a small function:
function clickableMinimapRegions(st, regio) {
st[0].style.cursor = "pointer";
st[0].onclick = function () {
if ($.inArray(regio, regions) != -1) {
regions.splice($.inArray(regio, regions), 1);
st.animate({
fill: "#FFFFFF"
}, 0);
} else {
regions.push(regio);
st.animate({
fill: "#e6e6e6"
}, 0);
}
};
}
Then I have this HTML:
<ul class="element-menu drop-up">
<li>
<a id="toggle" class="dropdown-toggle bg-lime text-shadow button shadow">
<img src="../img/regions.png">
</a>
<div id="content" class="dropdown-menu bg-steel" data-role="dropdown">
<div id="minimap" class="minimap"></div>
</div>
</li>
</ul>
I use Metro UI CSS library, it's a simple drop-down menu. But it's behaviour is to autoclose on click. So for that I did:
$("#minimap").click(function (event) {
event.stopPropagation();
});
http://s28.postimg.org/trltqsu19/Captura3.png
This menu is at the bottom of the screen over a leaflet map, the map is the background and this drop-down is over the map. The thing is, if the map is not loaded, than it works fine. If the map tiles are loaded, something is happening that prevents the regions to be coloured when clicked.
Thank you.
SOLUTION FOUND:
Force DOM redraw/refresh on Chrome/Mac
The second parameter in jQuery's .animate() is the duration, in milliseconds. Having set it to 0, I'd rather say the behaviour you see in other browsers is wrong, and you should expect to have the property changed immediately with no animation.
st.animate({
fill: "#FFFFFF"
}, 0);
// ^---- duration
Try changing that to a bigger value (400 ms is the default)
Here's a fiddle showing the difference: http://jsfiddle.net/exrj973b/

HTML5 canvas on iPad (with Phonegap) not working as expected

I am developing an iPad application with Phonegap and jQuery mobile. One of the functions required is to allow the user of the app to sign (their signature) in 2 boxes. I am using easel.js to handle the "drawing" on the canvas element.
The HTML structure of this page is something like:
<div class="signature-wrapper sw1">
<canvas class="flexBox" id="myCanvas" width="240" height="240"></canvas>
</div>
<div class="signature-wrapper sw2">
<canvas class="flexBox" id="myCanvas2" width="240" height="240"></canvas>
</div>
Where the 2 canvas elements are where the signatures will be drawn. Below each of these elements are buttons to clear and save each of the elements. When clicked, they fire functions to clear the canvas, or save the canvas to an image (the image is then placed over the canvas, and removed on clear)
The save functionality looks something like:
function saveStage1(){
var canvas = document.getElementById("myCanvas");
var imageData = canvas.toDataURL("image/png");
$('.sw1').append("<img src='" + imageData +"' style='position: absolute; left: 0px; top: 0px;' />");
}
Basically, it is just getting the content of the canvas and saving it to a PNG image, which is then appended to the wrapper for the canvas elements. There is additional code I have left out of the code here for clarity, dealing with localStorage and db.transactions.
This function is working as expected.
The next function is to clear the canvas:
function clearStage1(){
oldMidX, oldMidY, oldX, oldY = null;
delete window.currentShape;
stage.clear();
stage.removeAllChildren();
stage.update();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'images/signature-client.png';
$('.sw1 img').remove();
}
This clears the canvas, nulls some variables, and recreates the canvas.
This works 100% in chrome and safari, but does not work correctly on iPad as a Phonegap application. On iPad, you can draw, but once you have clicked save or clear you are unable to draw without navigating away and back to the screen. It seems there is a JavaScript error somewhere on the page on both the save and clear functions which is preventing any further JavaScript from executing without "reloading" the page.
I have setup my console in Safari on mac to look at xcode application, and there is no error in the log. Any help would be appreciated.

Customizing Header in Default Theme of JQuery Mobile App

I'm working on a JQuery Mobile app. I need to enlarge the font used for the title text. Whenever I enlarge the text size, the height of the ui-header bar grows. I do not want it to grow. Instead, I want the ui-header to stay the same size of the default ui-header. I just want to enlarge the text size. Currently, I have the following:
.t1 { color: blue; font-size:24pt; font-weight:normal; }
.t2 { color: white; font-size:24pt; font-weight:normal; }
<div data-role="header" data-position="fixed">
Back
<h1><span class="t1">My</span><span class="t2">App</span></h1>
</div>
How do I change the font size without making the header grow?
You also have to modify .ui-header .ui-title rule changing top and bottom margin values. For example:
.ui-header .ui-title {
margin: 0 30% 0;
}
http://jsfiddle.net/Pwqtm/1/

Drag an image within a div with left/right constraints

I'm trying to nest an image in a div and make it draggable on the X axis within this div.
Here's a jsFiddle to illustrate my point
I'd like the blue box to stop dragging once the user reaches its left/right edges, he shouldn't be able to see any of the red wrapper anymore.
Imagine the blue box is a very wide image, I want to be able to drag it from its left side to its right side without exceeding its width. It means you can't drag it to the right when you reached its left edge, and you can't drag it to the left when you reached its right side.
In a nutshell, when you reach the edges of the image, you can't drag it any more.
How can I set that kind of behavior ?
I tried playing with containment but I couldn't achieve what I wanted.
Thanks for your help.
HTML :
<div id="wrapper">
<p id="timeline"><img src="" alt="Timeline" width="2000" height="400"/></p>
</div>
CSS :
#wrapper {
width: 800px;
height: 400px;
background-color : red;
overflow: hidden;
cursor: w-resize;
}
#timeline {
width: 2000px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
JS :
$("#timeline").draggable({
axis: "x"
});
You were correct to use the containment option but you'll want to pass in array of coordinates to constrain the draggable.
Per the jQuery UI docs the containment option can take an Array in format [x1, y1, x2, y2]. In your case the y values are irrelevant because you are already constraining the draggable to the x axis, so you can simply pass in 0.
For the x values 0 will work for x1 since the image is already starting on the right edge. For x2 you'll need to use:
(width of parent - width of image)
So
(800 - 2000) = -1200
Therefore you can pass the following in for the containment option:
containment: [-1200, 0, 0, 0]
Live Example - http://jsfiddle.net/LMXLj/

Resources