JavaScript Command Line
JavaScript Command Line
Go Big
Bookmarklet heaven: 居然有這個，真不愧是bookmarklet heaven
9/29/2007
9/26/2007
dynamic scrolling of an oversized DIV
dynamic scrolling of an oversized DIV
int scrollLeft, scrollTop
The number of pixels that have scrolled off the left edge of the element or off the top edge of the element. These properties are useful only for elements with scrollbars, such as elements with the CSS overflow attribute set to auto. These properties are also defined on the <body> or <html> tag of the document (this is browser-dependent) and specify the amount of scrolling for the document as a whole. Note that these properties do not specify the amount of scrolling in an <iframe> tag. These are non-standard but well-supported properties.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>simple scroller</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="scroller_container" style="width:300px;border:2px solid #ccc;">
<div id="contents" style="height:100px; width:500px; overflow:auto;">
<img alt="image" src="myimage.gif" height="20" width="800" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nulla at augue quis wisi tempus tempor. Praesent in neque.
Aliquam rhoncus sapien a erat. Nunc venenatis sem ut ligula.
Vivamus tellus arcu, sollicitudin sit amet, rhoncus ut, viverra ut, lectus.
Donec dolor urna, ultricies nec, porttitor et, cursus sed, dui.
Curabitur turpis mi, ornare non, euismod id, volutpat quis, lorem.</p>
<p>Mauris egestas neque in mauris. Cras vitae massa eget augue eleifend tincidunt.
Nulla et leo ac erat mattis viverra. Nulla tincidunt eros eget massa. Maecenas et neque.
Quisque interdum. Mauris lacinia wisi sit amet eros. Maecenas sodales.
Pellentesque non justo sed enim scelerisque vestibulum. Sed fringilla commodo justo.
Integer justo. Phasellus nec odio nec ante posuere fringilla.
Sed adipiscing, lectus non euismod consequat, orci augue ornare velit, quis gravida velit massa quis leo.</p>
Text <a href="http://www.lipsum.com/">Lorem Ipsum</a>
</div>
</div>
<p>
<button type="button" onclick="document.getElementById('contents').scrollTop-=20;">↑</button>
<button type="button" onclick=" document.getElementById('contents').scrollTop+=20;">↓</button>
<button type="button" onclick="document.getElementById('contents').scrollLeft-=20;">←</button>
<button type="button" onclick="document.getElementById('contents').scrollLeft+=20;">→</button>
</p>
</body>
</html>
IE developer toolbar
Internet Explorer Developer Toolbar - 像是IE上面精簡版的 Web Developer, 重點項目是 DOM Inspector， 搭配 Web Accessibility Toolbar的 view generated source，可以減少在IE上開發的痛苦。
9/22/2007
css at IE can't do ...
How to Make Equal Columns in CSS
IE (including IE7) doesn't support the display:table and display:table-cell properties (although Mozilla and other browsers do)
除此之外IE6也不support min-width
to read
Web colors - Wikipedia, the free encyclopedia
Web design - Wikipedia, the free encyclopedia
Yahoo! Design Pattern Library
Relatively Absolute @ The Autistic Cuckoo
Free HTML Form Builder - Create Forms, Surveys and
Popular Resources
- 13 Online Generators for Web 2.0 Design
- 25 Rounded Corners Techniques with CSS
- 30 Free CSS Based Navigation Menus
- 38 Free Icon Checkpoints
- 16 Sortable Table Techniques
- 20 Popular CSS Online Tools and Generators
- 25 Popular Color Scheme and Palette Generators
- 20 Best Favicon Online Generators
- 25 Cool Portfolios with Minimalism Design
- 22 Code Snippets for Creating Decent Charts
- 30 Weblogs with Grid Based Design
- 10 Websites with Retro Design Approach
- CSS Liquid Layout Design
- 5 Popular CSS Speech Bubbles
- 18 Minimalist Design Wordpress Themes
1. Grids make eyes happy: how to use Grids by Jason Lynes
2. Grids: Order Out of Chaos by About.com
3. Cutting and sewing grid-based design: Part 1
Grid-based design: Part 2, Designing blog theme templates by Michael Angeles
4. Five simple steps to designing grid systems - Preface
Five simple steps to designing grid systems - Part 1
Five simple steps to designing grid systems - Part 2
Five simple steps to designing grid systems - Part 3
Five simple steps to designing grid systems - Part 4
Five simple steps to designing grid systems - Part 5 by Mark Boulton
9/20/2007
color plate
這邊來列出一些color tools:
- Eric Meyer - Color Blender - 可以取兩個顏色間不同漸層的顏色。也可以用來取同一色系的顏色。
- ColorPix - 一款免費的screen color picker，還有一堆color schemes可供選擇搭配，各種風格皆有，省下搭配顏色的煩惱。
- Firefox extension: colorzilla
9/18/2007
CSS Hacks & Issues
CSS Hacks & Issues - 這邊整理出一些常見的CSS Issues & hacks
- Transparent PNG’s in IE6 - IE6處理透明的PNG圖檔有問題，有另外寫好的模組：PNG Behavior* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
} - Applying a width to inline elementsIf you apply a width to an inline element it will only work inIE6. This is actually a fault of IE6 - inline elements shouldn't need to have a width assigned to them.
You can’t change the width of an inline element. A way around this is to change the element from inline to block.
span {
width: 150px;
display: block
}
Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well. - Centering a fixed width website - 這邊應該是講錯了，要讓IE/FF都置中的語法通常是這樣：<body style="text-align:center;">
<div id="wrapper" style="border: 1px solid #ccc; margin: 0 auto; width: 500px;">
sample text
</div>
</body>
standard的作法只要讓div有寬度，再讓左右兩邊的margin為auto，讓瀏覽器自行計算，就會置中。不過IE不吃這一套，要在外面那一層(在這是body)設為text-align:center，在裡面那層(wrapper)再把text-algin設回left，這當然不是text-align應該有的行為，這是用bug來解bug。 - Image replacement technique
用javascript來控制css的background-image
記下來下次不用查
document.getElementsByTagName('a')[0].style.backgroundImage = 'url("images/ok.gif")';
9/11/2007
HTTP Response Status Code
- success (HTTP/200, 204, 206)
- redirects (HTTP/300, 301, 302, 303, 307)
- not modified (HTTP/304)
- authentication demand (HTTP/401)
9/10/2007
Firefox底下出現"menuitem"
Mozilla Taiwan 討論區: Firefox底下出現"menuitem label="&stopAll.label;" - 最近遇到這個問題，firefox底部出現一條的bar顯示menuitem，看到的解法有三種
1. 有關download statue bar -> 我沒裝，所以不是這個問題
2. Java主控台的 瀏覽器的預設Java的 Mozilla系列，打勾取消 -> 無效
3. 正解
解決方式：
修正
C:\Program Files\Mozilla Firefox\extensions\{CAFEEFAC-0016-0000-0001-ABCDEFFEDCBA}\chrome.manifest
內容中的
locale javaconsole1.6.0_01 zh-TW chrome/locale/zh_TW/ffjcext/
改成
locale javaconsole1.6.0_01 zh-TW chrome/locale/zh-TW/ffjcext/
然後以安全模式開啟firefox
C:\Program Files\Mozilla Firefox\firefox.exe” -safe-mode
退出firefox，再以正常方式啟動firefox就可以了。
MTASC
Motion-Twin - MTASC is the first ActionScript 2 Open Source free compiler. 在這邊看到的，有Windows & Linux版本。範例：
mtasc src/classes/com/mammon/swfupload/*.as -swf SWFUpload.swf -version 8 -main -v -header 1:1:12:FFFFFF
tag: flash action script actionscript
Programming font: Monaco Font
Tsung's Blog | Programmer 專用最佳字型 - Monaco font
Cornelius' Blog: Monaco Font - 最近在survey寫程式用的字型，除了consolas, courier/courier new, Bitstream Vera Sans Mono, 還有這個Monaco font. download
9/04/2007
set name attribute in IE
今天遇到了一個很怪的bug，查到最後是一個動態產生的input沒有name的attribute，不論是用input.name = 'foo'; 或者 input.setAttribute('name', 'foo');都不會work，查了很久才發現這一篇文章，基本上算是個bug:
Setting the “name” attribute in Internet Explorer
The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.
function createNamedElement(type, name) {
var element = null;
// Try the IE way; this fails on standards-compliant browsers
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
}
if (!element || element.nodeName != type.toUpperCase()) {
// Non-IE browser; use canonical method to create named element
element = document.createElement(type);
element.name = name;
}
return element;
}
訂閱：
文章 (Atom)
