Facebook Plugins Displaying Odd
MessiahStudios

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
MessiahStudios

http://clockworkchilli.com/forum/thread?id=Wade_with%20admob___306

 

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?

foxcode

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

Gio

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'});

 

Nancy845

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?

regards

Nancy

foxcode

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

krumza

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!
	</iframe>
</div>

result see here (only in russian lang)

Post a reply
Add Attachment
Submit Reply
Login to Reply