Button resizing in Opera

**Lasse Reichstein Nielsen** · Jul 20 '05, 10:33 AM

Re: Button resizing in Opera

"Csaba2000" <news@CsabaGabo r.com> writes:
[color=blue]
> How can I dynamically resize a button in Opera?[/color]
[color=blue]
> The following code works for both IE 5.5 and NN 6.1,
> but Opera 7.01 is not budging. Any ideas?[/color]
[color=blue]
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/color]

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.
[color=blue]
> function doubleMe(elem) {
> var myWidth = elem.offsetWidt h;
> elem.style.widt h = 2 * myWidth; // NN
> elem.style.posW idth = 2 * myWidth; // IE[/color]

Try
elem.style.widt h = (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.padd ing = "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
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Csaba2000** · Jul 20 '05, 10:33 AM

Re: Button resizing in Opera

"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message news:fziug9p4.f sf@hotpop.com.. .[color=blue]
> "Csaba2000" <news@CsabaGabo r.com> writes:
>[color=green]
> > How can I dynamically resize a button in Opera?[/color]
>[color=green]
> > The following code works for both IE 5.5 and NN 6.1,
> > but Opera 7.01 is not budging. Any ideas?[/color]
>[color=green]
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/color]
>
> 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.
>[/color]
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.
[color=blue][color=green]
> > function doubleMe(elem) {
> > var myWidth = elem.offsetWidt h;
> > elem.style.widt h = 2 * myWidth; // NN
> > elem.style.posW idth = 2 * myWidth; // IE[/color]
>
> Try
> elem.style.widt h = (2 * myWidth) +"px";
>[/color]

Tried that before original posting. No effect.
[color=blue]
> 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.
>[/color]

I've been bitten on this inline stuff a few times now. Maybe I'll get
it through my head one of these days.
[color=blue]
>
> 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).
>[/color]

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>la yout example</TITLE>
<META http-equiv="content-type" content="text/html;charset=is o-8859-1">
<SCRIPT type="text/javascript">
function doubleMe(elem) {
elem = elem.firstChild ;
var myWidth = elem.offsetWidt h;
elem.style.widt h = 2 * myWidth; // NN, Opera
elem.parentElem ent.style.posWi dth = 2 * myWidth; // IE
}
</SCRIPT>
</HEAD>
<BODY>
<button>Does Nothing</button>
<button onClick='double Me(this)'
accesskey=D><di v><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.
[color=blue]
> Alertnatively, you can give it a padding:
> elem.style.padd ing = "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.
>[/color]

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
[color=blue]
> /L
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
> 'Faith without judgement merely degrades the spirit divine.'[/color]

Button resizing in Opera

Button resizing in Opera

Comment

Comment