Button resizing in Opera

Csaba2000

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>la yout example</TITLE>
<META http-equiv="content-type" content="text/html;charset=is o-8859-1">
<SCRIPT type="text/javascript">
function doubleMe(elem) {
var myWidth = elem.offsetWidt h;
elem.style.widt h = 2 * myWidth; // NN
elem.style.posW idth = 2 * myWidth; // IE
}
</SCRIPT>
</HEAD>
<BODY>
<button>Does Nothing</button>
<button onClick='double Me(this)'>Doubl e Size</button>
</BODY>
</HTML>

Jul 20 '05 #1

Subscribe Reply

3685

Lasse Reichstein Nielsen

"Csaba2000" <ne**@CsabaGabo r.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.offsetWidt h;
elem.style.widt h = 2 * myWidth; // NN
elem.style.posW idth = 2 * myWidth; // IE

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 - 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

Csaba2000

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message news:fz******** **@hotpop.com.. .

"Csaba2000" <ne**@CsabaGabo r.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.offsetWidt h;
elem.style.widt h = 2 * myWidth; // NN
elem.style.posW idth = 2 * myWidth; // IE

Try
elem.style.widt h = (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>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.
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.

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

Similar topics

7802

What do you think of resizing 1em to 10px?

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: http://www.clagnut.com/blog/348/ I hope that's going to be a good discussion! Michael

HTML / CSS

2649

Centering 2cols without tables / dynamic resizing of figures

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 falls back fine in IE6 and lesser creations. As one who practices "classic" (i.e. dull) typography, this has always been satisfactory since I've always used one-column pages. I'm now trying a two column layout so I can include a sidebar, and am...

HTML / CSS

2385

problem with iframe resizing 2

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 : function resize(){ displayFrm = document.getElementById("ifrmDisplay"); innerDoc = (displayFrame.contentDocument) ?displayFrm.contentDocument : displayFrm.contentWindow.document;

Javascript

1755

iframe resizing on opera problem

by: Paul Fi | last post by:

Javascript

2214

DOM/HTML Button Element

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

Javascript

3097

problem with iframe resizing

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 : function resize(){ displayFrm = document.getElementById("ifrmDisplay"); innerDoc = (displayFrame.contentDocument) ?displayFrm.contentDocument : displayFrm.contentWindow.document;

ASP.NET

6246

Detecting back/forward button use for fragment identifers

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" onclick="loadFragment()"> ... </a> <a href="#20" onclick="loadFragment()"> ... </a> where loadFragment is a function which does something based on the #20 which is now appended to the document's .location.

Javascript

4534

Center Button in PaneL

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 Left/Top/Right the button get's streched which I want to try to avoid. Anyone have ideas on how to center the button in the panel not matter the size of the panel??

C# / C Sharp

1427

How prevent popup window resizing in browsers.

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(); } Here is the javascript function which i am using, but this doesn't work in opera?, is there any other script that will work in all browsers especially in opera ?

Javascript

9621

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10264

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10106

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10039

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8937

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6717

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5355

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5484

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3610

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP