Forums » Help » Buttons disappearing in cocoonjs

I've been trying to convert the physics demo into an apk using cocoonjs, which involved coding the canvas using js instead of putting it in the index.html file:

var obj = document.getElementById('game')
var c = document.createElement('canvas');
c.id = 'canvas';
obj.appendChild(c);

var b1 = document.createElement('div');
b1.id = 'buttonLeft';
b1.className  = 'button';
obj.appendChild(b1);

var b2 = document.createElement('div');
b2.id = 'buttonRight';
b2.className  = 'button';
obj.appendChild(b2);

var b3 = document.createElement('div');
b3.id = 'buttonShoot';
b3.className  = 'button';
obj.appendChild(b3);

var b4 = document.createElement('div');
b4.id = 'buttonJump';
b4.className  = 'button';
obj.appendChild(b4);

The problem is that the touch buttons don't appear on the phone, you can touch anywhere on the screen though and the jetpack guy boosts...

Anyone know where I am going wrong?
Thanks

I'm not sure how CocoonJS handles those additional HTML elements, but I think you still have to position those buttons somehow and also set their appearance.

However, I would advise you to ditch those additional HTML elements completely and go with the Touch Button plugin: http://impactjs.com/ejecta/integrating-impact-games#touch-buttons

Thanks Dominic,

I didn't realise the jumpnrun example catered for this. I've got it to work with that so will have a go re-factoring my game a bit.

I think Cocoon will throw errors/warnings in its console if it comes across things it doesn't support.