Remote a Bootstrap Modal Every Anchor Click

Posted May 21st, 2014 in Javascript

Twitter Bootstrap (3.1.1 at the time of writing) has a handy piece of functionality whereby if you trigger a modal with data attributes on an anchor element, the modal will load its contents from the anchors href attribute. Being able to AJAX load in this way is great, however the first load caches so every subsequent click of the anchor element will show the same modal contents. This can present a problem in some use cases.

Here’s an example of the default functionality:

Notice the dynamically generated date isn’t being updated each time you open the modal? Well if you need the contents to always be reloaded each open, there’s a simple jQuery fix.

1
2
3
$('#myModal').on('hide.bs.modal', function(e) {
	$(this).removeData('bs.modal');
});

And a working demo:

Enjoy!

Read More »

Google Analytics on WordPress Multisite

Posted April 12th, 2014 (Updated 2 May 2014) in Javascript, PHP

Imagine you’re running a WordPress Multisite subfolder instance (let’s call it MyNetwork) with a bunch of blogs like so:

mynetwork.com
mynetwork.com/foo
mynetwork.com/bar

Each blog needs to keep track of its page views (including the main blog) but you’d also like page view aggregated statistics for your entire network. This can be done and is surprisingly easy with Google Analytics views and filters. Just follow the below steps and you’ll be on your way.

Read More »

Google Charts ChartRangeFilter Mobile Workaround

Posted June 28th, 2013 (Updated 1 Jul 2013) in Javascript

Despite a global shift towards touch-oriented devices on the internet and the existence of a relatively old bug report, Google has decided not to add support for mobile/touch to their ChartRangeFilter for Google Charts (as of the time of writing). See for yourself:

Demo | Source - Doesn’t work on mobile. Frustrating!

This is really annoying, especially if you are dealing with a significant chunk of data that could take advantage of this functionality by allowing users to ‘zoom in’ on specific areas.

 

A Workaround (For Now)

Although we can’t get the ChartRangeFilter working on mobile, we can display something else instead for mobile devices such as the handy jQRangeSlider. To do so we’ll need to hook into the methods provided by google.visualization.ControlWrapper (which sits around the ChartRangeFilter).

In the source we have:

var controlWrapper = new google.visualization.ControlWrapper({
	controlType: 'ChartRangeFilter',
	...
});

We can update the selection in the ChartRangeFilter by calling the following on its ControlWrapper:

controlWrapper.setState({
	range: {
		start: new Date(2004, 01, 01),
		end: new Date(2006, 01, 01)
	}
});
controlWrapper.draw();

Combine this with a mobile UA check (terrible I know, but you can’t really use browser  feature detection for this) and a DateRangeSlider (I’m using dates on my X axis) and you get the following:

var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
// ChartRangeFilter doesn't work on mobile. Use a dateRangeSlider to manipulate it
if ( is_mobile )
{
	$('#filter').hide();
	$('#filter_mobile').show();
 
	$( "#filter_mobile" ).dateRangeSlider({
		bounds: {
			min: new Date(2001, 1, 1),
			max: new Date(2013, 3, 1)
		},
		defaultValues: {
			min: new Date(2001, 1, 1),
			max: new Date(2013, 3, 1)
		},
		step: {
			months: 1
		},
		arrows: true,
		wheelMode: null
	}).bind('valuesChanged', function(e, data) {
		controlWrapper.setState({range: { start: data.values.min, end: data.values.max }});
		controlWrapper.draw();
	});
}

Demo

ChartRangeFilter workaround for mobile devices

ChartRangeFilter workaround for mobile devices

Try the demo below. View it on a mobile device (or use a mobile UA string). You get the standard Google Charts ChartRangeFilter for desktop and jQRangeSlider for mobile. Everything works nicely!

Demo | Source - Snazzy mobile-specific date range widget

Read More »

Add Chrome Web Store Style Vertical Scroll Boxes To Your Site

Posted July 2nd, 2012 in Javascript

I really like the Chrome web store vertical scroll box functionality so figured I’d write up a tutorial post on how to add them to your site.

Demo

Hover over the boxes below.

Read on for the code!

Read More »

An Introduction to the HTML5 Pointer Lock and FullScreen APIs

Posted May 12th, 2012 in Javascript

Preface: These APIs are still quite new and subject to change. As of the time of writing, the following tutorial works in Chrome 18.0.1025.168. Firefox 12 supports full screen but not mouse lock.

I’ve been having a little play with some HTML5 features and worked up an example of Pointer Lock and Full Screen APIs. As it stands at the moment, pointer lock is tightly coupled with full screen, so you won’t be able to use it without first loading up full screen mode.

You’ll need to enable Enable Pointer Lock in about:flags in Chrome then restart the browser for mouse lock to work.

You may request full screen mode like so:

1
2
3
4
5
6
element.requestFullScreen =
	element.requestFullScreen    ||
	element.mozRequestFullScreen ||
	element.webkitRequestFullScreen;
 
element.requestFullScreen(element.ALLOW_KEYBOARD_INPUT);

Once in full screen mode, pointer lock should become available:

1
2
3
4
5
6
7
8
9
navigator.pointer = navigator.pointer || navigator.webkitPointer;
navigator.pointer.lock(element,
	function() {
		console.log('Pointer lock');
	},
	function() {
		console.log('No pointer lock');
	}
);

Note in the above two scripts, element is a DOM element

Check out the working demo here. I’ve also added some JS to determine the direction the locked pointer is travelling and output the data to the screen. View page source for details.

Read More »

Cross Domain AJAX with JQuery

Posted April 11th, 2012 in Javascript

Anyone attempting to do cross domain AJAX will be familiar with the following message:

XMLHttpRequest cannot load http://domain.com/page.php. Origin http://yoursite.com is not allowed by Access-Control-Allow-Origin.

However if you own the server you’re AJAXing data from, there’s a simple way to make this possible using a callback. Here’s an example:

server.php (On a different domain):

<?php
	$response = 'your response here'.
 
	if ( !isset($_GET['callback']) ) $_GET['callback'] = '';
 
	echo $_GET['callback'] . '('.json_encode(array('response'=>$response)).');';

client.php (with JQuery):

$.getJSON('http://yourdomain.com/server.php?callback=?', function(json) {
	alert( json.response );
});

That’s all there is to it. Remember the ?callback=? URL segment or it won’t work.

Read More »

PHP WebSocket Chat Application 2.0

Posted February 15th, 2012 (Updated 29 Oct 2013) in Javascript, PHP

Even though it hasn’t worked for quite some time now, my previous PHP WebSocket chat application has garnered quite a bit of attention and is still one of my most heavily trafficked posts. As a result I thought I’d provide you all with a working script as of Feb 15, 2012. Also, because I’m your typical lazy developer, I’ll be building on top of other peoples’ work – most notably PHPWebSocket.

You can download the final script here. According to the Wikipedia article on WebSockets, it should work in IE10+, Firefox 7+ and Chrome 14+. Personally I tested with Chrome 17.0.963.46 and Firefox 10.0.1.

I want to stress that this tutorial is designed to be extremely basic and as such does not give alot of functionality out of the box (but provides all the tools required to add more). It’s simply a working example of a PHP-based WebSocket server.

Read More »

How To Save Custom Filter State with JQuery Data Tables

Posted December 10th, 2011 (Updated 31 May 2013) in Javascript, PHP

JQuery Data Tables is an incredibly handy tool that can make a developers life alot easier – notably by handling search, pagination, filtering and sorting for you. The default functionality is very good, however you’ll often need a bit of customization. This post will detail how to add custom filters and position them to nicely theme with your table. The filters’ state will also be saved so they’ll still be there if you reload the page.

You can see the demo page for this post here. Select a filter and reload the page to see it in action.

Read More »

Google Plus Style HTML5 Image Uploads

Posted August 27th, 2011 (Updated 29 Oct 2011) in Javascript, PHP

If you’re reading this page (or my blog in general) it’s a pretty safe bet you already have Google+. If you’ve uploaded any photos to Google+ from Chrome or FF, you would also have noticed its snazzy HTML5 file uploader at work. This weekend I took it upon myself to whip up a quick and dirty version of that uploader and share its inner workings with the world.

Google+ Image Uploader
Google+ Image Uploader

Here’s a short video of my uploader at work:

Requirements:

  • PHP4+
  • HTML5-enabled browser (File API – including drag and drop, XHR2)
  • Some images to upload

Disclaimer: Currently only Firefox and Webkit based browsers meet the requirements above. Opera supports the File API and probably XHR2 (I haven’t tested), however it doesn’t have drag and drop so this tutorial won’t work with it. If you’re curious about whether or not IE will work with this tutorial, I’m already laughing at you.

Download the finished script here.

Read More »

How to Return Custom Error Messages with JQuery Form Validations ‘Remote’ Validator

Posted August 3rd, 2011 (Updated 29 Oct 2011) in Javascript

It appears JQuery Form Validation supports returning a string when using the remote validator but it’s not immediately clear how to do this and the examples tab doesn’t have an example for doing so. Getting this working is actually very easy. All you need to do is return a JavaScript string in your response. Here’s an example:

Firstly, the javascript:

$(document).ready(function() {
	$("#form").validate({
		rules: {
			username: {
				required: true,
				remote: "/your/url.php"
			}
		},
		messages: {
			username: "Username is required."
		}
	});
});

Pretty standard, nothing out of the ordinary here. Now for the server side response. As I’m sure you’re aware, you can return ‘true’ or ‘false’ however if you want a string, it needs to be formatted as a javascript string:

// /your/url.php
echo '"This username is already taken. Please enter a different username and try again."';

Read More »

Page 1 of 212