This section of our website is designed for displays the size of tablets or larger.
API HOME
OVERVIEW
DOCUMENTATION
DOWNLOADS
EXAMPLES

Welcome to the genApp API documentation!!! The genApp API is a Structural CSS Platform that helps you quickly design interfaces and is used to create genApp Templates. The API is very lightweight, less than 10K for the CSS .min file which can be used by itself for interface structure, and less than 5K for the JS .min file which provides some additional functionality when used in conjunction with JQUERY.

The genApp API was designed for developers who know how to code. If you're new to programming for the web, or don't have a good understanding of web based scripting, you may wish to learn more about HTML5, CSS, JavaScript, JSON, and JQUERY before moving forward with the genApp API. We have not included much styling in our API, in most cases it will just be overwritten by the developer to make the interface look the way they want and not the way we think it should. There are many other platforms out there, which are good platforms, and developers at genApp have used several for years. This is what lead to the development of the genApp Structural CSS Platform. If you are using an API that is 80-100K, then you have to write your own code to make your site look the way you want, you end up with a bunch of duplicate code that is not needed. The goal of the genApp CSS file is to allow you to structure your interface with as little code as possible as every line of code has to be downloaded to the end user and read by the program they are using to view the interface, such as a web browser or the genApp Editor.

API Overview

The following examples show the different stages of useage and illustrate how to get the most out of the genApp API.

genApp API Usage

genApp Template With only genApp CSS
Phones In Portrait Mode Phones In Landscape & Tablets In Portrait Older Computers & Laptops, As Well As, Tablets In Landscape Newer Computers & Laptops, As Well As, Large Widescreens
LAYOUT:
LARGE
Newer Computers/Laptops & Large Widescreens
The template above has no style other than genApp structural CSS applied. You can use the buttons above to veiw the template in different screen sizes. There are several things wrong with this template in this state. The first would be that there is no JS to make the buttons work. That is somewhat canceld out by the fact that both elements contianing page body content are currently showing on the page, not a desiredable result. Having said that, the footer stays in place and the elements are not running in to each other. Everything is in it's place, without styling, using the genApp CSS file, but that does not change the fact that the site is ugly and nonfunctional. This shows the functionality of the genApp platform works as intended. A lightweight Structural CSS Plaform to aid in quick development without adding a bunch of extra styling you will most likely overwrite.

genApp Template With genApp CSS & JS
Phones In Portrait Mode Phones In Landscape & Tablets In Portrait Older Computers & Laptops, As Well As, Tablets In Landscape Newer Computers & Laptops, As Well As, Large Widescreens
LAYOUT:
LARGE
Newer Computers/Laptops & Large Widescreens
The template above utilizes both the genApp CSS and genApp JS files. Notice the buttons still don't work, both sections of contenet still show, and there is no real style to the template. What is corrected in this template by adding the genApp JS file is the issue when you scroll to the bottom, you can now see all the text in the last section of the page. The genApp JS file deals with the offset of the sticky footer, as well as a sticky header if used, and allows the viewer to get to the bottom, or top, of the page without the header or footer covering content. There are additional aspects the genApp JS file deals with such as; browser standardizations, managing JSON data in the genApp Editor, and background standarization (simply set the color on gaPageContainer). Additionally there are some functions provided that are not structural, such as this HTTP Preview Window and it's functionality, as well as, the bird you see fly across the screen when the page loads.
genApp Template Adding Custom javaScript
Phones In Portrait Mode Phones In Landscape & Tablets In Portrait Older Computers & Laptops, As Well As, Tablets In Landscape Newer Computers & Laptops, As Well As, Large Widescreens
LAYOUT:
LARGE
Newer Computers/Laptops & Large Widescreens
In the template above we have added some custom JS using the mygenApp.js file. The mygenApp.css and mygenApp.js files are where you put your custom code, stored in their appropriate folders. By doing so we have the site looking a bit better now. The navigation now works and our video is now at the correct aspect ratio. We still have both body content sections showing until you click on one of the buttons. We could have fixed this using JQUERY but would rather do this task using CSS along with giving the footer a bit more structure and some color. In this example, and the two above, the footer text gets all bunched up on mobile phones in portrait mode. You can see this by clicking the far left button on each example. We need to fix this in our custom CSS as well. The custom CSS file is the last step and will complete our template. Additionally this template, and the two above, only hold the required elements for a template to work in the genApp Editor. Adding additional elements will help build a rich, responsive website that can be customized for any screen size.
genApp Template Adding Custom javaScript & CSS
Phones In Portrait Mode Phones In Landscape & Tablets In Portrait Older Computers & Laptops, As Well As, Tablets In Landscape Newer Computers & Laptops, As Well As, Large Widescreens
LAYOUT:
LARGE
Newer Computers/Laptops & Large Widescreens
In our final template we have applied custom CSS to the template using the mygenApp.css file. This has given us the ability style the elements in the template and given us the ability to style some of our own elements that we added to help build up the template. Using custom CSS we were able to hide all but the body content panel we want on load and doing so has gotten rid of the second panel flying over to the left as well. Our footer text no longer bunches up on a phone in portrait mode and we have added color to particular aspects that continues to change slowly. This is done using a js function call from the genApp JS file, added in the last example, along with the bird that flys across the screen when you first load this template. Since the genApp JS file utilizes JQUERY, we host JQUERY files on our site for all templates. For your own personal development you can point to any JQUERY file you wish. If you're using the genApp CS or JS files for templates that are supported by the genApp Editor you will need to point to our hosted files in your template for security reasons.


genApp Template Usage

We have serveral development templates available to help you get started in your project. Understanding how to use them is important if you're going to make genApp Tempates that are compatible with the genApp Editor. Each template is packed in a Zip file with each zip file holding the entire directory structure of the template. The directory structure is as follows.

  • Folder Containing The genApp Template
    • CSS Sub Folder
      • mygenApp.css
      • other CSS files
    • Images Sub Folder
      • any images you use in your template
    • JS Sub Folder
      • mygenApp.js
      • other JS files
    • default.htm (can be .htm or .html)

The file format you use for your page should be .htm or .html, we will use this file in our editor to generate JSON data which will allow us to duplicate your template, with the users settings, from our servers. External APIs, libraries, or plug-ins can be used in the development of your template but the files must be;

  1. included in a sub folder of your template
  2. hosted at the developer's website

We will accept well known APIs, libraries, or plug-ins being hosted at the developer's site. Other, less popular or custom, APIs, libraries, or plug-ins must be included in the appropriate sub folder within your template. We reserve the right to reject any templates submitted due to any APIs, libraries, or plug-ins that have been included in a template in any manner, for any reason. We have to worry about the safty of our customers, and our customer's customers, so we can not allow external files to be added without close review. For this reason it can take some time to get your templates accepted as we have to go through the code, line by line, to make sure there is nothing harmful that can hurt our systems, customers, or end users.

When adding images or other assets to your template you can not include any branding of any type other than to include the black ganApp Log with the text that says Template Imamge, as seen in the above templates. The font we used in our images is Rondalo and is a requirement. If the asset is an image, and the image is something other than square, the width & height of the image should also be present to let the genApp Editor user know what size images they need for your template. We provide several images in our basic template that you can link to for your templates but if you need a special size that we don't offer feel free to make one that fits your needs.

Starting out, mygenApp.com needs as many genApp Templates as we can get. Our original offering of templates will be free to use and will include your name as the designer in the Template Tag seen in all our free templates. It's a small tag at the bottom of the site that states "Created at MyGenApp.com, Template Design By DESIGNER'S NAME". The designer's name will be a link that takes a user to your profile where they can see all your templates, as well as, your genApp developer information. Save some of your more complex designs for a bit later as we will start offering genApp templates that our customers will purchase. The fee will be a one time fee for use in any manner they choose, as long as it fits within our terms of use, and you will set the price. Any genApp Templates that are purchased do not have the Template Tag at the bottom of the site, that is one of the benefits of purchasing a template from a designer. When selling a template, genApp takes a small percentage of the sale to cover the expenses of the processing, server overhead, and other expenses related to the site.


genApp Editor

At this point we have not release the genApp Editor. This means we have not made any public offering for genApp Templates at this time. We are looking at a release of the editor before the end of this year and are working on building our library of templates while we finalize the site and editor development. The editor will be used to view the template library, select a template, and then change the colors, images, text sizes, etc. of your template to meet their needs. When saved they end up with a genApp interface that is hosted by us. We provide them with the hosting, statistics, and additional information about their interface so they can track the interfaces success and usage.


Designer's Profile

Each designer who creates an account at genApp is given a profile where they can provide information about themselves. Additionally each template submitted by the designer is made available within their profile so visiters can view your work. Each template has particular statistics tied to it. These stats range from number of times used/purchased to the ROI for our customers. This information is used to create stats about the designer. Some stats have more weight to them than others, for example, a designer has no control on the ROI as they have no control over the marketing that was done to drive traffic or even the follow-up to try to make a sale. In some cases there may not even be any type of conversion as the interface just offers free data to a particular group of people. For these reasons ROI is nowhere near as important as how many time the template was used, as an example. Some of the statistics for designers are geared around the number of templates they have in their profile, as well as, the number of templates used out of the total number of templates. This means that just submitting a bunch of low end, junky templates to build up your library can hurt your Designer Ratings as nobody will use bad templates. Some of these statistics will be made available at launch while others will come as time goes on. This gives us the ability to start a baseline, as well as, gives our designer's a chance to gain some momentum with template usage.

GETTING STARTED
CSS
JS
JSON

Getting Started With The genApp API

You can use the genApp API two ways. The first would be for personal use. Using it for personal use gives you the freedom to only use the genApp CSS file if you want to handle the JS on your own or with another API. The second way is to use it to create genApp Templates that are compatible with the genApp Editor. Using the API in this manner has guidelines, that are outlined in this documentation, that you will have to follow to get your template accepted and added to your library.

Using genApp API For Your Personal Use

Using genApp API for your personal interface use is easy! Download the genApp CSS file, and the JS file if you want to use it as well, from our downloads section. For your own personal use you can do what ever you want with it as long as it does not violate our terms of use, privacy, and cookie usage documents. You should use the .min file for production, opposed to the fully commented JS file. If your going to point back to our site for these files you should also use the .min versions as we make changes from time to time to the fully commented version that may have temporary negative effects on your interface. The .min file is our stable, production version of the file. You have been warned! ;)

Using genApp API For genApp Templates

When using the genApp API for creating genApp Templates you must point to the CSS .min file and the JS .min file hosted on our site. Additionally we host JQUERY and the JQUERY UI files on our servers. You can point to those files or to the files hosted by JQUERY themselves. Additional APIs, Libraries, and Plug-ins that are not considered, by us, mainstream technologies, must be kept in the appropriate sub-foler so we can review the code in the file to help insure the safety of our customers and end users. Mainstream, commonly used APIs, that we don't host must be hosted from the developers site and not as an included file in your template. The following APIs, at this time, will have to be hosted from the creaters server. If the company does not offer hosting for their file you may submit an API for us to host. After we review the API, if approved, we will host those files for you. Here are a list of mainstream APIs that must point to the developers files for use.

  • Bootstrap
  • Foundation
  • Skelleton
  • 1140 CCS Grid
  • Golden Grid System
  • Responsive Grid System, by Graham Miller
  • Mueller Grid System
  • Titan
  • Less Framework
  • Gridiculous
  • Responsive Grid System, by Denis LeBlanc
  • Columnal
  • Gumby
  • Ingrid
  • 960 Grid System
  • Base
  • Toast
  • YAML
  • Tuktuk
  • Kube
  • Susy
  • Skelleton
  • Groundwork

The above list are all grid based framework APIs just like genApp. Most have more features than genApp but most of those features are based around prestyling your inteface for you. If you don't mind having to restyle and duplicate your code there are many of these that have wonderful featurs. We know as we use to use some of them. ;)

You may NOT include any scripting, programing, content, or the like, that would in any way;

  1. Harm a device or computer viewing the interface.
  2. Cause data loss on a device or computer viewing the interface.
  3. Tracks any information in any manner.
  4. Send or save information back to a 3rd party server or location for any reason.
  5. Displays any personal or business branding or contact information. You can comment your files with your name or company name.
  6. Include any contact information such as email, phone number, social network account, and the like. Your profile will be how users communicate with you and you with them.

You MUST include the basic required elements in your template such as;

  1. Template Name
  2. Template Version
  3. Account Key
  4. Date Updated
  5. Elements with Classes and ID that match the minimum elements needed for a template within the genApp CSS Framework Additoinal elements can be used as well
  6. The JSON Data that defines your interface including any initial function calls that need to be made on load

Each required item is outlined in the templates offered on the download page other than the JSON data. Each template is commented almost line by line. Comments for repetative tags are sometimes left out to help reduce page size. The JSON data requirements can be found in the JSON Tab at the top of the page.

Now that you have all the details on how to use, and not to use, genApp API, based on your needs, all you need to do now to get started is download the template files and get to it. Why are you still here? Click the DOWNLOADS button and get started! ;)

genApp CSS

We use Visual Studio as our editor and make use of the #region tag to organize our code structure. These regions can be removed if you do not use Visual Studio. In the CSS file below you will find comments added to each of the selectors that we felt were not just common sense such as body, columns, a, etc. This file is provided as a way to better understand the genApp CSS structure. We recommend pointing to the .min file as done in our templates. It's a much smaller file and does the same job, it's just had all the extra space and comments removed.

codeCruncher

If your using the genApp API for your personal use you can edit the .js file then use codeCruncher to create the .min file for yourself. It's a very simple program, and requires no install. The types of comments it removes is at the top of the screen. (it will not remove comments that start with // but will remove <!-- comments --> and /* comments */.

+
 genApp.1.0.0.5 CSS
                                    /*
    Hosted genApp CSS
    Version 1.0.0.5
    www.MyGenApp.com
    Copyright 2018 SilverStreak Digital Media - All Rights Reserved.
*/

/*#region PAGE FORMATTING */

/*#region BASIC HTML */

/*#region GENERAL SETUP */
* {
    box-sizing: border-box;
}

html {
    min-height: 100%; /* make sure it is at least as tall as the viewport */
    position: relative;
    min-width: 100%;
}

body {
    margin: 0px;
    /* SET FONT */
    font-family: sans-serif;
    /* FONT STANDARDIZATION FOR MS AND APPLE */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    /* STANDARDIZE LINE HIEGHT ACROSS BROWSERS */
    line-height: 1.40;
    height: 100%;
}

pre {
    margin: 0px;
}
/*#endregion*/

/*#region TEXT ALIGNMENT */

.gaRight {
    text-align: right;
}

.gaLeft {
    text-align: left;
}

.gaJustify {
    text-align: justify;
}

.gaCenter {
    text-align: center;
}

/*#endregion*/

/*#region STYLE FIXES */
/* REMOVE THE BORDER ON ACCTIVE AND HOVERED LINKS */
a {
    text-decoration: none;
}

    /* REMOVE THE OUTLINE THAT APPEARS ON LINKS IN SOME BROWSERS */
    a:active, a:hover {
        outline-width: 0;
    }

/* SAFARI DOUBLE BOLD FIX */
b, strong {
    font-weight: inherit;
}

/* REMOVE THE MARGIN FROM HEADERS & LISTS FOR DESIGN CONTROL */
h1, h2, h3, h4, h5, h6, ul, ol {
    margin: 0px 0px 0px 0px;
}
/*#endregion*/

/*#region MEDIA QUERY - IE Fixes */
@media screen and (-ms-high-contrast: none) {

    /*#region IE10+ SPECIFIC STYLES */
    img {
        border: 0px;
    }
    /*#endregion */

    /*#region IE11+ SPECIFIC STYLES */
    *::-ms-backdrop {
        position: relative;
    }

    *::-ms-backdrop {
        position: relative;
    }

    img {
        border: 0px;
    }
    /*#endregion */

}

/* Retina Media Query */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
/*#endregion */


/*#endregion*/

/*#region genApp ROWS & COLUMNS */
/*#region ROWS */
.gaRow {
    width: 100%;
}
    /* Clear floats after the columns */
    .gaRow:after {
        content: "";
        display: table;
        clear: both;
    }
/*#endregion */

/*#region COLUMNS */
[class*="col-"] {
    float: left;
    max-width: 100%;
    max-height: 100%;
    padding: 1px;
}

/*#region NEWER COMPUTERS AND LARGE WIDESCREENS */

.col-lg-1 {
    width: 8.33%;
}

.col-lg-2 {
    width: 16.66%;
}

.col-lg-3 {
    width: 25%;
}

.col-lg-4 {
    width: 33.33%;
}

.col-lg-5 {
    width: 41.66%;
}

.col-lg-6 {
    width: 50%;
}

.col-lg-7 {
    width: 58.33%;
}

.col-lg-8 {
    width: 66.66%;
}

.col-lg-9 {
    width: 75%;
}

.col-lg-10 {
    width: 83.33%;
}

.col-lg-11 {
    width: 91.66%;
}

.col-lg-12 {
    width: 100%;
}

/*#endregion */

/*#region OLDER COMPUTERS AND TABLETS IN LANDSCAPE */

.col-md-1 {
    width: 8.33%;
}

.col-md-2 {
    width: 16.66%;
}

.col-md-3 {
    width: 25%;
}

.col-md-4 {
    width: 33.33%;
}

.col-md-5 {
    width: 41.66%;
}

.col-md-6 {
    width: 50%;
}

.col-md-7 {
    width: 58.33%;
}

.col-md-8 {
    width: 66.66%;
}

.col-md-9 {
    width: 75%;
}

.col-md-10 {
    width: 83.33%;
}

.col-md-11 {
    width: 91.66%;
}

.col-md-12 {
    width: 100%;
}


/*#endregion */

/*#region PHONES LANDSCAPE AND TABLETS PORTRAIT */

.col-sl-1 {
    width: 8.33%;
}

.col-sl-2 {
    width: 16.66%;
}

.col-sl-3 {
    width: 25%;
}

.col-sl-4 {
    width: 33.33%;
}

.col-sl-5 {
    width: 41.66%;
}

.col-sl-6 {
    width: 50%;
}

.col-sl-7 {
    width: 58.33%;
}

.col-sl-8 {
    width: 66.66%;
}

.col-sl-9 {
    width: 75%;
}

.col-sl-10 {
    width: 83.33%;
}

.col-sl-11 {
    width: 91.66%;
}

.col-sl-12 {
    width: 100%;
}

/*#endregion */

/*#region PHONES PORTRAIT */

.col-sp-1 {
    width: 8.33%;
}

.col-sp-2 {
    width: 16.66%;
}

.col-sp-3 {
    width: 25%;
}

.col-sp-4 {
    width: 33.33%;
}

.col-sp-5 {
    width: 41.66%;
}

.col-sp-6 {
    width: 50%;
}

.col-sp-7 {
    width: 58.33%;
}

.col-sp-8 {
    width: 66.66%;
}

.col-sp-9 {
    width: 75%;
}

.col-sp-10 {
    width: 83.33%;
}

.col-sp-11 {
    width: 91.66%;
}

.col-sp-12 {
    width: 100%;
}

/*#endregion */


/*#endregion */

/*#endregion */

/*#region genApp PAGE STYLES */

/*#region BASIC PAGE STYLES */
/* THE CONTAINER THAT HOLDS ALL THE CONTENT ON THE PAGE - USE THIS TO BUILD PADDING IN YOUR CONTENT */
.gaPageContainer {
    /*background-color: none;*/
    height: 100%;
    padding: 0;
    margin: 0;
}

/* HOLDS THE HEADER */
.gaHeaderContainer {
    top: 0px;
    width: 100%;
    height: auto;
    z-index:10;
}

/* CREATES A RESPONSIVE HEADER ACROSS THE TOP OF THE PAGE THAT WILL GROW IN HEIGHT BASED ON CONTENT */
.gaHeader {
    float: left;
    height: 100%;
    width: 100%;
}

/* A LARGE HEADER GRAPHIC - DEFAULT STYLE IS THE SAME AS gaImg */
.gaHeaderImg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: auto;
}

/* AJUSTS TO THE HEIGHT OF THE HEADER WHEN THE HEADER IS STICKY*/
.gaHeaderOffset {
}

/* HOLDS ALL THE CONTENET OTHER THAN THE HEADER AND FOOTER */
.gaPageBody {
    padding: 0px;
}

/* THE CONTAINER THAT HOLDS THE FOOTER */
.gaFooterContainer {
    bottom: 0px;
    /*background-color: white;*/
    width: 100%;
}

/* CREATES A RESPONSIVE FOOTER ACROSS THE BOTTOM OF THE PAGE THAT WILL GROW IN HEIGHT BASED ON CONTENT */
.gaFooter {
    display: flex;
    max-width: 100%;
    width: 100%;
    font-size:12px;
    padding: 0px 5px;
}

/* A LARGE HEADER GRAPHIC - DEFAULT STYLE IS THE SAME AS gaImg */
.gaFooterImg {
    max-width: 100%;
    max-height: 100%;
}

/* AJUSTS TO THE HEIGHT OF THE FOOTER WHEN THE FOOTER IS STICKY*/
.gaFooterOffset {
}

/* SETS THE ELEMENT TO AN FIXED POSITIONING */
.gaSticky {
    position: fixed;
}

/* TOP LEVEL THEME FOR THE SITE */
.gaTheme {
    background: linear-gradient(rgba(255, 255, 255,0.4), rgba(0, 0, 0,0.4));
}

/* BACKGROUND THEME FOR THE SITE */
.gaBGTheme {
    background: linear-gradient(rgba(255, 255, 255,0.4),rgba(0, 0, 0,0.4));
}

/* A DIV USED TO CENTER ANOTHER DIV UP AND DOWN */
.gaCenterDiv {
    display: flex;

}

/* THE DIV THAT IS CENTERED BY gaCenterDiv */
.gaCenteredDiv {
    position: relative;
    margin: auto;
}

/* RESPONSIVE - WILL NOT EXCEED IT'S ORIGINA SIZE */
.gaImg {
    max-width: 100%;
    max-height: 100%;
}

/* RESPONSIVE - KEEPS THE IMAGE AS LARGE AS IT CAN BE, BASED ON SCREEN SIZE, WHILE KEEPING IT IN IT'S CONTAINER */
.gaResponsiveImg {
    width: 100%;
    height: auto;
}

/*#endregion */

/*#region TEMPLATE BASED STYLES */

/* JSON BLOCK READ BY THE EDITOR*/
.gaJSON {
    display: none;
}

/* TEMPLATE TAG - ADDED TO THE BOTTOM OF FREE TEMPLATES */
.gaTemplateTagContainer {
    position: fixed;
    width: 100%;
    height: 15px;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    bottom: 0px;
    z-index: 900;
}

/* TEMPLATE TAG */
.gaTemplateTag {
    text-align: center;
    font-size: 10px;
    background: white;
    padding: 3px 10px 3px 10px;
    border-radius: 4px 4px 0px 0px;
    margin: auto;
    width: 300px;
}

/*#region FOR TIMES WHEN YOU JUST DON'T WANT PADDING AT ALL */
.gaNoPad {
    padding: 0px;
}

/*#endregion*/

/*#endregion*/

/*#region FORM ITEMS */

input, select, textarea {
    width: 100%;
    resize: vertical;
    padding: 6px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

    input[type=radio] {
        width: 25px;
    }

.gaButtonDiv {
    text-align: center;
    cursor: pointer;
    padding: 6px 6px;
    color: #000;
    background: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.3));
    margin: 0px 0px 0px 0px;
    border: 1px solid #808080;
    background-color: none;
}

    .gaButtonDiv:hover {
        color: #ffffff;
        background: linear-gradient(rgba(255,255,255,0.3), rgba(0,0,0,0.5));
    }

.gaFieldContainer {
    padding: 0 0 8px 0;
}

.gaFieldLable {
    text-align: left;
    padding: 5px;
    border-radius: 4px 4px 0px 0px;
    box-shadow: 3px 3px 3px rgba(128, 128, 128,0.6);
    border-top: 1px solid rgba(128, 128, 128,0.6);
    border-left: 1px solid rgba(128, 128, 128,0.6);
    border-right: 1px solid rgba(128, 128, 128,0.6);
    border-bottom: 0px solid rgba(128, 128, 128,0.6);
}

.gaFormField {
    background: white;
    box-shadow: 3px 3px 3px rgba(128, 128, 128,0.6);
    border-radius: 0px 0px 4px 4px;
}

/*#endregion */

/*#endregion*/

/*#endregion */

/*#region COMPONENT STYLS */

/*#region genApp Flip Box */

.gaFlipBox {
    background-color: transparent;
    width: 343px;
    height: 247px;
    perspective: 1000px;
}

.gaFlipBoxContainer {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.gaFlipBox:hover .gaFlipBoxContainer {
    transform: rotateX(180deg);
}

.gaFlipBoxFront, .gaFlipBoxBack {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gaFlipBoxBack {
    transform: rotateX(180deg);
}
/*#endregion */

/*#region HTML Preview Panel */

/* THE OUTTER MOST CONTAINER FOR THE ENTIRE PREVIEW BLOCK */
.gaPreviewBlockContainer {
    padding: 0px;
}

/* WHAT CENTERS THE PREVIEW IN IT'S SPACE */
.gaHTMLPreviewBlock {
    padding: 1px;
    min-width: 520px;
    max-width: 770px;
    margin: auto;
}

/* THE PREVIEW PORTION ITSELF - INCLUDES THE gaHTMLPreviewTitleBlock AS WELL*/
.gaHTMLPreviewContainer {
    overflow: hidden;
    padding: 0px;
    border: 1px solid #2e2e2e;
    border-radius: 0px 0px 0 0;
    background-color: black;
}

/* THE TITLE OF THE PREVIEW */
.gaHTMLPreviewTitleBlock {
    height: 35px;
    border: 0px solid #2e2e2e;
    border-radius: 4px 4px 0 0;
    padding: 8px 0px 3px 5px;
    background-color: #4f4f4f;
    color: white;
}

/* THIS CLASS DEFINES A GROUP OF PREVIEW OBJECT WITH A SIMULAR id TO ALLOW THE CORRECT PREVIEW SCREEN SIZE TO CHANGE WHEN NEEDED */
.gaFrameControl {
    max-height: 297px;
    padding: 0px;
}

/* THE WRAPPER THAT HOLDS THE IFRAME - THIS ELEMENT ALSO HIDES THE ASPECTS OF THE IFRAME NOT BEING USED */
.gaFrameWrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    width: 300%;
    height: 450px;
}

/* THE IFRAME THAT HOLDS THE PREVIEW PAGE */
.gaPreviewFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    border: 0;
    text-align: center;
    zoom: 0.33;
    -moz-transform: scale(0.33);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.33);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.33);
    -webkit-transform-origin: 0 0;
}

/* PREVIEW ADJUSTMENT FOR SOME BROWSERS */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .gaPreviewFrame {
        zoom: 1;
    }
}

/* THE CONTAINER FOR THE BUTTONS AND DESCRIPTION INFORMATION */
.gaHTMLPreviewLayoutControls {
    background-color: #d9d9d9;
    border-width: 1px;
    border-color: #2e2e2e;
    border-style: solid;
}

/* THE CONTAINER FOR THE BUTTONS THAT ARE USED TO CHANGE THE PREVIEW SCREEN SIZE */
.gaScreenLayoutButtonContainer {
    padding: 3px 0 0 0;
}

/* BUTTONS THAT ALLOW A USER TO CHANGE THE PREVIEW SCREEN SIZE */
.gaScreenLayoutButton {
    max-width: 32px;
    border: 1px solid black;
    cursor: pointer;
}

/* THE CONTAIMER THAT HOLDS THE DATA ABOUT THE PREVIEW OPTION SELECTED */
.gaPreviewLayoutData {
    font-size: 12px;
    padding: 5px 5px 0 5px;
}

/* THE LABLE FOR THE SELECTED LAYOUT TYPE */
.gaPreviewLayoutLabel {
    text-align: right;
    padding: 0px 0px 0px 0px;
}

/* THE SELECTED LAYOUT TYPE */
.gaPreviewLayoutSelected {
    text-align: left;
    padding: 0 0 0 5px;
}

/* THE SELECTED LAYOUT TYPE */
.gaPreviewLayoutDescription {
    font-size: 10px;
    text-align: left;
    padding: 0 0 0 5px;
}

/* DATA ABOUT THE DESIGNER, THE TEMPLATE, AND USAGE STATS */
.gaTemplateData {
    font-size: 12px;
    padding: 0px 0 0 0;
    background-color: #a1a1a1;
    border: 1px solid #2e2e2e;
}

/* THE CONTAINER FOR THE TEMPLATES AVAILABLE OPTIONS */
.gaTemplateOptions {
    font-size: 12px;
    padding: 0px 0 0 0;
    background-color: #4f4f4f;
    border: 1px solid #2e2e2e;
    border-radius: 0px 0px 10px 10px;
}

/* AN OPTIONAL BOTTOM SECTION TO THE PREVIEW PANEL */
.gaTemplatePanelBottom {
    height: 15px;
    border: 1px solid #2e2e2e;
    border-radius: 0px 0px 10px 10px;
    padding: 8px 0px 3px 5px;
    background-color: #2e2e2e;
    color: white;
    margin-bottom: 1px;
}

/*#endregion */

/*#region IMAGE WINDOW */
/* USED AS THE STYLE FOR THE BACKGROUND OF AN IMAGE WINDOW */
.gaImgWindowBG {
    float: left;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    padding: 0px;
}

/* USED AS THE STYLE FOR TITLE WINDOW IN THE TOP LEFT OF THE IMAGE WINDOW */
.gaWindowPop {
    position: relative;
    display: flex;
    margin: 0px;
    max-width: 300px;
    padding: 0px;
}

    .gaWindowPop h1, gaWindowPop h2, gaWindowPop h3, gaWindowPop h4 {
        padding: 0px 0px 0px 8px;
    }

    .gaWindowPop > img {
        margin: auto;
        max-width: 100%;
        height: auto;
    }

/* USED CONTAINER THAT HOLD THE DATA WITHIN THE IMAGE WINDOW */
.gaWindowData {
    padding: 3px;
}

    .gaWindowData > p {
        padding: 0px 8px 0px 8px;
        margin: 5px 0px 10px 0px;
        text-align: justify;
    }

/*#endregion */

/*#region YOUTUBE VIDEO PLAYER */

/* USED TO PLACE A YOUTUBE VIDEO IN A PAGE */
.gaVideoContainer {
    display: flex;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

/* THE IFRAME THAT LOADS YOUTUBE VIDEO */
.gaVideoFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*#endregion */

/*#region genApp - gaNav*/
/* gaNav STYLE */

.gaMenuIcon {
    display: none;
    padding: 12.5px 16px;
    color: black;
}

    .gaMenuIcon:hover {
        background: #808080;
        color: white;
    }


.gaNav {
    overflow: hidden;
    background-color: #bababa;
    float: left;
    width: 100%;
}

    .gaNav a {
        float: left;
        display: block;
        color: #000;
        text-align: center;
        padding: 14.5px 16px;
        text-decoration: none;
        font-size: 17px;
    }

.gaCurrentNav{
    background-color: #99daff;
    color: black;
}

.dropDown {
    float: left;
    overflow: hidden;
}

    .dropDown .dropDownBtn {
        font-size: 17px;
        border: none;
        outline: none;
        color: black;
        padding: 16px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

.dropDown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropDown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

.gaNav a:hover, .dropDown:hover .dropDownBtn {
    background-color: #555;
    color: white;
}

.dropDown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropDown:hover .dropDown-content {
    display: block;
}

/*#region genApp - gaNav media query */
@media screen and (max-width:768px) {
    .gaMenuIcon {
        position: absolute;
        right: 0;
        top: 0;
    }

    a.gaMenuIcon {
        float: right;
        display: block;
    }

    .gaNav a, .dropDown .dropDownBtn {
        display: none;
    }

    .gaNav.gaMenu {
        position: relative;
    }

        .gaNav.gaMenu a {
            float: none;
            display: block;
            text-align: left;
        }

        .gaNav.gaMenu .dropDown {
            float: none;
        }

            .gaNav.gaMenu .dropDown .dropDownBtn {
                display: block;
                width: 100%;
                text-align: left;
            }

        .gaNav.gaMenu .dropDown-content {
            position: relative;
        }

    /*#endregion */

}

/*#endregion*/

/*#region gaCarouselViewer */
/* The genApp Carousel Viewer is built on the
   Owl Carousel API and builds an image viewer
   around that.

   Owl Carousel v2.3.4
   Copyright 2013-2018 David Deutsch
   Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-bottom: 15px;
    -moz-box-shadow: 5px 5px 15px #000;
    -webkit-box-shadow: 5px 5px 15px #000;
    box-shadow: 5px 5px 15px #000;
    /* For IE 8 */
    -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666666');
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666666');
}

.carouselItemTitle {
    font-weight: bold;
    font-size: 14px;
}
/*#endregion*/

/*#region gaExpandingTitle */

.gaExpandingTitle {
    display: inline-block;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

.gaExpandingTitle:hover {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    background: rgba(255,255,255,0.9);
    color: rgb(99,99,99);
    border: solid 1px;
}
/*#endregion */

/*#region gaImgViewer  */

.gaImgViewerBackground {
    display: flex;
    z-index: 5;
    align-items: center;
    text-align: center;
    min-width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
}

.viewedImg {
    min-width: 10vw;
    max-width: 80vw;
    min-height: 10vh;
    max-height: 85vh;
}
.gaViewerTitle {
    font-weight: bold;
    font-size: 16px;
    cursor:pointer;
}

.imgViewerTitle {
    display: inline-block;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0px;
}

.imgViewerTitleClicked {
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0px;
}

/*#endregion */

/* BASIC BROWSER PREVIEW */
.gaBrowserPreview {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.50);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    border: 1px solid black;
}

/* USED TO HAVE AN IMAGE FLY ACROSS THE SCREEN */
.gaFlyBy {
    display: none;
    position: fixed;
}

/*#endregion */

/*#region MEDIA QUERYS */
/* SCREEN SIZES LESS THAN 480PX  - SMALL (LARGER PHONES, SMALLER PADS, AND OLDER SMALL NOTEBOOKS) */
@media screen and (min-width:480px) {
    /*#region COLUMNS */
    .col-sl-1 {
        width: 8.33%;
    }

    .col-sl-2 {
        width: 16.66%;
    }

    .col-sl-3 {
        width: 25%;
    }

    .col-sl-4 {
        width: 33.33%;
    }

    .col-sl-5 {
        width: 41.66%;
    }

    .col-sl-6 {
        width: 50%;
    }

    .col-sl-7 {
        width: 58.33%;
    }

    .col-sl-8 {
        width: 66.66%;
    }

    .col-sl-9 {
        width: 75%;
    }

    .col-sl-10 {
        width: 83.33%;
    }

    .col-sl-11 {
        width: 91.66%;
    }

    .col-sl-12 {
        width: 100%;
    }
    /*#endregion */
}

/* SCREEN SIZES LESS THAN 768PX - MEDIUM (LARGER PADS, LAPTOPS AND OLD COMPUTERS) */
@media screen and (min-width:768px) {

    /*#region COLUMNS - OLDER COMPUTERS AND TABLETS IN LANDSCAPE */

    .col-md-1 {
        width: 8.33%;
    }

    .col-md-2 {
        width: 16.66%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33%;
    }

    .col-md-5 {
        width: 41.66%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.33%;
    }

    .col-md-8 {
        width: 66.66%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.33%;
    }

    .col-md-11 {
        width: 91.66%;
    }

    .col-md-12 {
        width: 100%;
    }
    /*#endregion */


}

/* SCREEN SIZES LESS THAN 1224PX - LARGE (NEW COMPUTER/LAPTOPS, AND LARGE SCREENS) */
@media screen and (min-width:1224px) {

    /*#region COLUMNS*/
    .col-lg-1 {
        width: 8.33%;
    }

    .col-lg-2 {
        width: 16.66%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.33%;
    }

    .col-lg-5 {
        width: 41.66%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.33%;
    }

    .col-lg-8 {
        width: 66.66%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-10 {
        width: 83.33%;
    }

    .col-lg-11 {
        width: 91.66%;
    }

    .col-lg-12 {
        width: 100%;
    }
    /*#endregion */

}

/*#endregion */

                                

JS

codeCruncher

The following information explains the usage of the functions in the genApp JS file. Not all of these functions are required and, if your are not making genApp Templates you can remove those aspects. Each item is commented to let you konw what it's used for to allow you to decide if you want to use it or not. Additionally we have provided the specs for each of the functions used by genApp. If your using the genApp API to create genApp Templates these featres should stay as they provide functionality to your interface.

If your using the genApp API for your personal use you can edit the .js file then use codeCruncher to create the .min file for yourself. It's a very simple program, and requires no install. The types of comments it removes is at the top of the screen. (it will not remove comments that start with // but will remove <!-- comments --> and /* comments */.

genApp.1.0.0.2 JS
                                    /*
    Hosted genApp javaScript
    Version 1.0.0.5
    www.MyGenApp.com
    Copyright 2018 SilverStreak Digital Media - All Rights Reserved. 
*/

/* CHECKS TO SEE IF THE USER IS USING IE */
function gaCheckForIE() {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
        /* IE 10 & < */
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
        /* IE 11 */
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
        /* EDGE (12+)  */
        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    /* ANY OTHER BROWSER */
    return false;
}

/* CLEARS THE JSON FIELD - USED BY THE EDITOR - REQUIRED */
function clearFunctionCall() {
    $("#gaJSON").html("");
}

/* ******* TEMPLATE FUNCTION TO FADE THE BACKGROUND OF ANY ELEMENT - NOT REQUIERED FOR STRUCTURE ******* */
var gaX = 0;
var gaColor;
function gaBGColorFade(ele, trans, aTime) {
    var gaRed = Math.floor(Math.random() * (255 - 0 + 1) + 0);
    var gaGreen = Math.floor(Math.random() * (255 - 0 + 1) + 0);
    var gaBlue = Math.floor(Math.random() * (255 - 0 + 1) + 0);
    if (gaX == 0) {
        $(ele).css("background-color", "rgba(" + gaRed + "," + gaGreen + "," + gaBlue + "," + trans + ")");
        gaX++;
        gaRed = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        gaGreen = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        gaBlue = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        gaRed = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        gaGreen = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        gaBlue = Math.floor(Math.random() * (255 - 0 + 1) + 0);
    };
    $(ele).delay(0).animate({ backgroundColor: "rgba(" + gaRed + "," + gaGreen + "," + gaBlue + "," + trans + ")" }, aTime);
    /*clearTimeout(gaColor);*/
    gaColor = setTimeout("gaBGColorFade('" + ele + "'," + trans + "," + aTime + ")", aTime + 1000);
};

/* FLY BY ANIMIATION - NOT REQUIRED FOR STRUCTURE */
function gaFlyByImg(ele, flyTime, l2r, r2l, flow, r) {
    var choice = Math.floor(Math.random() * (1 - 0 + 1) + 0);
    if (choice == 0) {
        $(ele).attr("src", r2l);
        startFlyX = $(window).width();
        startFlyY = Math.floor(Math.random() * ($(window).height() - 0 + 1) + 0);
        endFlyX = -$(ele).css("width").replace("px", "");
        endFlyY = Math.floor(Math.random() * ($(window).height() - 0 + 1) + 0);
    }
    else {
        $(ele).attr("src", l2r);
        startFlyX = -$(ele).css("width").replace("px", "");
        startFlyY = Math.floor(Math.random() * ($(window).height() - 0 + 1) + 0);
        endFlyX = $(window).width() + 50;
        endFlyY = Math.floor(Math.random() * ($(window).height() - 0 + 1) + 0);
    }
    $("#gaFlyBy").fadeIn();
    $(ele).fadeIn();
    $(ele).css("left", startFlyX + "px");
    $(ele).css("top", startFlyY + "px");
    $(ele).animate({ left: endFlyX + "px", top: endFlyY + "px" }, flyTime, flow, '$("' + ele + '").fadeOut()');
    clearTimeout(gaFlyByImg);
    if (r) {
        var gaFlyByImg = setTimeout('gaFlyByImg("' + ele + '",' + flyTime + ', "' + l2r + '", "' + r2l + '","' + flow + '", ' + r + ')', Math.floor(Math.random() * (312000 - 300000 + 1) + 300000));
    }
}

/* SET PREVIEW SIZE AND SELECTED PREVIEW DATA BASED ON THE BUTTON PUSHED */
function setPreviewSize(iframe, size) {
    if (size === "LG") {
        $('#gaPreviewLayoutSelected' + iframe).html('LARGE');
        $('#gaPreviewLayoutDescription' + iframe).html('Newer Computers & Widescreens');
        $('#spScreen' + iframe).attr('src', '/images/preview/sp.png');
        $('#slScreen' + iframe).attr('src', '/images/preview/sl.png');
        $('#mdScreen' + iframe).attr('src', '/images/preview/md.png');
        $('#lgScreen' + iframe).attr('src', '/images/preview/lgSelected.png');
        $("#gaLeftPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaLeftPreviewPad" + iframe).addClass('col-sp-1');
        $("#gaRightPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaRightPreviewPad" + iframe).addClass('col-sp-1');
        $("#gaFrameControl" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaFrameControl" + iframe).addClass('col-sp-10');
    }
    if (size === "MD") {
        $('#gaPreviewLayoutSelected' + iframe).html('MEDIUM');
        $('#gaPreviewLayoutDescription' + iframe).html('Older Computers & Tablets:Landscape');
        $('#spScreen' + iframe).attr('src', '/images/preview/sp.png');
        $('#slScreen' + iframe).attr('src', '/images/preview/sl.png');
        $('#mdScreen' + iframe).attr('src', '/images/preview/mdSelected.png');
        $('#lgScreen' + iframe).attr('src', '/images/preview/lg.png');
        $("#gaLeftPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaLeftPreviewPad" + iframe).addClass('col-sp-3');
        $("#gaRightPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaRightPreviewPad" + iframe).addClass('col-sp-3');
        $("#gaFrameControl" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaFrameControl" + iframe).addClass('col-sp-6');

    }
    if (size === "SL") {
        $('#gaPreviewLayoutSelected' + iframe).html('SMALL LANDSCAPE');
        $('#gaPreviewLayoutDescription' + iframe).html('Mobile Phones:Landscape & Tablets:Portrait');
        $('#spScreen' + iframe).attr('src', '/images/preview/sp.png');
        $('#slScreen' + iframe).attr('src', '/images/preview/slSelected.png');
        $('#mdScreen' + iframe).attr('src', '/images/preview/md.png');
        $('#lgScreen' + iframe).attr('src', '/images/preview/lg.png');
        $("#gaLeftPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaLeftPreviewPad" + iframe).addClass('col-sp-4');
        $("#gaRightPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaRightPreviewPad" + iframe).addClass('col-sp-4');
        $("#gaFrameControl" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaFrameControl" + iframe).addClass('col-sp-4');

    }
    if (size === "SP") {
        $('#gaPreviewLayoutSelected' + iframe).html('SMALL PORTRAIT');
        $('#gaPreviewLayoutDescription' + iframe).html('Mobile Phones:Portrait');
        $('#spScreen' + iframe).attr('src', '/images/preview/spSelected.png');
        $('#slScreen' + iframe).attr('src', '/images/preview/sl.png');
        $('#mdScreen' + iframe).attr('src', '/images/preview/md.png');
        $('#lgScreen' + iframe).attr('src', '/images/preview/lg.png');
        $("#gaLeftPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaLeftPreviewPad" + iframe).addClass('col-sp-5');
        $("#gaRightPreviewPad" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaRightPreviewPad" + iframe).addClass('col-sp-5');
        $("#gaFrameControl" + iframe).removeClass(function (index, classname) {
            return (classname.match(/\bcol-\S+/g) || []).join(' ');
        })
        $("#gaFrameControl" + iframe).addClass('col-sp-2');
    }
}

/* USED TO AUTO SCROLL TO THE TOP OF THE INTERFACE */
function gaScrollTop() {
    /* For Safari */
    document.body.scrollTop = 0;
    /* For all others */
    document.documentElement.scrollTop = 0;
}

/* JQUERY READY FUNCTION */
$(document).ready(function () {

    /* THIS ADDS THE TEMPLATE TAG TO genApp Templates - NOT REQUIRED WHEN USING genApp API FOR PERSONAL USE */
    /* $('body').append('
Go to MygenApp.com for your app, Design By genApp.pro
');*/ /* BACKGROUND UNIFICATION */ $(".gaHeaderContainer").css("background-color", $(".gaPageContainer").css('backgroundColor')); $(".gaFooterContainer").css("background-color", $(".gaPageContainer").css('backgroundColor')); $(".gaFooterOffset").css("background-color", $(".gaPageContainer").css('backgroundColor')); $(".gaHeaderOffset").css("background-color", $(".gaPageContainer").css('backgroundColor')); $('gaPageBody').css("background", $(".gaPageContainer").css('backgroundColor')); var sb = $(window).outerWidth() - $(window).innerWidth() /* HIDE ALL SCREEN CONTENT */ $(".screenContent").css("display", "none"); /* setBA() FUNCTION HIDES THE MENU OPTIONS THAT ARE NOT AVAILABLE IN THE MEMBER'S BUSINESS APP */ setBA($("#ba").text()); /* SET THE SPACE NEEDED FOR STICKY HEADERS AND FOOTERS */ setTimeout(setOffsets, 100); }); function setOffsets() { /* SET THE OFFSET SIZES FOR THE HEADER AND FOOTER IF THEY ARE STICKY AND RAISE THEM ABOVE EVERYTHING */ if ($(".gaHeaderContainer").css('position') === 'fixed') { gaHeaderHeightOS = $(".gaHeaderContainer").css("height"); gaOffset = Number(gaHeaderHeightOS.replace("px", "")); $(".gaHeaderOffset").css("height", (gaOffset + "px")); } else { $(".gaHeaderOffset").css("height", "0px"); } if ($(".gaFooterContainer").css('position') === 'fixed') { gaOffset = $(".gaFooterContainer").css("border-width"); gaOffset = (gaOffset.replace("px", "") * 2) + $(".gaFooterContainer").height(); $(".gaFooterOffset").css("height", gaOffset + "px"); } else { $(".gaFooterOffset").css("height", "0px"); } } function gaResize() { setOffsets(); } /* gaNav CONTROL CHANGES THE CLASSES TO ADJUST FOR COLLAPSED FUNCTIONALITY */ function gaNavToggle() { var x = document.getElementById("gaNav"); if (x.className === "gaNav") { x.className += " gaMenu"; } else { x.className = "gaNav"; } } /* BUSINESS APP TYPE SETTING - NOT IMPLEMENTED IN THIS APP YET, USED TO HIDE MENU ITEMS NOT AVAILABLE IN THE MEMBER'S APP TYPE */ function setBA(ba) { if (ba == 1) { /* THIS IS NOT NEEDED AS MENU CONTROL, THE HAMBURGER BUTTON, SHOULD SHOW ON ALL APPS. tHIS IS AN EXAMPLE OF HOW TO REMOVE AN ITEM */ /*$("#menuControl").remove();*/ /* SET THE MENU BAR TO THE PROPER HIEGHT ELSE AUTO IN MOBILE MODE */ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { /* $("#gaMenu").css("height", "auto") */ } else if ($(document).width() > 767) { /* $("#gaMenu").css("height", "auto") */ } else { /* $("#gaMenu").css("height", "auto") */ } } /* REGARDLESS OF SCREEN SIZE THE MENU CONTROL FADS IN. IT'S JUST NOT VISABLE IN NON-MOBILE VIEWING */ $("#menuControl").fadeIn(1000); } function showContent() { $('.dropDown-content').css('display', '') } function showScreen(divID, l) { /* FADE OUT ALL SCREEN CONTENT */ $(".screenContent").fadeOut(); /* SHOW THE REQUESTED SCREEN CONTENT */ $("#" + divID).delay(300).fadeToggle(); /* REMOVE THE gaCurrentNav CLASS FROM ALL MENU ITEMS */ $("*").removeClass("gaCurrentNav"); /* ADD THE gaCurrentNav CLASS TO THE MENU ITEM WHAT WAS CLICKED */ $("#a_" + divID).addClass("gaCurrentNav"); /* HIDE THE DROPDOWN CONTENT WHEN CLICKED */ $(".dropDown-content").css("display", "none"); /* REMOVED THE gaMenu CLASS */ $(".gaNav").removeClass("gaMenu"); /* CHECK TO SEE IF THEY ARE SENDING FORM DATA */ if (l == "Form Sent") { var param = 'l=' + l; } else { var param = 'l=' + "Clicked " + l; } sendClick(param); } /* SEND STATS INFO WHEN THERE IS A CLICK ************ THIS FUNCTION CAN NOT BE CALLED THIS WAY. IT NEEDS TO BE IN THE TEMPLATE OR HAVE ALL THE VALUES PASSED TO IT *********** */ function sendClick(param) { param += "&vtTID="; param += "&vtTargType="; param += "&vtViewType="; param += "&vtMID="; param += "&VID="; param += "&vtCID="; param += "&vtSID="; param += "&vtMTID="; param += "&vtSSID="; param += "&vtSTID="; param += "&distCode="; param += "&dt="; param += "&ls="; if (1 == 1) { return false; } $.ajax({ url: "/landing/location.aspx", type: "POST", data: param, dataType: "Text", success: function (data, textStatus, jqXHR) { /*alert(data + "|" + textStatus); */ }, error: function (jqXHR, textStatus, errorThrown) { /*alert(errorThrown + "|" + textStatus); */ } }); }; /* EXPANDED TITLE DIV */ function expandTitle(i, t, d) { htmlStr = "
" + t + "
"; htmlStr += d; $("#" + i + ".gaExpandingTitle").html(htmlStr); } /* genApp Image Viewer */ function showViewer(i,t,d) { $(".gaViewerTitle").html("⮟ "+t); $("#currentTitle").html(t); $("#currentText").html(d); $("#gaImgViewer").fadeIn(500); $("#gaImgViewer").css("display", "flex"); $("#gaViewedImage").attr('src', 'images/' + i); } function closeViewer(i) { $("#gaImgViewer").fadeOut(500); var x = document.getElementById("currentImg"); x.className = "imgViewerTitle"; htmlStr = "
⮟ " + $("#currentTitle").html() + "
"; $("#currentImg.imgViewerTitle").html(htmlStr); } function expandViewerTitle() { var x = document.getElementById("currentImg"); if (x.className === "imgViewerTitle") { x.className = "imgViewerTitleClicked"; htmlStr = "
⮝ " + $("#currentTitle").html() + "
"; htmlStr += $("#currentText").html(); $("#currentImg.imgViewerTitleClicked").html(htmlStr); } else { x.className = "imgViewerTitle"; htmlStr = "
⮟ " + $("#currentTitle").html() + "
"; $("#currentImg.imgViewerTitle").html(htmlStr); } }

JSON

You can use the genApp API two ways. The first would be for personal use. Using it for personal use gives you the freedom to only use the genApp CSS file if you want to handle the JS on your own or with another API. The second way is to use it to create genApp Templates that are compatible with the genApp Editor. Using the API in this manner has guidelines, that are outlined in this documentation, that you will have to follow to get your template accepted and added to your library.

Mauris Vel Quam

Nam blandit porttitor condimentum. Morbi vitae dictum leo. Cras hendrerit diam sit amet nulla vulputate tempus. Etiam tempor, risus id porta cursus, diam dui euismod dui, congue consequat neque lectus eu diam. Maecenas vestibulum turpis ut ante convallis accumsan aliquam vel velit. Vestibulum fermentum lorem ante, eget tincidunt ipsum lobortis sed. In et sodales metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget ornare nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id ultricies purus, et iaculis magna. Suspendisse sit amet metus vel massa sodales semper. Donec massa diam, feugiat ut egestas at, mollis sed diam.

Cras sit amet maximus leo. Nulla justo est, scelerisque nec maximus et, tempus id nibh. Integer interdum enim a quam tincidunt, at varius magna dapibus. Proin feugiat quam non tempor viverra. Aenean interdum pharetra eros, a congue enim fringilla nec. Proin mi leo, tincidunt sed ante ut, iaculis placerat nulla. Suspendisse interdum, arcu at commodo dignissim, velit lacus euismod ex, quis luctus ante eros nec nisl. Praesent ut turpis id odio sodales pulvinar eget sit amet nisi. Aliquam placerat lorem vitae elit fringilla accumsan.
SEND
genApp.pro
Copyright © 2018 genApp.pro
All Rights Reserved
Terms Of Use
Privacy Policy
Cookie Policy