Sign in to follow this  
eSCHEn

[web] Re-ordering items in select element using JavaScript causes it to resize [solved]

Recommended Posts

Hi there. As part of a CMS I am building I for a client I have a section where Menu Items are listed in a <select> element and by pressing a particular button they can move an item up or down the list. Now the system functionality performs exactly as I wish except for one problem, when either of the buttons (move item up or down) are pressed the <select> element changes size horizontally, growing to the width of the container it resides in. Additionally I have a javascript function that resets the Menu Items within the <select> element and this causes the element to shrink horizontally, with repeated presses of the button that triggers the function making the element shrink until it is back to its original size. The problem is apparent on Firefox 1.5.0.4 and Konqueror 3.3.2 but not on Internet Explorer 6.0. I was wondering if someone would be kind enough to take a look at the code I have written and tell me if they see anything that looks wrong. javascript Code:
// option object template
function COption(ID, LinkText)
{
    this.ID       = ID;
    this.LinkText = LinkText;
}

// global array containing items in original order
var g_itemlist = new Array();

// fill global array with items (PHP)
<?php
$menuitem_count = [[0]];
foreach ($current_menu->m_list->m_items as $menuitemposition => $menuitem)
{
    // output menu item
    printf("\t\t\tg_itemlist[%d] = new COption('%d', '%s');\n", $menuitem_count, $menuitem->m_id, EncodeQuotes($menuitem->m_link_text));
    // move to next item
    $menuitem_count++;
}
?>

// build list in hidden field
function BuildList(Form)
{
    // clear hidden input
    Form.elements['menuitemlistordered'].value = '';

    // concatenate list item (in order) to hidden input using CSVs
    var i = [[0]];
    for (i=[[0]];i<Form.elements['menuitemlist'].length;i++)
    	Form.elements['menuitemlistordered'].value += Form.elements['menuitemlist'].options[i].value + ',';

	// remove final comma
	var list_length = Form.elements['menuitemlistordered'].value.length;
	if (list_length > [[0]])
	{
	    if (Form.elements['menuitemlistordered'].value[list_length - [[1]]] == ',')
	        Form.elements['menuitemlistordered'].value = Form.elements['menuitemlistordered'].value.substring([[0]], list_length - [[1]]);
	}
}

function SwapListboxItems(Listbox, SwapThis, WithThat)
{
    // check indices are both greater than -[[1]]
    if ( (SwapThis < [[0]]) || (WithThat < [[0]]) )
        return;

    // copy index1's value and text
    var current_item_value = Listbox.options[WithThat].value;
    var current_item_text  = Listbox.options[WithThat].text;

    // copy current item's value and text to new item
    Listbox.options[WithThat].value = Listbox.options[SwapThis].value;
    Listbox.options[WithThat].text  = Listbox.options[SwapThis].text;

    // copy stored value and text to current item
    Listbox.options[SwapThis].value = current_item_value;
    Listbox.options[SwapThis].text  = current_item_text;
}

// move item (-+[[1]])
function MoveItem(Button, Amount)
{
	// get copy of form that owns this button
	var Form = Button.form;

    // get current index
    var i = Form.elements['menuitemlist'].selectedIndex;

    // error check
    if (i < [[0]])
        return;  // nothing selected
    if (Amount == [[0]])
        return;  // no movement required
	if ( (Amount < [[0]]) && (i == [[0]]) )
	    return;  // can't move lower than [[0]]
    if ( (Amount > [[0]]) && (i == (Form.elements['menuitemlist'].length - [[1]])) )
	    return;  // can't move higher than last index

    // get new index
    var n = i + Amount;

	// don't select anything
	Form.elements['menuitemlist'].selectedIndex = -[[1]];

	// swap items
	SwapListboxItems(Form.elements['menuitemlist'], i, n);

    // move selected index to new position
    Form.elements['menuitemlist'].selectedIndex = n;

}

// reset list items back to original state
function ResetList(Button)
{
    // get a copy of the listbox
    var Listbox = Button.form.elements['menuitemlist'];

    // clear listbox
    while (Listbox.length > [[0]])
        Listbox.remove([[0]]);

    // loop though items
    var i;
    for (i=[[0]];i<g_itemlist.length;i++)
    {
        // write out item
        Listbox.options[Listbox.length] = new Option(g_itemlist[i].LinkText, g_itemlist[i].ID);
    }

    // select nothing
    Listbox.selectedIndex = -[[1]];
}


HTML Code:
// start form
printf("<form action='%s?module=%s&menuid=%d' method='post' name='menuform' onSubmit='BuildList(this)' >", $PHP_SELF, $module, $menu_id);
<snip>
// select element and options outputting omitted
<snip>
// buttons to move items up and down
printf("<button type='button' title='Move selected item up' name='menuitemup' style='margin-right: 8px;' onClick='MoveItem(this, -1)'><img src='images/sort-up.gif' width='16' height='16' alt='Up' title='Move selected item up'></button>");
printf("<button type='button' title='Move selected item down' name='menuitemdown' style='margin-left: 8px;' onClick='MoveItem(this, +1)'><img src='images/sort-down.gif' width='16' height='16' alt='Down' title='Move selected item down'></button>");
printf("<input type='hidden' name='menuitemlistordered' value='dummy' />");


Many thanks for any help and apologies for just dumping code. [Edited by - eSCHEn on July 22, 2006 6:25:48 PM]

Share this post


Link to post
Share on other sites
Not to worry, changing the layout surrounding the <select> element sorted it, specifically moving it out of the <div> element.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this