First of all sorry Crazy_J, but I noticed you missed quite a few things. Second of all if you do not know the functions if, for, function, replace, or grabbing info from forms you do not belong here .

Alright, I took one of my old N00b codes (XP) and fixed it up and tested it, it works, and it's cross-browser.
Every piece of the code, and more are explained.
It is an admin editable news hack. Here's the code:

Main Header:

<script type="text/javascript">
<!--

//Made by Nate for Admin Tutorial
//This may not be used or reposted without permission
//Leave this header intact

var Tbg1="titlebg";
var Tbg2="windowbg";
var Twidth="650";
var TnewsTitle="News";
var Tnews="Insert News here.";
var Tdisplay = "";
var nTable="<br><center><table cellspacing='1' cellpadding='3' class='bordercolor' width='"+Twidth+"' id='tehNews' style='display :"+Tdisplay+"'>";
nTable += "<tr class='"+Tbg1+"'>";
nTable += "<td align='center'><b><font class='text1' size='2'>"+TnewsTitle+"</font></b></td>";
nTable += "</tr>";
nTable += "<tr class='"+Tbg2+"'>";
nTable += "<td align='center'>"+Tnews+"</td>";
nTable += "</tr>";
nTable += "</table></center><br><br>";
document.write(nTable);

//-->
</script>


Main Footer:

<script type="text/javascript">
<!--

//Made by Nate for Admin Tutorial
//This may not be used or reposted without permission
//Leave this header intact

if(location.href.match(/action=(admin|\w+3)/i)!=-1){
var div = document.getElementsByTagName('div');
for(x=0;x<div.length;x++){
if(div[x].innerHTML.match(/Headers\sand\sFooters/i)){
div[x].innerHTML+='<br><a href="index.cgi?action=headersfooters2&id=-&type=newsprefs">News System Preferences</a>'
}
}
}
if(location.href.match(/type=newsprefs/i)){
document.title = document.title.split("-")[0] += '- News Preferences';
var table = document.getElementsByTagName('table');
for(i=4;i<table.length;i++){
table[i].style.display="none";
}
var aTable = "<center><table cellspacing='1' cellpadding='3' bgcolor='#000000' width='92%'>";
aTable += "<tr class='titlebg'><td>News System Preferences</td></tr>";
aTable += "<tr class='windowbg'><td><center><table>";
aTable += "<tr><td align='left'>News Title:</td>";
aTable += "<td align='center'><input type='text' id='newsTitle' value='"+TnewsTitle+"'></td>";
aTable += "<td align='right'>This is the title of your news.<Br>Example: News, Articles etc.</td>";
aTable += "</tr><tr><td align='left'>Class 1:</td>";
aTable += "<td align='center'><input type='text' id='bg1' value='"+Tbg1+"'></td>";
aTable += "<td align='right'>This is the class for the row<br> that has your news title on it.<br> Example: titlebg, catbg, etc.</td>";
aTable += "</tr><tr><td align='left'>Class 2:</td>";
aTable += "<td align='center'><input type='text' id='bg2' value='"+Tbg2+"'></td>";
aTable += "<td align='right'>This is the class for the row<br> that has your news on it.<br> Example: windowbg, windowbg2, etc.</td>";
aTable += "</tr><tr><td align='left'>Width:</td>";
aTable += "<td align='center'><input type='text' id='width' value='"+Twidth+"'></td>";
aTable += "<td align='right'>This is the width of the news table.<br> Example: 750, 92%, etc.</td>";
aTable += "</tr><tr><td align='left'>Display:</td>";
aTable += "<td align='center'><select id='tDisplay'><option value=''>Show</option><option value='none'>Hide</option></select></td>";
aTable += "<td align='right'>Choose Show or Hide.</td>";
aTable += "</tr><tr><td align='left' valign='top'>News:</div></td>";
aTable += "<td align='center'><textarea id='news' rows='6'>"+Tnews+"</textarea><br><input type='submit' value='Save Changes to News' onClick='newsupdate();'></td>";
aTable += "<td align='right' valign='top'>Quite simply this is your News.<br></td>";
aTable += "</tr>";
aTable += "</table></center>";
aTable += "</td></tr></table></center>";
document.write(aTable);
}
if(document.referrer.match(/type=newsprefs/i)){
var TD = document.getElementsByTagName('TD');
for(n=0;n<TD.length;n++){
if(TD[n].innerHTML.match(/headers and footers have/i) && TD[n].className.match(/windowbg/i)){
TD[n].innerHTML = TD[n].innerHTML.replace('Your headers and footers have been successfully updated.','Your News System preferences have been updated successfully.');
}
}
}
function newsupdate(){
for(h=0;h<document.forms.length;h++){
if(document.forms[h].header){
var hreplace = document.forms[h].header;
var newsTitleVal = document.getElementById('newsTitle').value;
var bg1Val = document.getElementById('bg1').value;
var bg2Val = document.getElementById('bg2').value;
var widthVal = document.getElementById('width').value;
var newsVal = document.getElementById('news').value;
var tDisplay = document.getElementById('tDisplay');
hreplace.value = hreplace.value.replace(/var Tbg1=".*"/i,'var Tbg1="'+bg1Val+'"');
hreplace.value = hreplace.value.replace(/var Tbg2=".*"/i,'var Tbg2="'+bg2Val+'"');
hreplace.value = hreplace.value.replace(/var Twidth=".*"/i,'var Twidth="'+widthVal+'"');
hreplace.value = hreplace.value.replace(/var TnewsTitle=".*"/i,'var TnewsTitle="'+newsTitleVal+'"');
hreplace.value = hreplace.value.replace(/var Tnews=".*"/i,'var Tnews="'+newsVal+'"');
hreplace.value = hreplace.value.replace(/var Tdisplay = ".*"/i,'var Tdisplay = "'+tDisplay[tDisplay.selectedIndex].value+'"');
document.forms[h].submit();
}
}
}


//-->
</script>


I. The Header

Alright you should know the script tags the blockers and the quotes so let's start with the variables in the header.
As you can see there are variables in the header:


The colors link the variables with where they go. So just examine it and you should get it.

---

II. The Footer.

Okay, let's do it little by little. First the admin link:

Red = If statement for whenever the admin panel is displayed, \w+3 is for whenever there's some thing like headersfooters3 in the url.
Blue = Defining Div
Brown = Looping through the Divs
Purple = Define's div[x] as a div that contains Headers and Footers in it's innerHTML
Green = Adds to the Div the link to your new page.
Bold = Notice how it's on the headers and footers page.
Italics = This is the id of the headers and footers which is explained at the end.

---

III. Making your new page.



Red = If statement, if what's in the parentheses is in your url then it does whatever is in the {}'s
Blue = Adds to the title whatever is in quotes.
Green = Defines table
Purple = loops through the tables starting at the forth one
Orange = Hides table

---

IIII. Creating your new page. Part Two.

Ok so now you have a page with a welcome table on it weeeee.
So we need to add some HTML,



Alright I am not going through this whole thing, I did highlight somethings though.
Red = ID these are the most important part you'll need them later.
Blue = These are the values defined in the header.
Purple = This is your funtion name, defined later.

---

IIIII. A nice touch.

Alright this is a piece Moose showed me how to do. It's optional but a nice touch and I recommend it. It replaces "Your headers and footers have been successfully updated" with whatever you want so it makes it look like it wasn't the headers and footers page you were on.




Red = This is the little piece from your new pages url.
Blue = This is what their editing.

---

IIIIII. Saving

Now before you started you were probaly thinking how the heck do you save. I don't know who figured out this simple, genius idea, but all you do is replace text in the textboxes, that is why it is located on the h/f page.


Okay...

Red = Defining the functin so it can be called later
Blue = The looping through of document.forms with the variable h.
Green = If there is a document.form that contains a .header then it is defined document.forms[h]
These are the variables from the text forms.
Yellow = There are two yellows the defined variable and the replace part.
Orange = These are the replace functions that replaces text in the header examine it and the header next to each othe, notice any similarities.
White = Submits the froms and all of the info.

IIIIIII. Headers and Footers Links

Alright I'm just gonna post them

Global Headers and Footers [index.cgi?action=headersfooters2&id=*]
Main Headers and Footers [index.cgi?action=headersfooters2&id=-]
Board Headers and Footers [index.cgi?action=headersfooters2&id=BOARD_ID] (EDIT CAPS)

There you go, that should be it, if you have any other questions though just post them here, but please post your codes if they're not working in support.


Last Edit: Jun 7, 2006 0:25:48 GMT by Nate