Dear Admin,

i've changed the ajax code based on your suggestions to:

function click_privacy(){
 fb.ajax({
  source: 'privacy.html',
  success: function (xhr){
   fb.start(xhr.responseText, 'caption:#floatbox-caption-html-privacy');
  }
 });
}

I've tried with different settings in global.js (resizeDuration=0 and also doAnimations enabled and disable) but don't get any loader gif anymore.

unluckily i found no documentation for the fbloader visibility features...

meanwhile i updated to 5.7.2 - the test links i've sent you are still the same.

thanks and best regards,
wolfgang

I think your complaint is that when you open the floatbox there is no spinning gif shown in the background as the box enlarges to its full size, but instead you get a blank white background until the content appears. Is this right? If this is it, can you please point me to the page and the steps I need to take to reproduce and see the problem.

Unrelated to what I think your supporrt request is, according to the code you quoted, you are no longer submitting a form but are now doing an ordinary fetch of static plain html. There's no reason to be using fb.ajax and fb.start to do this. Just set up a standard floatbox link with an href of "privacy.html" and "type:ajax" in the options.

<a href="privacy.html" class="floatbox" data-fb-options="type:ajax caption:#floatbox-caption-html-privacy">privacy statement</a>

thanks 4 the quick reply.

yes, i mean the animated gif which should come up while the content of the iframe is getting loaded in the background.

yes, i'm still posting a form - this is just a simplified snippet.

please try to fill out the form under the link i gave you previous - there i'm missing the automatic upcoming gif while processing the iframe after submitting the request.

I don't get the reason for posting that 'simplified snippet' then.

In your options.js file you have "doAnimations:false", so the floatbox opens instantly when started. The animated loading gif shows while the floatbox is doint its animated sizing up to full size when starting and sizing down to zero when ending. No animations = no animated gif during the non-existent animation phase.

have changed options.js again to:

Quote

globalOptions: {
licenseKey: "",
mobileNewWindow: false,
itemNumberPos: "br",
infoLinkPos: "br",
caption2Pos: "bl",
captionPos: "tl",
shadowSize: 8,
shadowType: "halo",
contentRoundCorners: "none",
boxCornerRadius: 4,
showOuterClose: true,
showClose: false,
centerNav: true,
autoFitSpace: 20,
boxColor: "#f0f0f0",
overlayOpacity: 0,
panelPadding: 0,
padding: 0,
innerBorder: 0,
outerBorder: 0,
contentBackgroundColor: "#f0f0f0",
strongTextColor: "#ffcccc",
textColor: "#ffcccc",
resizeDuration: 0
},

thats the full calling function:

function signup_validate_post(theForm) {
 fb.ajax({
  source: 'signup_validate.html',
  postData: "stage=1" +
   "&email1=" + document.forms["signup"]["email1"].value +
   "&email2=" + document.forms["signup"]["email2"].value +
   "&password=" + document.forms["signup"]["password"].value +
   "&year=" + document.forms["signup"]["year"].value +
   "&month=" + document.forms["signup"]["month"].value +
   "&day=" + document.forms["signup"]["day"].value,
  success: function(xhr){
   fb.start(xhr.responseText, 'caption:#floatbox-caption-html-signup_validate');
  }
 });
}

never mind which doAnimations nor resizeDuration i'll take, it doesn't show me the animated gif with this call.
oposite to this, it shows me those animated gifs with every below described call - also never mind which state above parameters have.

<a href="password.html" class="floatbox" data-fb-options="type:ajax width:600 caption:#floatbox-caption-html-password">forgot password</a>
<div id="floatbox-caption-html-password" style="display:none;">
  <span id="floatbox-caption-html">forgot password</span>
</div>

you can try this on the site if you click "forgot password", or on the bottom navigation "terms" or "privacy" - which use all the above code just with css mutation.

thanks again.

You now have resizeDuration:0 in your options so there is still no time for the animated gif to appear. The gif appears in the 'forgot password' box because there is a delay while that content is fetched over the network. The fb.start call in the fb.ajax callback is direct-loaded content that is already present. There is no network delay and no animation period, so no time in which the loading gif can or needs to appear. When I override your resizeDuration with something like resizeDuration:9, the animated gif appears while the box is resizing up. There is no issue here.

So i try to load this anim by myself in advance to processing the user content using the same floatbox with "sameBox" option and a separate "loading.html" file which points to the gif:

calling function:

function signup_validate_post(theForm) {
 fb.start('loading.html', 'caption:loading type:ajax');
 fb.ajax({
  source: 'signup_validate.html',
  postData: "stage=1" +
   "&email1=" + document.forms["signup"]["email1"].value +
   "&email2=" + document.forms["signup"]["email2"].value +
   "&password=" + document.forms["signup"]["password"].value +
   "&year=" + document.forms["signup"]["year"].value +
   "&month=" + document.forms["signup"]["month"].value +
   "&day=" + document.forms["signup"]["day"].value,
  success: function(xhr){
   fb.start(xhr.responseText, 'caption:#floatbox-caption-html-signup_validate sameBox:true type:ajax');
  }
 });
}

loading.html:

<!doctype html>
<?php include_once(&#039;/inc/floatbox.php&#039;); ?>
<img src=&#039;/floatbox/graphics/white/loader.gif&#039; alt="loading...">

but this opens the processed content in a new second floatbox and the first "loading" box stays in background - what do i wrong?

thanks again & cheers,
wolfgang

I would love to see the return-on-investment or cost-benefit analysis that was done for this effort.

The animated loading gif will show during two phases of the loading of html content. One is while the box is doing an animated start up to its final dimensions. The other is when there is a delay in presenting the content while it is being fetched over the network.

You are not doing animated starts so there's no opportunity to show the gif there. In your fb.ajax success callback, you are starting html content that has already been fetched across the network by that fb.ajax call, so there is no network delay and hence no loading gif at this phase either.

If you want to introduce a network delay in between the fb.start call and the time the content is ready to be shown, you could change your form processing from POST to GET and use the technique described in this thread.

I'm not sure why sameBox:true is not working for you, but it's a whacky approach to be using so I don't want to waste time investigating it. It will be either because you have type:ajax in your second fb.start options, which shouldn't be there and will likely break things, or because the first started box is still in the process of coming up and does not yet exist when the second fb.start call is made.

thank you very much for your support and your patience with a floatbox rookie.

i solved my demands with splitting those into two parts - one displaying a "loading animation box" right after user click - and when this box start process is finished it calls the xhr processing via your "afterBoxStart" function:

fb.start('/floatbox/graphics/white/loader.gif', 'afterBoxStart:signup_validate_post(false) instanceName=loading');

  fb.ajax({
   source: 'signup_validate.html',
   postData: "stage=1" +
    "&email1=" + document.forms["signup"]["email1"].value +
    "&email2=" + document.forms["signup"]["email2"].value +
    "&password=" + document.forms["signup"]["password"].value +
    "&year=" + document.forms["signup"]["year"].value +
    "&month=" + document.forms["signup"]["month"].value +
    "&day=" + document.forms["signup"]["day"].value,
   success: function(xhr){
    fb.getInstance('loading').end();
    fb.start(xhr.responseText, 'caption:#floatbox-caption-html-signup_validate type:ajax');