1 Reply by charles.a.Strong

(2 replies, posted in Juicebox-Pro Support)

Thank you so very much for your suggestions. Here is what solved it. Not sure as to the initial cause but, I will investigate that when I have time.

Tried: showGallery() instead of my custom show/Hide methods. (still encountered the issue)

So i stripped all of the javascript I had wrote and cut back to only one html element and a single gallery variable.

I now instantiate a new gallery in the same div using that single variable each time I wish to show a gallery. Works perfect.

Go to forum: Juicebox-Pro Support

2 Topic by charles.a.Strong

(2 replies, posted in Juicebox-Pro Support)

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>

Go to forum: Juicebox-Pro Support