HTML and CSS Reference
In-Depth Information
.css({width: 320, height:420 })
.appendTo("body");
}
if(options.maximize) {
var w = $(window).width();
var h = $(window).height();
Q.el.css({width:w,height:h});
}
Q.wrapper = Q.el
.wrap("<div id='" + id + "_container'/>")
.parent()
.css({ width: Q.el.width(),
height: Q.el.height(),
margin: '0 auto' });
Q.el.css({ position:'relative', overflow: 'hidden' });
Q.width = Q.el.width();
Q.height = Q.el.height();
setTimeout(function() { window.scrollTo(0,1); }, 0);
$(window).bind('orientationchange',function() {
setTimeout(function() { window.scrollTo(0,1); }, 0);
});
return Q;
};
};
This code creates the initial module wrapper method and also creates the
setupDOM
method. This is the
counterpart to
Q.setup()
for Canvas-based games. It either uses an existing DOM element or creates a new
one to be a wrapper for the game. If the maximize option is passed in, the method resizes the container to fit the
screen. Next, it creates a wrapper container around that element to center it on the page. It also sets the element
to be positioned to allow elements inside it to be positioned absolutely as necessary, and it sets the overflow
property to hidden to prevent any elements in the game from appearing outside of the game container.
Creating a Consistent Translation Method
Before adding in the
DOMSprite
and
DOMStage
classes to actually get something onto the screen, the issue
to get a consistent positioning method needs to be solved.
The idea is to find the best-performing method the browser in question supports and then bind that to a con-
sistent method name so that the rest of the DOM support doesn't need to know how exactly elements are po-
sitioned. CSS3 defines support for the transform property, which depending on the browser supports
trans-
late(..)
and
translate3d(..)
values that can move elements around more efficiently than using the
traditional
left
and
top
properties.
translate3d
in particular results in hardware-accelerated transforms
being applied to DOM elements.
