473,242 Members | 1,521 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,242 software developers and data experts.

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
2 3661
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

86
by: Michael Kalina | last post by:
Because when I asked for comments on my site-design (Remember? My site, your opinion!) some of you told me never to change anything on font-sizes! What do you guys think of that:...
5
by: Robert J. O'Hara | last post by:
For some time I've made use of the max-width property in CSS to cause my pages to appear as a centered block against a contrasting background. This works well in new browsers (Mozilla, etc.) and...
1
by: khothikhe | last post by:
Can someone help me here because this is really killing me! the problem is, i have this javascript code in my aspx page that i want it to work on almost all browsers, especially opera and safari...
5
by: Paul Fi | last post by:
Can someone help me here because this is really killing me! the problem is, i have this javascript code in my aspx page that i want it to work on almost all browsers, especially opera and safari...
7
by: Howard Jess | last post by:
: In HTML 4.01, a <button> element can take 1 of 3 types: type=submit (default) type=reset type=button The Javascript to create a button element dynamically is
1
by: Paul Fi | last post by:
can some one help me here coz this is really killing me! the problem is, i have this javascript code in my aspx page that i want it to work on almost all browsers, especially opera and safari : ...
3
by: whapts3 | last post by:
I'm putting together a rather dynamic page (AJAX/all-that-mess). So... to go between different sorts of content on the page, I have it set up something like this. <a href="#10"...
4
by: =?Utf-8?B?c2lwcHl1Y29ubg==?= | last post by:
I have a usercontrol that has a panel as a band across the width of the user control When the usercontrol is diaplayed the button is not centered. If I anchor the button to the panel...
2
by: Anz | last post by:
function popup_window(pageurl,width,height) { mywindow = window.open(pageurl,"mywindow","scrollbars=1,fullscreen = 0,resizable =no,menubar=no,width="+width+",height="+height); mywindow.focus();...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.