Entries RSS

10 Top CSS hacks

Robin CSS , , , Comments (0) Views(1,271)
2008 Aug 30
浏览器兼容性永远是前台人员的痛。据统计，超过40%的时间都花在了兼容性问题上。Microsoft的固执，让开发人员编写一套完美的CSS是那么的痛苦。知道一些CSS hacks总是好的……

垂直对齐

目前CSS难以实现的一项功能是旧式垂直居中。也许CSS3的到来可以解决这个问题，不过我相信在长期一段时间内IE是不可能支持CSS3的。目前有两种方法解决垂直对齐的方法。
第一种办法就是用一个DIV来做“垫底”，把装载内容的DIV推到水平的中央。下面的示例中，ID为wrap的DIV内为主要内容，ID为shim的DIV是“垫底”的……

Cross-browser issues are always nightmares to developers. Accroding to cencus, more than 40 percents of time comsumed is spent on compitablilty preblems. The ego of Microsoft has made it painful to compose a perfect CSS for all browers. Therefore, you better know some Css hacks.

Vertical align div

It’s hard to vertical align the DIV in the current CSS. CSS3 might solve proble, but CSS3 is a remote hope. There are two ways to make it.
The first one is to use a DIV as the supporter, pulling the content DIV to the vertical-center. As in the example, the DIV with ID wrap is main content, while the DIV with ID shim acts as Supporter.

Read More

jQuery imgDesc Plugin

Robin jQuery , Comments (8) Views(5,367)
2008 Aug 29

描述

在开发PageTalks的时候顺便写了一个给图片加注释说明的插件。当然由于PageTalks的整个脚本都是基于jQuery的，所以这个插件也就是基于jQuery的了。先看一个演示吧：

需求

  • jQuery 脚本库, 你需要自行到jQuery的官方站点下载该文件
  • imgDesc的脚本文件（废话……）
  • 一点点JS和XHMTL的动手能力

功能

该插件能够将IMG标签的Title属性自动当作图片说明,并放置到底部显示。如果IMG外面没有A标签，这个插件会将IMG包装成链接，并转移标签属性。插件目前支持如下选项，均为可选参数：

  • autohide 是否自动隐藏底部注释，如果选择”yes”则会隐藏注释，鼠标掠过时会渐现出来。默认是“yes”
  • text 自定义注释文本，默认状态是IMG标签的Title属性值

Description

This plugin is written with the develpment of PageTalks, accidently. As PageTalks is based on jQuery Libary, jQuery code is required. Let’s start with a demostration:

Requirements

  • jQuery Libary, just downlaod fromjQuery Offical Site
  • imgDesc script file（oops……）
  • a little knowledge on xhtml and js

Features

This plugin will automatically take title attribute in IMG tag as the description of the image. If IMG is not wrapped by a Anchor tag, the plugin will wrap it with one. This plugin currently support two parameters, all of which are optional.

  • autohide if the plugin should automatically hide the description and show it when mouseover. Default “yes”
  • text Customize the value of description. Default value is the title attribut of IMG tag

Read More

Let Thickbox conquers Flash

Robin jQuery , , , Comments (1) Views(861)
2008 Aug 29

大家都知道我们无所不能的Thickbox竟然不能支持Flash的载入。虽然将SWF文件当作iFrame内容直接用Anchor引用，可以在 IE下正常显示flash内容，可惜在FF下无用。在Thickbox还没有做出更新的时候，我们该怎么在Thickbox里面显示Flash呢？曾经有 人提出过改版的Thickbox， 可以他没有继续更新。

今天突发奇想，干脆写个PHP页面，然后当iFrame引用吧！

我这里示范一下用Thickbox打开FLV播放器并播放指定文件的例子吧。（其实这个ELFVision里已经得到了使用）
这里使用的JW FLV播放器支持N多的参数和外部脚本，我们只订制了它播放文件、长度、宽度和自动播放，这四个非常基本的参数。如下是默认状态下的播放器代码：

<embed src="http://www.jeroenwijering.com/embed/player.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="width=320&height=250&file=/upload/player.flv" width="320" height="250"></embed>

Read More

Enable Thickobx in Wordpress

Robin Wordpress, jQuery , , Comments (0) Views(713)
2008 Aug 29

众所周知，WP2.3以后的版本其中都内置了jQuery的库，而WP2.5已在后台用了Thickbox！那么我们为何不在前台利用Thickbox来改善站点的用户交互体验呢？

脚本在哪里？

既然已经内置了，那么这些东西都在哪呢？我们来查看管理页面的代码，会在HEAD部分发现如下两行：

<script type='text/javascript' src='http://www.elfvision.com/blog/wp-includes/js/jquery/jquery.js?ver=1.2.3'></script>
<script type='text/javascript' src='http://www.elfvision.com/blog/wp-includes/js/thickbox/thickbox.js?ver=3.1'></script>

以上就是我们调用Thickbox所需要的脚本。如果你想使用和后台一样风格的Thickbox，可以直接引用后台中Thickbox的定义：

<style type='text/css' media='all'>
@import 'http://www.elfvision.com/blog/wp-includes/js/thickbox/thickbox.css?1';
div#TB_title {
background-color: #222222;
color: #cfcfcf;
}
div#TB_title a, div#TB_title a:visited {
color: #cfcfcf;
}
</style>

Read More

Disable Image Resizing in Thickbox

Robin jQuery , , , Comments (4) Views(1,969)
2008 Aug 29
Thickbox对图片的处理相当相当智能，其中就包括图片的缩放，也就是当图片实际大小超过窗口大小的时候，脚本会自动把图片缩放到适当大小显 示，让图片不至于溢出。但这个带来一个比较麻烦的事情，由于是通过简单改变IMG标签的width和height属性达到的缩放会使图片产生许多粗糙边缘 以及细节的丢失。于是大家开始寻找废掉这个“智能”的方法……汗~

源头在哪里？

打开thickbox.js，大家不难发现，图片Resize的代码就是如下这段：

var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

很显然在这里就可以直接废掉它的机制，将以上代码替换为：

var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;

这样图片始终将以原始大小输出，如果浏览器没有特殊的自动缩放功能，那么图片将最终处于100%状态。

Thickbox is quite intelligent on handling the images, e.g, it aotomatically resizes the images if it’s too large for the thickbox containers. Unfortunately , this is often not the intent of our own…

Where is the root?

Simply open thickbox.js, it’s easy to find the resizing is driven by the code below: 

var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

If you just want to disble it for good, don’t hesitate to replace the code above with these: 

var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;

Finnaly thickbox displays the image in original size. Cheers!

Read More

An Easy Job

Robin Color, User Experience , Comments (0) Views(801)
2008 Aug 29

这几天刚想写几篇关于色彩的文章以表我的拙见，不了这几天在Blueidea上面看到了一篇非常好的同类文章，打消了再写这个文章的念头：网页效果图设计之色彩索引作者froglt从色彩倾向和暗示出发，结合实例分析了不同色彩在设计作品中的不同意义。（当然那个色标我怀疑是盗用的别人的资料就是……）对于艺术专业出生的人来说，这些知识可能在高中就知道了；而对于像我这样的业余爱好者来说，一份这样的资料有着很强的参考和教育价值。汗颜一下，我的素描还是很恶心，什么时候才能开始学色彩啊……

另外一篇是关于一个老生常谈的问题了——可用性。真的没什么好说的，原文基本把所有主流的可用性理论都进行了分析，对于用户体验的设计可谓是一种“纲领”性文章：30 Usability Issues To Be Aware Of小声告诉大家，中文翻译可以在Blueidea上找到……

Page 4 of 7« First...«23456»...Last »