Source language: Translate to:

Trick: Embedding NAB WebApp into a responsive WordPress site

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Trick: Embedding NAB WebApp into a responsive WordPress site

Postby luishp » Thu Feb 25, 2016 12:56 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Trick: Embedding NAB WebApp into a responsive WordPress

Postby anton » Thu Feb 25, 2016 3:47 am

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>
Last edited by anton on Thu Feb 25, 2016 11:34 am, edited 1 time in total.
User avatar
anton
 
Posts: 60
Joined: Fri Oct 19, 2012 9:21 pm

Re: Trick: Embedding NAB WebApp into a responsive WordPress

Postby djmarkes » Thu Feb 25, 2016 4:52 am

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

Un saludo.
Diseño gráfico y Web profesional
http://www.jm-style.net
User avatar
djmarkes
 
Posts: 187
Joined: Thu May 26, 2011 5:08 pm

Re: Trick: Embedding NAB WebApp into a responsive WordPress

Postby luishp » Thu Feb 25, 2016 1:41 pm

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 :-)
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 2 guests