Facebook Plugins Displaying Odd

I'm trying to integrate facebook social plugins "Like, Share & Send" on the index.html page... They display but when i resize the window they go behind the game

All 6 Comments



I was able to get the plugins to appear in front of the game. I'm wondering how to make the wade.setWindowMode('container') to work? Also is there a way to embed a div inside a JavaScript file?


Hi. MessiahStudios

Using wade.setWindowMode('container') should prevent the render area from being resized when the screen is resized. Is this the behavior you want?

Regarding embeding a div in javascript it would be helpful to know what you are trying to do. You can define dom elements directly in javascript by doing the following...

var myDiv = document.createElement("div"); // Create a div element
myDiv.style.backgroundColor = "green";     // Set it's background color
document.appendChild(myDiv);               // Add the div to the document


You can also set a div's content via a string, something like this

var myDiv = document.getElementById("amazingDiv");
myDiv.innerHTML = "<h1>Hello World!</h1>";


I'm not sure if this is what you are asking but hopefully it will be helpful


I think we need to update the documentation, as it doesn't really say anything about the container window mode.

However the idea is simple, if you call wade.setWindowMode('container'), or if you set the window mode to container from the scene properties in the editor, then the wade scene will only be rendered inside a div, and, like foxcode says above, wade will not try to resize its canvas(es) to use the full size of the window.

By default, the container div is called wade_main_div. You can change this when you call wade.init (usually in your index.html file), using the container option like this:

wade.init('app.js', null, {container: 'your_div_name'});



I'm thinking about how to make the wade.setWindowMode('container') to work? Likewise is there an approach to insert a div inside a JavaScript document?




Hi Nancy845

If you go up a little bit, you can see my post where I suggest 2 ways of creating dom elements. It's no different whether it's a wade app or a website.

All "container" does is prevent the render area from resizing when the page size changes, I hope this helps.

Regards foxcode


Nancy845 you can insert game in iframe.

It responsive and simple i think

Just take Bootstrap 3 embed-responsive class for css

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="PLACE_FOR_YOUR_GAME/index.html" id="game" onload="this.contentWindow.focus()" onclick="this.contentWindow.focus()" allowfullscreen="true">
	    Your browser is outdated!

result see here (only in russian lang)

Post a reply
Add Attachment
Submit Reply
Login to Reply