Quick intro
This article explains how to use AppDemoStore JavaScript API to better integrate your demo in your web pages and to create complex scenarios such as:
- cross-demo interaction
- side-by-side demos
- custom navigation buttons
How it works
AppDemoStore's JavaScript API has 2 functions:
- selectScreen - this is a function which you can use to jump to a certain screen in a demo. Usage example: build your own navigation buttons which better fit your web page design.
- onScreenSelect - this in an event which is fired when users select a screen in a demo. Usage example: show a feedback or contact form when the users get to a certain screen in your demo.
Note: due to security features built into all modern browsers, to access these functions you need to download the demo from AppDemoStore.com and serve it from the same domain as the containing web page.
1 Scenario "Cross-demo Interaction"
This scenario explains how to make 2 demos work side-by-side.
HTML Code<iframe id='demo1' src='/demo_1.html' width='680' height='438' style='border:0 none'></iframe> <iframe id='demo2' src='/demo_2.html' width='227' height='480' style='border:0 none'></iframe>
JavaScript Code
window.onload = function() {
// get iframe content windows
var iframe1 = document.getElementById('demo1').contentWindow;
var iframe2 = document.getElementById('demo2').contentWindow;
// get demo objects from iframes
var demo1 = iframe1.demo;
var demo2 = iframe2.demo;
// define behavior for demo1
demo1.onScreenSelect = function(screen) {
switch (screen) {
case 0 : demo2.selectScreen(0); break;
case 1 : demo2.selectScreen(1); break;
case 2 : demo2.selectScreen(4); break;
case 3 : demo2.selectScreen(6); break;
case 4 : demo2.selectScreen(9); break;
}
};
// define behavior for demo2
demo2.onScreenSelect = function(screen) {
switch (screen) {
case 0 : demo1.selectScreen(0); break;
}
};
};
In the code above observe how we get the selected screen index using the onScreenSelect function and the screen variable. Then, based on that we go to a certain screen index in the second demo using the selectScreen function. The screen counting starts at 0, so screen index 0 actually means 'Screen 1'. Also note that we use the window.onload event in order to make sure the browser had enough time to load the demos.
See how this kind of cross-demo interaction works here: www.appdemostore.com/learn_how_to
2 Scenario "Navigation buttons"
In this example we create two buttons which we'll use to control the navigation in our demo.
HTML Code<iframe id='demo1' src='/demo_1.html' width='680' height='438' style='border:0 none'></iframe> <button onclick='goPrev()'>Prev</button> <button onclick='goNext()'>Next</button>
JavaScript Code
// at first the demo is null - it will be loaded at window.onload
var demo = null;
// go to previous screen
function goPrev() {
demo.selectScreen('p');
};
//go to next screen
function goNext() {
demo.selectScreen('n');
};
window.onload = function() {
// get iframe content window
var iframe1 = document.getElementById('demo1').contentWindow;
// get demo object from iframe
demo = iframe1.demo;
};
In the code above also notice the that we use the window.onload event to load the demo. Then we use demo.selectScreen('p') to go to the previous screen and demo.selectScreen('n') to go to the next screen. Once this basic functionality is in place you can use CSS to style your navigation buttons to better fit your web site design.