I am writing a mobile app in Adobe AIR that loads a google map using Javascript. It works great on the desktop, but on mobile, everything looks WAY too tiny to be user friendly. The street text is unreadable, the infoWindows are too small and text is too small, the icons are too small, the "Satellite" and "Maps" buttons are very tiny, the zoom in and zoom out buttons on the map are too small to manipulate. Is there a "scale" property for the map that I am unable to find in the documentation that I can adjust to make a map more readable and user friendly? Or is this a CSS issue? Here is the Javascript I use to create the map, which I place in a div called "map":
function loadMap(latitude, longitude, mapWidth, mapHeight) {
var myLatlng = new google.maps.LatLng(latitude, longitude);
var sheet = document.getElementById("map");
sheet.style.width = String(mapWidth)+"px";
sheet.style.height = String(mapHeight)+"px";
var mapOptions = {
zoom: 13,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
It has been so long ago that I cannot remember the solution that I came up with. I took a quick look at the HTML file I created 10 months ago, and it looks like I created a header in my HTML file and it included some meta tags that included
content="initial-scale=1.0". Try that and see if it helps.
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
I figured it out. I needed this at the top:
<meta name="viewport" content="width=device-width">
Related
I am having an issue with creating buttons in an Animate CC HTML 5 canvas project. I've tried creating a MovieClip instance in my library, setting a linkage name and creating a frame in the MovieClip for each state, labelled as "out", "over", "down" and "hit".
Using the ButtonHelper class in CreateJS has "worked", to a degree, producing a functioning button with rollover state, until I try to reposition the button else where on the stage using the .x and .y properties. When I do this, the hit state seems to "separate" from the rest of the MovieClip - i.e. to trigger the "rollover" frame, I would have to mouse over the hit state much further down and to the right of the stage.
My Animate CC trial has now expired, so I am trying to solve my issues with using the CreateJS libraries with plain old fashioned HTML. I have created a spritesheet PNG file with three 50px x 50px images in it, which equals 150px X 50px. I have created an HTML doc and Javascript code, which follow below, but when the states of the Sprite button do not change when I click "down" on it or mouse "over" it.
I wonder if anything could pass some ideas my way? There might well be a simple error in what I've written, I'm working by myself and slowing going "code-blind" to it.
Thanks very much,
Dave
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sprite and Spritesheet Testing</title>
<script type="text/javascript" src="js/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/soundjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link type="text/css" rel="stylesheet" href="css/defaults.css" />
</head>
<body onload="init();">
<h1>Using Sprites, SpriteSheets and ButtonHelper</h1>
<p>Below should be some example buttons. Hopefully this functionality can be recreated within Animate CC using the CreateJS libraries.</p>
<!-- CreateJS content will be displayed here -->
<canvas id="t26Canvas" width="749" height="737" class="setupCanvas">
<h1>The internet browser you are currently using does not support the <canvas/> HTML 5 element.</h1>
</canvas>
</body>
</html>
Javascript:
/* Javascript required by the example page */
var HTML5Stage;
var spritesheet;
var data;
var myButton;
var myButtonHelper;
function init() {
// Get the HTML5 <canvas/> element we are going to be using for the CreateJS content.
HTML5Stage = new createjs.Stage("t26Canvas");
// Set usable on touch devices
createjs.Touch.enable(HTML5Stage);
// Enable capturing of mouse rollover events
HTML5Stage.enableMouseOver(30);
setupSpriteSheet();
addTestButton();
}
function setupSpriteSheet() {
data = {
images: ["images/ui/buttonsprites.png"],
frames: {width: 50, height: 50},
animations: {
out: 0,
over: 1,
down: 2
}
};
spritesheet = new createjs.SpriteSheet(data);
}
function addTestButton() {
myButton = new createjs.Sprite(spritesheet);
myButtonHelper = new createjs.ButtonHelper(myButton);
HTML5Stage.addChild(myButton).set({x: 300, y: 100})
HTML5Stage.update();
}
I am adding a whole new section to a website using Twitter Bootstrap 3, however the container cannot go wider than 940px in total for Desktop - as it will throw out the Header and Footer {includes}.
So 940px works out at 12 x 60 = 720px for the columns and 11 x 20 = 220px for the gutters. Fair enough, but how do you input these into Bootstrap 3 as there is 'no' #ColumnWidth field/setting in the Customize section?
I have tried by setting the #container-lg-desktop and #container-desktop both to 940px - but it doesn't work.
There is a far easier solution (IMO) in Bootstrap 3 that does not require you to compile any custom LESS. You just have to leverage the cascade in "Cascading Style Sheets."
Set up your CSS loading like so...
<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />
Where /css/custom.css is your unique style definitions. Inside that file, add the following definition...
#media (min-width: 1200px) {
.container {
width: 970px;
}
}
This will override Bootstrap's default width: 1170px setting when the viewport is 1200px or bigger.
Tested in Bootstrap 3.0.2
In the first place consider the Small grid, see: http://getbootstrap.com/css/#grid-options. A max container width of 750 px will maybe to small for you (also read: Why does Bootstrap 3 force the container width to certain sizes?)
When using the Small grid use media queries to set the max-container width:
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
Second also read this question: Bootstrap 3 - 940px width grid?, possible duplicate?
12 x 60 = 720px for the columns and 11 x 20 = 220px
there will also a gutter of 20px on both sides of the grid so 220 + 720 + 40 makes 980px
there is 'no' #ColumnWidth
You colums width will be calculated dynamically based on your settings in variables.less.
you could set #grid-columns and #grid-gutter-width. The width of a column will be set as a percentage via grid.less in mixins.less:
.calc-grid(#index, #class, #type) when (#type = width) {
.col-#{class}-#{index} {
width: percentage((#index / #grid-columns));
}
}
update
Set #grid-gutter-width to 20px;, #container-desktop: 940px;, #container-large-desktop: #container-desktop and recompile bootstrap.
The best option is to use the original LESS version of bootstrap (get it from github).
Open variables.less and look for // Media queries breakpoints
Find this code and change the breakpoint value:
// Large screen / wide desktop
#screen-lg: 1200px; // change this
#screen-lg-desktop: #screen-lg;
Change it to 9999px for example, and this will prevent the breakpoint to be reached, so your site will always load the previous media query which has 940px container
If you don't wish to compile bootstrap, copy the following and insert it in your custom css file. It's not recommended to change the original bootstrap css file. Also, you won't be able to modify the bootstrap original css if you are loading it from a cdn.
Paste this in your custom css file:
#media (min-width:992px)
{
.container{width:960px}
}
#media (min-width:1200px)
{
.container{width:960px}
}
I am here setting my container to 960px for anything that can accommodate it, and keeping the rest media sizes to default values. You can set it to 940px for this problem.
If if doesn't work then use "!Important"
#media (min-width: 1200px) {
.container {
width: 970px !important;
}
}
I'm trying to print a PDF file from my Windows 8 app to connected printer. I'm coding with WinJS, and know that I have to create a print task to initiate printing from a Windows 8 app. So, after reviewing the documentation, I have this code:
onPrintTaskRequested: function (e) {
var self = Application.navigator.pageControl,
printTask = e.request.createPrintTask("Print Test Doc", function (args) {
args.setSource(MSApp.getHtmlPrintDocumentSource(document));
// Register the handler for print task completion event
printTask.oncompleted = self.onPrintTaskCompleted;
});
}
According to the documentation, the MSApp.getHhtmlPrintDocumentSource method accepts a specific set of data types. As stated in the documentation:
This can be the root document, the document in an IFrame, a document
fragment, or a SVG document. Be aware that htmlDoc must be a document,
not an element.
Apparently I cannot simply set the argument for getHtmlPrintDocumentSource to a .PDF or .PNG binary. So, I'm curious: does the WinJS library offer a method for printing so that I can implement the printing of a PDF file to a connected printer? Can anybody offer some tips to implement?
After trial and error, I was finally able implement the printing of a Base64 stream representing a PDF binary from a Windows 8 application.
I'm coding the app in HTML / CSS / WinJS. Essentially here is a brief explanation of how it was accomplished:
Create a new <canvas> element within the default.html file. Place it right after the open tag of the element. Like this:
<body role="application" class="app">
<canvas id="pdf-render-output"></canvas>
.
.
.
</body>
Then inside the default.css file, setup a few rules as well as a print media query. Like this:
body > canvas {
display: none;
}
.
. /* all your app's default css styles */
.
#media print {
body > * {
display:none;
max-width: 100%;
}
html {
max-width: 100%;
border-top-color: none;
border-top: 0;
}
body > canvas {
display: block;
border: none;
max-width: 100%;
width: 100%;
height: 100%;
position: relative;
}
}
Of note is the order in which the rules are declared in CSS. It's important to place the print media query after declaring default CSS rules.
After this is setup, javascript handles the rest. The basic idea is to render the PDF.js output to the "hidden" canvas in the DOM. When the document object gets sent to print, the CSS print media declaration is queried so that all elements under <body> are hidden except for the canvas element. Here is the javascript to print only the first page in the PDF:
//Define a container for the Base64 data we'll use with PDF.js
var pdfPrintData = {};
//Function to render PDF to canvas and begin printing contract with Windows 8 OS
printPrescription: function () {
var self = Application.navigator.pageControl,
printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
self.getPDF().done(function () {
var pdfStream = pdfPrintData.base64,
pdfFile = convertDataURIToBinary(pdfStream);
PDFJS.disableWorker = true;
PDFJS.getDocument(pdfFile).then(function (pdf) {
var numPages = pdf.numPages,
renderCanvas = $('#pdf-render-output')[0];
//setup canvas
renderCanvas.height = pdf.getPage(1).data.getViewport(1).height;
renderCanvas.width = pdf.getPage(1).data.getViewport(1).width;
//Setup a render context for pdf.js to out a pdf file to the canvas.
var renderContext = {
canvasContext: renderCanvas.getContext('2d'),
viewport: pdf.getPage(1).data.getViewport(1)
};
//Bring up Windows 8 OS print after PDF is rendered to render context.
pdf.getPage(1).data.render(renderContext).then(function () {
printManager.onprinttaskrequested = self.onPrintTaskRequested;
Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
});
})
});
},
onPrintTaskRequested: function (e) {
var self = Application.navigator.pageControl,
printTask = e.request.createPrintTask("Print Prescription", function (args) {
args.setSource(MSApp.getHtmlPrintDocumentSource(document));
printTask.oncompleted = self.onPrintTaskCompleted;
});
},
onPrintTaskCompleted: function (e) {
if (e.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
console.log("[ERX] : Failed to print!");
}
}
The self.getPDF method is just a function that retrieves the Base64 data stream, and that streams gets set on the .base64 property of the global pdfPrintData object. For some reason, I was not able to render the pdf using pdf.js to a dynamically create canvas in a dynamically created document. I had to render the output of the pdf.js render method to a canvas already present in the DOM.
As far as I know, MSApp.getHtmlPrintDocumentSource(document) is meant to be used with HTML document objects, and nothing else.
If you can assume Windows 8.1, you can try to assemble a new HTML document from your PDF file by exporting each page into a raster image using PdfPage.RenderToStreamAsync. There is a sample project in MSDN for a PDF viewer that uses this new API where you can learn how to use this method.
If you cannot assume Windows 8.1 and you need to support plain Windows 8 or Windows RT (ARM), you might need to use a third party library to create the raster images or to do the printing all together.
Amyuni PDF Creator for WinRT for example can do the printing for you. Disclaimer: I currently work for the company that develops the library
I am embedding PDF in an IFRAME from a server that is unfortunately serving them as Content-Disposition:attachment;.
Is there any way to force the browser to display the PDF inline? Unfortunately I cannot change the headers for the PDF file linked in the iframe.
You could use pdf.js library for rendering pdf in html page.
Mozilla Pdf.js
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Learning</title>
</head>
<body>
<script type="text/javascript" src="pdf.js"></script>
<canvas id="the-canvas"></canvas>
</body>
</html>
JAVASCRIPT CODE
var url = "www.pdf995.com/samples/pdf.pdf";
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
I would like to handle the mouseDown events in the WebView. I subclassed the WebView,implemented the mouseDown and I came to know the mouseDown was redirected to WebHTMLView.
I have gone through the following link.
mouseDown: not firing in WebView subclass
From the above link I got to know, We can redirect the mouseDownEvent to Objective-C,but I did not find any solution for this. Can I have any Pointers or sample javascript to implement the same.
I tried the hitTest method in webview subclass.
- (NSView*)hitTest:(NSPoint)aPoint
Is it possible to recognize the mouseDown in the above method?
You can use onTouchStart Event for the same .Refer this link to bind events on iphone
or use this :-
$('button').bind( "touchstart", function(){alert('hey'} );
touchstart is equivalent to mouseDown
Another Solution is to set the element's cursor to pointer and it work with jQuery live and click event .Set it in CSS.(cursor:pointer)
IN javaScript you can use :-
node.ontouchmove = function(e){
if(e.touches.length == 1){ // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
var node = touch.target; // Find the node the drag started from
node.style.position = "absolute";
node.style.left = touch.pageX + "px";
node.style.top = touch.pageY + "px";
}
}
or
document.addEventListener('touchstart', function(event) {
alert(event.touches.length);
}, false);
for more details refer javascript iPhone Events
For Mac OSx See The Link
I used the following HTML and JavaScript to capture the mouseEvents and to display the position of the mouse click in the WebView.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function SetValues()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
document.getElementById('divCoord').innerText = s;
}
</script>
</head>
<body id="bodyTag" onclick=SetValues()>
<div id="divCoord"></div>
</body>
</html>