Showing posts with label js. Show all posts
Showing posts with label js. Show all posts

Monday, May 25, 2009

use (function(){})() to do the scope thing.


<!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>
Post by 享受分享——Maxwin's 时间： 11:09 AM 0 评论
label：

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.

<!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>
Post by 享受分享——Maxwin's 时间： 4:57 PM 0 评论
label： ,

Tuesday, May 12, 2009

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...

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,'&amp;');
str = str.replace(/</g,'&lt;');
str = str.replace(/>/g,'&gt;');
str = str.replace(/</g,'&lt;');
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);
Post by 享受分享——Maxwin's 时间： 2:54 PM 1 评论
label： , ,

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>
Post by 享受分享——Maxwin's 时间： 3:27 PM 0 评论
label： , ,
Subscribe to: Posts (Atom)