Cross-browser Issues

Page: 1 2 >

Author Post
Member
Registered: Jan 2012
Posts: 98
I have been developing a new site using Floatbox V7 with a slider panel. All my initial development has been done using Firefox and I have just spotted some major functional issues when using other browsers.

My base page is imaginatively titled index.php and that contains a googlemap. Various other php files can be placed in the slider panel. Typically those files set some map parameters so they finish with something like
<a href="javascript&#058;void()" onclick="document.public_map.submit(); fb.end(&#039;self&#039;);" class="button">Submit</a>

This runs some PHP to do a mysqli query and set some sessions, then fb.end() closes the slider panel and reloads the base page to show the map with it's new parameters and the default file reopens in the slider. So far, so good; it works in Firefox.

However in Chrome the fb.end() doesn't work. The base page has to be manually refreshed.

It's even worse in Edge. The fb.end() doesn't work and when the base page is manually refreshed the slider panel doesn't appear at all, so the user can't do anything more with the page.

Is there an alternative way of refreshing the base page which might work in all browsers?
Member
Registered: Jan 2012
Posts: 98
Not a cross-browser problem, but I should have also mentioned a problem with scroll bars in the same application. Sometimes they work and sometimes not. When not, it can be scroll bars showing when not needed, or not showing when they are needed.

I have
        boxScroll: false,
contentScroll: true,

in the slider.js file.
Administrator
Registered: Aug 2008
Posts: 3382
I have to make a number of guesses here. It would be very helpful if you could link me into a page that exhibits these problems, and describe to me how to generate the problem. Right now I've got nothing to review, analyze and debug.

Some guesses I'll make is that "fb.end()" does work in the sense that it ends the floatbox, that you are calling it as "fb.end( 'self' )" to refresh the base page, and that you've got an iframe or two attached to the page - perhaps the slider and/or the maps.

The 'self' and 'back' arguments to fb.end rely on the browser's history and location objects. It's possible, maybe even likely, that browsers differ in their handling of these objects when in a multi-frame environment. Things you could try to avoid these possible differences are:

- If you're calling fb.end from code within an iframe, try calling parent.fb.end instead to ensure that we're talking to the base page.

- You could be more explicit than 'self' as the parameter to end and specify the URL of the base page as the parameter - or perhaps make it more generic by using location.href (or even top.location.href).

- New in version 7 is that fb.end() can accept a function as its parameter, and this function will be fired after the box is gone. (But note that if the function is defined in the iframe shown in the floatbox, it will not exist after the floatbox is gone. Define the function on the base page.)

- The afterBoxEnd callback can be used to do stuff after ending. The difference between this and passing a function to fb.end is that the afterBoxEnd function needs to exist and have all its data set up before box creation, whereas the fb.end function can be created later, at the time the fb.end call is made.

With a page to look at, I could give a much more concise suggestion for how to proceed, and would also have the chance to improve the next Floatbox release's behaviour if it is indeed misbehaving in your circumstances.
Administrator
Registered: Aug 2008
Posts: 3382
As for the slider not opening in Edge:

Are you invoking fb.start from script that runs right at page load time? Perhaps the call is being made before the floatbox bits are all in place and ready to go.

The best way to use Floatbox at page start is to wrap your code in an fb.ready() function.
fb.ready( function () {
alert( &#039;Yo! FB is ready and you can safely call its functions now!&#039; );
} );

fb.ready will queue any functions while floatbox is starting up, or will immediately fire the functions if it has already completed loading.
Administrator
Registered: Aug 2008
Posts: 3382
contentScroll:true is the default setting, so doesn't need to be explicitly set (but is harmless if it is).

At the default setting of true, it does a couple of things, but essentially sets a style of overflow:auto on the floatbox's content container. (That's a CSS style, not a Floatbox option.)

overflow:auto essentially leaves it up to the browser as to whether to show scrollbars or not. Most modern browsers make the same choices as to when scrollbars are needed, but it is discretionary and can vary between browsers.

For something like a slider, I would think that you would not want scrollbars on the floatbox elements themselves, and should set contentScroll:false.

Put any scrolling functionality you might need into the slider content, under your own control. Perhaps wrap the entire content in a div with 100% height and overflow:auto or overflow:scroll on it - or something like that. The idea is to get the scrollbars off the floatbox and into the content that is being shown.
Member
Registered: Jan 2012
Posts: 98
OK, to save the guessing, the test page is http://www.littlehotels.co.uk/myfamilyroots/index.php. Feel free to register, log-in or view the public roots map by typing "Paul" in the box.

There are no iframes so we can dispense with that bit.

I tweaked the overflow settings a bit, and I think I have the scroll bars working fairly OK. They don't like the browser window being resized though. Ideally I would make the biggest form on the slider fit within the height of a standard laptop screen when the window is maximised. That is proving difficult though with the amount of stuff that has to go on it. And anyway I would still need to accommodate things like windows which are set smaller or browsers with multiple menu and toolbars.

There are still some issues with refreshing the base page, but it is better and especially better in Chrome. I haven't really looked at Edge today but I think that is still misbehaving badly.

Thanks for your help so far, Admin. I'll have to do some more work tomorrow before getting a definitive handle on all the issues that are still outstanding.
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for the demo page. One more step please. Can you let me know what Floatbox problem(s) I'm looking for and what I have to do to trigger those problems. For example, I'm not sure if the difficulty you mentioned about refreshing the page from fb.end still persists or not. But if so, what do I have to do, where do I have to go, to trigger the fb.end call and see the misbehaviour. And similarly for any other Floatbox issues still persisting. (Let's try to stick to Floatbox issues, not general content build assistance.)

Thanks...
Member
Registered: Jan 2012
Posts: 98
I think I'm beginning to get a handle on the fb.end() issue. I think I am getting erratic behaviour which was leading me to false conclusions about the code working with one browser and not with another. Here's the latest hypothesis:

The key line is
<a href="javascript&#058;void()" onclick="document.shared_map.submit(); fb.end(&#039;self&#039;);" class="button">Submit</a>

The submit() reloads the PHP page in the Floatbox Slider and sets some session variables.
When fb.end() reloads the base page that page should use the session variable to display in a different way.
So I have two processes running in parallel and the final result depends on the order in which they finish. Does all this seem plausible?

If so, I need to delay the fb.end() until I am sure the session variables have been set.

If all the above is right, then I probably don't have a cross-browser issue between Firefox and Chrome. Maybe I don't have an issue with Edge either, but as this is Microsoft I'm not getting too excited yet.
Member
Registered: Jan 2012
Posts: 98
I've tried to delay the fb.end() by removing it from the onClick event and putting it in the PHP that only runs when the form has been submitted. I've tried several variations of
<?php 
if($count == 1){
echo &#039;<script type="text/javascript" src="../floatbox_711/floatbox.js"></script><br>
<script>fb.end(\&#039;self\&#039;);location.replace("starter.php");</script>&#039;;
}
?>

I've put it in the PHP before the HTML but that breaks the page.
I've put it in the Head and the Body but the whole page just seems to ignore it.
Is this a Floatbox thing? Or am I just displaying my ignorance of how to use javascript?
Administrator
Registered: Aug 2008
Posts: 3382
Certainly, if you are doing a form submit, fb.end has no business being in the picture at that point - either with or without the page refresh parameter.

Submitting a form is similar to clicking a link. In the form's case, the page referenced by the form's "action" attribute will be fetched and loaded.

Whether the fb.end call wins or the loading of the action page wins depends mostly on the network speed at the time of the submit.

Drop fb.end. Have the action page return what you want to show - either the page itself, or perhaps a redirect to the page you want to load. The floatbox (slider in this case) is going to disappear without any help because you are navigating away from the page that contains it.
Member
Registered: Jan 2012
Posts: 98
Just to be clear, this is no longer a cross-browser issue. I was being fooled by the erratic results of the race between fb.end and the action page into thinking the result varied according to the browser.

And I take your point that "fb.end has no business being in the picture at that point".

What I am left with is trying to do some session and mysqli changes, then close the slider, then refresh the base page.

So firstly, when I submit the form the action is no longer
<?php echo $_SERVER[&#039;PHP_SELF&#039;]?>

Now I am going to a separate blank page (no HTML) and doing the PHP and mysqli stuff there. That leaves me with an open slider and nothing visible in it. This is where I thought fb.end might still help me, or if not, perhaps I could use the closeSlider function in slider.js. I wrote this into the <body> of the page in the slider:
<body onLoad="shutSlider()">
<script type="text/javascript" src="../floatbox_711/floatbox.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script>
function shutSlider() {
alert("The function is called");
closeSlider();
}
</script>
</body>

The alert pops up to confirm the function is working, but the slider doesn't close. I've substituted fb.close('self') for closeSlider() and that doesn't work either.

One other odd thing happens. When the above has failed, and then I click the button to close the slider, I find I am left with a rotating progress icon (the sort that often indicates loading ajax). I've no idea where that is coming from, but I suspect it might indicate a conflict somewhere.

If I could overcome the above, I am using a cookie to control location.reload(true) to reload the base page. That seems to be working OK but I'm not entirely comfortable triggering the the function with onMouseOver on the map. It seems a bit hit-and-miss but I haven't thought of anything better yet.
Administrator
Registered: Aug 2008
Posts: 3382
So the slider floatbox's content is an iframe, and the form's submit action returns to the window in that iframe, not to the base page window, essentially navigating the iframe to the new page? If so, consider calling parent.fb.end() from script returned to that iframe from the action action.
Member
Registered: Jan 2012
Posts: 98
There's no iframe, but parent.fb.end() worked anyway. My only gripe is that the slider disappears abruptly rather than sliding away, as it might if I could make closeSlider work. That's being picky though.

The project is now looking very promising so hopefully I'll be able to go live soon in a new domain, so I'll be buying another floatbox license.
Administrator
Registered: Aug 2008
Posts: 3382
I checked. Your slider floatbox is iframe content. The slider source is 'starter.php', a URL to page, which is loaded as an iframe in the floatbox.

This didn't need checking, as it was fully determined by the fact that the form submit returned to the floatbox content, not to the main/base/top/parent page.
Member
Registered: Jan 2012
Posts: 98
Is that something Floatbox does in the background? I didn't specifiy an iframe and I've just searched my code and I don't have any instances of "iframe".
Administrator
Registered: Aug 2008
Posts: 3382
http://floatboxjs.com/instructions#html
Administrator
Registered: Aug 2008
Posts: 3382
As for fb.end ending abruptly and not animating out, I believe we have doAnimations:false set in the opening options to prevent the floatbox from animating up and down to a dot in the middle of the screen. If you want the slider to take a small pirouette as it exits, you could call fb.resize (or parent.fb.resize) as we do for the button clicks, or use the fb.animate() function. Both of those can call fb.end from a callback that is fired when the animation completes. As always, see the API Reference for details.
Member
Registered: Jan 2012
Posts: 98
Point taken re the iframe.

I'm now trying to use fb.resize to get the animation but not yet succeeding. My code is
<body onLoad="shutSlider()">
<script type="text/javascript" src="../floatbox_711/floatbox.js"></script>
<script>
function shutSlider() {
fb.resize( {left: -360, width: true, height:true }, parent.fb.end(&#039;self&#039;), 0.7 );
}
</script>
</body>

The metrics may not be right yet, but I can play with them once I get it working.

Up to a point it is working because the parent.fb.end works, and changing to parent.fb.resize stops it working, so I know the fb.resize runs. But there is no animation. It still just closes the slider abruptly.
Administrator
Registered: Aug 2008
Posts: 3382
I wrote up a good reply here a while back, nicely formatted and everything, but perhaps forgot to press the OK button. Let's see if I can remember what I said.

First, "parent.fb.end('self')" is not a function - it's a statement. The javascript engine will evaluate that statement and provide the result as the argument to the resize function call. (Just as if the 3rd parameter was the statement "1 - 0.3"). fb.end gets called and it's return value of 'undefined' gets passed as the callback argument. fb.end runs before fb.resize in that construct.

Sending a function as that callback parameter would look something like:
fb.resize( {left: -360, width: true, height:true }, function () {
parent.fb.end( &#039;self&#039; );
}, 0.7 );


It may be helpful to question the complexity of that small page. Why include floatbox.js just so that fb.resize can be called directly and not referenced from the parent, where floatbox.js is already present? Why hook it into a body.onload event? Why call fb.end to refresh the base page, instead of just refreshing the base page? A KISS implementation might look, in its entirety, like this:
<script>
parent.fb.resize( {left: -360, width: true, height:true }, function () {
parent.location.reload( true );
}, 0.7 );
</script>
Member
Registered: Jan 2012
Posts: 98
That all worked. I didn't know that parent.something would reference allow fb functions without floatbox being called (in the circumstances I have here).

I now have nearly all the functional stuff working as intended. One or two details still to sort out and then I can move on to a bit of design to make the page look pretty.
Member
Registered: Jan 2012
Posts: 98
Then it stopped working! I moved all the pages across to what will be the production domain name and suddenly fb.resize stopped working. I've been faffing around for hours and can't trace it. The small intermediate page is
<?php 
session_start();
$_SESSION[&#039;noslider&#039;] = &#039;noslider&#039;;
?>

<script>
alert("Script");
parent.fb.resize( {left: -360, width: true, height:true }, function () {
alert("Resize");
<?php if ($_SESSION[&#039;origin_id&#039;]) { ?>
alert("Reload");
parent.window.history.pushState(null, null, "map.php?origin=<?php echo $_SESSION[&#039;origin_id&#039;] ?>");
parent.location.reload( true );
<?php }else{?>
alert("Replace");
parent.location.replace( "map.php" );
<?php }?>
}, 0.7 );
</script>

I've tried calling the floatbox.js, and I've tried dropping parent. on the fb.resize. Whatever I do, the "Script" alert pops up and nothing else. I take that to mean that fb.resize hasn't run, so the callback function never gets started.

I haven't yet got a licence for the new domain so I do get the occasional nag screen but I haven't seen anything in the documentation to suggest that anything else won't work.
Administrator
Registered: Aug 2008
Posts: 3382
The nag screen shows that floatbox.js is present and working. The presence of a valid license key makes no changes to functionality other than suppressing those nags.

No way I can debug the page without seeing it. Can you provide a link so I can take a look?

I would think that if the script is failing, there would be some error logged to the browser's developer console. So I trust you are testing with the developer console open. (You can disable the browser cache in the network section of the console, which is handy for making sure any on-the-fly changes are being tested, and not an old cached page.)
Member
Registered: Jan 2012
Posts: 98
I didn't provide a link because it's a bit more complicated than that, but it's not a state secret so here we go:
Start with <admin>URL removed</admin>
Click the little tab button at top left
Click "View a Public Roots Map"
Type "Luci" in the box
Select the suggestion offered
Click the Submit button

At that point the slider should slide away and the map page should refresh to a show a map of Lucille Anderson's ancestors. (It would go in stages because I have added the javascript alerts temporarily.)

Instead the "Script" alert shows to indicate that the script has started running. After closing the alert nothing more happens.

Yes, I'm using the Javascript console. It has thrown up a couple of little nitpicks but it hasn't shown anything that would be stopping the script.
« Last edit by admin on Wed May 11, 2016 11:18 am. »
Administrator
Registered: Aug 2008
Posts: 3382
Works great for me. I select "Lucille...", submit, and get one alert showing the current url, then the slider slides out and another alert says "Resize", then another saying "Reload", and then I get a new map showing some people markers with connecting lines.

Should I be expecting more? Did you fix something? I tested in Chrome and Firefox.
Member
Registered: Jan 2012
Posts: 98
Well that's really odd. No, it's done exactly what it's meant to do. For you. I've been doing all my testing in Firefox, but I have just checked and it doesn't work for me in either Chrome or Edge.

I've got quite a lot of digging to do here because I've never come across this before. Everything else about the site works (or as much as I can reasonably expect from a site under development) including other parts of floatbox. JQuery is working too. The first thing I'll do is try it out on a different computer. That should narrow things down a bit.

Thanks for your help. I'll report back when I know more, even though it's not really a floatbox thing.

Page: 1 2 >