htmlr

Fixing gaps on Firefox input buttons

To fix the additional spacing being adding to input buttons in Firefox you’ll need to add the additional CSS:

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

Mixing onclick and jQuery.click()

You may have noticed that if an element has an inline onclick=”…” function that you’re jQuery.click() attached to the same element isn’t not firing. This is because the inline onclick=”…” function will fire first often causing the browser to “skip” your jQuery.click() if the element triggers the page to navigate away or refresh. The trick is to store the inline onclick=”….” and remove the attribute prior to any event and evaluate it after your script (See below)

jQuery('a').each(function(){
   // Store inline onclick in data for calling later
   $(this).data('onclick', $(this).attr('onclick'));
   $(this).removeAttr('onclick');
   
   $(this).click(function(){
       // ...your script that does stuff on click....
      
      // Now run previously stored inline onclick
      eval($(this).data('onclick'));
   }
}

jQuery addClass() switchClass() good for CSS 3 Transition fallback but not in IE

Great new methods that can be used to animate to a CSS class which *could* provide fallback for CSS3 Transitions. Unfortunately, they only work with scalar values so IE 7 - 9 filter properties won’t work, so for now you’ll have to stick to using animate() or fadeIn() fadeOut() for transitioning opacity in IE 7 - 9

The gotcha’s of form.reset() in jQuery

Not often used I must say, but the Javascript form reset() function is very handy for clearing a form and setting it to its original state. However, there’s a few gotcha’s you need to be aware of, otherwise you’ll be tearing your hair out like I was:

Firstly, there is no reset() function in jQuery so you’ll have to bind your own handler using on(‘reset’… (jQuery 1.7) or bind(‘reset’…) (jQuery > 1.7)
The event doesn’t bubble up as expected in Internet Explorer (IE 8 in my testing) so you’ll need to bind your handler directly to the form element i.e. jQuery(‘#myform’).on(‘reset’,function(){ … }
Lastly, from my tests it seems your jQuery handler will fire before the native form reset() which I believe is due to jQuery event architecture because you’ll note jQuery enables you to prevent the default handler via event.preventDefault();

Unlocking your mobile via official channels

Unfortunately I busted a new mobile recently and had to resort to my old HTC Legend that I had on Vodaphone contract. Unfortunately this device was locked to Vodaphone but I did some research and discovered some carriers such as Vodaphone have a simple online unlock request process, and if its an old device you bought outright in store or own as part of a previous contract you may be in luck ;)

List of unlock request links for Vodaphone, Optus and Telstra:

box-sizing padding test for Modernizr

Noticed some browsers struggle with padding and the relatively new box-sizing property when using min-height. This little test below checks for this an allows you to add the necessary workaround

.padding-added-to-minheight.padding-added-to-minheight//dwadawd Detects if the browser is wrongly adding padding to min-height
// by Volker Rose | @riddla
// http://volker-rose.de/blog/box-sizing-and-min-height-css-trouble-within-firefox/
// http://jsfiddle.net/riddla/4bP73/
Modernizr.testStyles('#modernizr { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 100px; padding-top: 10px; position: absolute; top: -2000em; }', function(elem, rule){
    Modernizr.addTest('padding-added-to-minheight', elem.scrollHeight === 110);
});

Using the test:

#box { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  padding:10px;
  min-height:100px;
}

.padding-added-to-minheight #box { 
    min-height:80px;
}

Influences to development choices

As we all know there is always many approaches to the same coding problem.

The biggest influences to the approach I have found are typically (in no order):

time/ money
browser support
readability/ maintainability
limitations to the application
performance

Arguable readability and performance are the two that often considered “less” important to stakeholders so you need to make sure they understand the impact to the user experience and long term impacts.

Good tools for helping stakeholders understand the impact of these are sites like jsperf.com which can indicate the performance of a function so you can translate it to waiting time to the end user - important when you consider impatience is a big cause of drop off in eCommerce apps.

And for readability, you really just need to consider how much time it will take another developer to interpret your code if you fell under a bus.

Addressing issues with wrapping Anchors around block elements

It’s perfectly valid in HTML 5 to wrap anchors around block elements. However it would appear when looking at the like’s of Google Chrome’s Inspector that some browsers will close your tag before the nested block element when rendering your HTML. What the!

E.g.

</a>

Web Inspector:

So how can you fix this? Well, turns out if you change your block element to an inline element such as a SPAN , and set the display types as block the browser will leave your anchor wrapped as you intended

</a>

Any issues with doing this? Unfortunately this can impact the symantics of your document because your changing your intended tag.

DD roundies if you require borders on your rounded boxes

Been working on a corporate site that requires IE 8 support that uses rounded corners and from my tests it still appears Diller Design’s Rounded Corners script is the ‘easiest’ solution. Some other plugins dont work with borders and the behavior files (rounde-corners.htc) are toublesome due to the pathing requirement of the behvior() rule.

DD Roundies - http://dillerdesign.com/experiment/DD_roundies/

Outline for PHP JSON webservice using CORS

<?php

include('../lib/ft-nonce-lib.php'); // (http://fullthrottledevelopment.com/php-nonce-library)

// First check we have a valid nonce for this request. 
if(isset($_GET['_nonce']) && ft_nonce_is_valid($_GET['_nonce'])){
	$data = '{}'; // json string
	
	// Add XMLHttpRequest 2 headers to specify which domains can access this webservice (https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS)	
	if(array_key_exists('callback', $_GET)){
		// JSONP
		header('Content-Type: text/javascript; charset=utf8');
		$callback = $_GET['callback'];
		echo $callback.'('.$data.');';
	
	}else{
		// Normal JSON 
		header('Content-Type: application/json; charset=utf8');
		// Access controls to enable x-domain access for certain sites
		header('Access-Control-Allow-Origin: http://www.domainA.com.au');
		header('Access-Control-Allow-Origin: http://www.domainB.com.au'');

		echo $data;
	}

} else {
	die('Invalid request');
}
?>