Search

7/31/2009

select and option object


// <option value="bar">foo</option>
var opt = new Option('foo', 'bar')

// to append a option into a select
sel.options[sel.options.length] = opt;

// to append a option into a select, slightly fast
if (!isGecko)
select.add(option);
else
select.appendChild(option);

<select>
<option>foo</option>
<option>foo</option>
<option selected>I'll be selected</option>
<option>foo</option>
<option>foo</option>
</select>

7/30/2009

Text rotation for all

Text rotation for all


-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Date Display Technique with Sprites

7/29/2009

Rich-Text Editing and design mode on

Rich-Text Editing in Mozilla

Internet Explorer Differences

One major difference between Mozilla and Internet Explorer that affects designMode is the generated code in the editable document: while Internet Explorer uses HTML tags (em, i, etc), Mozilla 1.3 will generate by default spans with inline style rules. The useCSS command can be used to toggle between CSS and HTML markup creation.

Mozilla Rich Text Editing Demo
Command Identifiers
Converting an app using document.designMode from IE to Mozilla.
富文本编辑器的基本原理与实践
解决 IE 的问题

well, 如果你没有听我的劝告,依然使用 IE, 你会发现除了字型和字号其它的都不能用。为什么呢?你观察一下,有没有发现,其它浏览器选择文本后,再点击工具条上的项目,被选中的文本是否依然选中的?而 IE 呢,在点击工具条时,选中的文本马上失去选中的状态,所以它们就失败了。所以,如果我们能够保证点击工具条文本保持选中状态,就可以解决 IE 的问题了。

Microsoft 给 HTML 标签一个很奇怪的属性 unselectable, 只要设置为 on, 焦点不会转移到点击的元素上,从而保证文本的选中状态
很多很酷的效果,比如 Google Doc 里能够动态改变链接文本,使用页内层而非弹出的 prompt 来操作等高级功能,基本上都要用到 TextRange(IE) 或者 Range(W3C). 要命的是这两个东西互补兼容,只是相似而已。

7/27/2009

AR Business card

AR Business card

I’m using the following AS3 libraries in this project

AR Business Card from James Alliban on Vimeo.


FLARToolkit
FLARManager
Papervision
TweenMax

papervision 3D 研究日誌 #0

Managing Scope

Managing Scope

When JavaScript code is being executed, an execution context is created. The execution
context (also sometimes called the scope) defines the environment in which code is to
be executed. A global execution context is created upon page load, and additional
execution contexts are created as functions are executed, ultimately creating an execution
context stack where the topmost context is the active one.
Each execution context has a scope chain associated with it, which is used for identifier
resolution. The scope chain contains one or more variable objects that define in-scope
identifiers for the execution context. The global execution context has only one variable object in its scope chain, and this object defines all of the global variables and functions
available in JavaScript. When a function is created (but not executed), its internal
[[Scope]] property is assigned to contain the scope chain of the execution context in
which it was created (internal properties cannot be accessed through JavaScript, so you
cannot access this property directly). Later, when execution flows into a function, an
activation object is created and initialized with values for this, arguments, named
arguments, and any variables local to the function. The activation object appears first
in the execution context’s scope chain and is followed by the objects contained in the
function’s [[Scope]] property.
During code execution, identifiers such as variable and function names are resolved by
searching the scope chain of the execution context. Identifier resolution begins at the
front of the scope chain and proceeds toward the back. Consider the following code:

function add(num1, num2){
return num1 + num2;
}
var result = add(5, 10);

When this code is executed, the add function has a [[Scope]] property that contains
only the global variable object. As execution flows into the add function, a new execution
context is created, and an activation object containing this, arguments, num1, and
num2 is placed into the scope chain. Figure 7-1 illustrates the behind-the-scenes object
relationships that occur while the add function is being executed.

window.onbeforeunload


window.onbeforeunload = function (e) {

return 'hello world';

}

PixelToEm

http://github.com/davglass/yui-tools/blob/5ae0ed588feef376f10fa91dd5a2e9154cd12484/tools.js


/**
* @method PixelToEm
* @description Divide your desired pixel width by 13 to find em width. Multiply that value by 0.9759 for IE via *width.
* @param {Integer} size The pixel size to convert to em.
* @return Object of sizes (2) {msie: size, other: size }
* @type Object
*/
PixelToEm: function(size) {
var data = {};
var sSize = (size / 13);
data.other = (Math.round(sSize * 100) / 100);
data.msie = (Math.round((sSize * 0.9759) * 100) / 100);
return data;
},

an overview of TraceMonkey

an overview of TraceMonkey

Media Player Classic Home Cinema

Media Player Classic Home Cinema
http://www.mobile01.com/topicdetail.php?f=174&t=1086593&p=3#12493064#12489360
先來分享一下Revo在Win7 / Vista底下調用DxVA硬解的方法:

註:用xp的朋友,只要把第一張圖片裡的選項選成「VMR9(無轉換)**」就可以直接在xp底下硬解了。

1. 下載我打包好的Media Player Classic - Home Cinema(5.79MB 7-Zip檔)。
2. 解開後(約38MB),會看到一個目錄(MPC-1050-Internal_DxVA)和MatroskaSplitter.exe安裝檔。
3. 先安裝Matroska Splitter,這是看MKV檔必備的分離器,安裝過程只要一路按「下一步」就好了。
4. 把MPC的主目錄放到自己想要的地方(設定都是帶著走的,換了電腦也能用)。
5. 打開MPC後按鍵盤上的「O」鍵(是英文字母,不是數字),確認設定和以下圖相同:



6. 然後就可以開始播放720p/1080p的MKV了!
7. 播放時,按下Ctrl+J,會顯示播放資訊,只要黃色框框裡是如下的資訊,就表示DxVA硬解有正確開啟(看CPU使用率也可以啦!)。

7/22/2009

calendar and calendar overlay


var cal = null;
var calOverlay = new YAHOO.widget.Overlay('cal-overlay', {
xy: [-5000, -5000],
visible: false,
width: '200px'
});

// align thte cal-overlay
calOverlay.beforeShowEvent.subscribe(function () {
calOverlay.cfg.setProperty('context', [
Dom.get('cal-context'), 'tl', 'bl'
]);
});

calOverlay.setBody('
');

// render the calendar
calOverlay.renderEvent.subscribe(function () {
cal = new YAHOO.widget.Calendar("cal-container");
cal.selectEvent.subscribe(function (type, args, obj) {
Dom.get('cal-context').value = args[0][0].join('/');
calOverlay.hide();
}, cal, true);
cal.render();
});

calOverlay.render(document.body);

Event.on('cal-toggle', 'click', function () {
if (!Dom.get('cal-context').disabled) {
calOverlay.show();
}
});

// hide the cal-overlay if blur
var onCalOverlayBlur = function (e) {
var target = Event.getTarget(e);

if (!Dom.isAncestor('cal-overlay', target) && target.id != 'cal-toggle') {
calOverlay.hide();
}
};

Event.on(document.body, 'click', onCalOverlayBlur);

Last Day of the Month

Last Day of the Month


function daysInMonth(month,year) {
var ds = String(monthNum+1)+'/0/'+String(yearNum);
var dd = new Date(ds);
return dd.getDate();
}

This code is much shorter than our first example and it works perfectly in some browsers. Unfortunately not all browsers process strings passed into the date constructor the same way. Internet Explorer and Firefox will treat day zero of next month as the last day of the current month and will therefore return the correct number of days so this code appears to work. Unfortunately not all browsers interpret the zero in this way. Opera for example considers a zero to represent the current day of the month and so the function will return today's date rather than the number of days in the requested month.

We can easily fix this and make our code even shorted by passing the year, month, and day into the date constructor as numbers instead of as a US date format string. This format expects month numbers between 0 and 11 instead of 1 and 12 so we don't need to add 1 to get next month as our month field is already one greater.

function daysInMonth(month,year) {
var dd = new Date(year, month, 0);
return dd.getDate();
}

7/15/2009

web workers

html 5 web workers


var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};


var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}

Using web workers - MDC
Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.

http://www.0xdeadbeef.com/weblog/?p=1050
Worker Threads
* Spawn OS-threads to run JavaScript
* Avoids window freezing
* Simple communication methods with main thread
– postMessage(), onmessage and onerror
* Has XMLHttpRequest Access, timeouts


tag: javascript thread

7/12/2009

XInclude - Wikipedia, the free encyclopedia

XInclude - Wikipedia, the free encyclopedia

XInclude is a generic mechanism for merging XML documents, by writing inclusion tags in the "main" document to automatically include other documents or parts thereof[1]. The resulting document becomes a single composite XML Information Set. For example, including the text file license.txt:

Augmented Reality in SIGGRAPH 2007

Augmented Reality in SIGGRAPH 2007

7/10/2009

Gmail for Mobile HTML5 Series: Using Timers Effectively

Gmail for Mobile HTML5 Series: Using Timers Effectively


The dashed blue line represents the requested timer interval, 200 ms. Notice that the median was almost 50% higher than requested, at 276 ms; the time between ticks varied from 98 ms to almost 4 seconds, with an average delay of 493 ms.
This highlights the fact that the interval at which your timer actually fires may differ greatly from the requested delay. In fact, the time between ticks is typically highly variable. It will fluctuate based on what else is happening in your application and on the device. Don't rely on your timer being precise!

Here's what we learned. With low-frequency timers — timers with a delay of one second or more — we could create many timers without significantly degrading performance on either device. Even with 100 timers scheduled, our app was not noticeably less responsive. With high-frequency timers, however, the story was exactly the opposite. A few timers firing every 100-200 ms was sufficient to make our UI feel sluggish.

This led us to take a mixed approach with the timers we use in our application. For timers that have a reasonably long delay, we just freely create new timers wherever they are needed. However, for timers that need to execute many times each second, we consolidate all of the work into a single global high-frequency timer.
A global high-frequency timer strikes a balance between needing several different functions to execute frequently and application performance. The idea is simple: create a single timer in a central class that calls as many functions as required. Ours looks something like this:


var highFrequencyTimerId_ = window.setInterval(globalTimerCallback, 100);

globalTimerCallback = function() {
navigationManager.checkHash();
spinnerManager.spin();
detectWakeFromSleep_();
};

永和黑糖剉冰刨冰‧福滿溢

永和黑糖剉冰刨冰‧福滿溢

永和冰品美食
【店家地址】台北縣永和市安樂路240-1號﹝四號公園旁﹞
【店家電話】02-29277958
【營業時間】中午12:00-晚上11:30

7/03/2009

symfony

Frequently Used Helpers
http://www.symfony-project.org/book/1_2/07-Inside-the-View-Layer

Day 4: The Controller and the View
http://www.symfony-project.org/jobeet/1_2/Propel/en/04

JavaScript helpers
http://vit.free.fr/symfony/0.6.3/javascript.html

Chapter 11 - Ajax Integration
http://www.symfony-project.org/book/1_0/11-Ajax-Integration

php DOMDocument::loadXML & xpath


class helloAction extends sfAction
{
// data values
// $newsitems -> [ [link, title, desc]* ]
public function execute()
{
$rssurl = 'http://rss.news.yahoo.com/rss/tech';
$rssdata = $this->url_get_contents($rssurl);
$rssdom = DOMDocument::loadXML($rssdata);

// fetch values from dom and put into array of [link,title,desc] arrays
$newsitems = array();
$xpath = new DOMXPath($rssdom);
foreach ($xpath->query("//rss/channel/item") as $item)
{
$link = $this->get_element_value($item, 'link');
$title = $this->get_element_value($item, 'title');
$description = $this->get_element_value($item, 'description');
$newsitems[] = array($link, $title, $description);
}

// pass this struct to the template
$this->newsitems = $newsitems;
}

// note: no error handling yet
private function url_get_contents($url)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
private function get_element_value($node, $itemname)
{
return $node->getElementsByTagName($itemname)->item(0)->nodeValue;
}
}