JavaScript: Calculate font-size on mobile devices

As I am making a HTML5 app for android devices using the Intel XDK I ran into a problem with the fonts. I use only em thinking that would work great on any screen size since its relative. I soon realized that it didn’t and that the text got reeeaally small on my phone when I uploaded the app. The reason seems to be zoom-related but I can’t swear to what the problem is aside from the fact that the screen has around 800px width and the standard font-size is still 16px which makes it unreadable. So I had to calculate the size myself and I found that the following formula worked like a charm:

 

var fontSize = Math.round(window.innerWidth * 0.04);
$('body').css('font-size', fontSize + "px");

This sets your font to a relatively easy reading size. Change the percentage if you need to alter the size!

JQuery: Handle left-click, right-click and double-click at the same time

I just had to handle a left-click, right-click and a dbl-click at the same time which turned out to be a bit tricky at first using just the mousedown function, but the solution was simple:

$("#Foo")
	.click(function() //Left click
	{
		//Do something
	})
	.mousedown(function(e) //Right click
	{
		if(e.which == 3) //1: left, 2: middle, 3: right
		{
			//Do something
		}
	})
	.dblclick(function() //Double click
	{
		//Do something
	});

Windows 8: Using jQuery in your Windows Store app

Right, so I thought it would be great to write a HTML5 app in windows 8 since it’s supported and everything. The one thing I refuse to skip though is jQuery. So, I added jQuery 1.9.1 to my app, referenced it in my html-file and ran the app. The following popup showed up:

JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content or elements previously modified dynamically that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content or explicitly create elements and attributes with a method such as createElement.
The error I received

I searched the web and I found that the only solution that seems safe at the time of writing is to use a “fixed” version for Windows 8, supplied by a company called AppendTo. The files can be downloaded here:
https://github.com/appendto/jquery-win8

Currently the latest jQuery release is 1.9.1 and the AppendTo conversion is 1.8.2 but it’s close enough and it works for me.

According to a couple of videos floating around and some articles on the subject the jQuery 2.0 release will have full support for Windows 8 so that should be great. But until then the AppendTo solution seems to be the best one out there.

JQueryUI: The different states

When you are working with the jQueryUI API you have some CSS classes to utilize when it comes to gadget designing. These classes can be used in order to create a unified, exchangeable design. The state classes represent different states a gadget, or anything else really, can be in (such as highlighted or in error). The states are:

 

  • ui-state-default
  • ui-state-active
  • ui-state-hover
  • ui-state-highlight
  • ui-state-error
  • ui-state-disabled

 

For more detailed information follow this link to the jqueryui official wiki.

Using jQuery in Jira

If you want to make some customizations for your JIRA install using javascript then there are some good news; jQuery is bundled into the package. The only small downside is that you’ll have to bind the $ alias yourself:

(function($){
   $(document).ready(function(){
      //your code here
   });  
})(AJS.$);

The AJS, Atlassian JavaScript, is a library that you can use when making gadgets in JIRA, but you can also use if if you’re just adding features in your banner. The documentation can be found here.

Flooder 2: A jQuery puzzle game

Today I finally finished a working beta of the sequel to the old Flooder game and released it in my new Demo section:
http://maffelu.net/demo/jquery/flooder2/

The demo section itself doesn’t exist so don’t bother going there yet :), but I’m gonna put something up there to store all my demo attempts!

The game is fairly simple and looks like this:

I've worked a bit more on the graphics this time....
I've worked a bit more on the graphics this time....

Whereas the old game was just a demo I made to see if a game could actually be made in jQuery and be fun, this attempt is a bit more serious to see if a game could be really fun, and still look good and run smoothly. Well, try the game and leave a comment on it. There may be a third version developed using HTML5 and CSS3 as well, We’ll see…