adjust page

Ish_mell · #1 (**permalink**) 08-30-09, 10:16 AM

Im not entirely sure if this can be done in just php but I thought I would ask about it here for I think theres php involved. I want to make something like what I made in the pic below.
http://i28.tinypic.com/119m982.jpg
Basically it lists page names which which I can click on and highlight. Then I can either click move up or down which would change the page order. There would be some other buttons to like save to save what you just did and indent to page... the page would become a subpage to another page...things like that.

But what im wondering is how would I go about making it so I have that list allowing me to click and highlight a page. Im not exactly sure how to make the list...Im pretty sure i can make the data for the list just not the actual list allowing me to select the data and highlight. Im Not looking for someone to do this for me im just looking for guidance.

wirehopper · #2 (**permalink**) 08-30-09, 12:07 PM

Write down what has to happen in plain language, then think about how you would write code to do it.

For example:

Get list of pages
Put pages in order (may be part of prior step)
Display pages
Offer move up, move down, save, and cancel buttons
If a move button is pressed, process it
If a save button is pressed, save the order

End User · #3 (**permalink**) 08-30-09, 12:34 PM

Try this to get started...this will let you display a list of option items and reorder them with up/down buttons, as well as swapping two items.

Save the two files, then open 'change_order.htm' in a browser. Make sure that the 'selectBoxOptions.js' is loaded by the 'change_order.htm' page.

change_order.htm:

HTML Code:

<html>
<script language="javascript" src="selectBoxOptions.js"></script>
<style type="text/css">
input.text:focus {
background-color: #ffffaa; color: #000;
}
textarea.text:focus {
background-color: #ffffaa; color: #000;
}
select.text {
background-color: #ffffaa; color: #000; 
}
</style>
</head>
<body>

<form name="course_editor" style="display:inline;" method="POST" action="/admin/changeorder.php">


<table bgcolor="#f4e8b7" border="1" cellpadding="1" cellspacing="1" align="center" width="400">
<tr bgcolor="#7d9367"><td colspan="2" align="center"><font color="#ffffff"><b><i>$course_title</i> Lesson List</b></font></td></tr>
<tr><td width="250" align="center">
  <dl>
      <dd><b>Lesson Order:</b><br>
       <select name="move" class="text" style="font-size: 14px;" id="move" multiple="multiple" size="10">
		<option value="1">foobar 1</option>
		<option value="2">foobar 2</option>
		<option value="3">foobar 3</option>
		<option value="4>foobar 4</option>
		<option value="5">foobar 5</option>
		<option value="6">foobar 6</option>
		<option value="7">foobar 7</option>
       </select>
      </dd>
</td><td valign="top">

<br><br><br><br>
<table border="1" width="160">
<tr><td><strong>Change Lesson Order:</strong></td></tr>
<tr><td width="33%" align="center"><input style="width:130px;" type="button" onclick="moveUp(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Move Item Up"></td></tr>
<tr><td width="33%" align="center"><input style="width:130px;" type="button" onclick="moveDown(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Move Item Down"></td></tr>
<tr><td width="33%" align="center"><input style="width:130px;" type="button" onclick="swap(document.getElementById('move'));updateList(document.getElementById('move'), document.getElementById('newList'));" value="Swap 2 Items"></td>
</tr>
<tr><td><strong>New order:</strong> <input type="text" size="$listcount" id="newList" name="newList" value="" readonly="readonly" style="border: none; width: 150px;"></td></tr>

</td></tr>
</table>

<p>

</td></tr>
<tr><td colspan="2" align="center">

</td></tr>
</table>

</body>
</html>

selectBoxOptions.js:

HTML Code:

function moveUp(element) {
  for(i = 0; i < element.options.length; i++) {
    if(element.options[i].selected == true) {
      if(i != 0) {
        var temp = new Option(element.options[i-1].text,element.options[i-1].value);
        var temp2 = new Option(element.options[i].text,element.options[i].value);
        element.options[i-1] = temp2;
        element.options[i-1].selected = true;
        element.options[i] = temp;
      }
    }
  }
}
function moveDown(element) {
  for(i = (element.options.length - 1); i >= 0; i--) {
    if(element.options[i].selected == true) {
      if(i != (element.options.length - 1)) {
        var temp = new Option(element.options[i+1].text,element.options[i+1].value);
        var temp2 = new Option(element.options[i].text,element.options[i].value);
        element.options[i+1] = temp2;
        element.options[i+1].selected = true;
        element.options[i] = temp;
      }
    }
  }
}
function updateList(list, textBox) {
  textBox.value = '';
  for(i = 0; i < list.options.length; i++) {
    if (i == 0) {
      textBox.value += list.options[i].value;
    } else {
      textBox.value += ',' + list.options[i].value;
    }
  }
}
function swap(list) {
  var j = 0;
  for(i = 0; i < list.options.length; i++) {
    if(list.options[i].selected == true) {
      j++;
      switch (j) {
        case 1:
        var i1 = i;
        var temp = new Option(list.options[i].text, list.options[i].value);
        break;
        case 2:
        var i2 = i;
        var temp2 = new Option(list.options[i].text, list.options[i].value);
        break;
      }
    }
  }
  if (j != 2) {
    alert('Only 2 items can be swapped');
  } else {
    list.options[i1] = temp2;
    list.options[i1].selected = true;
    list.options[i2] = temp;
    list.options[i2].selected = true;
  }
}

window.onload = function() {
 updateList(document.getElementById('move'), document.getElementById('newList'));
}

Ish_mell · #4 (**permalink**) 08-31-09, 06:14 PM

Thats exactly what I was looking for...I wanted to know how to make that list, thanks allot. The only thing im not sure of there is what the New order: section is for.

Edit://
Oh nvm I get it. It displays the new current order of the list....