467,886 Members | 1,800 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,886 developers. It's quick & easy.

Button resizing in Opera

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>

Jul 20 '05 #1
  • viewed: 3480
Share:
2 Replies
"Csaba2000" <ne**@CsabaGabor.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message news:fz**********@hotpop.com...
"Csaba2000" <ne**@CsabaGabor.com> writes:
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.

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.
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";


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

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

86 posts views Thread by Michael Kalina | last post: by
1 post views Thread by khothikhe | last post: by
5 posts views Thread by Paul Fi | last post: by
7 posts views Thread by Howard Jess | last post: by
1 post views Thread by Paul Fi | last post: by
4 posts views Thread by =?Utf-8?B?c2lwcHl1Y29ubg==?= | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.