Topic: Juice box Chokes after more than three galleries on single page.
To recreate go to
http://libertycasket.qa.selectionroom.com/Mobile/Hamel/
Select ANY three galleries. Four will not show. HTML and Javascript for the page is below.
To test again Clear cache restart browser and select any other three galleries Four will not show.
Would debugging my self but by simply taking your script out of eval and turning it into a string var and the logging it to the console to get the source to then debug but, that's more time then I want to (or should have to) spend fixing this.
<!DOCTYPE html>
<html lang="en">
<!-- manifest="cache.manifest"> -->
<head>
<title>Fabric Gallery</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<link rel="apple-touch-icon" href="favicon.png" />
<link rel="apple-touch-icon-precomposed" href="favicon.png" />
<!--prevents rendering-->
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no" />
<!--width is pixels, range 200 to 10000-->
<meta name="format-detection" content="telephone=no" />
<!--disables automatic detection of possible phone numbers-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--specifies full-screen mode-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--specify full-screen mode first-->
<script type="text/javascript">
var debug = false;
if (debug) {
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';
var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);
function logEvent(e) {
var online, status, type, message;
online = (navigator.onLine) ? 'yes' : 'no';
status = cacheStatusValues[cache.status];
type = e.type;
message = 'online: ' + online;
message += ', event: ' + type;
message += ', status: ' + status;
if (type == 'error' && navigator.onLine) {
message += ' (prolly a syntax error in manifest)';
}
console.log(message);
}
window.applicationCache.addEventListener(
'updateready',
function () {
window.applicationCache.swapCache();
console.log('swap cache has been called');
},
false
);
setInterval(function () { cache.update() }, 10000);
}
</script>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
}
body
{
margin: 0;
padding: 0;
background-color: #222;
color: #666;
font-family: sans-serif;
font-size: 20px;
}
a
{
color: #ccc;
}
#header
{
text-align: center;
background-color: #333;
width: 100%;
height: 5%;
padding: 10px 0;
}
#footer
{
text-align: center;
background-color: #333;
color: #fff;
width: 100%;
height: 20px;
padding: 10px 0;
position: relative;
bottom: 0;
left: 0;
}
.juicebox-content
{
width: 100%;
height: 95%;
}
</style>
<script type="text/javascript">
function showDiv(show) {
var s = document.getElementById(show);
if (!s) {
return true;
}
s.style.display = "block";
return true;
}
function hideDiv(hide) {
var h = document.getElementById(hide);
if (!h) {
return true;
}
h.style.display = "none";
return true;
}
var metals = new juicebox({
containerId: 'juicebox-ngs',
baseUrl: 'ngs/',
showOpenButton: false
});
var _20ga = new juicebox({
containerId: 'juicebox-20ga',
baseUrl: '20ga/',
showOpenButton: false
});
var _18ga = new juicebox({
containerId: 'juicebox-18ga',
baseUrl: '18ga/',
showOpenButton: false
});
var woods = new juicebox({
containerId: 'juicebox-woods',
baseUrl: 'woods/',
showOpenButton: false
});
function ShowNGS() {
hideDiv('woods');
hideDiv('18ga');
hideDiv('20ga');
showDiv('ngs');
}
function Show20GA() {
hideDiv('woods');
hideDiv('18ga');
showDiv('20ga');
hideDiv('ngs');
}
function Show18GA() {
hideDiv('woods');
showDiv('18ga');
hideDiv('20ga');
hideDiv('ngs');
}
function ShowWoods() {
showDiv('woods');
hideDiv('18ga');
hideDiv('20ga');
hideDiv('ngs');
}
ShowNGS();
</script>
</head>
<body>
<div id="header" style="height: 20px; background-color: #666666;">
<a href="javascript: ShowNGS();">20 Ga NGS</a> | <a href="javascript: Show20GA();">20 Ga</a>
<a href="javascript: Show18GA();">18 Ga</a> | <a href="javascript: ShowWoods();">Hardwoods</a>
</div>
<!--START JUICEBOX EMBED-->
<div class="juicebox-content" id="ngs">
<div id="juicebox-ngs">
</div>
</div>
<!--END JUICEBOX EMBED-->
<!--START JUICEBOX EMBED-->
<div class="juicebox-content" id="20ga">
<div id="juicebox-20ga">
</div>
</div>
<!--END JUICEBOX EMBED-->
<!--START JUICEBOX EMBED-->
<div class="juicebox-content" id="18ga">
<div id="juicebox-18ga">
</div>
</div>
<!--END JUICEBOX EMBED-->
<!--START JUICEBOX EMBED-->
<div class="juicebox-content" id="woods">
<div id="juicebox-woods">
</div>
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>