Web: Stretch all elements to the width of the longest one

I had such a problem with IE (as usual). I had a column with dropdown lists and all these lists had different width. My layout required that all of these elements had the same width.

First of all I tried to create a table with one column and place all my elements into cells. After that I set style="width: 100%" for all content of the table. It worked ideally in all browsers. Except one... Internet Explorer compressed my table to several pixels. As I understood he realized that width of my table depends on elements and width of elements depends on table. This recursion made him crazy.

I thought that if it knew actual width of table, he would scale right. So I removed "width" from tags attributes and added JavaScript in the end of the page (after load and automatic scaling) and added "width=100%" through this script (when table width is known for a browser). The same result...

My solution was to add two lines to the script before setting elements width. I got the first cell as element by ID and then changed it's width from "auto" to it's actual current width. It worked in IE, Firefox, Opera, Chrome and Safari.

Here is the example and solution:
<form name="myform">
<Table cellspacing="5" cellpadding="0">
<!-- set id for the frist cell -->
<TR><TD id="firstcell">
<select name="list1">
<option>opt1</option>
<option>opt2</option>
</select>
</TD></TR>
<TR><TD>
<select name="list2">
<!-- lengths of the elements will be different by default -->
<option>my_opt1</option>
<option>my_opt2</option>
</select>
</TD></TR>
</Table>
</form>
<!-- some other HTML here... -->
<Script language="JavaScript">
// get the first cell object and fix it's width
var firstcell = document.getElementById('firstcell');
firstcell.style.width = firstcell.offsetWidth;

document.myform.list1.style.width = '100%';
document.myform.list2.style.width = '100%';
</Script>

Disable backup in VIM

Most modern Linux distributives set creation of backup files in vim by default. Probably it's useful in some particular cases (imho, it's better to make a backup for very important files yourself), but I lose my mind when I see the files like "textfile.txt~" everywhere I've edited a file.

To turn off the default backup add set nobackup to /etc/vim/vimrc or to your own vim config (in your home directory).

Web: Dynamic dropdown lists

In order to change dropdown lists dynamically (depending on values of other elements) the current options of the list should be deleted and new options should be created. This code probably will be located in a handler function of another element (for example, another list or radio button).

For instance, if have 2 options - the first is type of numbers (1,2,3... or I, II, III...) and the second - actual number (it's just a model, I don't say that it's a very useful example :)). So the HTML code will be:
<form name="numbers">
<select name="num_type" onchange="num_type_change();">
<option value="1">1,2,3...</option>
<option value="I">I,II,III...</option>
<!-- remember option values from the previous post -->
</select>
<select name="num_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>

Now let's write a JavaScript function num_type_change() which will change the second list according to the selected type of numbers:
<Script language="JavaScript">
function num_type_change() {
var type = document.numbers.num_type.value;
var numbers_list = document.numbers.num_value;

// Reset options list
numbers_list.options.length = 0;

// Add required options
if (type == '1') {
numbers_list.options[0] = new Option('1','1');
numbers_list.options[1] = new Option('2','2');
numbers_list.options[2] = new Option('3','3');
numbers_list.options[3] = new Option('4','4');
}
else {
numbers_list.options[0] = new Option('I','I');
numbers_list.options[1] = new Option('II','II');
numbers_list.options[2] = new Option('III','III');
numbers_list.options[3] = new Option('IV','IV');
}
}
</Script>


Value of a dropdown list through JavaScript

A dropdown list is a usual element of a from on WebPages. And very often it's checked by some JaveScript before sending the data to the host (or for whatever other reasons). The following list:
<form name="myform">
<select name="mylist">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</form>

could be accessed by means of JavaScript the following way: "document.myform.mylist.value". It will work in most of the browsers except Internet Explorer. Especially for this one, HTML code should be little bit different:
<form name="myform">
<select name="mylist">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</form>

Now the same JavaScript code can be used in IE, too.