1 Topic by RNilsson (edited by RNilsson 2003-07-24 00:30)

  • From: Göteborg
  • Registered: 2003-02-25
  • Posts: 168

Topic: Tabindex

Suggest ordered 'tabindex' of the FORM elements to make a more logic jump for tab-key.

Example:
In 'Add Forum' the cursor goes in this order when starting in 'Position'

Position
[Options] Admin/moderators only
Update
Name
[Options] Closed
Description
Category

Now, since all forums are listed in a row, i'm not sure how to make a practical solution, but it would nice to have it jump in this order:

Position
Name
Description
[Options] Admin/moderators only
[Options] Closed
Category
Update

More info http://www.w3schools.com/xhtml/xhtml_st … ibutes.asp about tabindex.

One possible solution chould be to add 7 to each tabindex for each forum-loop.

$tab_pos = 1;
$tab_name = 2;
$tab_desc = 3;
$tab_op_admin = 4;
$tab_op_closed = 5
$tab_cat = 6;
$tab_update = 7;

Like this (Loop1):
Position - tabindex=$tab_pos
Name - tabindex=$tab_name
Description - tabindex=$tab_desc
[Options] Admin/moderators only - tabindex=$tab_op_admin
[Options] Closed - tabindex=$tab_op_closed
Category - tabindex=$tab_cat
Update - tabindex=$tab_update

$tab_pos += 7;
$tab_name += 7;
$tab_desc += 7;
$tab_op_admin += 7;
$tab_op_closed += 7;
$tab_cat += 7;
$tab_update += 7;


If anyone understands what i'm rembling about...

2 Reply by Jansson (edited by Cactuz 2003-07-26 19:21)

  • Jansson
  • Former PunBB Developer
  • Offline
  • From: Sweden
  • Registered: 2003-01-06
  • Posts: 856

Re: Tabindex

Why make it complicated? wink


Replace

                        <td class="pun_right" style="width: 10%"><b>Position</b></td>
                        <td style="width: 32%"> <input type="text" name="position[<?php print $cur_forum['fid'] ?>]" size="3" maxlength="3" value="<?php print $cur_forum['position'] ?>"></td>
                        <td class="pun_right" style="width: 10%" rowspan="2"><b>Options</b></td>
                        <td style="width: 32%; white-space: nowrap"> <input type="checkbox" name="admmod_only[<?php print $cur_forum['fid'] ?>]" value="1"<?php if ($cur_forum['admmod_only'] == '1') print ' checked'; ?>> Admins/moderators only</td>
                        <td class="pun_cent" style="width: 16%" rowspan="3"><input type="submit" name="update[<?php print $cur_forum['fid'] ?>]" value="Update"></td>
                    </tr>
                    <tr>
                        <td class="pun_right"><b>Name</b></td>
                        <td> <input type="text" name="forum_name[<?php print $cur_forum['fid'] ?>]" size="35" maxlength="80" value="<?php print htmlspecialchars($cur_forum['forum_name']) ?>"></td>
                        <td style="white-space: nowrap"> <input type="checkbox" name="closed[<?php print $cur_forum['fid'] ?>]" value="1"<?php if ($cur_forum['closed'] == '1') print ' checked'; ?>> Closed</td>
                    </tr>
                    <tr>
                        <td class="pun_right">Description<br>(HTML)</td>
                        <td> <textarea name="forum_desc[<?php print $cur_forum['fid'] ?>]" rows="3" cols="50"><?php print htmlspecialchars($cur_forum['forum_desc']) ?></textarea></td>
                        <td class="pun_right"><b>Category</b></td>
                        <td>
                             <select name="cat_id[<?php print $cur_forum['fid'] ?>]">
<?php

        $cur_category2 = 0;
        @reset($forum_list);
        while (list(, $cur_forum2) = @each($forum_list))
        {
            if ($cur_forum2['cid'] != $cur_category2)    // A new category since last iteration?
            {
                $selected = ($cur_forum['cid'] == $cur_forum2['cid']) ? ' selected' : '';

                print "\t\t\t\t\t\t\t\t".'<option value="'.$cur_forum2['cid'].'"'.$selected.'>'.htmlspecialchars($cur_forum2['cat_name']).'</option>'."\n";

                $cur_category2 = $cur_forum2['cid'];
            }
        }

?>
                            </select>

with:

                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <table width="100%" border="0" cellpadding="0" cellspacing="3">
                                            <tr>
                                                <td class="pun_right">
                                                    <b>Position</b>
                                                </td>
                                                <td>
                                                     <input type="text" name="position[<?php print $cur_forum['fid'] ?>]" size="3" maxlength="3" value="<?php print $cur_forum['position'] ?>">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pun_right">
                                                    <b>Name</b>
                                                </td>
                                                <td>
                                                     <input type="text" name="forum_name[<?php print $cur_forum['fid'] ?>]" size="35" maxlength="80" value="<?php print htmlspecialchars($cur_forum['forum_name']) ?>">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pun_right">
                                                    Description<br>(HTML)
                                                </td>
                                                <td>
                                                     <textarea name="forum_desc[<?php print $cur_forum['fid'] ?>]" rows="3" cols="50"><?php print htmlspecialchars($cur_forum['forum_desc']) ?></textarea>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table width="100%" border="0" cellpadding="0" cellspacing="3">
                                            <tr>
                                                <td class="pun_right">
                                                    <b>Options</b>
                                                </td>
                                                <td>
                                                     <input type="checkbox" name="admmod_only[<?php print $cur_forum['fid'] ?>]" value="1"<?php if ($cur_forum['admmod_only'] == '1') print ' checked'; ?>> Admins/moderators only
                                                    <br>
                                                     <input type="checkbox" name="closed[<?php print $cur_forum['fid'] ?>]" value="1"<?php if ($cur_forum['closed'] == '1') print ' checked'; ?>> Closed
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pun_right">
                                                    <b>Category</b>
                                                </td>
                                                <td>
                                                     <select name="cat_id[<?php print $cur_forum['fid'] ?>]">
<?php

        $cur_category2 = 0;
        @reset($forum_list);
        while (list(, $cur_forum2) = @each($forum_list))
        {
            if ($cur_forum2['cid'] != $cur_category2)    // A new category since last iteration?
            {
                $selected = ($cur_forum['cid'] == $cur_forum2['cid']) ? ' selected' : '';

                print "\t\t\t\t\t\t\t\t".'<option value="'.$cur_forum2['cid'].'"'.$selected.'>'.htmlspecialchars($cur_forum2['cat_name']).'</option>'."\n";

                $cur_category2 = $cur_forum2['cid'];
            }
        }

?></select>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <table width="100%" border="0" cellpadding="0" cellspacing="3">
                                            <tr rowspan="3">
                                                <td>
                                                    <input type="submit" name="update[<?php print $cur_forum['fid'] ?>]" value="Update">
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

Could be made with a smaller piece of code but that didn't look that good smile

  • From: Göteborg
  • Registered: 2003-02-25
  • Posts: 168

Re: Tabindex

Not entierly sure what that code does, but my suggestion was only to make the marker jump in a predictable order in the input-fields.

If the code does so, it's time for me to go te bed...

hmm, it's bedtime anyways...

  • Jansson
  • Former PunBB Developer
  • Offline
  • From: Sweden
  • Registered: 2003-01-06
  • Posts: 856

Re: Tabindex

Thats what it doing.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Tabindex

I agree that the tab order is a bit screwed, but it's not something I will fix for 1.0. I'm putting it on the TODO list however :-)

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

  • From: Göteborg
  • Registered: 2003-02-25
  • Posts: 168

Re: Tabindex

Great, keep it up.