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)

It has been a whole year, right, since my last painting. This above is a doujin wallpaper of Kanzaki Kaori, a role of the TV amine, Toaru Majutsu no Index.
Hope you like it!

Kanzaki is an exciting girl, with mahou(magic) name “Salvare000″ which means give a hand to those who will not be rescued.

To see higher resolution(1280×800) of the wallpaper, just click on the image above. Or just open in new tab(window).

IF the image can’t show up, CLICK HERE TO DOWNLOAD this wallpaper.
如果无法显示大图，点击这里本地下载本壁纸。

Here’s the progress:

Details:
• Tools: Wacom Intuos3
• Software: Photoshop CS3 mainly, and some water wave in Painter
• Duration: 50+ hours
• Original Size: 3360 x 2100

Finally, the color shows in my Samsung SyncMaster 206BW is much different from that in my laptop, making it an awfull problem because I can’t take my Samsung moniter which has a better color accuracy back home. And the size of my laptop LCD is too small to notice the detail of wallpaper, which, in the meantime, more or less, made me tired from working with it for long hours a day.

An ACE moniter is really needed!

Comments & Critics are welcome~~

I was woking on this archive page from yesterday, but unfortunately a serious headache suddenly hit me. And after a whole night of recovery, I finished it just now.

There are million styles of achive pages, but I just want a simple and integrated one. To merge indexes in one page, monthly archives should be associated with posts someway. So, sliding effect comes to me immediately.

After giving up several schemes, the page finally firmed up like this.

“There seems to be nothing but everything” , that is always what I am working for.

—————-
update – 23 Aug, 2008 : Fixed a javascript bug for IE series.

I spent two days or more learning jQuery reference documents and programming this image showcase what you will see at the Header of Yottaworks Studio.

I say it’s light-weighted, because it totally weighs even less than 3 KB(Version2 up to 6KB) uncompressed and attributed, expect for jQuery package (30KB), nearly 100KB lighter than those to be worked with Script.aculo.us or MissingMethod, but already features automatically changing images together with their attributes, and sliding navigator of thumbnail images with fade-in and fade-out effects.

I will consider whether I should release it after enhancing some functions, if possible, if time allows.

Featured:
• Save infomations of images and their thumbnails, such as links and discriptions in XML file
• Asynchronous image loader
• Sliding thumbnail navigator

——————-
Stare at here！
All images that you see above were illustrated during my spare time of these two years. If you feel interested in it, just click the large image to get into or download wallpapers.

It will take one or two days for me to complete my new theme and paint something within the last time of summer vacation.

It seems to be a loooooge time since my last illustration.

Just leave a screenshot as a keepsake before going away:
[Version 1.0]

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：就这样了，接下来可以安心复习备考鸟~

Adobe Illustrator作为最强大的矢量图像处理软件之一，它在路径制作方面的能力当然比以像素处理为主的Photoshop要高出很多，而我们也经常需要将Ai中的路径转移到PS中进行合成。
但是，在Adobe Illustrator CS3的默认设置下，不能将路径复制到Photoshop中，因此我们需要修改首选项设置。

1. 打开Illustrator，进入菜单“编辑”- “首选项”- “文件处理与剪贴板”，在设置窗口中，AICB的选项下，勾选“保留路径”。如图：

2. 完成上面的设置后，同时打开AI与PS，
在Illustrator中选择路径，复制，
到Photoshop中粘贴，就会出现如下的提示窗口。
选择粘贴为“路径”，确定。
这样，Ai中的路径就复制到PS中了。

————————–
突然需要将Ai中的路径复制到PS中，发现在国内的网站中根本没有相关的内容，虽然百度知道上有人问这个问题，但是最佳答案还是那种不负责任的回答。
还好，在国外的PhotoshopSupport上找到了需要的答案，就日志一篇，作为今天的份。

PS：如需转载，请标明本站链接。

网上也有很多矢量花边素材的下载，但总是觉得做工精良的花边并不多，最后还不如自己拿钢笔画。光上面图中的贴图，就花掉了不少时间。

考试也越来越近了，这个也只能放下了，还是放假之后再完成吧。

———————————————-
PS：不经意间，发现宿舍的棒棒军团就剩下自已一个光杆司令了，原来和自己一样宅的小岳同志也凭着令人惊叹的能力，以偶的两张电影票为契机，光荣地退出了死死团。
现在宿舍的4个哥们，一个短信不断，一个早出晚归，一个对着屏幕傻笑，还有一个……

……

不过这样挺好，我也没有精力，没有时间忙活这些了，还有好多事情等着自己去做，那些必须完成的计划。

这里，凯尔从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按钮戴上了个圣诞帽子~