<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<input type="button" id="b" value="click me" />
<script type="text/javascript">
function g(){
console.log('g0');
}
(function(){
function g(){
console.log('g1');
}
document.getElementById('b').onclick = g;
})();
(function(){
function g(){
console.log('g2');
}
g();
})();
</script>
</body>
</html>
Monday, May 25, 2009
use (function(){})() to do the scope thing.
Wednesday, May 13, 2009
ie7 zoom caused some js behavior weird
we always use js to calculate and set the DOM node's position. but under ie7, you should consider the zoom factor of the broswer, because its behavior is a little weird.
here is a test:
ps: I found the way to get zoomlevel here.
here is a test:
ps: I found the way to get zoomlevel here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
var dojo = {
byId: function(id) {
return document.getElementById(id) || id;
},
coords: function(node) {
var x, y;
x = y = 0;
while(node) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return {'x': x, 'y': y};
}
};
function z() {
document.body.style.zoom = 2;
}
function s() {
var rect = document.body.getBoundingClientRect();
var zoomLevel = Math.round( (rect.right-rect.left)/document.body.clientWidth * 100);
dojo.byId('zoom-info').innerHTML =
'zoomLevel:' + zoomLevel + ','
+ 'd.offsetWidth:' + dojo.byId('d').offsetWidth + ','//dojo.style(document.body, 'zoom');
+ 'd.offsetTop:' + dojo.byId('d').offsetTop + ','
+ 'd.style.top:' + dojo.byId('d').style.top + ',';
}
window.onload = function() {
document.attachEvent('onmousemove', function(e) {
e = e || window.event;
var pos = dojo.coords(dojo.byId(d));
dojo.byId('debug').innerHTML = e.clientX + ', ' + e.clientY + ' d.pos:' + pos.x + ',' + pos.y;
s();
}, false);
}
</script>
</head>
<body>
<h1>Test ie zoom</h1>
<span >Hello world!</span>
<div id="debug"></div>
<div id="zoom-info"></div>
<input type="button" value="+" onclick="z()"/>
<input type="button" value="s" onclick="s()"/>
<div id="d" style="position: absolute; top: 200px; left: 500px; background: red; width: 200px; height: 100px;">
position: absolute; top: 200px; left: 50px; background: red; width: 200px; height: 100px;
</div>
</body>
</html>
Tuesday, May 12, 2009
finished the extension
Here is the extension:https://addons.mozilla.org/zh-CN/firefox/addon/11911
var highlightbloggercode = {
onLoad: function(event){
this.initialized = true;
this.codeTypes = 'bsh,c,cc,cpp,cs,csh,cyc,cv,htm,html,java,js,m,mxml,perl,pl,pm,py,rb,sh,xhtml,xml,xsl';
this.oPrefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
var doc = event.originalTarget;
if (!doc || doc == null || doc.location == null)
return;
var href = doc.location.href;
var reg = /^http:\/\/www\.blogger\.com\/post-(create|edit)\.g\?blogID=/i;
if (href && href.match(reg)) {
var _this = this;
// wait for the richedit load completed.
setTimeout(function(){
new _this.AddCode(window.content, window.content.document);
}, 1000);
}
},
AddCode: function(win, doc){
this.win = win;
this.doc = doc;
this.btn = null;
this.btnId = '_height_code_btn';
this._codeDiv = null;
this.langs = [];
this.addBtn();
},
initOptions: function(){
try {
var types = this.oPrefs.getCharPref('highlightbloggercode.code.type');
document.getElementById('code-type').value = types;
}
catch (e) {
document.getElementById('code-type').value = this.codeTypes;
}
},
saveOptions: function(){
var types = document.getElementById('code-type').value;
this.oPrefs.setCharPref('highlightbloggercode.code.type', types);
}
};
highlightbloggercode.AddCode.prototype = {
addBtn: function(){
try {
this.btn = this.doc.getElementById(this.btnId);
if (!this.btn) {
var input = this._create('input');
input.type = 'button';
input.id = this.btnId;
input.value = "Code";
this.doc.getElementById('htmlbar_Buttons').appendChild(input);
this.btn = input;
var _this = this;
var handler = function(){
_this._doAddCode();
}
this.btn.addEventListener('click', handler, false);
}
}
catch (e) {
alert(e);
}
},
_doAddCode: function(){
try {
var div = this._create('div');
this._setStyle(div, 'font-size: 12px;border: 2px solid green;-moz-border-radius: 10px;padding: 5px;position: fixed;background: #f0f0f0;z-index:999;top:-5000px;');
div.appendChild(document.createTextNode('Paste your code here'));
div.appendChild(this._create('br'));
// textarea
var textarea = this._create('textarea');
this._setStyle(textarea, "font-size: 12px;font-family: 'Courier New', Courier, monospace;");
div.appendChild(textarea);
// paste code button
var input = this._create('input');
input.type = 'button';
input.value = 'OK';
div.appendChild(input);
var _this = this;
var handler = function(){
_this._doPasteCode();
}
input.addEventListener('click', handler, false);
// options for code type
var types = highlightbloggercode.codeTypes;
try {
var types = highlightbloggercode.oPrefs.getCharPref('highlightbloggercode.code.type');
}
catch (e) {
}
this.langs = types.replace(/[,\s]+/g, ',').split(',');
var select = this._create('select');
for (var i = 0; i != this.langs.length; ++i) {
var opt = this._create('option');
opt.value = opt.text = this.langs[i];
select.appendChild(opt);
}
div.appendChild(select);
// close button
input = this._create('input');
input.type = 'button';
input.value = 'close';
div.appendChild(input);
handler = function(){
_this._marker.parentNode.removeChild(_this._marker);
_this._codeDiv.parentNode.removeChild(_this._codeDiv);
}
input.addEventListener('click', handler, false);
// create a marker
var marker = this._create('div');
this._setStyle(marker, 'position: fixed;top:0;left:0;background: black; opacity: .4;z-index:998;');
this.doc.getElementsByTagName('body')[0].appendChild(marker);
this.doc.getElementsByTagName('body')[0].appendChild(div);
// update the div position
var w = 600;
var h = 340;
var maxW = window.content.window.innerWidth;
var maxH = window.content.window.innerHeight;
if(w > maxW) w = maxW - 40; // div padding
if(h > maxH) h = maxH - 80;
textarea.style.width = w + 'px';
textarea.style.height = h + 'px';
div.style.top = parseInt((maxH - h)/3) + 'px';
div.style.left = parseInt((maxW - w)/2) + 'px';
marker.style.width = maxW + 'px';
marker.style.height = maxH + 'px';
this._marker = marker;
this._codeDiv = div;
}
catch (e) {
alert(e);
}
},
_doPasteCode: function(){
try {
var code = this._codeDiv.getElementsByTagName('textarea')[0].value;
var type = this._codeDiv.getElementsByTagName('select')[0].value;
this._codeDiv.parentNode.removeChild(this._codeDiv);
this._marker.parentNode.removeChild(this._marker);
this._pasteCode(code, type);
}
catch (e) {
alert(e);
}
},
_pasteCode: function(code, type){
try {
var src = ['<code class="prettyprint lang-' + type + '">', this._encode(code), '</code>'];
var str = 'javascript:Textbar.wrapSelection(\'\', \'' + this._convert(src.join("\n")) + '\')';
this.win.location.href = str;
}
catch (e) {
alert(e);
}
},
_encode: function(str){
str = str.replace(/&/g, '&');
str = str.replace(/</g, '<');
str = str.replace(/>/g, '>');
str = str.replace(/</g, '<');
str = str.replace(/\t/g, ' ');
str = str.replace(/(\r\n|\n)/g, '\n');
return str;
},
_convert: function(str){
str = str.replace(/(['\\])/g, '\\$1');
str = str.replace(/\n/g, '\\n');
return str;
},
_create: function(tag){
return this.doc.createElement(tag);
},
_setStyle: function(ele, style){
var ss = style.split(';');
for(var i=0; i != ss.length; ++i) {
var maps = ss[i].split(':');
if(maps.length < 2) continue;
var key = maps[0];
var val = maps[1];
var _key = '';
for(var k=0; k != key.length; ++k) {
if (key.charAt(k) == '-') {
++k;
_key += key.charAt(k).toUpperCase();
} else {
_key += key.charAt(k);
}
}
_key = _key.replace(/(^\s+|\s+$)/, '');
val = val.replace(/(^\s+|\s+$)/, '');
ele.style[_key] = val;
}
}
}
window.addEventListener("DOMContentLoaded", function(e){
highlightbloggercode.onLoad(e);
}, false);
test-cpp
#include <iostream>
#include <vector>
using namespace std;
int foo(int i) {
return i + 1;
}
int bar(int i) {
return i * 10;
}
typedef int(FP) (int);
int proccess(FP *fp, int i) {
int r = (*fp)(i);
cout << r << endl;
return r;
}
// the basic one
class CompInt {
typedef int(*_FP)(int);
public:
CompInt(_FP f, _FP g) : fp(f), gp(g){}
int operator() (int _i) {
return (*fp)((*gp)(_i));
}
private:
_FP fp;
_FP gp;
};
// template but need to specify the FOUR parameter types
/*
template<class F, class G, class X, class Y> class Comp {
public:
Comp(F f0, G g0): f(f0), g(g0) {}
Y operator() (X x) const {
return f(g(x));
}
private:
F f;
G g;
};
*/
// the COMMON template function object
template<class X, class Y> class Comp_base {
public:
virtual Y operator() (X) const = 0;
virtual Comp_base* clone() const = 0;
virtual ~Comp_base() {}
};
template<class F, class G, class X, class Y> class CompCommon: public Comp_base<X, Y> {
public:
CompCommon(F f0, G g0): f(f0), g(g0) { }
Y operator() (X x) const {
return f(g(x));
}
Comp_base<X, Y>* clone() const {
return new CompCommon(*this);
}
private:
F f;
G g;
};
template<class X, class Y> class Composition {
public:
template<class F, class G> Composition(F, G);
Composition(const Composition&);
Composition& operator = (const Composition&);
~Composition();
Y operator() (X) const;
private:
Comp_base<X, Y>* p;
};
template<class X, class Y>
template<class F, class G>
Composition<X, Y>::Composition(F f, G g) : p(new CompCommon<F, G, X, Y>(f, g)) {};
template<class X, class Y>
Composition<X, Y>::~Composition() {
delete p;
}
template<class X, class Y>
Composition<X, Y>::Composition(const Composition& c) : p(c.p->clone()) { }
template<class X, class Y>
Composition<X, Y>& Composition<X, Y>::operator = (const Composition& c) {
if(this != &c) {
delete p;
p = c.p->clone();
}
return *this;
}
template<class X, class Y>
Y Composition<X, Y>::operator ()(X x) const {
return (*p)(x);
}
int main() {
// proccess(bar, proccess(foo, 1));
cout << CompInt(foo, bar)(10) << endl;
/*
Comp<int (*)(int), int(*)(int), int, int> fg(foo, bar);
cout << fg(1) << endl;
*/
Composition<int, int> fg2(foo, bar);
cout << fg2(1) << endl;
return 0;
}
firefox extension for blogger, quick paste code to your post
OK, I'm a little lazy. It take my whole afternoon for this tool, only 160 line codes. Because I forget how to execute the js code on a web page via extension. At last I found the solution in Javascript Shell , it change the location.href = 'javascript:...'; maybe I did this before, but I don't know whether it's a good idea.
Maybe you know google blogger doesn't support code highlight, thanks for pretty print, we can post our beautiful code (how to use see here plz), but it's a little troublesome you need to modify the html code, and add to surrond it, the nightmare is you cannot post html code (there is another tool for u to hightlight your html code, see ASH).
This small tool add a button "Code" in the normal mode, you can paste code in your posts conveniently.
A little more work should be done: user auto customize the code type they frequently use.
Maybe the window for us to paste code could be look better.
bugs I haven't found.
now, I don't know how to share this tool...
Maybe you know google blogger doesn't support code highlight, thanks for pretty print, we can post our beautiful code (how to use see here plz), but it's a little troublesome you need to modify the html code, and add
This small tool add a button "Code" in the normal mode, you can paste code in your posts conveniently.
A little more work should be done: user auto customize the code type they frequently use.
Maybe the window for us to paste code could be look better.
bugs I haven't found.
now, I don't know how to share this tool...
var highlightbloggercode = {
onLoad: function(event){
this.initialized = true;
var doc = event.originalTarget;
if (!doc || doc == null || doc.location == null)
return;
var href = doc.location.href;
var reg = /^http:\/\/www\.blogger\.com\/post-(create|edit)\.g\?blogID=/i;
// reg = /^http:\/\/127\.0\.0\.1/i;
if (href && href.match(reg)) {
// alert(href);
// doc.location.href = 'javascript:bar()';
// return ;
if(!window._a) window._a = [];
window._a.push(event);
this.win = window.content.window;
this.doc = window.content.document;
var _this = this;
setTimeout(function() {
new _this.AddCode(window.content, window.content.document);
}, 1000);
}
},
AddCode: function(win, doc) {
this.win = win;
this.doc = doc;
this.btn = null;
this.btnId = '_height_code_btn';
this._codeDiv = null;
this.langs = ['*', 'cpp', 'js', 'html'];
this.addBtn();
}
};
highlightbloggercode.AddCode.prototype = {
addBtn: function(){
try {
this.btn = this.doc.getElementById(this.btnId);
if (!this.btn) {
var input = this._create('input');
input.type = 'button';
input.id = this.btnId;
input.value = "Code";
this.doc.getElementById('htmlbar_Buttons').appendChild(input);
this.btn = input;
var _this = this;
var handler = function(){
_this._doAddCode();
}
this.btn.addEventListener('click', handler, false);
}
} catch(e) {
alert(e);
}
},
_doAddCode: function() {
try {
var div = this._create('div');
div.style.position = 'fixed';
div.style.top = '100px';
div.style.left = '100px';
div.style.zIndex = 999;
div.style.width = '500px';
div.style.height = '300px';
div.style.padding = '10px';
div.style.border = '2px solid green';
div.style.background = '#f0f0f0';
// textarea
var textarea = this._create('textarea');
textarea.style.width = '480px';
textarea.style.height = '240px';
div.appendChild(textarea);
// paste code button
var input = this._create('input');
input.type = 'button';
input.value = 'OK';
div.appendChild(input);
var _this = this;
var handler = function(){
_this._doPasteCode();
}
input.addEventListener('click', handler, false);
// options for code type
var select = this._create('select');
for (var i = 0; i != this.langs.length; ++i) {
var opt = this._create('option');
opt.value = opt.text = this.langs[i];
select.appendChild(opt);
}
div.appendChild(select);
// close button
input = this._create('input');
input.type = 'button';
input.value = 'close';
div.appendChild(input);
handler = function() {
_this._codeDiv.parentNode.removeChild(_this._codeDiv);
}
input.addEventListener('click', handler, false);
this.doc.getElementsByTagName('body')[0].appendChild(div);
this._codeDiv = div;
}catch(e) {
alert(e);
}
},
_doPasteCode: function() {
try {
var code = this._codeDiv.getElementsByTagName('textarea')[0].value;
var type = this._codeDiv.getElementsByTagName('select')[0].value;
this._codeDiv.parentNode.removeChild(this._codeDiv);
this._pasteCode(code, type);
}catch(e) {
alert(e);
}
},
_pasteCode: function(code, type) {
try {
var src = ['<code class="prettyprint lang-' + type + '">', this._encode(code), '</code>'];
var str = 'javascript:Textbar.wrapSelection(\'\', \'' + this._convert(src.join("\n")) + '\')';
this.win.location.href = str;
}catch(e) {
alert(e);
}
},
_encode: function(str) {
str = str.replace(/&/g,'&');
str = str.replace(/</g,'<');
str = str.replace(/>/g,'>');
str = str.replace(/</g,'<');
str = str.replace(/\t/g, ' ');
str = str.replace(/(\r\n|\n)/g, '\n');
return str;
},
_convert: function(str) {
str = str.replace(/(['\\])/g, '\\$1');
str = str.replace(/\n/g, '\\n');
return str;
},
_create: function(tag) {
return this.doc.createElement(tag);
}
}
//DOMContentLoaded
window.addEventListener("DOMContentLoaded", function(evt){
try {
highlightbloggercode.onLoad(evt);
}catch (e) {
alert(e);
}
}, false);
Test html code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
textarea {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<textarea id="src"></textarea>
<textarea id="desc"></textarea>
<button onclick='s()'>C</button>
<script type="text/javascript">
function c(str) {
return str.replace(/(['\\])/g, '\\$1');
}
function s() {
document.getElementById('desc').value = c(document.getElementById('src').value);
}
</script>
</body>
</html>
Monday, May 11, 2009
ie7 rtl scrollbar bug: auto scroll to the right side.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#outer {
width: 200px;
height: 60px;
border: 1px solid red;
overflow: auto;
} #inner {
width: 1000px;
height: 20px;
background: green;
}
</style>
<script type="text/javascript">
function ch(){
var inner = document.getElementById('inner');
var outer = document.getElementById('outer');
// inner.style.backgroundColor = 'rgb(' + (gint(100) + 155) + ',' + (gint(100) + 155) + ',' + (gint(100) + 155) + ')';
outer.className = 'd' + new Date().getTime();
// alert(outer.scrollLeft);
}
function gint(i){
return parseInt(Math.random() * i);
}
</script>
</head>
<body dir="rtl">
<div id="outer">
<div id="inner" onmousedown="ch();">
Hello world!
</div>
</div>
</body>
</html>
Monday, May 4, 2009
construct array by nodefault class
Just a test for pretty.js :)
#include
#include
using namespace std;
class NoDefault {
friend ostream& operator << (ostream& os, const NoDefault& o);
private:
static unsigned _id;
unsigned id;
unsigned pid;
public:
NoDefault(char ch){
id = ++_id;
pid = 0;
cout << "NoDefault(char): " << id << endl;
}
NoDefault(const NoDefault& o) {
id = ++_id;
pid = o.id;
cout << "NoDefault(const NoDefault&): " << id << " by pid: " << o.id << endl;
}
};
unsigned NoDefault::_id = 0;
ostream& operator << (ostream& os, const NoDefault& o) {
os << "id: " << o.id << ";\tpid: " << o.pid;
return os;
}
int main() {
//! NoDefault o0; // error
NoDefault o1('1');
NoDefault o2(o1);
// cannot initialize array
//! NoDefault os0[10];
vector v0;
v0.push_back(o1);
cout << "vector<> v(n, c)" << endl;
//! vector v1(10);
vector v2(10, NoDefault('1'));
// malloc & new
//! NoDefault *op1 = new NoDefault[10];
// malloc space for 10 NoDefault objects, but not initialize it.
NoDefault *op2 = (NoDefault*)malloc(sizeof(NoDefault) * 10);
new(op2 + 1) NoDefault('c'); // initilize op2[1]
cout << op2[1] << endl;
cout << op2[0] << endl; // op2[0] is not initialized
return 0;
}
Subscribe to:
Posts (Atom)