Category Archives: JavaScript

Add custom CSS style to Advanced Custom Fields WYSIWYG field

Example of adding styles from a theme. The code below works on frontend (if you are using acf_form()) as well as in the backend.

add_filter( 'tiny_mce_before_init', function($mce_init) {
  $content_css = get_stylesheet_directory_uri() . '/your-custom-css.css';

  if (isset($mce_init[ 'content_css' ])) {
    $mce_init[ 'content_css' ] = "{$mce_init['content_css']},{$content_css}";
  }

  return $mce_init;
});

Source

Fixing slow performance and crashes on iOS Safari and Chrome

We recently had issues on a newly released site. The site would appear sluggish and slow to scroll, and it would frequently crash on both iPhone and iPad, with either Safari or Chrome (which is just Safari with a different skin).

We finally managed to track this down to two issues:

Don’t use -webkit-backface-visibility: hidden;

Some people say it stops certain CSS transforms (3D) from flickering. But I’d rather the browser flickers than crashes completely. And while you’re at it…

Disable CSS3 transitions in iOS Safari

The CSS3 support in Safari, as of iOS 7.1, is still really bad in terms of memory management. Our solution to disable CSS3 transitions is to have all transitions under a body class, like this:

body.good-browser article
{
/* Do some fancy animations here */
}

And in the body:

<body class="good-browser">
...
</body>

When we detect iOS we simply remove that class (early in the body tag), and the transitions don’t run.

Example code:

<script type="text/javascript">
    if(navigator.userAgent.match(/iPhone|iPad|iPod/i))
        jQuery('body').removeClass('good-browser');
</script>

Hiding Piwik tracker URL by using an PHP script

It’s easy to hide the Piwik tracker URL by proxying it through a PHP script.

First, get the proxy PHP script from here: proxy-hide-piwik-url on Github
(The file is also available in your Piwik install at /piwik/misc/proxy-hide-piwik/piwik.php)

There is great documentation at the link above. Use it to configure the piwik.php file.

The differences that I wanted to accomplish was:

  • Rename piwik.php to something else to avoid Adblock and other blocking scripts
  • Serve it from another folder/server than where Piwik is installed.

This is done by renaming the script (pi.php) and uploading it to another server (http://otherserver.com/pi.php)

The resulting JavaScript to put on your page should be as shown below. (The site we’re tracking is yoursite.com, with side id 1)

<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://yoursite.com/";
    _paq.push(["setTrackerUrl", "http://otherserver.com/pi.php"]);
    _paq.push(["setSiteId", "1"]);
    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
    g.defer=true; g.async=true; g.src="http://otherserver.com/pi.php"; s.parentNode.insertBefore(g,s);
  })();
</script>