BRETT BATIE

I just recently started playing with Chrome and after a bit of investigation I think I am going to make the switch from my current browser Maxthon. One problem I noticed when using Chrome was I could no longer watch instant movies in Netflix. Now, I could do what they recommend and use Internet Explorer (or Maxthon) to view a movie but I'm stubborn and wanted to view it in Chrome so I found a way.

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"

To add this parameter right click the Google Chrome shortcut and go down to Properties. Then after chrome.exe in the Target: box paste the above text (make sure you include a space after chrome.exe).

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.

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.

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.

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.

    <script type="text/javascript">
    
    

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.

In testing this code I found out that both Chrome (Google's browser) and Safari already have the ability to dynamically resize a textarea built into the browser. Both browser's implemented the feature by adding a little icon in the bottom right of the textarea. This is a nice feature and hopefully the other browsers will also add this feature to their future versions.

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:

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

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:

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

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.

I previously discussed how to get Google to verify a WordPress blog by making a few modifications to the .htaccess file. I would like to take this a step further and discuss how a password protected site can be verified with Google. Verifying a password protected site became necessary for me when I wanted to add a password protected site to Adsense.

The first thing that needs to be done is to have your server respond with a valid 404 error by adding something like the following to your .htaccess file.

ErrorDocument 404 "This file does not exist."

Now you just need to give Google access to two files with a name similar to google54fbcc37db740a4d.html and noexist_54fbcc37db740a4d.html. You will need to login to Google’s Webmaster Tools Dashboard to see what the google*.html filename is in your case and then replace the "google" part with "noexist_" for the second file. Now that you have the names you will need to modify your password protection code that looks something like the following to exclude the two files from password protection.

AuthGroupFile /dev/null
AuthName "A Blog"
AuthType Basic
AuthUserFile /home/user/domains/domain.com/.htpasswd
require valid-user

To exclude the two files you would add the below code to your .htaccess file.

  Allow from all
  Satisfy any

Don't forget to create the google*.html file on your server and replace the names of the files in the above code with your filenames.

Extra Directions for WordPress

Now the above directions should be enough for most password protected sites but for WordPress that is using permalinks one more thing needs to be done. You need to tell WordPress to not send the request for noexist_*.html to index.php. To do this find the following code in your .htaccess file.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

and add the following RewriteCond after line 5.

RewriteCond %{request_uri} !^/noexist_54fbcc37db740a4d.html$ [nc]