If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

It will find all elements with the class name "fan" and set them so that when you click on them you can edit the contents and then either save or cancel. To be fair I guess I didn't make it exclusive to <p> elements with the class name "fan" so if that's necessary one additional check would need to be in place. I should also point out that '.getElementsByClassName()' is only supported in IE versions 9 and higher which means if this needs to work in IE8 or below that area of the code would need to be rescripted to grab all <p> elements and then filter them out by class name through a loop.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

This is what i have come up with. Renamed class to "editable". Problem now is that i have only made it possible to create the Save button, and once i saved i cant edit the text again and i cant to find how to resize the editscreen.

Firstly, my original code was just regular javascript, no jquery used. Secondly, there are two things you need to add to your code to correct your issue with only being able to edit once.

When you recreate the <p> element to fill it will the edited text, you don't set the class of this new element to 'editable'. So you'd need to add a line to your saveEdit() function:

Code:

y.className = "editable";

The second thing would be that you need to set the onclick event for this element so that it will change to the edit controls when clicked. To be fair, you wouldn't actually need to set the class with the code above if you just directly set the onclick event. The class itself really only applies during the loading of the page when your script scans for <p> elements with the class 'editable', but after that the class wouldn't be needed.

Code:

y.onclick = fixa;

As far as a cancel button goes, you would probably want to store the original innerHTML in a global variable so you can recall this later in a cancelEdit() function. It would work similar to your saveEdit() function, however you would be using your global variable to set the innerHTML instead of the textarea's value.

Lastly, I'm not sure what you mean in regard to not being able to resize the edit screen. The textarea itself is resizable by the user and you can also set the style.width or style.height in your script if you want to have it initially be a set size. Which also reminds me that if you are going to use a textarea for the editing of those <p> elements, you should probably include a .replace() line in your code to deal with line breaks. HTML code is added to the page as well so perhaps you may want to encode the string to avoid any issues with that.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

My original code might error if you just copy and paste directly. As annoying as it is, sometimes copying and pasting longer lines of code tends to get broken up, thus you have a line of code that has extra breaks in it, giving you incomplete lines of code. I'll edit that really quickly to fix the issue I saw with that and just make sure you check any time you copy and paste code that there are no unnecessary breaks in the middle of any lines of code.

[EDIT]
Nevermind, it turns out I can't edit the post after a certain amount of time. Well here's a repaste of the code with that line break issue fixed.

When you say "a save button" do you mean just for that page load, or subsequent page loads as well? Because if it's the latter, it requires either local storage or a cookie, if only JavaScript is to be used.

Anyway to make this to a "textarea" box ? Yeah i know, im a noob when it comes to Javascript. Learned more from you then my teacher thou

Well, to simply change the text box to a textarea you would just substitute the <input> tag in the _EditMe() function. But as I mentioned before if you are using a textarea for the editing then you will need to consider line breaks using the .replace() method in javascript.

I suppose I should also explain the code so that you actually know what it does and why it works, rather than just having an answer.

The first thing in the script is an event listener being added to the page that waits for the page to load all of its content. When this event is triggered then the _SetEdits() function finds all elements with your 'editable' class and binds a function to their onclick event called _EditMe().

The final 3 functions work on a pretty simple logic. _EditMe() runs a simple check to see if $activeEdit is true or false (I'll explain why later). Then it will set $activeEdit and run _CancelEdit() to make sure any other edits do not interfere (just a precaution for special cases that could occur). Next it sets a global variables to hold the <p> object you are editing and its text. The last step replaces the <p> elements content with a simple edit interface, containing a text area and 2 buttons to save or cancel._SaveEdit() will simple take the textareas content, replace any line breaks with the proper HTML and put it inside of your <p> element (using our global variables). It will then reset our global content variable and $activeEdit (to allow another element to be edited)._CancelEdit() first checks to make sure our global content variable $oldTxt has a value and if so, it will place this content back in to our <p> element, resetting it to its previous value and removing our edit interface. It also then resets the global content variable and $activeEdit to allow editing of another element.

The reason for $activeEdit due to the fact that our <p> element has an onclick event set and so when you click either the save or cancel button, it will also trigger the onclick event of their parent element, the <p> element. So to prevent an endless loop of _EditMe() being triggered, the $activeEdit variable prevents this from happening until the script says its okay. setTimeout() waits 100 milliseconds before allowing another edit; the time could be changed but it's simply just allowing the onclick event of the <p> element to fire, see that $activeEdit is not allowed before changing $activeEdit.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

First of all i wanna say that thank you. I have read 2 books ( some chapters many times ) , the diffrence between you and those books is I understand what you are telling, althou I will read what you have written probably 30 times so it really sticks in my head. If ure webcarierr wont work out, you will make a hell of a teacher. Thank you so much.

p.s. why the dollar sign everywhere? Works great without it . Thank you again

Every coder has their own methods and preferences in how they format their code. For instance, the whole "tabs vs spaces" thing is a common thing different coders have opinions on.

For me, I like to try and declare my variables with dollar signs in front, mainly beacuse it helps me transition between javascript and PHP more easily. I also like to declare functions with an underscore "_" so that I don't ever get a function name confused with anything else.

These things aren't needed, and really it all comes down to what you like best. In the end your code must be readable and understandable by you of all people (though it's nice to be able to make sure others can understand it as well).

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"