Category: JavaScript

Phaser RESIZE Scale mode not resizing the game on mobile

NG Framework, HTML5, JavaScript, Mobile, Phaser

I had minimal html markup for a web game which used RESIZE scale mode as following <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>My Game</title> <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″> <meta name=”viewport” content=”width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no”> <link rel=”stylesheet” href=”css/app.css”> <script src=”js/phaser.min.js”></script> </head> <body> <div id=”game-container”> <div id=”mygame”></div> </div> <script src=”js/game.js”></script> </body> </html> The game was started with the following statement var mygame; window.onload = function () { mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, “mygame”); mygame.state.add(“Boot”, Boot); mygame.state.add(“Loading”, Loading); mygame.state.add(“TheGame”, TheGame); mygame.state.start(“Boot”); } code of Boot class // —————boot——————— var Boot = { init: function () { mygame.scale.scaleMode = Phaser.ScaleManager.RESIZE; }, preload: function () { mygame.stage.backgroundColor = 0x510100; mygame.load.image(“loading”, “images/loading.png”); }, create: function () { mygame.state.start(“Loading”); } }; When the game was loaded initially on mobile, it took the available space on the mobile screen for that orientation but turning the mobile device to other orientation did not correctly fit in the[…]

View More

Force Windows Store App to Full Screen Mode

NG Asp.Net, JavaScript, Windows Store App

In order to launch windows store app to full screen mode, check out the code here. Once app is launched in full screen mode, it can be resized by user by using the resize option which is available in all app windows and can not be removed. For windows pc, we can capture window resize event and try to enter full screen again which in effect doesn’t let user resize the application window. The java script code for achieving this: var page = WinJS.UI.Pages.define(“/index.html”, { ready: function (element, options) { // Add event for window resize event window.addEventListener(“resize”, onResizeView); } }); function onResizeView() { // Whenever window is resized, enter it to full screen mode var ViewManagement = Windows.UI.ViewManagement; var ApplicationView = ViewManagement.ApplicationView; var view = ApplicationView.getForCurrentView(); view.tryEnterFullScreenMode(); }  

View More

Launch External Url in Browser from Windows Store App

NG Asp.Net, JavaScript, Windows Store App

The java script code for achieving this: // Create a Uri object from a URI string var uri = new Windows.Foundation.Uri(“http://test.com”); var options = new Windows.System.LauncherOptions(); // Launch the URI with a warning prompt options.treatAsUntrusted = true; // Launch the URI Windows.System.Launcher.launchUriAsync(uri, options).then( function (success) { if (success) { // URI launched } else { // URI launch failed } });  

View More

Windows 10 App :Host Defined Policy: Inline Script. Resource will be blocked.

NG How to, HTML, JavaScript, jQuery, Windows Store App

I recently ported one of my java script projects to Windows store app and got the error as following CSP14321: Resource violated directive ‘script-src ms-appx: ‘unsafe-eval’ blob:’ in Host Defined Policy: inline script, in ms-appx://13bdc914-5111-4c95-a5e6-82029c5105ec/index.html at line 21 column 12. Resource will be blocked. If you have something like the following, it won’t work <a href=”javascript:void(0)” id=”somelink” onclick=”callMethod();”>Link</a> Since I was using jQuery in the project, I simply used jQuery to bind click event to the element $(“#somelink”).click(function () { callMethod(); }); and Voila, everything works but I had many pages which had this reference and I had to make this change to all pages. After some research I found that there is an alternate way which is much faster to change. By default ms-appx:/// protocol is used in store apps to fetch the content. For web apps specify a specific protocal ms-appx-web which is then used for the app. This can be done[…]

View More
Quick Tip

Tip of the day: Blank href in html A link

NG HTML, JavaScript, Quick Tip

When you are using <a> link and want to bind it with onclick event in stead of href location, it can be set to # as following <a href=”#” onclick=”javascript:callMethod();”>Link</a> As you know setting href to “#some_id” is an approach used to link content inside the page so if you are using above approach, it will make the page jump to top which is not an elegant solution. There is an alternate way which is much better as it does not make page jump. <a href=”javascript:void(0)” onclick=”javascrit:callMethod();”>Link</a> Simple and elegant..  

View More