You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → ipad/iphone nav area flickering.
on iphone & ipad safari, i noticed that if you touch the image to toggle the imageNav/buttonBar a halfscreen div (pretty sure it's used for onclick navigation) will flicker really quickly (a black box). this does not happen on the desktop when moving the mouse in/out of the nav area. anyone else experience this?
I have not seen this myself.
What version of iOS do your devices use?
Are you able to provide the URL to a gallery which exhibits this behavior so that I can take a look?
Does the gallery use the latest version of Juicebox (v1.3.1)?
using ios 6.1.3 on both devices.
http://danlydiard.com (just tap right half of screen to toggle the overlay)
yes 1.3.1
Thank you for the additional information.
I see the problem in your gallery when viewing your web page on an iPod Touch but I am unable to replicate the problem with a test gallery (resembling your gallery as closely as possible). It looks like a little trial and error might be required to find the cause of the problem.
Try viewing your gallery on a page of its own to see if the problem persists. If the gallery functions OK and you do not see the flashing hit area, then there may be something within your main web page's code which is causing the problem.
Try stripping back elements from your main web page one by one (and test each time) to see if you can find anything which might be causing the problem.
i narrowed it down to my doLayout() js code. if i comment it out, it does not flicker.
function doLayout() {
var headerOffset = 75;
var footerMargin = 3;
var winHeight, headerHeight, footerHeight;
var mobileMenu = $('#navbar-mobile-menu');
winHeight = window.innerHeight || $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
// adjust for responsive layout
if (mobileMenu.is(':visible')) {
headerOffset = 0;
footerMargin = -(footerHeight - footerMargin) + footerMargin;
}
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight) - footerMargin;
$('#juicebox-content').height(newH - headerOffset); // see style.css padding for #juicebox-content for offset.
}i believe i got the initial code from these forums and modified it so it worked with my fixed navbar and footer.
this flickering still happens even if i don't use the window.onresize event to call doLayout().
any ideas why the resizing the content div would cause the flickering?
If it helps to narrow things down, I have created a test gallery using the following code as the gallery's 'index.html' file to try to replicate your problem but the flickering does not appear.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 20px;
}
#footer {
width: 100%;
height: 20px;
}
#header, #footer {
background-color: #222222;
color: #ffffff;
font-size: 20px;
padding: 10px 0;
text-align: center;
}
#juicebox-content {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var winHeight, headerHeight, footerHeight;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
$('#juicebox-content').height(newH);
}
$(document).ready(function () {
doLayout();
$(window).bind('resize', doLayout);
new juicebox({
containerid : 'juicebox-container'
});
});
</script>
<title>Test Gallery</title>
</head>
<body>
<div id="header">This is the header.</div>
<div id="juicebox-content">
<div id="juicebox-container"></div>
</div>
<div id="footer">This is the footer.</div>
</body>
</html>Try temporarily removing your bootstrap CSS file (loaded by this line <link rel="stylesheet" href="/min/g=css-1.1.5">) to see if it makes a difference as it may contain generalized CSS rules which the gallery has no option but to inherit.
i narrowed it down to bootstrap.min.js, simply including the file and not using any of its functionality caused the flickering.
not sure what is causing the conflict within the file. perhaps a conflicting data- attribute that's getting binded?
since bootstrap is pretty popular, hopefully this can get fixed.
this was my test file: http://danlydiard.com/index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html, body
{
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #eaeaea;
}
#header {
width: 100%;
height: 75px;
}
#footer {
width: 100%;
height: 25px;
z-index: 10;
}
#header, #footer {
background-color: #222222;
color: #ffffff;
font-size: 20px;
padding: 10px 0;
text-align: center;
}
#juicebox-content {
width: 100%;
height: 600px;
position: relative;
padding-top: 75px;
}
@media (max-width: 979px) {
#juicebox-content {
padding-top: 0;
}
.footer {
display: none;
}
}
</style>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jbcore/juicebox-1.3.1.js"></script>
<script type="text/javascript">
function doLayout() {
var headerOffset = 75;
var footerMargin = 3;
var winHeight, headerHeight, footerHeight;
var mobileMenu = $('#navbar-mobile-menu');
winHeight = window.innerHeight || $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
// adjust for responsive layout
if (mobileMenu.is(':visible')) {
headerOffset = 0;
footerMargin = -(footerHeight - footerMargin) + footerMargin;
}
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight) - footerMargin;
$('#juicebox-content').height(newH - headerOffset); // see style.css padding for #juicebox-content for offset.
}
$(document).ready(function () {
doLayout();
$(window).on('resize', doLayout);
new juicebox({
baseUrl: '/fashion/',
themeUrl: '/js/jbcore/classic/theme-1.1.5.css',
containerid: 'juicebox-container',
galleryTitle: 'test test',
galleryDescription: 'test test test',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#eaeaea',
configUrl: '/fashion/jbconfig-1.1.5.xml'
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Gallery</title>
</head>
<body>
<div id="header">This is the header.</div>
<section id="main-content">
<div id="juicebox-content">
<div id="juicebox-container">
</div>
</div>
</section>
<footer id="footer">This is the footer.
</footer>
</body>
</html>all i did was simply remove boostrap.min.js and the flickering stopped.
The flickering seems to appear only when both bootstrap.min.js and jquery-1.9.1.min.js are loaded on the page.
If you need bootstrap.min.js, then try removing jQuery v1.9.1 from your page and use the version of jQuery incorporated within the 'juicebox.js' file instead.
any chance of figuring out why there's a conflict? downgrading libraries doesn't seem like the right solution, especially downgrading jquery.
I do not know the exact cause of the problem, only that it occurs if all of the conditions below are met:
Touch Input Mode only
Both jQuery (v1.9.1) and Twitter Bootstrap (v2.3.1) JavaScript files are loaded on the page
Window resize code is used
I have logged a bug report with the developers.
This bug has now been fixed in v1.3.2. Please see the Version History for a full list of changes and the Upgrading Juicebox page for details on how to get the latest version.
Juicebox Support Forum → Juicebox-Pro Support → ipad/iphone nav area flickering.
Powered by PunBB, supported by Informer Technologies, Inc.