Skip to content

Instantly share code, notes, and snippets.

@dodikk

dodikk/OnPageSelected.js

Last active August 29, 2015 14:13
Show Gist options
  • Save dodikk/4cfb0c05008d0e6424ff to your computer and use it in GitHub Desktop.
Save dodikk/4cfb0c05008d0e6424ff to your computer and use it in GitHub Desktop.
Download ZIP
Attempting to show a selected div in fullscreen mode but UIWebView does not apply changes
Raw
OnPageSelected.js
$('#p39485').addClass('overlay');
Raw
pages.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="Brochure_B0C39D8D_hyh.indd_resources/js/functions.js"></script>
<script type="text/javascript" src="GetPages.js"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="Brochure_B0C39D8D_hyh.indd_resources/css/styles.css">
<link rel="stylesheet" href="Brochure_B0C39D8D_hyh.indd_resources/css/elements.css">
</head>
<body>
<div id="pages">
<div id="p502" data-title="Page 1" data-pageNumber="1" data-thumb="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd0_thumb.jpg" style="width: 750px; height: 940px; left : 0px; top: 0px;">
<img src="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd0.jpg" usemap="#Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd0.jpg" width="750" height="940" />
<map name="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd0.jpg">
</map>
<div id="i42470-wrapper" style="position: absolute;top: 595px; left: 235px; height: 325px; width: 510px;">
<div id="i42470-blocker" style="visibility: hidden; position: absolute; height: 325px; width: 510px;"></div>
<iframe id=i42470 style="visibility: visible; height: 325px; width: 510px;" src="Brochure_B0C39D8D_hyh.indd_resources/media/42470/streeview.html" frameborder=; scrolling=no>
</iframe>
<script>
(function() {
iframeAutoPlay('i42470', 'i42470-blocker', 0, 1);
})();
</script>
</div>
</div>
<div id="p39485" data-title="Page 2" data-pageNumber="2" data-thumb="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd1_thumb.jpg" style="width: 750px; height: 940px;">
<img src="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd1.jpg" usemap="#Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd1.jpg" />
<map name="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd1.jpg">
<area shape="rect" coords="30,523,166,543" target="_blank" href="http://www.sitecore.net" alt="">
<area shape="rect" coords="30,691,166,711" target="_blank" href="http://www.sitecore.net" alt="">
<area shape="rect" coords="406,697,434,725" target="_blank" href="https://www.youtube.com/watch?v=8_pqiPIxUtM" alt="">
<area shape="rect" coords="405,499,434,527" target="_blank" href="https://www.youtube.com/watch?v=8_pqiPIxUtM" alt="">
</map>
<button id="i42208" style="position: absolute; top: 395px; left: 191px; width: 28px; height: 28px;" onMouseUp="window.open('https://www.youtube.com/watch?v=8_pqiPIxUtM', '_blank');
"></button>
<button id="i42178" style="position: absolute; top: 363px; left: 189px; width: 28px; height: 27px;" onMouseUp="window.open('http://www.sitecore.net', '_blank');
"></button>
<button id="i41175" style="position: absolute; top: 581px; left: 191px; width: 28px; height: 28px;" onMouseUp="window.open('https://www.youtube.com/watch?v=8_pqiPIxUtM', '_blank');
"></button>
<button id="i41150" style="position: absolute; top: 549px; left: 189px; width: 28px; height: 27px;" onMouseUp="window.open('http://www.sitecore.net', '_blank');
"></button>
<div id="i41843-wrapper" style="position: absolute;top: 33px; left: 298px; height: 220px; width: 300px;">
<div id="i41843-blocker" style="visibility: hidden; position: absolute;height: 220px; width: 300px;"></div>
<iframe id=i41843 style="visibility: visible; height: 220px; width: 300px;" src="Brochure_B0C39D8D_hyh.indd_resources/media/41843/youtube - video.html" frameborder=; scrolling=no>
</iframe>
<script>
(function() {
iframeAutoPlay('i41843', 'i41843-blocker', 0, 1);
})();
</script>
</div>
</div>
<div id="p31507" data-title="Page 3" data-pageNumber="3" data-thumb="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd2_thumb.jpg" style="width: 750px; height: 940px;">
<img src="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd2.jpg" usemap="#Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd2.jpg" />
<map name="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd2.jpg">
</map>
<div id="i42315-wrapper" style="position: absolute;top: 437px; left: 219px; height: 271px; width: 361px;">
<div id="i42315-blocker" style="visibility: hidden; position: absolute;height: 271px; width: 361px;"></div>
<iframe id=i42315 style="visibility: visible; height: 271px; width: 361px;" src="Brochure_B0C39D8D_hyh.indd_resources/media/42315/sightseeing google maps.html" frameborder=; scrolling=no>
</iframe>
<script>
(function() {
iframeAutoPlay('i42315', 'i42315-blocker', 0, 1);
})();
</script>
</div>
</div>
<div id="p31832" data-title="Page 4" data-pageNumber="4" data-thumb="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd3_thumb.jpg" style="width: 750px; height: 940px;">
<img src="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd3.jpg" usemap="#Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd3.jpg" />
<map name="Brochure_B0C39D8D_hyh.indd_resources/img/Brochure_B0C39D8D_hyh.indd3.jpg">
<area shape="rect" coords="55,667,224,683" target="_blank" href="http://www.sitecore%2cnet" alt="">
<area shape="rect" coords="344,661,518,678" target="_blank" href="http://www.sitecore.net" alt="">
<area shape="rect" coords="431,477,535,494" target="_blank" href="http://www.sitecore.net" alt="">
</map>
<div id="i42632-wrapper" style="position: absolute;top: 0px; left: 0px; height: 360px; width: 750px;">
<div id="i42632-blocker" style="visibility: hidden; position: absolute;height: 360px; width: 750px;"></div>
<iframe id=i42632 style="visibility: visible; height: 360px; width: 750px;" src="Brochure_B0C39D8D_hyh.indd_resources/media/42632/scratch_off_v_ad.html" frameborder=; scrolling=no>
</iframe>
<script>
(function() {
iframeAutoPlay('i42632', 'i42632-blocker', 0, 1);
})();
</script>
</div>
</div>
</div>
<script>
(function () {
var options = {
pages: [{id:'p502', number:'1'},
{id:'p39485', number:'2'},
{id:'p31507', number:'3'},
{id:'p31832', number:'4'}
]
};
DocViewer.init(options);
})();
</script>
</body>
</html>
Raw
ScriptInvocation.mm
-(void)didSelectPage:(PBPageInfo*)page
atIndexPath:(NSIndexPath*)indexPath
{
static NSString* const scriptTemplate = @"$('#%@').addClass('overlay');";
NSString* script = [ NSString stringWithFormat: scriptTemplate, page.divId ];
NSString* scriptOutput = [ webView stringByEvaluatingJavaScriptFromString: script ];
NSLog(@"Add overlay script result : %@", scriptOutput);
}
Raw
styles.css
/*Legacy styling*/
body
{
padding: 0;
margin: 0;
}
button
{
border: none;
cursor: pointer;
background: none;
}
#pages
{
position: absolute;
right: 0;
left: 0;
height: 100%;
}
#pages a, #pages area
{
outline: none;
border: none;
}
#pages > div
{
position: relative;
}
/*Added for "fullscreen page" support*/
.overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment