Blog

Posts tagged with “code”

Mobile Browsers lost their :FOCUS

 

Alright,
I had been hoping to display a CSS user interaction technique that would make context sensitive drop-down menus, but it unfortunately doesn't work on current mobile phones (webkit based ones, at any rate). The problem is the mobile browsers don't recognize :FOCUS on any element other than text entry areas.

See, according to W3C's HTML5 recommendation (and implemented in all modern desktop browsers), any element can receive user focus if they have a "tabindex" attribute assigned to them. If that value is a positive number, they then also enter the tab sequence for keyboard navigation. It also means that, in desktop browsers, clicking on the element allows the client to render special :FOCUS selector, that is normally reserved mostly for form elements and links. With a little bit of work, one can create a nice little context menu as follows:

HTML:

<div tabindex="1" class="opt-sel">Options
  <ul tabindex="0"><!-- this needs a tabindex too, to allow styling it's :ACTIVE state to allow for a complete "click" of it's children -->
    <li><a href="#1">Option 1</a></li>
    <li><a href="#2">Option 2</a></li>
    <li><a href="#3">Option 3</a></li>
    <li><a href="#4">Option 4</a></li>
  </ul>
</div>

CSS (the effective bits):

.opt-sel UL {
   position:absolute;
   list-style:none;
   padding:0;
   margin:0;
}
.opt-sel:NOT(:FOCUS) UL { /* only hide the sub-menu in modern browsers */
  display:none;
}
.opt-sel:FOCUS UL,
.opt-sel UL:ACTIVE { 
/*
A child element's mousedown event causes said element to pull focus away 
from the parent div and disappear immediately, and disables any "click" 
from occurring. Styling the UL's :ACTIVE state keeps the child elements 
around until mouseup, and lets the click happen.
*/     
  display:block;
}

And, on desktop browsers, this works great. Click on the word "options", and a list of options appears and stays open until you click somewhere else. If you click one of the available options, the desired action occurs and the list nicely disappears. Now, it's not perfect — you can't tab through the options, for example (though, you should be able to) but it's no worse than current :HOVER menus.

Now, one would expect this to work beautifully on a touchscreen/mobile environment. Unfortunately it doesn't. Instead, what happens is clicking (or touching) on a tabindex'ed element results in the rendering of a :HOVER selector — :FOCUS is completely ignored. Not only that, but :FOCUS doesn't even effect the usual suspects. Only elements that accept keyboard interaction are allowed to use :FOCUS state — and only when they do need a keyboard; setting readonly="readonly" removes the :FOCUS state. I assume that the reason for this is that many pre-mobile site's navigation systems broke when :HOVER disappeared. And it makes sense. Touch screens can't tell you if you're hovering, only if you're touching. So, instead of following standards, mobile browsers rewarded laziness, and changed the rules. Problem is, the only way to make something recognize :HOVER is by setting a tabindex value, which means it still won't be used by the lazy coders this change was trying to appease — and it hijacks the first click on an element to set :HOVER, requiring users to click (or touch) twice.

What should happen, in my opinion (and the W3C's as well, if I read the latest recommendation correctly) is that :HOVER should be ignored (or at least mimic :ACTIVE) on touch screens, since they don't use "pointing devices" and :FOCUS should work on any element that accepts tab navigation. Don't break things to appease lazy coding. That's what made IE6 and quirks mode happen to us.

Tags: , ,
2013.02.04 09:51 AM | Permalink 0 Comments

CSS3 Pie Charts Revisited

Quite a while back I figured out how to create pie charts using nothing but CSS and a handful of HTML tags.

In the original method, I used at least two nested elements to create each segment of the pie chart. Well, turns out I figured out how to make it use even less HTML. I now use BEFORE: and (occasionally) :AFTER pseudo elements.

<div class="pie" data-start="0" data-value="30"></div>
<div class="pie highlight" data-start="30" data-value="30"></div>
<div class="pie" data-start="60" data-value="40"></div>
<div class="pie big" data-start="100" data-value="260"></div>

The other thing I did differently with the HTML was to remove ID's for each element in favour of adding data- attributes. You could just as easily use class names like s30 and v30, but I will explain why I like the data attributes later. I was also able to remove the clip workaround to WebKit's now fixed changing an element's transform-position negates border-radius bug.

The technique remains essentially the same. for each piece; convert the inner element (or pseudo element in this case) into a half circle, and hide it from view by setting the outer element to overflow:hidden. Rotate both outer and inner elements to place and size the pie piece. For pieces larger than 50% of the entire pie's volume, use a second (pseudo) element as filler.

as for why I prefer data- attributes over classes, it's so I can complain about the lack of support for the proposed W3C CSS3 attr() function, which would make this technique truly awesome. Instead of creating custom style rules for each possible value of data-start and data-value, I could replace them with two rules:

.pie {
   transform:rotate(attr(data-start,deg,0);
}
.pie:BEFORE {
   transform:rotate(attr(data-value,deg,0);
}

Check out the code in action, or even play with it yourself on Code Pen

Tags: , , ,
2013.01.26 04:09 PM | Permalink 0 Comments

The Ultimate Date Validation RegExp

Now, I'm not claiming to be a god at regular expressions, but I do own this shirt for a reason. That reason is that I like using RegExp to do a lot of heavy lifting for me. Case in point: validating a date format. It's one thing to pull out year, month and date, allowing for multiple delimiters; it's quite another to ensure that the actual values match expected results. Month values are only between 01 and 12. Days are not only between 01 and 31, but also exclude 29, 30, or 31 if the months aren't supposed to include them — including checking for leap years. I can do that. With Regular Expressions.

Here's how (for simplicty's sake, all years must start with 19xx or 20xx):

var yyyymmdd = /(?:((?:19|20)[0-9]{2})[\/\\\-. ]?(?:(0[1-9]|1[0-2])[\/\\\-. ]?([0-2][1-8]|[12]0|19)|(0[13-9]|1[0-2])[\/\\\-. ]?(29|30)|(0[13578]|1[02])[\/\\\-. ]?(31))|(19(?:[0][48]|[2468][048]|[13579][26])|20(?:[02468][048]|[13579][26]))[\/\\\-. ]?(02)[\/\\\-. ]?(29))/;
//if doing a replace: year is $1$8, month is $2$4$6$9, day is $3$5$7$10
var ddmmyyyy = /(?:(?:([0-2][1-8]|[12]0|19)[\/\\\-. ]?(0[1-9]|1[0-2])|(29|30)[\/\\\-. ]?(0[13-9]|1[0-2])|(31)[\/\\\-. ]?(0[13578]|1[02]))[\/\\\-. ]?((?:19|20)[0-9]{2})|(29)[\/\\\-. ]?(02)[\/\\\-. ]?(19(?:[0][48]|[2468][048]|[13579][26])|20(?:[02468][048]|[13579][26])))/;
//if doing a replace: year is $7$10, month is $2$4$6$9, day is $1$3$5$8
var mmddyyyy = /(?:(?:(0[1-9]|1[0-2])[\/\\\-. ]?([0-2][1-8]|[12]0|19)|(0[13-9]|1[0-2])[\/\\\-. ]?(29|30)|(0[13578]|1[02])[\/\\\-. ]?(31))[\/\\\-. ]?((?:19|20)[0-9]{2})|(02)[\/\\\-. ]?(29)[\/\\\-. ]?(19(?:[0][48]|[2468][048]|[13579][26])|20(?:[02468][048]|[13579][26])))/;
//if doing a replace: year is $7$10, month is $1$3$5$8, day is $2$4$6$9

I'll break down the first example.
The entire expression looks for most likely values first, then looks for less likely, yet still valid values.

  • First it looks for a year with
    • a month value is between 01-12 and the day value is between 01-28.
    • If not, it checks if the month value is 01, or 03-12 and the day is either 29 or 30.
    • Failing that, it checks if the month is one of 01,03,05,07,08,10, or 12 and the day is 31.
  • Failing that, it does one last sanity check to see if the year was a leap year (only checking the years starting with 19xx or 20xx, so values are actually easily calculatable) and the date is 02-29.

If all of that fails, it isn't a valid date.

Tags: , , , ,
2012.06.07 10:23 AM | Permalink 0 Comments

Object Pool Class for AS3

Object pools aren't really rocket science. At their simplest, they can be implemented with an array, as follows:

var pool:Array = new Array();

function getFromPool():* {
return (pool.length?pool.pop():new [YourPooledObjectClass]());
}

function returnToPool(o:*):void {
if (o is [YourPooledObjectClass]) {
pool.push(o);
}
}

… and that's it really. The only problem is that you need to ensure that your code then manually resets any default property values of an aquired object. It also means you need to "one off" each pool you use. To that end, I created the following Object pool class.

Its main features:

  • keeps an internal list of default properties to be set at aquisition time.
  • ensures that only declared properties can be set (this can be turned of if desired)
  • allows for per-instance property overrides as needed
  • allows a max count to be set and pool flushing for memory management
  • allows pool pre-population so that potentially expensive creation routines can be managed

The only caveat is that any poolable object cannot require arguments at creation time — unless someone can point me to the class constuctor equivilent of funtion.apply();

package ca.atomicnoggin.collection {

/**
*
* @author Patrick Denny heythere@atomicnoggin.ca
*
*/
public class ObjectPool {
private var objType:Class;
private var props:Object = {};
private var pool:Array = [];
private var max:uint;
private var dyno:Boolean;
/**
* Constructor
*
* @param type The object class to use in the pool
*
* @param defaultProperties A simple name:value object that
* lists any property presets for objects taken from the pool.
*
* @param allowDynamic Whether or not to allow default properties that
* are not explicitly defined within the Class.
*
* @param initialCount Number of objects to pre-populate the pool with.
*
* @param maxCount Maximum number of objects allowed to populate the pool.
*/
public function ObjectPool(type:Class = null,
defaultProperties:Object = null,
allowDynamic:Boolean=false,
initialCount:uint=0,
maxCount:uint=uint.MAX_VALUE)
{
objType = (type is Class)?type:Object;
dyno = allowDynamic;
max = maxCount;
if ((defaultProperties is Object)) {
loadDefaultProperties(defaultProperties);
}
this.length = initialCount;
}

private function getNextObj(removeFromPool:Boolean=false):* {
//either grab the first object added or create a new one.
var obj = pool.length?pool[0]:(new objType());
if (removeFromPool) pool.shift();
return obj;
}

/**
* Get an object from the pool
*
* @param properties A simple name:value object that
* lists any instance specific properties to be set for
* the object taken from the pool. If allowDynamic is
* false, Properties not explicitly defined within the Class
* will be ignored.
*
* @return an instance of the Class specified in the constructor
*
*/
public function pop(properties:Object = null):* {
var newObj = getNextObj(true);
//make a copy of the instance specific properties provided (if any)
var newP:Object = (properties is Object?properties?{});
//track instance properties already set
var used:Object = {};
//iterate through the default properties
for (var p:String in props) {
if (dyno || newObj.hasOwnProperty(p)) {
//if an instance property name matches the default property
if (newP.hasOwnProperty(p)) {
// use the provided property
newObj[p] = newP[p];
// and add it to the used list
used[p] = true;
}
//otherwise use the default property
else {
newObj[p] = props[p];
}
}
}
//iterate through the remaining instance properties and apply them.
for (p in newP) {
if ((dyno || newObj.hasOwnProperty(p)) && !used[p]) {
newObj[p] = newP[p];
}
}
return newObj;
}
/**
* Return an object to the pool
*
* @param object The object being returned. Any object provided
* that is not an instance of the Class will be ignored.
*
*/
public function push(object:*):void {
if ((object is objType)) {
pool.push(object);
//this forces the max value check
this.length = pool.length;
}
else {
//should throw error
}
}
/**
* The Class used to create pool objects
*
* setting this property will also clear the pool.
*/
public function get poolClass():Class {
return objType;
}

public function set poolClass(value:Class):void {
this.length = 0;
objType = value;
}

public function loadDefaultProperties(defaultProperties:Object, clearPrevious:Boolean=true) {
if (clearPrevious) {
props = {};
}
var obj = getNextObj();
for (var p:* in defaultProperties) {
if (dyno || obj.hasOwnProperty(p)) {
props[String(p)] = defaultProperties[p];
}
}
}
/**
* Get the value of a default property
*
* @param name The property to be looked up.
*
* @return The default value of the named property.
* If the property hasn't been set in the pool's default
* property list, then 'undefined' will be returned instead.
*/
public function getDefaultProperty(name:String):* {
var obj = getNextObj();
if (dyno || obj.hasOwnProperty(name)) {
return props[name];
}
else {
return undefined
}
}
/**
* Set the value of a default property
*
* @param name The name of the property to be set.
*
* @param value The value to be used. If allowDynamic is
* false, Properties not explicitly defined within the Class
* will be ignored.
*/
public function setDefaultProperty(name:String,value:*):void {
var obj = getNextObj();
if (dyno || obj.hasOwnProperty(name)) {
props[name] = value;
}
else {
//should throw error
}
}
/**
* Remove a property from the default properties list
*
* @param name The name of the default property to remove.
*
*/
public function removeDefaultProperty(name:String):void {
delete props[name];
}
/**
* Whether or not dynamic properties will be allowed to
* be added to the pool's objects. Setting this to true
* may cause Errors.
*
* default is false
*/
public function get allowDynamic():Boolean {
return dyno;
}

public function set allowDynamic(value:Boolean):void {
dyno = value;
if(!dyno) {
//reload properties to clear out dynamic ones
loadDefaultProperties(Object(props));
}
}
/**
* The maximum number of objects allowed to populate the pool
*
* default is uint.MAX_VALUE
*/
public function get maxCount():uint {
return max;
}

public function set maxCount(value:uint):void {
max = value;
if (pool.length > max) {
this.length = max;
}
}

/**
* The number of objects currently in the pool.
*
* If length is set to a value less than what is currently available,
* any objects beyond the new value will be deleted. If set to a value
* greater than what is available, new objects will be created
* to pre-populate the pool to match the amount provided.
*
*/
public function get length():uint {
return pool.length;
}
/**
*
*/
public function set length(value:uint):void {
var v:uint = (value > max)?max:value;
if (v < pool.length) {
delete pool.splice(v);
}
else if (v > pool.length) {
for(var a:uint = v - pool.length;a--;) {
pool.push(new objType());
}
}
}
}
}

The simplest usage would be:

var myPool:ObjectPool = new ObjectPool(Sprite);

To create a Sprite pool.

And as a bonus, you can even attach a pool directly to an object to create a factory, as follows:

package {
import ca.atomicnoggin.collections.ObjectPool;

public class MyClass {

static private var _pool:ObjectPool;

static public function get pool():ObjectPool {
if (!(_pool is ObjectPool)) {
_pool = new ObjectPool(MyClass);
}
return _pool;
}

public function MyClass() {
//constuctor code
}
}
}
Tags: , ,
2010.12.01 01:06 PM | Permalink 0 Comments

Stupid CSS Tricks: The Simple Sticky Footer

Ok, I've seen a lot of techniques for Sticky footers, but haven't seen one as simple as mine. It uses the bare minimum mark-up and CSS possible.

First, here is the HTML required:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky Footers Rock</title>
<link rel="stylesheet" type="text/css" href="[where you store css]" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="[where you store IE6 specific css]" />
<![endif]-->
</head>

<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

As you can see, there's nothing special in there. Besides the conditionally commented IE6 stylesheet, there are three DIVs to split the layout, and that's it. Nothing a decent web designer wouldn't already have in a page anyway. In fact, only two of those DIVs are required. The "header" DIV is only there because it usually exists in a design. It's superflous to this example. One thing that is vitally important though — assuming you care about IE6 — is the <!DOCTYPE> decleration. What doctype you use is up to you, so long as it triggers "almost standards mode" in IE6.

Next we will look at the base CSS required. You can add more as you see fit. I've commented the code to explain why each line needed:

HTML {
height:100%;
/* allows body to grow to full window height */
}
BODY {
position:relative;
/* otherwise footer will position itself in relation to window height */
min-height:100%;
/* makes page start out at least as tall as the browser window */
margin:0;
padding:0;
/* not strictly required but useful. reset to push body to edges of browser window */
}
#footer {
position:absolute;
bottom:0px;
/* these two lines will force footer to the bottom of the page. */
height:XXX;
/*set to whatever you want */
}
#content {
padding-bottom:XXX;
/* must match or exceed the footer height, so bottom-most content doesn't float bellow footer */
overflow:hidden;
/* this will contain any floated elements and push the footer down below them
NOTE: do not add a height to this element, or this will fail */
}

Next, we add a single rule to the conditionally commented IE6 stylesheet:

BODY {
height:100%;
/* hack for IE6 that doesn't recognize min-height. */
}

That's it. We're done. Here's a demo with some minimal extra CSS and content to illustrate the technique.

One caveat with IE6: this will work as is on static content pages, but IE6 will not move the footer down when extra content is added or removed dynamically. Instead it will float where it originally sat regarless of the new content size. To work around this, simply pop the footer's style position to 'static' and back (either directly with <element>.style.position, or by adding then removing a new class) after making the dynamic changes and IE6 will behave as expected.

Also, some more knowledgeable of you may be tempted to skip the conditionally commented CSS and instead "hack" the original BODY rule decleration as follows:

BODY {
position:relative;
/* otherwise footer will position itself in relation to window height */
min-height:100%;
/* makes page start out at least as tall as the browser window */
height:auto !important;
/* make non-IE6 browsers ignore the next line */
height:100%;
/* hack for IE6 that doesn't recognize min-height. */
margin:0;
padding:0;
/* not strictly required but useful. reset to push body to edges of browser window */
}

While this will work, it does add unneeded CSS that other browsers need to parse. It's my personal oppinion that IE6 should be the only one doing heavy lifting, CSS wise, since it's the one we're having to work around.

Tags: , ,
2010.02.08 12:00 PM | Permalink 0 Comments
Next → Page 1 of 3