Profile Editable Tutorial!!

[CrAzY_J]

Profile Editable Tutorial (CrAzY_J)

Introduction
Well a Profile editable code was very wanted by some coders on Proboards so i decided to make one before the release of PBV4;
Even if PBV4 comes out you will be able to make these codes because you'll have the knowledge on HOW to make profile editable codes.


To be able to make these codes you will need to know some Javascript DOM, in other words you will need to have experience with coding for Proboards/Suddenlaunch/Conforums using Javascript.
You will also need to know some about Functions.

Page Check

We first of all we need to check if we are on the Edit profile page or not.


if(document.location.href.match('\?action=profile&username=')){


So now we're sure we are on the edit profile page.
the reason for this is, we're going to grab the form variables on the page, and these variables are not located on the main page.
so if we'd out the code without the page check on the main page it would display an error on the browsers.


Insert Row|cell

Now we have to insert a new row and cell in the table for the new text/select w/e your going to use.
so we grab the table and insert a row first and then insert a cell to that row (Cross Browser Reasons).


var TaObj=document.body.getElementsByTagName('table')
for(Ta=0;Ta<TaObj.length;Ta++){
with(TaObj[Ta]){
if(width=='100%' && cellPadding=='3' && rows[0].cells[0].innerHTML.match(/gender/i)){
var Irow=insertRow(6);
var Icell=Irow.insertCell(0);
var Icell2=Irow.insertCell(1);


for those who are unfarmiliar with the function: with(), it's just to notify with which object your working with.
its to make the code a bit shorter, BUT it does not work for Operah.
also rows[0].cells[0] just a shorter way of document.getElementsByTagName in the if function.
it will grab the first row and then the first cell in that row.

Now we need to put some values in the cells.
I will skip this part.
but here's what we'll use for this tutorial, i will add it in Icell2.


iCell2.innerHTML="<input id='Txt' type='text'>


i put a text box in it with a id asigned to it.

Saving Information
Now we'll have to save the information inputted in the newly created text input.
We're going to to use some of the build features of the page which will be viewed in the mini profile.
for example the Personal Text.

short: we take the value of our new textarea and put it in the personal text so we can see it in the mini profile


to be able to do this we use the form name, which is creator
and the name of the personal text, which is usertext.
so to grab the personal text box we use this


document.creator.usertext


You dont have to use the personal text, you can also use websiteurl, that is handy because you can store as many charachters in there as you want.

The Function
We need to add the value of Txt (the ID of the inputted text) using a function.
so if the user submits the the changes by clicking the modify button we execute the function


function sharingan(){
var Txtvalue=document.getElementById('Txt);
var shorts=document.creator.usertext;
if(shorts.value.match(/<<(.+?)>>/i)){
shorts.value=shorts.value.replace("<<"+RegExp.$1+">>","Txtvalue")
}else{
shorts.value+="<<"+Txtvalue+">>";
}}



first of all i made some variables so i wouldnt have to type too much >_>

second, we're going to add the new value of Txt (the newly added input text) to the usertext.
we put the value between "<<" and ">>" to make it easier for us to grab later (because we might grab some orignal personal text submitted by the user);
but if the personal text already contains the << and >> (because the user has already submitted something in the newly added text before)
we just replace it with the new value the user submitted

short: we check if the user has messed with Txt, if so we just replace the value, if not we add it.

this might sound a bit confuzzling but just reread reread reread reread and think logic and you'll get it .


so we have the function, now we execute the function when the user modifies his settings.


document.creator.onsubmit=sharingan;



The Finishing touches
Now we make the board footers part which is pretty easy.


<script>
var tdObj=document.body.getElementsByTagName('td')
for(t=0;t<tdObj.length;t++){
with(TD[t]){
if(width=='20%' && vAlign=='top' && innerHTML.match(/posts/i)){
if(innerHTML.match(/<<(.+?)>>/i)){
innerHTML=innerHTML.replace("<<"+RegExp.$1+">>",RegExp.$1)
}}}}
</script>


all i did was remove the << and >> which would look corny 0_o


Last Tip
on the edit profile page, the newly added input text, you could add this:


var Textie=(document.creator.usertext.value.match(/<<(.+?)>>/i))? RegExp.$1:"";
Icell2.innerHTML="<input id='Txt' type='text' value=Textie>"



the first part is a shorter way of saying this:

if(document.creator.usertext.value.match(/<<(.+?)>>/i)){
var Textie=RegExp.$1;
}else{
Textie=""
}


then we add that value to Txt.
why?
if the user had already submitted something this would help to show what the user had submitted last time in the Txt


Questions and Comments

You can post any questions about the tutorial here
or PM me
same goes for the comments.

i really hope you guys liked it =D

[Aaron]

Very very nice tutorial CrazyJ. I am sure several people will find this very useful.
Great job.

[Xylish]

Nice tut crazy! I'm diggin into it already!

[CrAzY_J]

Thanks naruto & Popo

[CD]

Nice Crazy. I knew a lot of it, but it was really helpful.

[ShadowyOne]

Barely understood it, but it was cool.

[CrAzY_J]

ShadowyOne said:

Barely understood it, but it was cool.

lol



Would it be a good idea to make a admin editable tutorial? o.O

[Aaron]

If you're up for it I say yes.

Although, if PBv4 really comes out on the 30th, then it might be kind of useless.

I was going to code an admin cp code, but then said "I'll wait for PBv4".

[Kenshin]

You can still make an admin editable one for ConForums

[Aaron]

5% of my coding will be CF/SL, 95% will be PBv4 =P

I think I'm going to switch to practically all PB coding. I bet you eventually CF/SL will upgrade.