Page 1 of 1

Trick: Embedding NAB WebApp into a responsive WordPress site

PostPosted: Thu Feb 25, 2016 12:56 am
by luishp
It is possible to embed a NAB WebApp into a responsive WordPress (or any other CMS) site.
Just follow these steps:

1) In NAB use the slScaleAppFitWidth command, on the StartUp App Events, from the "Power App" plugin

2) Add this CSS to WordPress (16:9 proportion):
Code: Select all
.iframe-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-16-9  iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


3) Upload and embed your WebApp into the desired Page through an <iframe>
Code: Select all
<div class="iframe-16-9"><iframe src="http://yourdomain.com/folder/#/NewPage" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>


Please look at this sample. The top image is an interactive NAB WebApp:
http://securitypointmadrid.es/cajas-fuertes/

Resize the browser window to see how the WebApp resizes itself accordingly.

Re: Trick: Embedding NAB WebApp into a responsive WordPress

PostPosted: Thu Feb 25, 2016 3:47 am
by anton
luishp wrote:It is possible to embed a NAB WebApp into a responsive WordPress (or any other CMS) site.

Great, but I don't like to use the tag "Iframe". Not tried instead of "iframe" to use the tag "object"

<div class="iframe-16-9"><object type="text/html" data="http://yourdomain.com/folder/#/NewPage"></object> </div>

Re: Trick: Embedding NAB WebApp into a responsive WordPress

PostPosted: Thu Feb 25, 2016 4:52 am
by djmarkes
Muchas gracias Luis, esto me va a venir de perlas.

Un saludo.

Re: Trick: Embedding NAB WebApp into a responsive WordPress

PostPosted: Thu Feb 25, 2016 1:41 pm
by luishp
Great, but I don't like to use the tag "Iframe". Not tried instead of "iframe" to use the tag "object"
<div class="iframe-16-9"><object type="text/html" data="http://yourdomain.com/folder/#/NewPage"></object> </div>


Anton it works perfectly!.
But in this case we should change the CSS a little bit:
Code: Select all
.iframe-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-16-9  object {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


Muchas gracias Luis, esto me va a venir de perlas.


Un placer :-)