FireFox

Use Matrix of rotate +MozOrientation

Posted on by

Previous post is simple example of usage MozOrientation. But now i use Matrix of rotate and i have nice animation.

You can read many information about Matrix of rotate here. These methods are used in game development, make animations and many others.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var context = drawingCanvas.getContext('2d');

var xc = 75;
var yc = 75;
var xi = 0;
var yi = 0;

var myImage = new Image();

var angle = (Math.PI/2)*-o.x;
myImage.onload = function() {
     context.clearRect(0,0,150,150);
     context.save();
     
     xi = xi*Math.cos(angle)-yi*Math.sin(angle)-xc;
     yi = yi*Math.sin(angle)+yi*Math.cos(angle)-yc;
     
     
     context.translate( xc , yc);
     
     context.rotate(angle);
     context.scale(1+o.y,1+o.y);
     context.drawImage(myImage, xi, yi);
     
     context.restore();
}
myImage.src = "feedme.png";

Result:

Your browser doesn’t support canvas.


Continue reading →

JavaScript examples for MozOrientation of FireFox 3.6

Posted on by

Today i present new feature of FireFox 3.6 – MozOrientation

With Canvas and MozOrientaion you will get nice web site!

Please look on my icons of Feed and Twitter! :)

My twitter source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function init() {
additional_load(null);
 window.addEventListener("MozOrientation", additional_load, true);
}

function additional_load(o) {
var drawingCanvasTwitter = document.getElementById('myDrawingTwetter');    
     // Check the element is in the DOM and the browser supports canvas
     if(drawingCanvasTwitter && drawingCanvasTwitter.getContext) {
          // Initaliase a 2-dimensional drawing context
          var context = drawingCanvasTwitter.getContext('2d');
     
               var myImage = new Image();
               myImage.onload = function() {
                    context.clearRect(0,0,150,150);
                    context.save();
                    if(o) {
                         if(o.x > 0)
                              context.translate(0, 134*o.x);
                         else
                              context.translate(-134*o.x, 0);
                    }    

                    if(o)
                         context.rotate((Math.PI/2)*-o.x);
                    context.drawImage(myImage, 0, 40);
                    context.restore();
               }
               myImage.src = "https://developers-life.com/wp-content/uploads/2009/12/tw.jpg";         
     }
}
1
<body onload="init()"></body>

Example for handle orientation:
Continue reading →

Yandex тиЦ

Posted on by

Обновлено расширение для FF :)

https://addons.mozilla.org/ru/firefox/addon/8945

Yandex тИЦ status bar 1.1

Posted on by

Мелочь а приятно :)

https://addons.mozilla.org/ru/firefox/addon/8945#reviews

Спасибо за комменты под плагином :)

Yandex тИЦ в статус баре FireFox`a

Posted on by

Искал расширение(extention) для Firefox которое показывает в статус баре(status bar) один Yandex тИЦ. Нашел, но оно уже не работает в новом FireFox 3. Пришлось написать своё :)

Пару часов лазанья по интернету и экспериментов и результат на лицо:

Человек я добрый :)

Поделюсь своей работай Yandex тИЦ

Будут вопросы, пишите.

Строка состояния в full screen FireFox

Posted on by

Рылся по ру нету, но ничего не нашел на свой вопрос:
“Как сделать отображаемой строку состояния(statusbar) в полноэкранном режиме (full screen) браузера firefox?”

Может и не так нужно было поставить вопрос :)

Мне строка состояния очень нужна для разработки, т.к. я работаю на ноутбуке. Экрана соответственно маловато, а в статус баре firebug, всякие статистики по загрузке страницы, gmail и пузомерка(для интереса).

Почитавши доки браузера нашел то, что мне нужно, чудо файлик userChrome.css!
Continue reading →