This may be a question for a DHTML pro...
I am trying to come up with a script that makes all the buttons the same size. Here are the requirements:
1.- The buttons must not use inline CSS; they will use a CLASS attribute instead.
2.- The class the buttons are using must not specify a fixed width. (to allow the buttons to adjust dynamically their size)
3.- The script will have to look for the wider button, get the button size and finally set all the buttons to this size.
Here is the function that I am using to get the longest button's width:
function getLongerBtn(btnColl)
{
var gSize = 0;
if(btnColl!=null)
{
for (i=0; i<btnColl.length; i++)
{
if (btnColl.style.Width > gSize)
gSize = btnColl.style.posWidth;
}
return gSize;
}
}
The problem is that the function is returning zero always and I think that is because I haven't set up any of the button widths (one of the requirements).
Any ideas of how to accomplish this?
-Raul MaciasDon't expect this to work in older browsers(tested in IE6 and Moz1.6).
Opera has a problem with changing the width of buttons. There is a work around for Opera by changeing the padding.
function getLongerBtn() {
var gSize=ButtonWidth=0;
var aButton=document.getElementsByTagName('button');
for (var i=0; i<aButton.length; i++) {
if(document.all) {
ButtonWidth=aButton.clientWidth; //IE
}
else {
ButtonWidth=parseInt(document.defaultView.getComputedStyle(aButton,null).getPropertyValue("width")); //Mozilla
}
if (ButtonWidth> gSize) {
gSize=ButtonWidth;
}
}
alert(gSize);
for (i=0; i<aButton.length; i++) {
aButton.style.width=gSize+"px";
}
}Perfect!
This is exactly what I wanted to do. Thanks Fang!Why don't you simply set the width of all buttons in em???Originally posted by Vladdy
Why don't you simply set the width of all buttons in em???
My web application needs to be localized so fixed widths is not an option.Still having language specific css is better than depending on scripting.We wanted to avoid extra work to the localization team maintaining several language-specific CSS files. That's why we decided to come up with this solution.ever thought what happens to your buttons when JS is disabled?
And I'm not talking about keeping all separate CSS files, just language specific parameters:
<link type="text/css" rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"common.css" />
<link type="text/css" rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"french.css" />
where french.css is simply
button
{ width: 12em;
}Fortunately one of our requirements for our end-users is to have JavaScript enabled (besides other things).
I see your point, we could accomplish this using just CSS but still the guys localizing the app would have to go thru every dialog, set the width on the CSS class and then check if everything fits.
By using script it doesn't matter how the text grow or shrink; it will make the buttons even without worrying about setting widths.
about setting widths.
I am trying to come up with a script that makes all the buttons the same size. Here are the requirements:
1.- The buttons must not use inline CSS; they will use a CLASS attribute instead.
2.- The class the buttons are using must not specify a fixed width. (to allow the buttons to adjust dynamically their size)
3.- The script will have to look for the wider button, get the button size and finally set all the buttons to this size.
Here is the function that I am using to get the longest button's width:
function getLongerBtn(btnColl)
{
var gSize = 0;
if(btnColl!=null)
{
for (i=0; i<btnColl.length; i++)
{
if (btnColl.style.Width > gSize)
gSize = btnColl.style.posWidth;
}
return gSize;
}
}
The problem is that the function is returning zero always and I think that is because I haven't set up any of the button widths (one of the requirements).
Any ideas of how to accomplish this?
-Raul MaciasDon't expect this to work in older browsers(tested in IE6 and Moz1.6).
Opera has a problem with changing the width of buttons. There is a work around for Opera by changeing the padding.
function getLongerBtn() {
var gSize=ButtonWidth=0;
var aButton=document.getElementsByTagName('button');
for (var i=0; i<aButton.length; i++) {
if(document.all) {
ButtonWidth=aButton.clientWidth; //IE
}
else {
ButtonWidth=parseInt(document.defaultView.getComputedStyle(aButton,null).getPropertyValue("width")); //Mozilla
}
if (ButtonWidth> gSize) {
gSize=ButtonWidth;
}
}
alert(gSize);
for (i=0; i<aButton.length; i++) {
aButton.style.width=gSize+"px";
}
}Perfect!
This is exactly what I wanted to do. Thanks Fang!Why don't you simply set the width of all buttons in em???Originally posted by Vladdy
Why don't you simply set the width of all buttons in em???
My web application needs to be localized so fixed widths is not an option.Still having language specific css is better than depending on scripting.We wanted to avoid extra work to the localization team maintaining several language-specific CSS files. That's why we decided to come up with this solution.ever thought what happens to your buttons when JS is disabled?
And I'm not talking about keeping all separate CSS files, just language specific parameters:
<link type="text/css" rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"common.css" />
<link type="text/css" rel="stylesheet" src=http://www.webdeveloper.com/forum/archive/index.php/"french.css" />
where french.css is simply
button
{ width: 12em;
}Fortunately one of our requirements for our end-users is to have JavaScript enabled (besides other things).
I see your point, we could accomplish this using just CSS but still the guys localizing the app would have to go thru every dialog, set the width on the CSS class and then check if everything fits.
By using script it doesn't matter how the text grow or shrink; it will make the buttons even without worrying about setting widths.
about setting widths.