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( !setTextareaHeight._browser ){
		//get browser info.
		//decide whether padding should be taken into account
		setTextareaHeight._browser = $.browser.msie || $.browser.safari;
		setTextareaHeight._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 - setTextareaHeight._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~~

If you, with an intermediate javascript skill, are dabbled with DOM and wanna jump to a higher level, this book will be a MUST-READ, the very book that will make your dream come true at ease.

Jeffrey Sambells composed AdvancED DOM Scripting for no beginers, and his book begins with little basic knowledge of javascript, while its first chapter is about javascript namespaces and closures.

It’s a summary of the core theory of javascript(common gotchas, scope resolution and closures, etc), a proposal of best practices(unobtrusive javascript and progressive enhancement), an outline of DOM standards and a reflection on Ajax applications, all of which that have proved author’s profound ability and insight.

After you reading the book, you will have your own javascript library — you have to “get your hands dirty” — that’s all things that a professional web developer should have.

And NOW, the Chinese edition of this book are on the bookshelves — Just get off your ass and get in bookstores.

Gloried in her victory, eyes proudly closed, with arms akimbo, Index let out two hums unimaginably, wonderfully and attractively. At that time, I could only say one word——MOE!

And I knew it would must be the very ringtone of my mobile phone. (Best for your message alert tone.)

So, I ripped it out off the video. Hope you will like it.

To transfer this ringtone, would you please put http://yottaworks.net with it together?

点击上面下载：10月新番，魔法禁书目录，茵蒂克丝的“哼哼”铃声。转载请注明本站链接。

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.

BUT, do you know yotta?
Similar as mega but far more tremendous, yotta is an SI prefix denoting 10²⁴, the largest and last SI prefix to be comfirmed until today 2008 - that is a one followed with twenty-four zeros!

When we say yotta, we mean BIG, sufficiently.
When you come to yottaworks, I hope you will find my wild works, passionate ideas and useful tutorials, which I’ll devote myself to.

It’s horribly crazy to think about a yotta pieces of works in the aspect of quantity. But that’s the determination to work out fantastic designs and paintings as many as possible during all my lifetime.

From now on, Yottaworks™ Studio will run in English, except for some personal diaries about my daily life.

——————————
Appendix: Table of SI prefix - via wikipedia

Several months have past since my last update. Times of confusion, times of laziness. Every time I came here, I hesitated to click the write button or swept them all away by directly closing the web browser after writing something.

Now I’m back, with my new address yottaworks.net which will replace the former www.kael.com.cn.

Maybe I should have came back a little earlier, if I didn’t have my right wrist seriously injured that I even couldn’t click the mouse or hold my Wacom pen. It was really tough those days, having my right hand wrapped with flexible bandage and doing all the things with the left one, holding chopsticks, using keyboard, moving mouse and so on.