Screenshot of Netflix loading in Chrome

When Netflix loads a video it is using Microsoft Silverlight which is something that Chrome supports and gave me my first clue that there is no reason why Chrome shouldn’t be able to view a Netflix video. The solution was actually rather simple, tell Netflix that I’m not actually using Chrome but using Safari on the Mac. In order to do this you just have to add the following parameter when starting Chrome.

 --user-agent="Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_3; en-us) AppleWebKit/525.19 (KHTML, like Gecko) Version/3.2.1 Safari/525.19"

Add Parameter to Google Chrome Startup

I also tried changing the user agent to make Chrome appear like it is Internet Explorer. After applying that change Netflix gave me a activeX not supported error (image below). Since the problem was solved with the Safari user-agent text above I wasn’t too worried about it.

ActiveX is disabled

Chrome Textarea

There is a new feature in both Safari and Chrome that allows a textarea to be resized by the user. In both browsers the feature is seen by a little icon that is in the bottom right corner of the textarea. This feature gives the user the ability to choose how much space they need for whatever it is they are writing.

For some websites this new feature may not be desired as resizing the textarea could break the layout of the website. I can think of a few ways to prevent the layout from breaking.

1. Design the page with a liquid layout
2. Turn off the users ability to resize the textarea
3. Give the textarea a max size

Redesigning the site with a liquid layout can be a lot of work and may not be optimal for the look & feel for the site. Many designers prefer to lock the site at a certain width to guarantee that everyone will see a website that looks exactly the same.

It is very easy to turn off the users ability to resize the textarea. Turning this feature off may be necessary due to the design of certain sites or to make it harder for the user to write a 100 page document in a small comment box. The following CSS can be used to remove the users ability to resize the textarea:

textarea{resize: none}

Place that code in your css file to remove the users ability to resize any textarea on the site. You could also remove it from 1 textarea on a page with inline css.

<textarea name="myTextarea" rows="3" cols="30" style="resize: none;"></textarea>

The third option of giving the textarea a max size has a similar solution of using css. The two properties that can be used are max-width and max-height. This will give the user the ability to resize the textarea but limit them to a certain max size. The css would look something like the following.

textarea{max-width: 100px; max-height: 100px;}

Of course you may only want to use one of the above properties to allow the user to grow the height to any size but not resize the width or vice versa.

An example of a site that could use one of the above steps is whitehouse.gov. There are two screen shots below that show the before and after of the user resizing the textarea.

Browsers giving the user the ability to resize a textarea is a great feature but it creates one more item that designers and developers need to be aware of when adding a textarea to a page.

Before

The other day I was looking for a solution to allow a user to dynamically resize a textbox. I first saw this feature in wordpress and wanted something similar for a site I was designing. Since wordpress is open source I had considered looking at their code to figure out how it was done. After searching google for a few minutes I came across a site that had put together some functions to make the job of implementing this feature very easy.

When the textbox is displayed on a site it looks like the following:

In order to place the texbox on your site you just need to download the source code and put something like the following on a webpage.

<link rel="stylesheet" href="/include/resize-textbox/style.css" type="text/css" media="screen" />
<script src="/include/resize-textbox/resize-textbox.js" type="text/javascript"></script>
<div id="rtContainer" style="border: 1px solid black; width: 480px; height: 250px;">
    <script type="text/javascript">
    <!--
    var rt = new ResizeableTextbox('myRT');
    rt.SetText("I Am Some Text");
    // -->
    </script>
</div>

Doesn’t get much easier!

Now to critique the code a little. I wish the javascript functions were encapsulated in a class so I would not have to worry that another function might conflict with the functions for resizing the textarea. This is a fairly easy feature to add so it does not bother me to much.

Chrome Textarea

Now, if you are implementing the code on this page to give all browsers the ability to dynamically resize the textarea. You may want to disable the built in resize feature of both Chrome and Safari. This can easily be done with the following css.

#myRT{resize: none;}

I noticed a problem with how IE supports overflowing text today. The problem is that the text can not be easily selected (with a mouse) when using overflow: auto; and white-space: nowrap. Here is an example to demonstrate this problem.

This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it

The HTML for this example is below:

<pre style="border: 1px solid black; overflow: auto; width: 250px; white-space: nowrap; height: 40px;">;This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it</pre >

I was able to solve this problem by changing overflow: auto; to overflow: scroll; as can be seen below.

This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it

The HTML for this example is below:

<pre style="border: 1px solid black; overflow: scroll; width: 250px; white-space: nowrap; height: 40px;">;This text IS easy to select in IE because it will not automatically scroll to the right when the user is selecting it</pre >

I do not love this solution as it will always show the scroll bars even when they are not needed. Until someone finds a better solution or IE handles this better I will have to put up with it.