For technical reasons, your users might see the phone numbers on your site flicker when they're being replaced with the Freespee script. These neat little tricks show you a few different ways you can circumvent the flickering by first hiding the phone number and then showing it again after it's been properly replaced.

Fading in or showing the number (jQuery)

Uses jQuery and CSS. Requires manual number tagging.

/* in your CSS, hide the element containing the phone number */
.fs-dynamic-number {
  display: none;
}

In the case you have a user defined span class name, simply change the class selector fs-dynamic-number above (in your CSS) and below (in your javascript) to your predefined class name.

// when calling the Freespee script, add this listener
var listener = function(e,n,r) {
  $(e).fadeIn();
  // if no fading is desired, you can use
  // $(e).show();
}

__fs_conf.push(['setAdv',{'id': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'}]);
__fs_conf.push(['addNumberReplacedListener', listener]);

setTimeout(function(){
  if(!$(".fs-dynamic-number").is(":visible")) $(".fs-dynamic-number").fadeIn();
  //fallback: if, for some reason, the number
  //isn't replaced after 3 seconds, show it
}, 3000);

Showing the number (no jQuery)

Uses javascript and CSS, no jQuery required. Requires manual number tagging.

/* in your CSS, hide the element containing the phone number */
.fs-dynamic-number {
  display: none;
}

In the case you have a user defined span class name, simply change the class selector fs-dynamic-number above (in your CSS) and below (in your javascript) to your predefined class name.

// when calling the Freespee script, add this listener
var listener = function(e,n,r) {
  e.style.display = 'inline-block';
}

__fs_conf.push(['setAdv',{'id': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'}]);
__fs_conf.push(['addNumberReplacedListener', listener]);

setTimeout(function(){
  var numberElems = document.getElementsByClassName("fs-dynamic-number");
  for (i = 0; i < numberElems.length; ++i) {
    numberElems[i].style.display = "none";
    if(numberElems[i].offsetParent === null) numberElems[i].style.display = 'inline-block';
  }
  //fallback: if, for some reason, the number
  //isn't replaced after 3 seconds, show it
}, 3000);

Fading in the number (no jQuery)

For advanced users. Uses javascript and CSS, no jQuery required. This trick requires a bit more code since we need to create a javascript function for fading in the element. Also, like the previous examples, this requires manual number tagging.

/* in your CSS, set the element opacity to 0 */
.fs-dynamic-number {
  opacity: 0;
}

In the case you have a user defined span class name, simply change the class selector fs-dynamic-number above (in your CSS) and below (in your javascript) to your predefined class name.

// create the fadeIn function
function fadeIn(el) {
  el.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };
  tick();
}
// now that the fadeIn function is created,
// we can call the Freespee script with the added listener
var listener = function(e,n,r) {
  fadeIn(e);
}

__fs_conf.push(['setAdv',{'id': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'}]);
__fs_conf.push(['addNumberReplacedListener', listener]);

setTimeout(function(){
  var numberElems = document.getElementsByClassName("fs-dynamic-number"), opacity;
  for (i = 0; i < numberElems.length; ++i) {
    opacity = window.getComputedStyle(numberElems[i]).getPropertyValue("opacity");
    if(opacity == 0) numberElems[i].style.opacity = '1';
  }
  //fallback: if, for some reason, the number
  //isn't replaced after 3 seconds, show it
}, 3000);

Share your own tricks!

As you can see, you can accomplish quite a lot by simply using our addNumberReplacedListener. Can you think of any other ways of doing this? Or maybe something different using the listener? Feel free to share!