April 1, 2012

Scrollable Textarea Without Scrollbar

I hate scrollbars in textareas. I needed a message form for my new website and the scrollbar was sticking out of my design like a sore thumb.

When searching through forums I was only able to find solutions with overflow:hidden. The problem is that overflow:hidden disables scrolling and when your message is longer than the textarea you cannot scroll to the end of your text and you cannot see what you are typing.

Some people proposed stuff like using JavaScript to fake scrolling by capturing keystrokes and repositioning the container element... but that just seemed ugly and none of those scripts worked really well.

I came up with another solution. We can wrap the textarea into a wrapper div.


<div id="wrapper">
    <textarea id="textarea" rows="5" cols="45"></textarea>
</div>

Now we can give the wrapper overflow:hidden and set it's width a bit narrower than the width of the textarea so that scrollbar would be hidden...and we are done, right? It's not that simple - different browsers use different width of scrollbar so we don't know how many pixels narrower should the width of our wrapper be. So let's just use the same width for the wrapper for now.


#textarea {
    width: 335px;
    border: none;
}

#wrapper {
    width: 335px;
    border: 1px solid gray;
    overflow: hidden;
}

Now we use JavaScript to detect the width of the inner part of our textarea...


// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

...and we set the width of our wrapper to the detected number of pixels.


// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

We also need to make sure that the hidden scrollbar is always there... so we just use overflow-y:scroll for our textarea.


#textarea {
    border: none;
    overflow-y: scroll;
    width: 335px;
}

And that's all. You can try demo if you want. Simple, huh? As far as I know it works in every browser - if not, please let me know.

March 28, 2012

Declare War On Procrastination!

You know the scenario. You are working and suddenly you feel the temptation to check your email or a news site... it's not going to take more than a minute. Four hours later you realize that you are reading 14th article about things that have nothing to do with what you should be doing. You feel guilty and depressed and you start working frantically in order to meet your deadline.

As a freelancer with no boss standing behind me making sure I don't forget to work I really needed to come up with a solution on how to be more efficient.

One day I watched a talk by Tim Ferris. He mentioned the so called flash diet. In order to lose weight you take a picture of every meal you eat. It's a pattern interrupt that makes you aware of your decisions that were previously habitual or subconscious. He also said that self-discipline and willpower are overrated - sometimes just tracking is enough to catalyze behaviour change.

I realized I could try to use his idea to avoid procrastination. I needed something that would make me realize what I was going to do before I did it. Something that would force me to think twice and maybe avoid doing it at all. Something annoying standing between me and the behaviour that I was trying to eliminate.

I created a little anti-procrastination tool. It's dead simple to use... all I have to do before I start wasting my time is to press the "pause" button. To my own surprise it works. Most of the time when I am about to 'just have a quick look at Twitter' I realize that I would have to push that button... and I just keep working. And when I do take a break I only take the amount of time that I really need because I know that the 'wasted time' stopwatch is ticking.

I know that nobody is going to check how much time I wasted and punish me for that. But I like to compete with myself - this little app made work more enjoyable for me. I also created a little bar chart so I could see my best performance and try to set a new 'efficiency' record. Working became more fun than procrastinating... and it's a bit easier to meet deadlines.