SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    Phoenix, AZ
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Same size buttons via script

    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[i].style.Width > gSize)
    gSize = btnColl[i].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 Macias

  2. #2
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using a class will only make this harder....
    are they all on the same page? i'mm assuming thise, and are they the ONLY buttons on the page?
    Web Slave

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    Phoenix, AZ
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the buttons are on the same page, however I don't want all the buttons to be resized to the same width (that's why I am using a class)
    ...
    <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="1">
    <TR>
    <TD rowspan="5"><a href="resizeBtns('test');" name="linkResize">Resize
    Buttons</a></TD>
    <TD><INPUT id="Button1" type="button" value="Monday" name="Button1" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button2" type="button" value="Tuesday" name="Button2" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button3" type="button" value="Wednesday" name="Button3" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button4" type="button" value="Thursday" name="Button4" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button5" type="button" value="Friday" name="Button5" class="test"></TD>
    </TR>
    </TABLE>
    ...

  4. #4
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If i'm understanding correctly, I think this will do what you want without a script:
    HTML Code:
    <style type="text/css">
    input {width:100%}
    </style>
    <TABLE id="Table1" cellSpacing="1" cellPadding="1" border="1">
    <TR>
    <TD><INPUT id="Button1" type="button" value="Monday" name="Button1" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button2" type="button" value="Tuesday" name="Button2" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button3" type="button" value="Wednesday" name="Button3" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button4" type="button" value="Thursday" name="Button4" class="test"></TD>
    </TR>
    <TR>
    <TD><INPUT id="Button5" type="button" value="Friday" name="Button5" class="test"></TD>
    </TR>
    </TABLE>

  5. #5
    SitePoint Member
    Join Date
    May 2004
    Location
    Phoenix, AZ
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    That's not really want I need to do. I need to allow the buttons to adjust automatically their size according to the text they have (thus resulting in buttons with different sizes).
    Then I need to run a script to get the longest button's size and then use this value to change all the others buttons and make them even.

    The solution is here:
    http://www.webdeveloper.com/forum/sh...3&goto=newpost

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you had posted this in the javascript forum I'm sure you would have had an answer sooner .

    Paul

  7. #7
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    If you had posted this in the javascript forum I'm sure you would have had an answer sooner .

    Paul
    aside from the obvious.....

    if you don't set a width (to allow them to get thier own width) is there any record of a width within the innerHTML... i guess its more of a general question, but for something like this.... will javascript even be able to extract this property.
    Web Slave


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •