473,327 Members | 2,007 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,327 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 3665
"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: 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...
1
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...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.