For MSIE, the scrollHeight of a textarea is the real height of the content that you input just now including the paddings, while scrollHeight in Opera excludes the paddings.

But in Firefox and especially in Safari, the scrollHeight turns out a bit weirdly. The scrollHeight of a textarea in firefox will be larger than or equal to the css height of the textarea, even if you have little input.

Smart TextArea

When we post comments on others’ blogs or somewhere, there’re often too many lines so that we should drag the scrollbar up and down to check our input, making it much inconvenient for us.

So I wanna make a flexible textarea which can automatically adjust its own height with the content people input in, instead of showing a mechanical scrollbar.

Concepts:
Set the height of the textarea equal to the scrollHeight.
As the matter of Firefox and Safari, it doesn’t work when we want to reduce the height, so let’s have our idea fixed.

HTML:

1
2
3
4
5
6

<form>
	<div>
		<textarea name="comment" id="comment" rows="6" tabindex="4" cols="7">
		</textarea>
	</div>
</form>

We put a div out of the textarea, why?

To get the real height of the content, we have to set the textarea with no-height, so that we can get the desired value of scrollHeight.

jQuery way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

$( '#comment' ).keyup( function(){ setTextareaHeight(); } );
function setTextareaHeight(){
	if( !this._browser ){
		//get browser info.
		//decide whether padding should be taken into account
		this._browser = $.browser.msie || $.browser.safari;
		this._padding = setPreview._browser ?
			( parseInt( $( '#comment' ).css( 'padding-top' ) ) +
			parseInt( $( '#comment' ).css( 'padding-bottom' ) ) ) : 0;
	}
 
	var comHeight = $( '#comment' ).height();
 
	//100 is the minimun height we want.
	if( comHeight > 100 ){
		//This is important!
		//We fixed the height of the div,
		//so that the page will not be twinkling
		$( '#comment' ).parent().css('height', $( '#comment' ).height() + 'px' );
 
		//set the height to zero to get the real content height
		$( '#comment' ).height(0);
	}
 
	var comScrollHeight = $( '#comment' ).get(0).scrollHeight - this._padding;
 
	if ( comScrollHeight > 100 )
		$( '#comment' ).height(comScrollHeight);
	else if( comHeight > 100 )
		$( '#comment' ).height(100);
 
	$( '#comment' ).parent().css('height', 'auto');
}

Just try to type in my textarea below.

If you have a better solution, you might as well share with us, which will be awfully appreciated!

Tested with:
• Internet Explorer 6.0 – 8.0
• Firefox 3.0 – 3.5
• Safari 4.0
• Opera 9.64

Here‘s some drawings about ʍɟbʞɔnɟ. Made for fun, no offence. Take it easy.

ʍɟbʞɔnɟ (FoUoCoK GoFoW) – Twitter version:

ʍɟbʞɔnɟ – Gmail version:

So, you can take them away, for free.
Thanks for Aw’s anti-heX tools!

Nothing else…… (100000000000 words omitted)

Coralsea is My NEW WORK that I am recently working on, and also the name for my first brand-new wordpress theme I made for this summer or even loooonger. Summer is my favorite time of year as it always impresses us with bright colors, cool water, making it the most passionate season for me.

The heat of summer makes the most attractive and refreshing water of all four seasons of year, so I tried to work out this feeling on my web.

Features of Coralsea
• 2 columns of fixed width
• widget-ready — the sidebar is supporting widget(uncomplished)
• what’s coming — this theme is still under construction…UNDONE!

Creative Features
• Interesting Rss button — my PET feature of this new work
• CSS text shadow of post title
• all text links — even the category navigations are text links which are more friendly to search engines

Over night and night, I was turning upside and down without sleep, leaving uncountable wild ideas stirring my brain. There were all sorts of web layout surging like the tide water. I just could not keep myself from thinking about that.

I was inspired by many things, cool water in this hot summer, rolling globs of water on lotus leaves in the West Lake of Hangzhou, and diffusing paint, etc. I was also shocked by others’ designs. And not for a few days of my travel, there were already several schemes for my new theme on the whole.

But when it comes to the details, it will be another thing. We often use references to work something out. Sometimes, the more we think about other people’s works, the bigger obstacles they are impressively in front of you.

“Open your heart and let it go.” Said Hayao Miyazaki before he started Ponyo on the Cliff by the Sea (崖の上のポニョ, Gake no Ue no Ponyo).

Actually, we need to do so. First, put off all the rules, so we can break the rules.

还是没有找到觉得满意的矢量素材，只好狠下心全部自己做，字母上的贴图花了不少时间。图中的蜂鸟参考了一个博客的顶部图片，嘿嘿~

这张图，最后在Photoshop中几乎达到了笔记本硬件的极限，可怜的笔记本，内存占用量始终都保持在1.6G左右，使用滤镜或者保存的时候，CPU都是满负荷运转。

有意地尝试焦点的控制，让人的注意力集中在画面的中部。多少受到Nik Ainley和Nick La的影响。

点击这里查看大图，Click HERE to see the full version

Software： 3ds Max 9，Illustrator CS3，Photoshop CS3

—————————
PS：就这样了，接下来可以安心复习备考鸟~

这里，凯尔从Smashing Magazine的推荐博客中挑选出了15个在配色，布局上都很优秀的例子，并加上了自己对它们的评价，供大家鉴赏。

Adrian Pintilie —— 色彩斑斓的顶部，却并不显得花哨

Komodo Media —— 来自美国Montana州的设计师的博客，透明的边缘，很出色的滑动门导航栏。他的博客上还有不少CSS以及JS方面的文章和教程。

Ben Gillbanks —— 黄色与蓝色大胆的配比

BublesSOC —— 如果说这个设计很女生，那Bubs的确把这个效果营造出来了，另外，她用CSS做出了不少活泼轻快的鼠标相应效果。

Cult Foo —— 一看到这个博客，就想到73dpi上一个俄罗斯的购物网站的设计。很漂亮的顶部，另外值得学习的是它主体的配色。

Design Disease —— 柔和与动感的对比，形成一定的视觉冲击力。

Freelance Switch（Wordpress）—— 不错的配色，值得一提的是，平整的页面上立起的Subscribe按钮给人一种强烈的点击欲望。

Pedro Lamin（Wordpress）—— 干净明亮的设计，甚至干净得快要什么都没有了，看来这是纯表现流的 -。-

Larissa Meek（Wordpress）—— 不错的黑色风格

Markus Zeeh（Wordpress）—— 有趣的花色背景，栏目间的阴影形成很棒的层次感。你要说，背景的图案抢走了主题的热点了吧，也许这是设计师想要达到的效果吧。

Moddular（Wordpress）—— 大胆的配色，很强的视觉冲击力。感觉有些喧闹，但个性十足。

Split da diz —— 有趣的设计，个性的栏目结构

Simon Reynolds（Wordpress）—— 动感……超……人 -。-|||

Vikiworks（Wordpress）—— 大家很熟悉的来自北京的设计师，不多说了——刚才还在想要不要写上来的。

Web Revolutionary

由于小站的负载问题，这里也仅仅列出了１５个非黑白的，博客类的设计。什么，不够？可以去Smashing Magazine上欣赏更多的内容，不过这个网站很慢的说。另外个人推荐73dpi，大家可以在这里找到不少灵感。

最后，其实在中国，在自己的小博客圈子里都有很多不错的设计，如杂志类的，Dogorgod和Niuhuifei，还有个人门户类的老帕。
个人认为中文网页相比英文网页来说，设计难度更大，因为中文字体对大小的限制比较大；能够在网页上具有良好表现力，并且广泛普及的字体也寥寥无几。

PS：刚给RSS按钮戴上了个圣诞帽子~

话说几个朋友都舍弃PJBlog投靠WordPress了，而今天认识的sofish和果子两位博友，也是用WP的。

一直都觉得WP侧边栏上那个大大的RSS订阅图标很有趣。

既然要给侧边栏安置一个RSS订阅的图片，当然还是要和小站现在的风格保持一致，所以只能自己画了。

其实要画也不难，用圆角矩形画好轮廓的路径，用剪贴蒙板加上阴影和高亮，注意边缘的细节；使用天蓝和亮绿为主的颜色，加上背景的阴影，最后旋转一下——不一会就大功告成了。[拉风]

不过有个问题让人很郁闷，现在我用的防盗链似乎太生猛了，让Feedsky也没有办法显示本站的图片。小站会尽快修改的。

本站曾经（第三版）其他RSS订阅系列按钮：
圣诞版：

2008年汶川大地震祈福版：

欢迎大家订阅哦~~[羞赧]

Refresher，正如它所表达的意思，希望能让这个新的皮肤给自己的生活带来新的色彩。

换一个主题，换一种心情。魔兽世界的年代早已过去，一切已经不再停留在过去令人不堪回首的几年。人必须放下过去，停止对现实的逃避，走进鲜活的人生中来，着手自己的学习、生活和事业。

好久之前就这样构想着，不停地在脑海中想象着这样明亮的感觉。其实在画第二张反叛的鲁路修壁纸之前，所有的构思都已经完成——而画这张壁纸的目的，也就是为了如今大家看到的博客顶部的图片。

蓝天，白云，45° 地抬起头，呆呆地看个没完——那是我最喜欢做的事情之一。而如今的天空，万里无云的时候，也总是好像铺上了一层灰色的蒙板，给人些许的压抑——也许是城市污染的原因吧——大多时候，客观的原因更加的具有说服力。

但是，蓝天纯净清澈的印象仍然在脑海中不会散去，因此，它出现在我的壁纸中，出现在小博的顶端。相信这种清澈，这种明亮，会一直指引着自己，保持积极的心态和愉快的心情，去完成每一篇日志，去迈开奋斗的每一步。

同时，也希望给每一个到这里的朋友一个好的心情，希望大家能够喜欢！

趁着周末，花了一天加一下午，终于把这套新皮做好了，这又是用小岳同志的电脑当的服务器，谁让我电脑上的破Windows Home死也装不上IIS呢。

这次，更加注意了皮肤细节方面的处理，并且完美支持IE6、IE7、Firefox、Opera、Safari，并且又得到了不少CSS使用上的心得。
选择了自己最喜欢的颜色，天蓝，亮绿（CC女王头发的颜色）……

在文件大小上，也只有130kb，只有原来那套魔兽世界主题皮肤文件大小的一半不到~~

做了不少皮，但这张是迄今最满意的一张皮了，嘿嘿~~ 但是我更喜欢下一张~~ ：p

就这样啦，接下来——是休息时间~~~

PS：同时推出校内版本。

PS2：皮肤详细情况：

主题名称：Refresher

兼容的浏览器：IE6，IE7，Firefox，Opera，Safari（其他浏览器未测试）

分辨率：固定比例，要求最小分辨率1024×768，兼容更大的分辨率

皮肤大小：170KB，包括图标，CSS文档及顶部图片

说明：
目前该皮肤仅作为私用，不放出下载。
如果您使用本站皮肤素材，一般来说，本站不反对，但需在底部注明本站链接，谢谢合作。

造型很简单，自己喜欢这样简单的感觉，另外个人也觉得简单的构图可以适合更多方面的应用。

另外附上这个Logo的一个典型应用，名片：

话说自己还比较喜欢这个名片的设计——当初灵感忽现，2，3分钟画好的。

就这样了，不知道能不能被使用。

PS：最后还是没有被采用，我还得继续修炼啊……[很受伤]

包括JSPace的Logo还有产品发布页面的宣传图样。顺便宣传下，如上面所说，JSPace是基于JSP和Ajax的论坛系统。JAY这家伙，从开始说要动手做，到论坛形成个雏形，就用了几天的时间——不愧于Coding JAY的名号啊~~[偷笑]

我还是第一次这样大量的使用矢量做图，算作一种尝试。其实现在有意练习钢笔工具，是想哪天画几幅动漫玩玩，用路径更好的表现飘逸的发丝，嘿嘿。

就这样了，不说了，JAY快点上线收图~~~[拉风]