This is what it looks like:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title>Captivate Responsive Project</title>
<link rel="stylesheet" href="assets/css/start/jquery-ui-1.11.4.custom.css">
<script type="text/javascript" src="assets/js/jquery-1.11.3.min.js"></script>
var interfaceObj, eventEmitterObj;
window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});
function initializeEventListeners()
{
eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
{
for ( var i = 0; i < e.Data.si.length; i++ )
{
if ( cp.model.data[ e.Data.si[ i ].n + 'c' ].accstr.indexOf( 'Submit' ) != -1 )
{
var str = cp.model.data[ e.Data.si[ i ].n ].mdi;
str = str.substring( 0, str.length - 1 );
var submit_btn = document.getElementById( str );
submit_btn.addEventListener( 'click', function()
{
var mySlideAud = cp.movie.am.slideAudios[ e.Data.audioName ];
mySlideAud.nativeAudio.pause();
mySlideAud.nativeAudio.currentTime = 0;
});
break;
}
}
});
}
<script type="text/javascript" src="assets/js/jquery-ui-1.11.4.custom.min.js"></script>
</head>
<body style="background-color:#2f2f2f">
<style>
.body
{
font-family: Calibri;
font-size: 24px;
font-style: bold;
}
.button
{
border-width: 10px;
border-color: black;
display: block;
float: left;
}
#contentDiv
{
padding-top: 10px;
margin: 0 auto;
display: block;
z-index: 100;
}
iframe
{
border: 0px;
width: 100%;
height: 100%;
}
.contentSlider
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
display: block;
}
.controlButtons
{
margin-left: auto;
margin-right: auto;
display: block;
background-color: #2f2f2f;
/*border: 1px solid #ddd;*/
text-align: center;
}
.sliderValue
{
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
z-index: 101;
text-align: center;
display: none;
position: absolute;
color: #ffffff;
font-size: 24px;
font-family: Verdana;
font-weight: bold;
}
#cpFakeGeo
{
position:fixed;
top:15px;
left:15px;
background-color: gray;
}
#cpFakeGeoTitle
{
background-color: black;
color:white;
padding:3px;
margin:3px;
float:left;
}
#cpFakeGeoList
{
padding:2px;
margin:4px;
}
</style>
<div id="control_buttons" class="controlButtons">
</div>
<div id="contentSlider" class="contentSlider"></div>
<div id="sliderValueDiv" class="sliderValue"></div>
<div id="contentDiv">
<iframe name="preview" id="content" src="index.html" class="preview"></iframe>
</div>
<script>
var reverseOffsetH = 0;
var reverseOffsetV = 0;
function resizeIFrameToWidth(iWidth)
{
var content = document.getElementById("contentDiv");
content.width = iWidth;
content.style.width = iWidth + "px";
}
function resizeIFrameToHeight(iHeight)
{
var content = document.getElementById("contentDiv");
content.height = iHeight;
content.style.height = (iHeight) + "px";
}
function createHeightSlider(iHeight)
{
$( "#contentVerticalSlider" ).slider( "value", reverseOffsetV-(iHeight) );
}
function selectLabel(value)
{
$("#control_buttons label").removeClass("ui-state-active ui-state-focus");
var lOtherCB1 = $("#control_buttons label");
for(var i = lOtherCB1.length - 1; i >=0 ; --i)
{
var lLabel = lOtherCB1;
if(Number(lLabel.htmlFor) >= (value))
{
$(lLabel).addClass("ui-state-active ui-state-focus");
return Number(lLabel.htmlFor);
}
}
}
function onSliderChange(e,ui)
{
var value = ui.value;//$( "#contentSlider" ).slider("value");
value = reverseOffsetH - value;
resizeIFrameToWidth(value);
var labelVal = selectLabel(value);
if(preview.cp && preview.cp.getCurrentSlideResponsiveHeight)
{
var lHeight = preview.cp.getCurrentSlideResponsiveHeight(labelVal);
resizeIFrameToHeight(lHeight);
}
$("#sliderValueDiv").html("<span style='display:inline-block; vertical-align:middle'>" + value + "</span>");
$("#sliderValueDiv").css("display","block");
$("#sliderValueDiv").css("line-height", window.innerHeight +"px");
}
function onSliderChanged(e,ui)
{
onSliderChange(e,ui);
$("#sliderValueDiv").css("display","none");
}
function resizeIFrame(e)
{
var CB_button = e.target;
var lWidth = Number(CB_button.id);
lWidth = reverseOffsetH - lWidth;
selectLabel(lWidth);
resizeIFrameToWidth(lWidth);
$( "#contentSlider" ).slider( "value", lWidth );
}
function createSliders(iBreakpointsArr,iHeight,iCurrentWidth)
{
var totalBreakpoints = iBreakpointsArr.length;
reverseOffsetH = (Number(iBreakpointsArr[totalBreakpoints - 1]) + 320);
$("#contentSlider").width(Number(iBreakpointsArr[totalBreakpoints - 1]) + "px");
$("#contentSlider").slider({
min: 320,
max: Number(iBreakpointsArr[totalBreakpoints - 1]),
slide: onSliderChange,
change: onSliderChanged
});
$( "#contentSlider" ).slider( "value", reverseOffsetH-iCurrentWidth );
}
function initializeResponsivePreview(iBreakpointsArr,iWidth,iHeight,iCurrentWidth,isRunningOnDesktop)
{
if(!isRunningOnDesktop)
{
var location = window.location.href;
if(location.indexOf("?") != -1)
{
var lURLComponents = location.split("?");
var lURLParams = lURLComponents[1];
var lURLParamsNameValuePairs = lURLParams.split("&");
var lRedirect = false;
for(var i = 0; i < lURLParamsNameValuePairs.length; ++i)
{
var lPairStr = lURLParamsNameValuePairs;
if(lPairStr.indexOf("=") == -1)
continue;
var lNameValArr = lPairStr.split("=");
if(lNameValArr[0] == "CPEdgeInspectPreview" && lNameValArr[1] == "true")
{
lRedirect = true;
break;
}
}
if(lRedirect)
{
location = location.split('rindex.html')[0];
location += "index.html";
window.location = location;
return;
}
}
}
if(!iBreakpointsArr || iBreakpointsArr.length <= 0)
return;
var content = document.getElementById("contentDiv");
content.style.width = iWidth + "px";
content.style.height = (iHeight) + "px";
var totalBreakpoints = iBreakpointsArr.length;
var controlButtonsHolder = document.getElementById("control_buttons");
controlButtonsHolder.style.width = iWidth + "px";
if(!controlButtonsHolder)
return;
for(var i = totalBreakpoints-1; i >= 0; --i)
{
var lCurrBreakPointWidth = iBreakpointsArr;
var lButton = document.createElement("input");
lButton.type = "radio";
lButton.name = "radio";
lButton.id = lCurrBreakPointWidth;
lButton.onclick = resizeIFrame;
controlButtonsHolder.appendChild(lButton);
var label = document.createElement("label");
label.setAttribute("for",lCurrBreakPointWidth);
label.innerHTML = lCurrBreakPointWidth;
controlButtonsHolder.appendChild(label);
}
$( "#control_buttons" ).buttonset();
window.addEventListener('message', function (e){
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}
if(window.location.origin != e.origin)
return;
if(e.data == 'cpindexInited'){
e.source.postMessage('cpgetGeoVarsInfo', e.origin);
}
else if(e.data.substr(0,9) == 'cpfakeGeo'){
var JSONObj = JSON.parse(e.data.substr(9));
var geoVars = JSONObj.geoVarsInfo;
if(geoVars.length > 0){
if(!window.fakeGeo){
window.fakeGeo = document.createElement('div');
window.fakeGeo.id = 'cpFakeGeo';
var fakeGeoTitle = document.createElement('div');
fakeGeoTitle.innerHTML = JSONObj.title || 'Emulate Geolocation';
fakeGeoTitle.id = 'cpFakeGeoTitle';
window.fakeGeo.appendChild(fakeGeoTitle);
var fakeGeoList = document.createElement('select');
fakeGeoList.id = 'cpFakeGeoList';
var fakeGeoLocationNowhere = JSONObj.dfltLoc;
if(!fakeGeoLocationNowhere)
fakeGeoLocationNowhere = 'nowhere';
fakeGeoList.options[0] = new Option('<' + fakeGeoLocationNowhere + '>', '');
for(var i =0; i < geoVars.length; ++i){
fakeGeoList.options[fakeGeoList.options.length] = new Option(geoVars.name, JSONObj.geoValues);
}
fakeGeoList.addEventListener('change', function(evt){
//console.log('faking cpInfoGeoLocation to ' + fakeGeoList.value);
e.source.postMessage('cpfakeGeo' + fakeGeoList.value, e.origin);
});
window.fakeGeo.appendChild(fakeGeoList);
document.body.appendChild(window.fakeGeo);
}
}
}
}, false);
}
</script>
</body>
</html>
30
Replies
AdChoices