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 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)
- CSS Sub Folder
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;
- included in a sub folder of your template
- 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 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;
- Harm a device or computer viewing the interface.
- Cause data loss on a device or computer viewing the interface.
- Tracks any information in any manner.
- Send or save information back to a 3rd party server or location for any reason.
- Displays any personal or business branding or contact information. You can comment your files with your name or company name.
- 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;
- Template Name
- Template Version
- Account Key
- Date Updated
- 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
- 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 */.
/*
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 */.
/*
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
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.