Current location: Hot Scripts Forums » Programming Languages » PHP » adjust page


adjust page

Reply
  #1 (permalink)  
Old 08-30-09, 10:16 AM
Ish_mell Ish_mell is offline
Newbie Coder
 
Join Date: Aug 2009
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
adjust page

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.
Reply With Quote
  #2 (permalink)  
Old 08-30-09, 12:07 PM
wirehopper's Avatar
wirehopper wirehopper is offline
-
 
Join Date: Feb 2006
Posts: 2,515
Thanks: 20
Thanked 109 Times in 106 Posts
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
Reply With Quote
  #3 (permalink)  
Old 08-30-09, 12:34 PM
End User's Avatar
End User End User is offline
Level II Curmudgeon
 
Join Date: Dec 2004
Posts: 3,027
Thanks: 14
Thanked 35 Times in 33 Posts
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'));
}
__________________
I don't live on the edge, but sometimes I go there to visit.
-------------------------------------------------------------------------
Sanitize Your Data | Oracle Date & Substring Functions | Code Snippet Library | [url=http://www.codmb.com/Call Of Duty[/url]
Reply With Quote
  #4 (permalink)  
Old 08-31-09, 06:14 PM
Ish_mell Ish_mell is offline
Newbie Coder
 
Join Date: Aug 2009
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
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....

Last edited by Ish_mell; 08-31-09 at 06:33 PM.
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[turnkey] Lyrics site - $149 (LEGAL) rightinpoint General Advertisements 0 10-22-06 04:33 AM
Page reload (Another is this possible) chrisrobertson HTML/XHTML/XML 0 07-31-06 07:30 PM
Classified Ads skipper23 Perl 3 11-22-05 02:22 AM
page browsing problem mivec PHP 3 04-17-04 03:43 AM
Classified Ads skipper23 Perl 2 12-30-03 03:43 AM


All times are GMT -5. The time now is 07:58 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.