Topic: problem with url in backbutton

HI, i’m sorry for my bad english

i have problem with backbutton (jukebox builder pro)
I click  on backbutton whit this  url :
backButtonUrl="../../testouille/clickautotest/clickautotest-2.html" 
- animation on Safari is not active (if I want to turn it on,  I have to click on a blank part of the page after the animation triggers finally)

when i click on link « return jori » url :     
<a href="../../testouille/clickautotest/clickautotest-2.html" >return jori</a> 
- animation on Safari is active (mouse hover and animation is ok)

how enter the second url with in backButtonUrl=   ?

you can see demo
first time before to go on gallery animation is ok (hover)
when you return  using backbutton, animation is not activated
when you return by link « return jori » animation is activated

———————

it seems that a double-click on backbutton is also a solution, how to simulate a double click from a simple click in config.xml ?

Re: problem with url in backbutton

I have tested your setup in Chrome 54, Edge, Firefox 49.0.1, Internet Explorer 11 and Opera 40 on my PC.
Every time I single-slick your gallery's Back Button, the animation on your Edge Animate page is active without having to click anywhere on the page. It works in all browsers for me.

The Back Button is essentially just an <a> tag (like your manual link) which is generated dynamically by the 'juicebox.js' file when the gallery is displayed (although this should make no difference).

Maybe some additional information would help to track down the cause of the problem.
What version of Safari do you use?
Do you have any browser extensions installed? If so, try temporarily disabling them to see if this helps.
Try completely clearing your browser's cache before reloading your website to see if this makes a difference.
Also, try other browsers to see if the problem is unique to Safari.

Hyperlinks operate with a single-click and, as far as I'm aware, there is no way to simulate a double-click on the Back Button when a user single-clicks it.

Re: problem with url in backbutton

i’m working on Mac os Yosemite 10.10.5
Safari version 10.0 (10602.1.50.0.10)
I disabling my only one extension uBlock 0.9.5.2,  clearing and disabling cache and reloading the demo but i have the same problem.
I try on Firefox 49.0.1 + uBlock enabling and no problem it’s ok.
I’m happy that the demo works well with all browsers on PC, thank you for the test.
But this site must work on Yosemite 10.10.5 + Safari version 10.0 (10602.1.50.0.10), it’s my big problem .......

Re: problem with url in backbutton

I try on El Capitan+Safari, i still have the same problem :(

Re: problem with url in backbutton

Thank you for the additional information.

The problem seems to be a combination of:
(1) An Edge Animate animation
(2) Safari 10 on Mac
(3) The Back Button within Juicebox-Pro

Unfortunately, I am unable to replicate the problem so you may need to try a few things for yourself to see if they work or make a difference.

Essentially, the Back Button just opens a specified page in the user's browser and I'm really not sure how the link itself could affect the content of the page that it links to. It looks like some kind of incompatibility between Edge Animate and Safari 10 on Mac (especially as the phenomenon has not been seen in any other browser). It is a mystery why your Edge Animate page works when opened from your own manual <a> hyperlink but not from the Back Button link in your Juicebox-Pro gallery.

However, here are a few things to check and try:

(1) Try using text instead of the icon for the Back Button to see if this makes a difference.
Set backButtonUseIcon="FALSE" and backButtonText="return jori".

(2) Try using an absolute URL instead of a relative path for your backButtonURL.
Set backButtonUrl="http://www.henricanu.com/testouille/clickautotest/clickautotest-2.html".

(3) Try taking Juicebox-Pro out of the equation and see if the same problem occurs with a dynamically generated link outside of Juicebox-Pro.
Just before the closing </body> tag on your gallery's 'index.html' page, add the following code which will add a dynamic link (like Juicebox-Pro does for the Back Button).

<script type="text/javascript">
    $(document).ready(function() {
        $('body').prepend('<a href="../../testouille/clickautotest/clickautotest-2.html">Link #2</a>');
    });
</script>

In this case, the text for the link will be "Link #2" and the link will appear above your own test link. It will still link to your Edge Animate page. Please try this and see what happens.
If this works, then you could try overriding Juicebox-Pro's own handling of the Back Button.
Try something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '600px',
        backgroundColor: '#222222',
        backButtonPosition: 'OVERLAY',
        backButtonUseIcon: 'FALSE',
    });
    jb.onInitComplete = function() {
        $('.jb-go-back').html('<a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a>');
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

This uses the Juicebox-Pro API (specifically the onInitComplete event) to ensure that the Back Button is present in the DOM (Document Object Model) before any actions are performed on it. The code then replaces Juicebox-Pro's own Back Button link code with your own.
If this works, you can then style your custom Back Button with CSS if you like.

(4) You might also like to try giving your Edge Animate container focus as soon as the page is loaded.
Try adding the following code just before the closing </body> tag on your Edge Animate page:

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('EdgeID').focus();
    };
</script>

If you continue to experience difficulties, then you might like to try posting in Adobe's Edge Animate forum to see if any other users have experienced similar issues (Edge Animate animation requiring a click on the page in Safari 10 on Mac when taken to an Edge Animate page via a link).

I hope that these suggestions help or at least point you in the right direction.

Re: problem with url in backbutton

HI Steven

I tested on iphone & ipad everything works perfectly without any changes to my original code (obviously on iPhone and tablet you have to touch the screen ;-) )

I tested all yours solutions.
On Mac OS with Safari Yosemite and more the only way that works is the first part your solution 3

<script type="text/javascript">
    $(document).ready(function() {
        $('body').prepend('<a href="../../testouille/clickautotest/clickautotest-2.html">Link #2</a>');
    });
</script>

For the moment, and to move forward, ( i know this not a good solution), i would like:
1- the backButton / backButtonText be invisible on computers, and be visible on the iphone & tablet.
2- the link#2 be visible on computers and be invisible on tablet and iPhone.
i need this backbutton on tablet and iphone (because the presentation page become boring and not instinctive and access to the gallery becomes very difficult

Thanks a lot for your help

Re: problem with url in backbutton

... the only way that works is the first part your solution 3

I cannot explain why dynamically adding a link to one container on your page works fine whereas using the same technique to add exactly the same HTML link code to a different container on the same page fails.

1- the backButton / backButtonText be invisible on computers, and be visible on the iphone & tablet.
2- the link#2 be visible on computers and be invisible on tablet and iPhone.

You can use the Juicebox-Pro API method getScreenMode() to determine the Screen Mode being used (SMALL vs LARGE) and then run custom JavaScript code accordingly. This example removes the Back Button from the DOM in Large Screen Mode and adds a custom link which is overlaid on top of the gallery where the Back Button would normally be.
In Small Screen Mode, no custom JavaScript code is run and the gallery's own Back Button will display as normal.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
                position: relative;
            }
            #custom {
                position: absolute;
                top: 20px;
                left: 20px;
                z-index: 9999;
            }
            #custom a {
                color: #ffffff;
            }
        </style>
    </head>
    <body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
        var jb = new juicebox({
            containerId: 'juicebox-container',
            galleryWidth: '100%',
            galleryHeight: '600px',
            backgroundColor: '#222222',
            galleryTitleHAlign: 'CENTER',
            backButtonPosition: 'OVERLAY',
            backButtonUrl: '../../testouille/clickautotest/clickautotest-2.html',
            backButtonUseIcon: 'TRUE',
            showSmallBackButton: 'TRUE'
        });
        jb.onInitComplete = function() {
            var mode = jb.getScreenMode();
            if (mode == 'LARGE') {
                $('.jb-go-back').remove();
                $('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a></div>');
            }
        };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

If this does not work, then to do just what you have suggested in your points #1 and #2 above (no more, no less), then try the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
        var jb = new juicebox({
            containerId: 'juicebox-container',
            galleryWidth: '100%',
            galleryHeight: '600px',
            backgroundColor: '#222222',
            galleryTitleHAlign: 'CENTER',
            backButtonPosition: 'OVERLAY',
            backButtonUrl: '../../testouille/clickautotest/clickautotest-2.html',
            backButtonUseIcon: 'TRUE',
            showSmallBackButton: 'TRUE'
        });
        jb.onInitComplete = function() {
            var mode = jb.getScreenMode();
            if (mode == 'LARGE') {
                $('.jb-go-back').remove();
                $('body').prepend('<a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a>');
            }
        };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

I hope this helps.

8 (edited by moimoi 2016-10-18 10:03:46)

Re: problem with url in backbutton

Hi
It seems that the best solution for now is your first solution in your last post 2016-10-15 11:41:37
When the gallery page is loaded on computer Mac  the icon home appears and disappears, giving way to link 'retun jori',
Now, you can see that with demo link in my first message.
On iPhone all is perfect.
I continued to test, and you give the resulting output.
On computer, can i add an ‘home icon’ next to the link ‘return  jori’ or replace this with only icon ?
 If yes, how ? (example)
Thank you

Re: problem with url in backbutton

On computer, can i add an ‘home icon’ next to the link ‘return  jori’ or replace this with only icon ?

All icons in a Juicebox gallery (including the Back Button icon) are characters in a custom font (named 'juicebox'). (Please see the Using Custom Icons support section for more information.)
If you'd like to use the character that Juicebox uses for the Back Button to replace your "return jori" text, try replacing:

$('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a></div>');

... with:

$('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html" style="color: #ffffff; font-family: juicebox; font-size: 20px; height: 30px; width: 40px; text-decoration: none;">&#xe014;</a></div>');

You can style the icon further with more CSS rules if you want to try to exactly replicate Juicebox-Pro's own Back Button.
You can check the default styling of Juicebox buttons in the 'jbcore/classic/theme.css' file and by inspecting the Back Button element in your browser's developer tools.