DGW Posted October 23, 2015 Share Posted October 23, 2015 Another beginner Q I'm afraid. I'd like to be able to show some standard HTML to get some info from the user. Then hide the HTML (using jQuery), and show a task based on the Phaser canvas/system for sometime, then hide the Phaser canvas again and show some other HTML stuff. I'm ok with all the HTML jQuery stuff. But, 1) what's the best/easiest way of hiding/showing the phaser canvas until it's needed (I'm not placing the Phaser canvas in a div because I can't get vertical centering to work properly when I do that). 2) is it possible to create new.game with the canvas already hidden? 3) can/should the phaser updating etc be turned off whilst the canvas is hidden thanks again, d. Link to comment Share on other sites More sharing options...
tips4design Posted October 23, 2015 Share Posted October 23, 2015 Canvas is a HTML element, so you can hide it easily using CSS (display: none). As for question 3), Phaser has a pause attribute:game.paused = true; Link to comment Share on other sites More sharing options...
DGW Posted October 23, 2015 Author Share Posted October 23, 2015 Thanks, yes I thought CSS would work but doesn't seem to (see minimal test code below). <!doctype html><head> <meta charset="UTF-8" /> <script src="phaser.min.js"></script> <style type="text/css"> canvas { display: none; } </style></head><body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, ''); </script></body></html> Link to comment Share on other sites More sharing options...
tips4design Posted October 25, 2015 Share Posted October 25, 2015 What if you add !important ? canvas { display: none !important; } Link to comment Share on other sites More sharing options...
DGW Posted October 25, 2015 Author Share Posted October 25, 2015 Well that got rid the canvas, but I don't seem to be able to get it to become un-hidden now (ie display block rather than none). I think the !important tag overrides everything even later changes to the style? Link to comment Share on other sites More sharing options...
tips4design Posted October 26, 2015 Share Posted October 26, 2015 Well, when you said display: block also add important to it . Or easier, you could add a class "hidden" that contains display: none !important; and add or remove this class to your element to hide/show it. Link to comment Share on other sites More sharing options...
DGW Posted October 26, 2015 Author Share Posted October 26, 2015 Oh yeah! All working now (both methods) thanks, d. Link to comment Share on other sites More sharing options...
Recommended Posts