Button resizing in Opera

Csaba2000 · Sep 18, 2003

How can I dynamically resize a button in Opera?

The following code works for both IE 5.5 and NN 6.1,
but Opera 7.01 is not budging. Any ideas?

Thanks,
Csaba Gabor from New York

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>layout example</TITLE>
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">
<SCRIPT type="text/javascript">
function doubleMe(elem) {
var myWidth = elem.offsetWidth;
elem.style.width = 2 * myWidth; // NN
elem.style.posWidth = 2 * myWidth; // IE
}
</SCRIPT>
</HEAD>
<BODY>
<button>Does Nothing</button>
<button onClick='doubleMe(this)'>Double Size</button>
</BODY>
</HTML>

Lasse Reichstein Nielsen · Sep 18, 2003

Csaba2000 said:
How can I dynamically resize a button in Opera?

The following code works for both IE 5.5 and NN 6.1,
but Opera 7.01 is not budging. Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Your document type triggers quirks mode in the browsers you mention.
You should pick a document type that triggers standards mode before
you start worrying about how CSS is interpreted.

function doubleMe(elem) {
var myWidth = elem.offsetWidth;
elem.style.width = 2 * myWidth; // NN
elem.style.posWidth = 2 * myWidth; // IE

Try
elem.style.width = (2 * myWidth) +"px";

Buttons might be seen as inline elements, so setting the width won't
do anything in standards mode, and apparently not in Opera quirks mode
either. This is the desired behavior for inline elements.

This is confuzing, since the CSS 2.1 working draft suggested HTML
style sheet sets buttons to be inline-block elements, where the width
should work. maybe it is just an Opera bug.

To change the width, you must make it a block element. This differs
from input elements of type "button", which are *replaced* inline
elements, and therefore respect the width setting (like images).

Alertnatively, you can give it a padding:
elem.style.padding = "0px "+myWidth+"px";
This won't double the size exactly, but will set the padding
on each side to the current size of the entire button.

/L

Csaba2000 · Sep 18, 2003

Lasse Reichstein Nielsen said:
Your document type triggers quirks mode in the browsers you mention.
You should pick a document type that triggers standards mode before
you start worrying about how CSS is interpreted.

I picked this because it allowed me to validate my existing pages with the
least amount of changes. I suppose I'll have to move on over once again,
but I'll need to understand the issues better than I do now. Upshot: give
me a while on that one.

Try
elem.style.width = (2 * myWidth) +"px";

Tried that before original posting. No effect.

Buttons might be seen as inline elements, so setting the width won't
do anything in standards mode, and apparently not in Opera quirks mode
either. This is the desired behavior for inline elements.

This is confuzing, since the CSS 2.1 working draft suggested HTML
style sheet sets buttons to be inline-block elements, where the width
should work. maybe it is just an Opera bug.

I've been bitten on this inline stuff a few times now. Maybe I'll get
it through my head one of these days.

To change the width, you must make it a block element. This differs
from input elements of type "button", which are *replaced* inline
elements, and therefore respect the width setting (like images).

I like <button> elements since I can underline the accelerator keys.
So I am loathe to give them up. But thanks to your hint, I have the following
solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>layout example</TITLE>
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">
<SCRIPT type="text/javascript">
function doubleMe(elem) {
elem = elem.firstChild;
var myWidth = elem.offsetWidth;
elem.style.width = 2 * myWidth; // NN, Opera
elem.parentElement.style.posWidth = 2 * myWidth; // IE
}
</SCRIPT>
</HEAD>
<BODY>
<button>Does Nothing</button>
<button onClick='doubleMe(this)'
accesskey=D><div><u>D</u>ouble Size</div></button>
</BODY>

OK, that posWidth setting is a bit ugly. I would have been better
if the previous line worked for IE too, but it made the button
about 3 times as wide instead of the intended double size.

Alertnatively, you can give it a padding:
elem.style.padding = "0px "+myWidth+"px";
This won't double the size exactly, but will set the padding
on each side to the current size of the entire button.

Inventive. Glad I don't have to use it.

Thanks again for your comments. I especially appreciated the
one you made a few days ago with regards to event terminology.
That was really quite helpful to my understanding.

Csaba

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Centering a button using flexbox	2	Feb 5, 2023
Script stops working when using variables to save time typing...	4	Oct 31, 2022
Problems with using event handlers for button and textarea input	1	Nov 29, 2021
Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
Im having trouble containing a title an image and a button	2	Oct 26, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

Button resizing in Opera

Csaba2000

Lasse Reichstein Nielsen

Csaba2000

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads