Detect if javascript is enabled in php and remove the TypeKit flicker

Experimenting with TypeKit I found the flicker really annoying.

It dose feature loading events that add .wf-loading, .wf-active and .wf-inactive classes to the HTML tag but there still is at least a one second delay before they get appended so you still see the page with the flicker if you want to hide the content based on these classes.

The solution

First of I hidden the Typekit content with css directly from style.css and show a loading icon on the body.

body{ background:url(images/ajax-loader.gif) 50% 380px no-repeat; }
#wrapper { visibility:hidden }

Next Step was to include the TypeKit scripts in the header:

<script type="text/javascript" src="http://use.typekit.com/this_is_your_TypeKit_url.js"></script>
<script type="text/javascript">
try{Typekit.load({
active: function(){
	jQuery('body').css({backgroundImage: 'none'});
	jQuery("#wrapper").css({visibility: 'visible'});
},
 
inactive: function() {
	jQuery('body').css({backgroundImage: 'none'});
	jQuery("#wrapper").css({visibility: 'visible'});
}
 
 
});
}catch(e){}</script>

So now we’re showing the content after TypeKit finished loading or failed to load with javascript, thus the TypeKit flickr is no more.

The problem is when the user doesn’t have javascript activated nothing is shown. While most of the times users without js represent less then 1% is still bad practice to ignore them completely. The solution is a bit of javascript and php to resolve this issue.

function js_detection(){
if (isset($_POST['jstest']) || $_SESSION['nojs'] == FALSE) {
	$nojs = FALSE;
  } else {
  // create a hidden form and submit it with javascript
  echo '<form name="jsform" id="jsform" method="post" style="display:none">';
  echo '<input name="jstest" type="text" value="true" />';
  echo '<script language="javascript">';
  echo 'document.jsform.submit();';
  echo '</script>';
  echo '</form>';
  // the variable below would be set only if the form wasn't submitted, hence JS is disabled
  $nojs = TRUE;
  $_SESSION['nojs'] = TRUE;
  }
 
  if ($nojs){
	echo '<style type="text/css">body{background:none !important;}  #wrapper{visibility:visible !important;} </style>';
  } else {
	$_SESSION['nojs'] = FALSE;
  }
} // end js_detect()
 
// and in your php app stat the php session before any content is generated or you'll get the Headers Sent issue
session_start();

We’re using a form that’s submitted with javascript. If jstest POST variable is set we initialize our $_SESSION[‘nojs’] session variable that tells us that the user doesn’t or dose have javascript activated. This way we don’t have to submit the form only the first time the user visits the site.

Conclusions

It’s up to the developer to chose between removing the TykeKit flicker and reloading the page from time to time to check if the user has javascript enabled. Also we could be using a cookie instead of the php session and set an expiration date of one day (the session expires after 24 minutes by default) so the user will only get that form submission once a day.

Also there’s the possibility the user disables javascript within those 24 minutes, in which case he won’t see the site. I think this is an unrealistic case and chances are this will never happen in real life. Also since some people start treating javascript as a requirement I wouldn’t worry to much about this.

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

2 thoughts on “Detect if javascript is enabled in php and remove the TypeKit flicker

  1. That’s exactly what I was looking for, I didn’t know how to check out if js was ‘on’ and did a total mess with my site, now I’ll have to redo most of the work :( – Thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *


five × 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>