Written by CrAzY_J and most not be redistributed without his permission.

---

A basic idea on how to make a admin editable code.
Now you have to know the basics of javascript to understand this tutorials, I'm not going through everything.
This tutorial is not a step by step guide on how to make a code, but to basically give you an idea on how it's done.


Let's say we want to make a admin editable PM bar, first thing to know is where will the PM bar code be placed?
the main footers, the global footers or the board footers. Most likely it will be the global footers.
Now, the url to the global footers page is, "/index.cgi?action=headersfooters2&id=*".

A small part on how to make a new page: you can make a new page by just typing it in, in your address bar of your browser.
For example, if you go to viewprofile page, add "&whateveryouwant" to it and the page will remain the same, but the url is different.
So that's how a new page is made.

So we're going to make a new page for the PM bar from the global headers and footers page. So the url looked like this "headersfooters2&id=*".
All we need to do is add anything you find in a valid/normal url in there. Here we're going to add "&pmbararea".
Now the url should look like this: "/index.cgi?action=headersfooters2&id=*&pmbararea".
So if you just type that in your address bar you will see the normal headers and footers page, so we will need to modify this.

Now the coding start, if you don't know how to check the location of where the user is currently browsing, here's a part:

---

if(location.href.match(/URL CHECK/)){

---

So we want to edit the PM page which looks like the normal global headers and footers page, so we will need to make sure we
only edit that page and nowhere else. so in the "URL CHECK" you just add "&pmarea".
Now to edit the page, we will want to remove the tables with all the textareas and stuff like that right?

WRONG, you need to HIDE them and not remove them. Why not remove but hide?
Well we will need the headers (because we're working with a PM bar) textarea to change all the stuff(don't worry I'm going deeper on this).
When once makes a normal PM bar, he saves all the data in the global headers, so he will probably have some variables for the PM images and stuff like that.
Now the idea of a admin editable hack, is that the user of the code (the admin/gmod) does not have to go to the headers/footers area >> look for the code in the headers >> change the url of the image, whenever he wants to change it.
No, he will just need to go to a page where everything is ready for him, and that's what we're going to do.
We're going to put some new tables in the "pmbar area" with some nice text fields for the URLs to be put in, and how do we save the data of this?
Simple, we take the headers textarea and replace the variable of the images and replace it with the new url the user has put into the textfields we made for him.
still dint quite get it? Don't worry, you'll develop once reading through.

So the key is to HIDE the table, here's the code to do this

---

<script type='text/javascript'>
var table=document.getElementsByTagName("table");
for(t=4;t<table.length;t++){
table[t].style.display="none";
}</script>

---

What this code does, is it start at the FIFTH table,"for(t=4" means it starts counting from 5, it skips the first 4,and then hides the all the rest of the tables.
Now there's nothing but the menu bar and banner etc... So start making a table (I hope this can be done by yourself) and make some textfields (<input type='text'>).
Be sure to give the text fields some nice IDs, so we can grab the value of them later.
If you don't know what the text fields are for yet, they are for the URLs of the images to be put in, or w/e a PM bar needs.

I kinda missed this part, but I'll tell you it now. You will need to make a normal PM bar for this of course, and add it to the headers. Make sure the variable names are a bit unique.

Now for the last part of the code, a function to change the data. This function will be called when you click on a button, so i hope you have added a button in the pmarea page where you had added some textfields.
Here's an idea on how to call a function: <input type='button' value='your button value' onClick='functionname()'>
You will of course have to change that to your likings.
Making the function is the only hard part of this code, what the function needs to do is, grab all the data from the textfields (the on you made with the ID's) and put that new data in the global headers (where the PM bar code is).
Now we can't just add the data to the headers textarea, we need to replace the variables where the original data is.
Here's a example. Say we have these variables in the global headers, they belong to your PM bar:

---

var one_new_message_image="Url for one new message image";
var alot_new_message_image="Alot new message image";

---

So in this case we need 2 textfields that you made, on for "one_new_message_image" and the other for "alot_new_message_image".
Grab the values of the 2 textfields (that's why i said to give them ID's, to make this part easier).
To replace those 2 variables i just posted, you will need to grab the textarea of the global header.
For this part you need to know abit about forms and stuff, the header textarea with the name "header" is under the first form (which is without a name). so to access this
we will need to use "document.forms[0].header.value" That will be the value of the header textarea where the variables are in.
Now you need to replace the 2 variable with "replace()", with the 2 text fields values.

---

document.forms[0].header.value=document.forms[0].headers.value.replace(/var one_new_message_image=".+?"/,'var one_new_message_image="'+the value of the text field, the one with the ids ;)'+"');

---

That basically how you do it. Do the same for the other variables you wish to replace with the textfields values you made.

So now we're done with the function? Well what happens if we click the button??
NOTHING, we need to add one more thing to the function.

---

document.forms[0].submit()

---

What does part does is submit the first form, which is the form used to save the headers and footers.
So if the variables in the header are replaces and it's saved, that means it has the same affect as if you would go to the
headers and footers and replace the values yourself.
That's how admin editable codes work.
Now you will need to add a link to the admin area to the pmarea page.

---

I really hope this helped some of you, of course like i said, this is not a guide on how to make a admin editable code.
But a simple tutorial to give you a IDEA on how it's done.
So i advice you now to read some admin editable code, Kenshin's PB theater or even Moose's ADMIN EDITABLE PM BAR CODE !!.

cheers :)


Last Edit: Sept 23, 2005 1:20:46 GMT by Team Studio