博客园_asp.net

The IE 'non-disappearing content' bug

2012-02-07T02:46:00Z

The bug

In Internet Explorer (IE) 6, 7 and 8 in 'Compatibility View' there is a bug when hiding content within a hidden container element. The content will remain visible, even though its 'display' property is 'none', as can be observed when the container is re-shown again.

Try it

Top left is a container element (red square) containing an image (rabbit in hat). Perform the steps below (Note: order matters!) to see the bug, when viewed in IE6, IE7 or IE8 in 'Compatibility View'.

Set both the container and the rabbit to position: 'absolute' or 'relative'.
Set the container to display: 'none'.
Set the rabbit to display: 'none'.
Set the container to display: 'block' again.
On IE6/7/8CompatView, the rabbit will still be visible, even though its display= 'none'! (as can be checked in IE's Web-developer toolbar, see screenshot below). Once more setting the rabbit to display= 'none' doesn't help, the rabbit remains visible.

So what!? Isn't this a quite obscure situation?

The bug may be encountered in real life in a situation as shown top right (actually, this was how I ran in to it). There is a set of tabbed pages. Each tabbed page keeps its content in a separate container <div>. If tab 1 is selected, container <div 1> is shown (hence, the other container <div>s are hidden), if tab 2 is selected, container <div 2> is shown, etc.

Initially tab 1 is selected. Hence, tab's 2 container <div> is hidden (display='none'). Now for the problem: inside tab's 2 container <div> happens to be a stack of images. Some of these images should be initially hidden. In this example it's a series of images of a model, supposedly at different ages. Initially, all images but the '10 year old'-one are hidden, so when you switch to Tab 2 for the first time, you should only see the '10 year old' picture.

This is were IE's bug shows up: as container <div 2> was set to display= 'none', the images contained within this <div> were 'immune' for the property 'display= none' imposed on them, and didn't disappear. Hence, all images of the stack will be seen when tab 2 is chosen...

One may 'break the IE spell' by clicking the (+) button seven times. Basically, this resets all the 'immunized' images to 'display= block' (Work-around nr 1 mentioned below). Thereafter, the hiding of the images will work correctly again.

Details

The bug occurs in the following situation:

In IE6, IE7 and IE8 in 'Compatibility View'. Doesn't occur in IE8 in default view, Firefox3, Opera9, Safari3 on Windows, Safari 3 on Mac, Chrome1.
Both the container and the content need to be positioned non-static, so: absolute or relative.
The container must be hidden ('display= 'none') before the content is hidden. If the order of hiding is the other way around, the bug does not occur.
The bug only occurs if the container is hidden after the page has fully loaded.

Work arounds

One may 'release the spell' in a number of ways:

temporarily switch the content's (=rabbit's) display property to 'block' and back to 'none'.
temporarily switch the content's (=rabbit's) position property from 'relative' to 'absolute' and back, or vice versa.
temporarily switch the content's (=rabbit's) visibility property to 'hidden' and back. (But this only works if the content (=rabbit) is positioned absolutely! The wonderful world of IE...)

One may also 'overrule' the incorrectly displayed content by:

additionally setting the content's (=rabbit's) 'visibility' property to 'hidden'. Courtesy to: Ricardo Tomasi, who brought up this fix in the jQuery discussion group where this issue was first discussed. This workaround however has the drawback of having two properties ('display' and 'visibility') simultaneously hiding the content. To re-show the content, both properties will have to be reset.

This issue was first discussed in: http://groups.google.com/group/jquery-en/browse_thread/thread/429f63dcb679da23#.

本文链接

10个强大的Javascript表单验证插件推荐

2011-12-28T07:17:00Z

创建一个JavaScript表单验证插件，可以说是一个繁琐的过程，涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手，也应该是善假于外物的。本文介绍了10个不错的JavaScript表单验证插件，使用它们完全可以节省你的时间！希望你喜欢。

1. validate.js

Validate.js是一个非常不错的JavaScript表单验证库，源于CodeIgniter API。该库相当轻巧（不到1KB），不要求任何JavaScript框架，可以在所有主流浏览器中运行（包括IE 6）。

2. Zebra Form

Zebra_Form是一个免费的PHP库，它能够很好地处理表单验证。你只需使用少量的PHP代码即可设计一个安全、别致的表单。Zebra_Form在前端集成了jQuery，用以显示警告及错误提示。

3. jFormer

jFormer是一个基于jQuery的表单框架，允许你生成漂亮、兼容标准的表单。功能包括：客户端验证；服务器端验证；Ajax提交；可通过CSS定制外观；验证码支持；通用表单模板等。

4. jQuery.validVal

jQuery.validVal插件旨在简化表单验证功能。此插件可用于任意的HTML表单（包括Ajax异步加载的），通过定义各种验证规则实现表单的验证功能。

5. Validity

Validity是一个强大灵活的jQuery表单框架，可实现客户端和服务器端同时验证。它只有9KB大小，能够执行各种简单或是复杂的验证，包括动态的或设定条件的验证。该插件还可以控制验证信息将如何显示，使其与网站的外观/风格相适应。

6. ValidForm Builder

ValidForm Buider是一个简单的、使用XHTML 1.0和CSS的Web表单生成工具。它是一个开源的PHP和JavaScript（jQuery）库，非常不错，可快速安全地制作出专业的Web验证表单。

7. Ketchup

Ketchup是一个易于定制（从外观至功能）的jQuery表单插件，可用于客户端对用户表单进行验证。

8. Validatious

Validatous是一个易于使用的Unobtrusive JavaScript表单验证库，不依赖于任何JS框架。内置数值、e-mail、URL、最大/最小字符数验证等功能。

9. Form Validator

功能广泛的表单验证方案，适用于任何表单。验证失败时将弹出浮动错误提示。

10. VanadiumJS

非常直观而强大的客户端验证插件。

本文链接

使用javascript检测客户端是否是mobile的类型，如果是就跳转到另外一个页面

2011-03-09T05:01:00Z

function Client() { }

Client.prototype.mobileClients = [

"midp",

"240x320",

"blackberry",

"netfront",

"nokia",

"panasonic",

"portalmmm",

"sharp",

"sie-",

"sonyericsson",

"symbian",

"windows ce",

"benq",

"mda",

"mot-",

"opera mini",

"philips",

"pocket pc",

"sagem",

"samsung",

"sda",

"sgh-",

"vodafone",

"xda",

"iphone",

"android",

"ipad"

];

Client.prototype.isMobileClient = function(userAgent) {

userAgent = userAgent.toLowerCase();

for (var i in this.mobileClients) {

if (userAgent.indexOf(this.mobileClients[i]) != -1) {

return true;

}

return false;

}

var client = new Client();

if (client.isMobileClient(navigator.userAgent)) {

window.location.href = "http://mobile.html";

}

</script>

本文链接

在javascript中对一个对象数组进行排序

2011-02-17T09:11:00Z

function compare(p1, p2) {
    var n1 = p1.src;
    n1 = n1.substr(n1.lastIndexOf('/') + 1);
    var n2 = p2.src;
    n2 = n2.substr(n2.lastIndexOf('/') + 1);
    if (n1 < n2) return -1;
    if (n1 == n2) return 0;
    else return 1;
}

BTW:这个例子中photos是一个html image element的数组.

本文链接

Devenv /ResetSkipPkgs

2011-02-17T08:55:00Z

我的vs 2008从安装上就有一个问题：没有web designer。打开一个aspx页面，没有designer视图，只有source视图；并且source视图也和一般文本编辑器一样，没有任何tag标记和辅助编辑功能。重装几次，搞了一个早上还是没有解决。然后试了一下Devenv /ResetSkipPkgs命令，居然就好了......

查了一下Devenv /ResetSkipPkgs这个命令参数的说明：

Clears all options to skip loading added to VSPackages by users wishing to avoid loading problem VSPackages, then starts Visual Studio.

因此猜测是我的vs 2008有一些加载选项导致web designer不能加载，并且这些选项会保存在我的电脑上（估计是注册表），所以重装也没用。Devenv /ResetSkipPkgs可以清除这些选项。

本文链接

Invalid Viewstate error and how to fix it?

2009-12-30T04:25:00Z

We have been getting some questions regarding viewstate-related errors like “The viewstate is invalid for this page and might be corrupted”This error is usually caused by the asp worker pr...

在asp.net中如何管理cache

2009-12-18T02:58:00Z

介绍: 在我解释cache管理机制时，首先让我阐明下一个观念：IE下面的数据管理。每个人都会用不同的方法去解决如何在IE在管理数据。有的会提到用状态管理，有的提到的cache管理，这里我比较喜欢cache管理，因为本人比较喜“cache”这个词。但是状态管理和cache管理这两个在概念和意义上是不同的，下面就让我们来讨论下两都在各个方面的不同之处。虽然cache管理并不存...

用Javascript取得URL参数(Get URL parameters/query string using Javascript)

2009-11-27T02:13:00Z

在Asp.net后台代码中要取得URL参数非常简单，用Request.QueryString["paramName"]就可以了。有时候我想在Javascript里面也能得到URL参数，可是查了一下没有在Javascript内置的方法里面找到，于是自己写了个方法：function getQueryString( paramName ){ 　　paramName = paramName .replac...

用JavaScript对表格排序

2009-11-10T07:14:00Z

1.你真的懂JavaScript里面的Sort方法吗？ 2.你知道JavaScript中 localeCompare 方法的函数体吗？3.表格排序方法要哪些参数？　　JavaScript中的sort方法直接就提供了排序的功能，不需要我们自己写个循环一个个的判断。但其机制仍然是那样的，[代码]输出的结果为 gray,green,red;那如果为整数呢？[代码]如果你认为是 2，7，25 ；那么很...

使用 jQuery 简化 Ajax 开发

2009-11-03T07:37:00Z

jQuery 是一个JavaScript 库，它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习 jQuery 基本原理，探索其特性和功能，执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery...