backspace

Some times you want to show a pop-up in HTML (something like jquery fancy box , light box , flowplayer overlays ). The trick to make an overlay is to add a div at the end of the body DOM tree, this semi-transparent block would cover the entire screen to prevent interaction with content beneath it, this can be done by having a semi-transparent png image as background or a using RGBA background (background-color:rgba(255,255,255,0.75);) or using a opacity ...etc. Usually div is created in JS when the library is initialized. Let's assume we want to show a box at the top, this is very easy by having top:0 To make it at the bottom we can't set top:100% because then it's top corner will be place at the bottom of the screen, but we can set bottom:100% ie. place the bottom corner of the box at the bottom which is what we want. If we have a box 200px in height, and we want to center it vertically we can not simply say top:50% nor bottom:50% and there is no such thing as middl

I tried to make a compass application for android using phonegap to check how far can I go with it. Phonegap is very powerful tool for making a mobile app that interacts with some site's API (eg. a twitter app) or that got usual interface and controls (forms, todo list, notes ..etc). Let's try push phonegap to its limits trying to make a game or some graphical tool that's I choose a compass app. I used a combination of CSS3 transform (to rotate the needle) and CSS3 transitions (to make rotation smooth), the code looks like this. d=360.0-heading.magneticHeading; // needle is the dom element for the needle image needle.style.webkitTransform='rotate('+d+'deg)'; It worked perfectly with two exceptions, we need to "normalize" the angle to force it taking the shortest path. The screen flickers when changing orientation, this can be fixed by forcing the app into one orientation only (either portrait or landscape), this is normal for games and al

I've asked this question to Timothy Jordan from google, he told me canvas is for interactive graphics while SVG otherwise. I've been searching which of the two to use in my mobile app (using phonegap) and why ? The first thing I noticed is that most common mobile browsers does not support SVG at all (eg. android < 3.x ) The second thing I noticed that they support canvas very well. http://caniuse.com/#feat=svg-html5 http://caniuse.com/#feat=canvas SVG is an xml graphical format, so you might use usual DOM manipulations, on the other hand, Canvas is a set of methods you call to draw things (works like this: clear, draw, clear, draw ...etc). In short if you want to create both web and mobile apps and cares for browser compatibility you might consider some api like dojo.gfx , if you just want a rich mobile app then you go with canvas.

Introduction Given a static image like this one We might apply many kinds of transformations on it using CSS3 "transform" like rotate and scale, skew or any transformation matrix. How to apply it ? You can rotate gear by 120 degrees using the following css .my_class { -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -ms-transform:rotate(120deg); -o-transform:rotate(120deg); transform:rotate(120deg); } You may scale to be 50% smaller using a similar sytax: .my_class { -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); } you may also specify different factor for X-axis and Y-axis using scale(X,Y); You may specify two transformations like this .my_class { -webkit-transform:rotate(120deg) scale(0.5); -mox-transform:rotate(120deg) scale(0.5); } Here is an example How to animating it ? we can use "@-moz-keyframes" and "@-web

Introduction In the last posts we have shown how to create some animation using CSS3 transitions (to make buttons that animate moving object or to create an animated slider ). Transitions are triggered in Javascript by a timer or by some action handler (eg. "onclick") that apply some change (change left or change CSS class) and the change will be animated. In this post we will show how to create animations, just animations! For example one might need to animate an bouncing arrow next to some button or pulse current tab in menu. How To ? First you create a CSS selector (eg. a class called "bounce" or "animate_me"), then we need to pick a name for your animation let's say "bounce" .bounce { animation-name: bounce; -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; } and then specify all animation factors you want like animation-duration in seconds iteration-cou