Internet Explorer 6: Line-height / Replaced Element Bug

Internet Explorer 6: Line-height / Replaced Element Bug

Introduction
IE/Win continues to amaze us. This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.

View a live demo.
Strangely enough, this bug is triggered just by the simple presence of any replaced element: IMG, INPUT, TEXTAREA, SELECT and OBJECT.

Hacking Away
By carefully applying a top and bottom margin to the replaced element one can force the line-height to be about the same as intended. Unfortunately, this solution isn’t very universal and relies on a couple of simple requirements:

* The height of the replaced element needs to be known at all times.
* The height of all the replaced elements of the same type needs to be almost equal if you want to make use of the same CSS classes.

web.Frontend :: A fix to the IE6 line-height/replaced element bug :: April :: 2009

具体就是，如果在 replaced element 所在行有一个 hasLayout 的 non-replaced inline 元素，此问题即可解决。可以看一下直接修改自 PIE 那个 bug demo 的 fix Demo1 (view with IE6)。

* html input,* html img{
  zoom: expression(function(ele){
      ele.style.zoom = "1";
      var iefixer = document.createElement("b");
      iefixer.className="rlfix";
      ele.parentNode.insertBefore(iefixer,ele);
    }(this));
  }
.rlfix{zoom: 1;}

Replaced Elements

Conformance: requirements and recommendations

Replaced element
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example a blank HTML document).
User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user's bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.

Intrinsic dimensions
The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2.1 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed.

Speed up your JavaScrip

Speed up your JavaScript, Part 1 | NCZOnline
Speed up your JavaScript, Part 2 | NCZOnline
Speed up your JavaScript, Part 3 | NCZOnline
Speed up your JavaScript, Part 4 | NCZOnline

Blue Anvil Journal » Blog Archive » Experiments with floats: whats the best method of clearance?

Blue Anvil Journal » Blog Archive » Experiments with floats: whats the best method of clearance?

Conclusion

Overall, I think that the ‘clearfix’ pseudo method is the best method, currently, for clearing floats. The clear:both method is too bulky, the FnE method is just unnecessary, and the overflow:hidden method can get messy.

Therefore I have decided to use the “clearfix” pseudo class method in future projects, as it seems to balance browser support with ease of use and markup bulk, making it my favorite technique. Blue Anvil now uses this technique (instead of the overflow method I previously used).

PNG articles

Gradient Effect
32-bit PNG degradability in IE
Kevin A. Freitas, Web Developer (seattle php design web development consulting flash html css xhtml)

Now you need to save your graphic with just the right options to achieve the effect we're going for. Use the Export Preview option in the File menu. Set the Format to PNG 8 and choose Alpha Transparency from the pull-down toward the bottom. Adjust your color settings any way you like to get the best looking palletized image for your money. Notice that the palette for my image (at right) includes some colors with a little checkerboard over them. This represents colors that have at least some transparency to them and that won't show up in IE.

Windows Live Gadget Blog : Use GIF over PNG in your Gadgets

We have recently released a workaround for a bug in IE6 where image filters for PNG can cause a hang on the Live.com site. This IE bug is already fixed in IE7, but we still needed to workaround it to make sure the site works properly for IE6.
To understand the problem, here is an explanation from the IE team (thanks Peter Gurevich!):

* Each IE 6 window is a UI thread.
* The HTML page and any script you wrote for the page run in the UI thread. Therefore filters in your page or in script will download on the UI thread
* IE’s implementation of the AlphaImageLoader filter downloads images synchronously
* Synchronous loading of an image or successive images on the UI thread has the potential to hang the browser and adversely affect the user experience.

canvas Pixel-based manipulation: getImageData & putImageData

Pixel-based manipulation
The 2D Context API provides you with three methods that help you draw pixel-by-pixel: createImageData, getImageData, and putImageData.

Raw pixels are held in objects of type ImageData. Each object has three properties: width, height and data. The data property is of type CanvasPixelArray, holding a number of elements equal to width*height*4; this means that for every pixel you define the red, green, blue and alpha values of all the pixels, in the order you want them to appear (all the values range from 0 to 255, including alpha!). Pixels are ordered left to right, row by row, from top to bottom.

// Create an ImageData object.
var imgd = context.createImageData(50,50);
var pix = imgd.data;

// Loop over each pixel and set a transparent red.
for (var i = 0; n = pix.length, i < n; i += 4) {
  pix[i  ] = 255; // red channel
  pix[i+3] = 127; // alpha channel
}

// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0,0);

http://chunghe.googlecode.com/svn/trunk/project/canvas-image-manipulation/gray.htm

HSS

HSS - 未來式的 CSS
https://svn.motion-twin.com/hss/hss/Rules.nml

HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks.
Property Variables

var mycolor = #1111AA;
var myfont = "Trebuchet MS", Arial, sans-serif;

body {
    color : $mycolor;
    font : $myfont;
}

Block Variables

var nomargin = { margin : 0px; padding : 0px; }

pre {
    $nomargin;
    color : #FF0000;
}

Nested Blocks

.faq {
    color : #BC683C;
    .form {
        width : 100px;
        textarea {
            width : 100%;
            height : 80px;
        }
        .name {
            font-weight : bold;
        }
    }
    ul {
        margin-left : 20px;
        margin-bottom : 20px;
    }
}

Comments

p {
//  color : red;
    font-weight : bold;
/*  margin : 0px;
    padding : 0px; */    
}

HSS is compied by NEKO

The Neko Programming Language

Neko is a high-level dynamically typed programming language which can also be used as an embedded scripting language. It has been designed to provide a common runtime for several different languages. Neko is not only very easy to learn and use, but also has the flexibility of being able to extend the language with C libraries. You can even write generators from your own language to Neko and then use the Neko Runtime to compile, run, and access existing libraries.

If you need to add a scripting language to your application, Neko provides one of the best tradeoffs available between simplicity, extensibility and speed.

Neko allows the language designer to focus on design whilst reusing a fast and well constructed runtime, as well as existing libraries for accessing filesystem, network, databases, xml...

Aza’s Thoughts » Vote! How to Detect the Social Sites Your Visitors Use

Aza’s Thoughts » Vote! How to Detect the Social Sites Your Visitors Use - 藉由判斷 link 的顏色，知道使用者是否瀏覽過某個站。
SocialHistory.js - aza - Google Code

  function getStyle(el, scopeDoc,styleProp) {
    if (el.currentStyle)
      var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = scopeDoc.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
  }

DVCSAnalysis - support - Analysis of Git and Mercurial - Google Code

DVCSAnalysis - support - Analysis of Git and Mercurial - Google Code - google code 官方解釋為什麼採用 Mercurial 而不是 git，詳細的比較。

Distributed Version Control
In traditional version control systems, there is a central repository that maintains all history. Clients must interact with this repository to examine file history, look at other branches, or commit changes. Typically, clients have a local copy of the versions of files they are working on, but no local storage of previous versions or alternate branches.

Distributed Version Control Systems (DVCS) use a different structure. With DVCS, every user has their own local repository, complete with project history, branches, etc. Switching to an alternate branch, examining file history, and even committing changes are all local operations. Individual repositories can then exchange information via push and pull operations. A push transfers some local information to a remote repository, and a pull copies remote information to the local repository. Note that neither repository is necessarily "authoritative" with respect to the other. Both repositories may have some local history that the other does not have yet. One key feature of any DVCS system is to make it easy for repositories to unambiguously describe the history they have (and the history they are requesting). Both Git and Mercurial do this by using SHA1 hashes to identify data (files, trees, changesets, etc).

DVCS's provide a lot of flexibility in developer workflows. They can be used in a manner similar to traditional VCS's, with a central "authoritative" repository with which each developer synchronizes. For larger projects, it is also possible to have a hierarchy of server repositories, with maintainers for each repository accepting changes from downstream developers and then forwarding them upstream. DVCS's also allow developers to share work with each other directly. For example, two developers working on a new feature could work on a common branch and share work with each other independent of an "authoritative" server. Once their work was stable, it could then be pushed to a public repository for a larger audience.
Git Advantages
* Client Storage Management. Both Mercurial and Git allow users to selectively pull branches from other repositories. This provides an upfront mechanism for narrowing the amount of history stored locally. In addition, Git allows previously pulled branches to be discarded. Git also allows old revision data to be pruned from the local repository (while still keeping recent revision data on those branches). With Mercurial, if a branch is in the local repository, then all of its revisions (back to the very initial commit) must also be present, and there is no way to prune branches other than by creating a new repository and selectively pulling branches into it. There has been some work addressing this in Mercurial, but nothing official yet.

* Number of Parents. Git supports an unlimited number of parent revisions during a merge. Mercurial only allows two parents. In order to achieve an N-way merge in Mercurial, the user will have to perform N-1 two-way merges. Although in many cases this is also the preferred way to merge N parents regardless of DVCS, with Git the user can perform an N-way merge in one step if so desired.

* Rebasing. Git has a rebase command which allows you to take a local branch and change its branch point to a more recent revision. For example, if one is working on a new feature for a product, a local branch may have been started from the 1.0 release. If while still working on the feature the main product line has been updated to 1.1, it may be desirable to pull in the 1.0->1.1 changes onto the local feature branch and treat it as a branch from 1.1 instead of 1.0. In most other systems, this is done by merging the 1.1 changes onto the branch. Merging is the right thing to do from an SCM perspective, where the focus is on 'reproducibility of past states'. However, when the focus is 'authoring a clean software revision history', rebasing is sometimes a superior method. git-rebase allows you to make a previously non-linear history linear, keeping the history cleaner. To be fair, the same deltas are produced by simply merging every commit from the 1.0 version to the 1.1 version individually, and committing them individually. Rebasing is about safely doing this and then deleting the old 1.0 based versions so they don't clutter the tree.

Mercurial Advantages
* Learning Curve. Git has a steeper learning curve than Mercurial due to a number of factors. Git has more commands and options, the volume of which can be intimidating to new users. Mercurial's documentation tends to be more complete and easier for novices to read. Mercurial's terminology and commands are also a closer to Subversion and CVS, making it familiar to people migrating from those systems.

* Windows Support. Git has a strong Linux heritage, and the official way to run it under Windows is to use cygwin, which is far from ideal from the perspective of a Windows user. A MinGw based port of Git is gaining popularity, but Windows still remains a "second class citizen" in the world of Git. Based on limited testing, the MinGW port appeared to be completely functional, but a little sluggish. Operations that normally felt instantaneous on Linux or Mac OS X took several tenths of a second on Windows. Mercurial is Python based, and the official distribution runs cleanly under Windows (as well as Linux, Mac OS X, etc).

* Maintenance. Git requires periodic maintenance of repositories (i.e. git-gc), Mercurial does not require such maintenance. Note, however, that Mercurial is also a lot less sophisticated with respect to managing the clients disk space (see Client Storage Management above).

* History is Sacred. Git is extremely powerful, and will do almost anything you ask it to. Unfortunately, this also means that Git is perfectly happy to lose history. For example, git-push --force can result in revisions becoming lost in the remote repository. Mercurial's repository is structured more as an ever-growing collection of immutable objects. Although in some cases (such as rebase), rewriting history can be an advantage, it can also be dangerous and lead to unexpected results. It should be noted, however, that a custom Git server could be written to disallow the loss of data, so this advantage is minimal.

Summary
In terms of implementation effort, Mercurial has a clear advantage due to its efficient HTTP transport protocol.

In terms of features, Git is more powerful, but this tends to be offset by it being more complicated to use.

Pixastic: Documentation

Pixastic: Documentation

Below is a short explanation of how the Pixastic library works and how to use it. There are also pages with details on the individual actions and effects available through Pixastic. These pages also feature small live demos where you can see the library in action.
Blend
Blur
Blur Fast
Brightness/Contrast
Color Adjust
Color Histogram
Crop
Desaturate
Edge Detection
Edge Detection 2
Emboss
Flip Horizontally
Flip Vertically
Glow
Histogram
Hue/Saturation/Lightness
Invert
Laplace Edge Detection
LightenMosaic
Noise
Pointillize
Posterize
Remove Noise
Sepia
Sharpen
Solarize
Unsharp Mask

Building a Fast People-Finder for Flickr with YUI AutoComplete » Yahoo! User Interface Blog

Building a Fast People-Finder for Flickr with YUI AutoComplete » Yahoo! User Interface Blog

In the end, we found two transport/parse techniques that turned out to be extremely fast:
* we switched from using Ajax to instead fetching the data using a dynamically generated script tag. This means that the contact data was never treated as string, and was instead executed as soon as it was downloaded, just like any other JavaScript file.
* This approach looked perfect, except for one thing: in order for this JSON to be executed, we had to wrap it in a callback method. Since it’s executable code, any website in the world could use the same approach to download a Flickr member’s contact list. This was a deal breaker.
* The challenge would be to create a format that we could parse ourselves, using JavaScript’s String and RegExp methods, that would also match the speed of JSON executed natively. This would allow us to use Ajax again, but keep the data restricted to our domain.
* we restricted ourselves to a method that we knew to be fast: split(). We used control characters to delimit each contact, and a different control character to delimit the fields within each contact.
* We used control characters to delimit each contact, and a different control character to delimit the fields within each contact.

that.contacts = o.responseText.split("\\c");

for (var n = 0, len = that.contacts.length, contactSplit; n < len; n++) {

 contactSplit = that.contacts[n].split("\\a");

 that.contacts[n] = {};
 that.contacts[n].n = contactSplit[0];
 that.contacts[n].e = contactSplit[1];
 that.contacts[n].u = contactSplit[2];
 that.contacts[n].r = contactSplit[3];
 that.contacts[n].s = contactSplit[4];
 that.contacts[n].f = contactSplit[5];
 that.contacts[n].a = contactSplit[6];
 that.contacts[n].d = contactSplit[7];
 that.contacts[n].y = contactSplit[8];
}

* Regardless of how much we optimized our search method, we could never get results to return in less than 200ms (even for trivially small numbers of contacts). After a lot of profiling and hair pulling, we found the queryDelay setting. This is set to 200ms by default, and artificially delays every search in order to reduce UI flicker for quick typists. After setting that to 0, we found our search times improved dramatically.

YUI Library Examples: Container Family: Using the Overlay Manager to Manage Multiple Panels

YUI Library Examples: Container Family: Using the Overlay Manager to Manage Multiple Panels

YAHOO.example.container.manager = new YAHOO.widget.OverlayManager(); 
YAHOO.example.container.manager.register([YAHOO.example.container.panel1, 
                                          YAHOO.example.container.panel2, 
                                          YAHOO.example.container.panel3]); 

Each of the Panels is then automatically augmented with focus and blur methods and events. Each Panel will be automatically focused when clicked, but we can also wire up buttons to focus and blur our Panels. The OverlayManager also has showAll, hideAll, and blurAll methods:

彭師傅創意料理 (社子花市內)，我還會再去！ - Valence. Lovely Accident│ 美好的意外 - 無名小站

彭師傅創意料理 (社子花市內)，我還會再去！ - Valence. Lovely Accident│ 美好的意外 - 無名小站

店家資料
彭師傅創意料理
地址：台北市士林區延平北路7段18-2號
社子花卉廣場內，洲美快速道路旁
TEL: 02-28151498

Blocking Mozilla / Google Prefetch

Blocking Mozilla / Google Prefetch

How to you tell the browser to prefetch a url?
<link rel="prefetch" href="http://url.to.prefetch/" />

How can I detect prefetching on my web site?
When mozilla does a prefetch, it sends a header X-moz: prefetch, you can then block based on that header. Google recommends sending a 404 back to block the prefetch.

Some interesting things about prefetch:
* Query Strings are ignored - if you have a page with a query string it will not be prefetched.
* HTTP only - https pages are not prefetched by firefox. ftp and other protocols are also ignored
* Cross domain cookie problems - With prefetching enabled, you may end up with cookies and web pages in your web browser's cache from web sites that you did not click on since prefetching happens automatically when you view pages.
* A good way to preload images - prefetching is a good way to preload images, instead of using javascript to do this because your browser can do it while it is idle.

img src attribute

img src attribute
According to the HTML spec, the src attribute of an image is a URI. The URI spec says this:

4.2. Same-document References

A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document. Traversal of such a reference should not result in an additional retrieval action. However, if the URI reference occurs in a context that is always intended to result in a new request, as in the case of HTML's FORM element, then an empty URI reference represents the base URI of the current document and should be replaced by that URI when transformed into a request.

As far as I can tell, the implied base URI of a document is the document URI itself, and as images are all independent requests, it seems that Firefox has the "technically" correct behaviour in the case of a null src attribute, although IE is clearly doing the more desirable thing.

ie:
<img> 沒問提, <img src=""> 會 double request. <img src="about:blan">沒問題
ff3 似乎都沒有問題

yui-flot: Port of Flot to YUI

yui-flot: Port of Flot to YUI

Flot for YUI
============

YUI-Flot is a port of Flot to YUI.

To use it, include the following lines in your HTML:

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript"
src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/datasource/datasource
-min.js"></script>
<script type="text/javascript" src="yui.flot.js"></script>

The datasource component is optional, and is only required if one of your axes has its mode set to "time".

The documentation for YUI-Flot is maintained on the project wiki at
http://wiki.github.com/bluesmoon/yui-flot/api-documentation

tag: plot

ie6-upgrade-warning

ie6-upgrade-warning

The ie6-upgrade-warning is a little script (7.9kb) that displays a warning message politely informing the user to upgrade the browser to a newer version (links to newest IE, Firefox, Opera, Safari, Chrome are provided).

The webpage is still visible behind a transparent background, but access to it is prevented. The idea is to force users to upgrade from IE6 and avoid the website from a bad reputation that website is not rendering correctly in IE6.

Yahoo! Mobile - Blueprint Blog » Blog Archive » Test your site on different phones — without the phones!

Yahoo! Mobile - Blueprint Blog » Blog Archive » Test your site on different phones — without the phones!

If you don’t have hundreds of phones but want to see how your site appears on different clients, check out Firefox’s User Agent Switcher add-on. Blueprint uses a phone’s user agent (essentially a browser ID) to determine rendering. By supplying a different user agent with each HTTP request, you can tell Blueprint to treat your desktop browser like a specific hand-held device.

Ready to try it? Follow these steps:

1. Go to https://addons.mozilla.org/en-US/firefox/addon/59 and click “Add to Firefox”. After downloading the add-on, you will need to restart Firefox.
2. You'll find a new menu item called “User Agent Switcher” in Firefox's Tools menu. The Switcher comes with three predefined user agents for desktop browsers.
3. Identify user agents you want to test. Some manufacturers provide this information in their developer documentation, and sites like Wikipedia (http://en.wikipedia.org/wiki/Listofuseragentsformobilephones) can also be a good resource. To find your phone's user agent, open http://whatsmyuseragent.com in the phone's browser.
4. Add one or more user agents to the Switcher menu. In Firefox, choose Tools > User Agent Switcher > Options > Options… > User Agents > Add…; copy a user-agent string into the “User Agent” field and supply a descriptive name. Examples:

Douglas Crockford — The JavaScript Programming Language

Douglas Crockford — The JavaScript Programming Language
Unary operator can convert strings to numbers

>>> a = '5'
"5"
>>> alert(+a) // 5
>>> alert(typeof(+a)) // number

Object Augmentation
* New members can be added to any object by simple assignment
* There is no need to define a new class

Arrays
* Array inherits from Object.
* Indexes are converted to strings and used as names for retrieving values.

Functions
* Functions are first-class objects - A first-class object is one that can be dynamically created, destroyed or passed as an argument.
* Functions can be passed, returned, and stored just like any other value
* Functions inherit from Object and can store name/value pairs.

For example, in C and C++, it is not possible to create new functions at runtime (although see anonymous lambda bindings in the Boost library), whereas other kinds of objects can be created at runtime. As a result, functions in C are not first-class objects; instead, they are sometimes called second-class objects because they can still be manipulated in most of the above fashions (via function pointers). Similarly, strings are not first class objects in FORTRAN 66 because it is not possible to assign them to variables (unlike, for example, numbers).

Scope
* Static scoping or Lexical scoping - An inner function has access to the variables and parameters of functions that it is contained within.
* [OOJS] Lexical scope - In JavaScript, functions have lexical scope. This means that functions create their environment (scope) when they are defined, not when they are executed
* [rhino 8.8.1] Functions in JavaScript are lexically rather than dynamically scoped. This means that they run in the scope in which they are defined, not the scope from which they are executed. When a function is defined, the current scope chain is saved and becomes part of the internal state of the function. At the top level, the scope chain simply consists of the global object, and lexical scoping is not particularly relevant. When you define a nested function, however, the scope chain includes the containing function. This means that nested functions can access all of the arguments and local variables of the containing function.

supplant

String.prototype.supplant = function (o) { 
    return this.replace(/{([^{}]*)}/g, 
        function (a, b) {  
            var r = o[b];
            return typeof r === 'string' ? 
                r : a; 
        }
    ); 
}; 

Function function
new Function(parameters, body)
* The Function constructor takes zero or more parameter name strings, and a body string, and uses the JavaScript compiler to produce a function object.
* It should only be used to compile fresh source from a server.

 var object = function(o) {
  var F = function(){};
  F.prototype = o;
  return new F();
 }

 var foo = {'foo': 'foo'}
 var bar = object(foo);
 bar.info = 'hello world';
 bar.sayhello = function(){alert(this.info)}

Threads
* The language definition is neutral on threads
* Some language processors (like SpiderMonkey) provide thread support
* Threads are evil

Mobile01 永和的房價會很高嗎?

Mobile01 永和的房價會很高嗎?

永和公寓18-22(一樓除外) 90%超過20年
大樓10年左右 每坪22-25萬
沒有30這麼貴
30只有幾棟這幾年蓋好的...
ex.竹林路三輝X保 仁愛路新建案 永利路兩個新社區
中正路 中山路 永貞路 永和路 一帶10年大樓都沒擬想像那貴
仲介開價打八折..大概跟市價差不多...不過也有些比較貼近市價打9折...
看運氣啦...

依您的想法 不難....花點時間看仲介網站...多花點時間看房子...
再多學點招式殺價....應該買得到的....

10 Cool Things We’ll Be Able To Do Once IE6 Is Dead; And A Few We Can’t

10 Cool Things We’ll Be Able To Do Once IE6 Is Dead; And A Few We Can’t

Use child selectors
Make full use of 24-bit PNGs
Use attribute selectors
Use a wider range of display properties
Use min-width and max-width
Throw away 90% of CSS hacks (and 90% of the reasons for needing them!)
Add abbreviations that everyone can see
Trust z-index again
Save time and money
Enjoy ourselves again!

Beyond - 海闊天空 (Live KTV)

simple console alternatives for ie

if(typeof console == 'undefined') {
  console = {};
  console.log = console.dir = function() {
    window.status = YAHOO.lang.dump([].slice.call(arguments));
  }
}

iframe shim

Joe King : How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer.

Set up your IFRAME:

The src attribute is set with a useless JavaScript statement so that the IFRAME does not try to load a page (which you won't notice it doing, but it will be the cause for tripping the "Unsecured Items" message if you use it on a HTTPS page).

You can code your IFRAME as a static element on the page, or if you are going to be using more than one of them you may want to dynamically create them as required. The insertAdjacentHTML() method is good for that.

Now, all that is needed is to size the IFRAME according to the dimensions of your DIV, position it, place it one layer beneath the DIV in the zIndex order and make it "visible". The IFRAME's style object will allow you to do these tasks:

iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display

What about transparency?

If the DIV has transparent areas, you'll want those areas to punch through the IFRAME to the page background. There are two ways you can make an IFRAME transparent. The one that works for this situation is to set the style object's filter property:

iframe.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';

This in effect makes the entire IFRAME transparent, but it will still block out the windowed controls. The other technique, which uses the IFRAME element's ALLOWTRANSPARENCY attribute, actually pertains to making the interior page background of the IFRAME transparent, so that any content inside the IFRAME can have transparency. However, this mode changes the nature of the IFRAME and it no longer serves our purpose for blocking out windowed controls.

Mapedit

Mapedit

Mapedit is an imagemap-editing program. Mapedit adds client-side imagemaps to web pages, simply by opening the page, selecting the image, and drawing rectangles, polygons and other shapes. There is no easier way to make an imagemap, and zoom support allows easy detail work on large images.

javascript inheritance - Object Masquerading

JavaScript Inheritance - 拒绝空谈，拒绝复杂 - JavaEye技术网站
JavaScript is an object-oriented, weak typing checked and interpreted language.

A truly object-oriented language must support inheritance, the capability of a class to reuse (inherit) methods and properties from another class.

Object Masquerading

Object masquerading supports multiple inheritance, meaning that a class can inherit from multiple superclasses.

A constructor assigns all properties and methods (with the Constructor Paradigm of class declaration) using the this keyword. Because a constructor is just a function, you can make the constructor of ClassA into a method of ClassB and call it. ClassB receives the properties and methods defined in ClassA’s constructor.

       function ClassA(color){
                   this.color = color;
                   this.sayColor = function(){
                            alert(this.color);
                   };
         }

         function ClassB(color, name){
                   this.newMethod = ClassA;
                   this.newMethod(color);
                   delete this.newMethod;
                   this.name = name;
                   this.sayName = function(){
                            alert(this.name);
                   };
         }
         var s = new ClassB("red","nice");
         s.sayColor();
         s.sayName();

ClassC can masquerade as ClassA by adding ClassA’s constructor. ClassC can also masquerade as ClassB by adding ClassB’s constructor. In a word, you can implement multiple inheritance by Object Masquerading.

JavaScript provides 2 methods for object masquerading: call () and apply (). Object masquerading is not intended.

Prototype Chaining

The form of inheritance actually intended for use in JavaScript is prototype chaining. Any object has a property named prototype. You can declare ClassA’s prototype is ClassB. Then ClassB’s all properties and methods are added into ClassA’s all instances. The prototype chaning has no supports for multiple inheritance.

Make sure your constructor has no parameters.

         function ClassA(){
         }
         ClassA.prototype.color = "";

         ClassA.prototype.sayColor = function(){
                   alert(this.color);
         }
         function ClassB(){}
         ClassB.prototype = new ClassA();
         ClassB.prototype.name = "";
         ClassB.prototype.sayName = function(){
                   alert(this.name);
         }
var a = new ClassA();
var b = new ClassB();
a.color = "red";
b.color = "black";
b.name = "nice";
a.sayColor();
b.sayColor();
b.sayName();

Hybrid Method
Object masquerading is not intended, and prototype chaining loses the ability of constructor with parameters. To solve this problem, you can use both technologies.

function ClassA(color){
         this.color = color;
}
ClassA.prototype.sayColor = function(){
         alert(this.color);
}
function ClassB(color, name){
         ClassA.call(this, color);
         this.name = name;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function(){
         alert(this.name);
}
var a = new ClassA("red");
var b = new ClassB("black","nice");
a.sayColor();
b.sayColor();
b.sayName();

Peter's Blog - Archives

Peter's Blog - Archives

JavaScript Minifier that doesn't break code (in Perl)
JavaScript Template Libraries

<script language="javascript">
    var data = {people:[{first:'Fred', last:'Flintstone'},
                        {first:'Barney', last:'Rubble'}]};
</script>
The templates that convert this data into bits of HTML are commonly stored in hidden elements in the page.

<textarea id="people_jst" style="display:none;">
  {for p in people}
    <li>{p.first} {p.last}</li>
  {/for}
</textarea>

<script language="javascript">
    var result = TrimPath.processDOMTemplate("people_jst", data);
    document.getElementById('list').innerHTML = result;
</script>

"JavaScript: The Good Parts", built-in object augmentation and namespacing
Server-Side JavaScript with Rhino and Jetty
Front-End Architecture Case Study: Blog Article Composition User Interface
JavaScript Widgets Without "this"
JavaScript Namespacing
http://peter.michaux.ca/articles/front-end-architecture-case-study-blog-article-composition-user-interface
A Bright Future for Standardized Server-Side JavaScript

Javascript inheritance performance

KevLinDev - Tutorials - JavaScript

KevLinDev.extend = function(subClass, baseClass) {
   function inheritance() {}
   inheritance.prototype = baseClass.prototype;

   subClass.prototype = new inheritance();
   subClass.prototype.constructor = subClass;
   subClass.baseConstructor = baseClass;
   subClass.superClass = baseClass.prototype;
}

function Employee(first, last, id) {
    // initialize properties here
}

KevLinDev.extend(Employee, Person);

We begin by creating a convenience function to setup our inheritance chain. We need the subClass.prototype property to be equivalent to baseClass.prototype. (Remember, when we call "new" that prototype property will be copied to the new instance's private prototype, thus hooking up its inheritance chain.) However, we can't allow both the subClass.prototype and the baseClass.prototype to point to the same prototype object. That would mean adding methods to one class would add it to the other. That's fine if we add to the base class, but the base class would also "inherit" methods we added to the subClass. We need a way disconnect the two prototypes while still allowing the subClass to refer to the baseClass. Once again, the prototype chain comes to the rescue.

Class-Based Inheritance in JavaScript
JavaScript OOP: encapsulation, durable objects, parasitic inheritance and the decorator pattern
Web Reflection: On JavaScript Inheritance Performance and Libraries Troubles
http://www.sitepoint.com/article/javascript-objects/
JavaScript Inheritance Performance « Broofa.com
Ajaxian » JavaScript Inheritance Performance

JSON Schema

JSON Schema Proposal

JSON Schema is a specification for a JSON-based format for defining the structure of JSON data. JSON Schema provides a contract for what JSON data is required for a given application and how it can be modified, much like what XML Schema provides for XML. JSON Schema is intended to provide validation, documentation, and interaction control of JSON data. JSON Schema is based on the concepts from XML Schema, RelaxNG, and Kwalify, but is intended to be JSON-based, so that JSON data in the form of a schema can be used to validate JSON data, the same serialization/deserialization tools can be used for the schema and data, and it can be self descriptive.

SitePen Blog » JSON Schema in Dojo

dojo.require("dojox.json.schema");
schema = {
  type:"object",
  properties:{
     name:{type:"string"},
     age:{type:"number"}
  }
};
instance = {
  name:"Kris",
  age:31
};
results = dojox.json.schema.validate(instance, schema);

getAttribute('href', 2)

getAttribute href bug - used to get the attribute rather than derived absolute URL

<a href="../development/test1.html">test page</a>
The browser will look at the pages current URL and derive an absolute URL for the link.

http://www.glenn.jones.net/development/test1.html

This is the root of the problem, some browsers return the text of the attribute and others return the derived absolute URL. The results also differ by the method you use to retrieve the href attribute. There are three common ways to access an attribute:

linkobj.href;
linkobj[‘href’];
linkobj.getAttribute(‘href’);

The linkobj.href and linkobj[‘href’]; methods of accessing the attribute consistently return the derived absolute URL.

Microsoft has tried to address this by problem adding a second parameter to the getAttribute method. The second parameter can be set to 0,1 or 2. If the parameter is set to 2 the method returns the attribute text. Any other setting will return the derived absolute URL.

linkobj.getAttribute(‘href’);
linkobj.getAttribute(‘href’,2);

Mega Drop-Down Navigation Menus Work Well

Mega Drop-Down Navigation Menus Work Well

As the following screenshots show, mega drop-downs have the following characteristics:
* Big, two-dimensional panels divided into groups of navigation options
* Navigation choices structured through layout, typography, and (sometimes) icons
* Everything visible at once — no scrolling
* Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown).

The Food Network's mega drop-down has a close button (the "x" in the upper right corner), but this isn't necessary. Mega drop-downs are inherently temporary and go away on their own when users move the pointer to another top-level option or to a "regular" part of the screen.

Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

Thus, the timing should be:
1. Wait 0.5 seconds.
2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

<li id="paper" style="z-index: 5;" class="active">
    <a href="/ae/control/brands">Paper</a>
    <a href="/ae/control/brands" class="tab"/>
    <div id="papertab" class="callout">
     <div class="bg"/>
     <div class="aCol">
 <h1>Paper & More</h1>
 <ul>
  <li class="paper"><a href="/ae/control/product/~category_id=PAPER/~product_id=8_5_X_11_PAPER">8 1/2 x 11 Paper</a></li>
  <li class="cardstock"><a href="/ae/control/product/~category_id=CARDSTOCK/~product_id=8_5_X_11_CARDSTOCK">8 1/2 x 11 Cardstock</a></li>
  <li class="notecards"><a href="/ae/control/category/~category_id=NOTECARDS">Notecards</a></li>
  <li class="folders"><a href="/ae/control/product/~category_id=FOLDERS/~product_id=9_BY_12_FOLDER">Presentation Folders</a></li>
 </ul>
</div>
<div class="bCol">
 <h1>Ways to Shop</h1>
 <ul>
  <li><a href="/ae/control/shopByColor">Shop by Color</a></li>
  <li><a href="/ae/control/shopByCollection">Shop by Collection</a></li>
 </ul>
</div>
<div class="cCol">
 <h1>Shops</h1>
 <ul>
  <li><a href="/ae/control/holidayShop">The Holiday Shop</a></li>
  <li><a href="/ae/control/recycledShop">The Recycled Shop</a></li>
  <li><a href="/ae/control/brands">The Paper Mill Shop</a></li>
 </ul>
</div>

    </div>
   </li>

Usability 101: Introduction to Usability
Top Ten Mistakes in Web Design
Top-10 Application-Design Mistakes
10 Best Application UIs

Lightboxes do have downsides, however, and they shouldn't be used everywhere.

* A lightbox is a blunt instrument that hits users over the head and causes them to stop everything they're doing. Don't use them for low-priority items or background information.
* Talk about modal dialog boxes. A lightbox takes that concept to the extreme. (Even though it's theoretically possible to enable interaction with the dimmed parts of the screen, in practice this just isn't done because something that's dimmed should be inactive.)
* Users often have to refer to information on the background display to resolve the situation in the foreground dialog box. If the background is dimmed too much, such information can be hard to read.

Gecko reflow visulation

What is a reflow? « DougT’s Blog

First, he builds Mozilla so that the layout portions (nsIFrame::SetRect, nsIFrame::SetSize, nsIFrame;;SetPosition, PresShell::DoReflow, etc) are set to output to the log file.

He then gives an example of the log of each of the frame movements from Reflow:

    {"event": "MoveFrame", "frame": {"address": "0x04FE41A8", "type":
    "TextFrame", "content": {"address": "0x05014150", "type": "other"},
    "rect": {"x": 0, "y": 0, "w": 0, "h": 0}}},
    {"event": "MoveFrame", "frame": {"address": "0x04FE41A8", "type":
    "TextFrame", "content": {"address": "0x05014150", "type": "other"},
    "rect": {"x": 0, "y": 0, "w": 0, "h": 0}}},

Here is an example of dump from the termination of the tree structure.

    {"event": "FinishReflow", frame:
     {"address": "0x04FE3E28", "type": "ViewportFrame", "content": null,
    "children":[
         {"address": "0x04FE4000", "type": "ScrollFrame", "content":
    {"address": "0x04FD4858", "type": "element", "tagName": "HTML"},
    "children":[
             {"address": "0x04FE43EC", "type": "ScrollbarFrame",
    "content": {"address": "0x04FFEFF8", "type": "element", "tagName":
    "scrollbar"}, "children":[
                 {"address": "0x04FE4578", "type": "BoxFrame", "content":
    {"address": "0x04FFE0F8", "type": "element", "tagName":
    "xul:scrollbarbutton"} }
         ,
           {"address": "0x04FE47BC", "type": "sliderFrame", "content":
    {"address": "0x04FFE278", "type": "element", "tagName": "xul:slider"},
    "children":[
                     {"address": "0x05004E6C", "type": "BoxFrame",
    "content": {"address": "0x050030E8", "type": "element", "tagName":
    "xul:thumb"}, "children":[
                         {"address": "0x05004FDC", "type": "BoxFrame",
    "content": {"address": "0x050013F0", "type": "element", "tagName":
    "xul:gripper"} }
             ] }

He then makes the video animation (for Google Video he suggests Ruby+Ruby/SDL, for the video from Mozilla 24 he used C+++Direct3d.) As memory address is outputted to the log each frame can be distinct.

The behavior of each frame in chronological order is reproducible as the log has each frame’s memory. (For instance, in tracking the frame “address”:”0×04FE41A8″, you can reproduce that frame’s behavior chronologically.

XUL Profiler (by yoono) :: Modules pour Firefox

XUL Profiler (by yoono) :: Modules pour Firefox

You can use XUL Profiler for Firefox (https://addons.mozilla.org/fr/firefox/addon/9954) in order to track repaints and help you reduce them!

Here is an example on this simple test :
http://blog.techno-barje.fr/public/test-xulprofiler-paint.html
and the result generated by XUL profiler :
http://blog.techno-barje.fr/public/test-xulprofiler-paint-result.html

Browser Reflows & Repaints

Notes on HTML Reflow

All reflows have a reason, which is maintained in the reflow state object (and may mutate, as described below). The reflow reason controls how a frame reacts during a reflow, and is one of the following:
* Initial, for the very first time that the frame hierarchy is flowed. In this case, a frame knows that there is no residual state that can be used to simplify geometry computation.
* Incremental, when something in the frame tree changes; for example, when more content is read from the network, or some script manipulates the DOM. An incremental reflow is targeted at a single frame in the frame hierarchy. During an incremental reflow, a frame can assume that none of the constraints computed ``from above'' (for example, available width) have changed; instead, something ``within'' the frame has changed, which may have bottom-up impact to the frame hierarchy.
* Resize, when the containing boundary for the frame hierarchy changes. During a resize reflow, the frame can assume that none of the frame's internal state (e.g., a text frame's text) has changed; instead, a top-down change in the layout constraints has occured.
* StyleChange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font size.
* Dirty, when a container frame has consolidated several individual Incremental reflows that have been targeted at its child frames.

Ajaxian » Browser Reflows & Repaints; How do they affect performance?
Stubbornella » Blog Archive » Reflows & Repaints: CSS Performance making your JavaScript slow?

Avoid tables for layout. As if you needed another reason to avoid them, tables often require multiple passes before the layout is completely established because they are one of the rare cases where elements can affect the display of other elements that came before them on the DOM. Imagine a cell at the end of the table with very wide content that causes the column to be completely resized. This is why tables are not rendered progressively in all browsers (thanks to Bill Scott for this tip) and yet another reason why they are a bad idea for layout. According to Mozilla, even minor changes will cause reflows of all other nodes in the table.

The biggest performance problem with reflows is accidentally causing an excessive number of them. This happens when you constantly change something and then query for geometry.

For example if you do:

element.style.width = ‘50px’;
var v = element.offsetWidth;
element.style.width = ‘55px’;
v = element.offsetWidth;

You just caused two reflows to happen, since asking for offsetWidth forced the element to reflow in order to answer you question (because it had a pending change to style).

This is the real performance bottleneck to be wary of. Browsers are smart about avoiding reflows when they can, but if you create code that forces a reflow in order to answer a question, then you can create severe performance bottlenecks.

In some cases, browsers reflow to answer the question even when they don’t need to. This is the case in WebKit with getComputedStyle for example (even if you ask for some style info that has nothing to do with geometry), so that’s something to watch out for in WebKit.

Basically a reflow/repaint isn’t that bad by itself, but your goal should be to minimize the # of them that occur.

set iframe content

http://chunghe.googlecode.com/svn/trunk/experiment/iframe.set.content.htm
set iframe content - 必須要用 open/write/close，不可以直接用 innerHTML
<iframe>hello world</iframe>
chrome/ie: fail, ff3: ok
<iframe src="data:text/html;charset=utf8,%3C!DOCTYPE ..."></iframe>
ie: fail, chrome/ff3:ok

if (this.browser.ie || this.browser.webkit || this.browser.opera || (navigator.userAgent.indexOf('Firefox/1.5') != -1)) {
 //Firefox 1.5 doesn't like setting designMode on an document created with a data url
 try {
  //Adobe AIR Code
  if (this.browser.air) {
   doc = this._getDoc().implementation.createHTMLDocument();
   var origDoc = this._getDoc();
   origDoc.open();
   origDoc.close();
   doc.open();
   doc.write(html);
   doc.close();
   var node = origDoc.importNode(doc.getElementsByTagName("html")[0], true);
   origDoc.replaceChild(node, origDoc.getElementsByTagName("html")[0]);
   origDoc.body._rteLoaded = true;
  } else {
   doc = this._getDoc();
   doc.open();
   doc.write(html);
   doc.close();
  }
 } catch (e) {
  //Safari will only be here if we are hidden
  check = false;
 }
} else {
 //This keeps Firefox 2 from writing the iframe to history preserving the back buttons functionality
 this.get('iframe').get('element').src = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
}