Jump to content

changing text


optikalefx

Recommended Posts

ok this one is tough.

 

ok so in my last thread we changed the attributes to an img tag.

Well now i want to change the text on the page.  I want to be able to click on some text, insert the cursor, and be able to type.  And using a giant textbox is no good here because any/all text needs to be editable.  You can see examples of this with that designer mode that browsers have, theres some javascirpt code you enter in the URL and you can drag pictures and change text.  So there must be a way.  And ive read about a javascript way of 'placing the cursor at text' somwhere.

 

my initial idea is to envoke the script onClick of the text.  Not sure what your onClicking exactly.  But yea, this is the idea.

Link to comment
Share on other sites

ok, kinda, but not really.

 

I dont want to turn the whole page into text box.  Plus i only want the editing portion, and that code is near impossible to break down.

This is much closer to what im after.

http://www.quirksmode.org/dom/cms.html

 

except i would need to put <p> and </p> around all things that text, not sure if thats possible either.  I dont want have mini text boxes there, but thats closer than the wysiwyg

Link to comment
Share on other sites

ok so ive got this part

 

var y = document.createElement('TEXTAREA');

y.style.border="none";

 

it works where if the text has <p>  </p> around it, you can click it and it turns to a textarea, and i made the border be...not there, so it looks like your editing on the page.  The problem is that the text area doesnt adjust to the size of the text.  If its one line of text, it creates a blank row which kinda moves the text out of position.  And if its long, it puts it all in like a reallly small textarea with a scrollbar.  Anyway to make this look right?

Link to comment
Share on other sites

This is pretty simple

 

Crete a span/p with an id.

Create a JS onclick listener that will take that span and take the innerHTML and apply it to the textarea's value

 

Something like this

 

js:

<script type="text/javascript">
    onload = function(){
        var text        = documnet.getElementById('editable');
        var text_area   = documnet.getElementById('editable:textarea');
        var save_btn    = documnet.getElementById('save_button');
        
        //add text functionality
        text.onclick = function(){
            text.style.display      = 'none';
            text_area.style.diaplay = 'block';
            //inside here you whould set the innerhtml of the text area to the innerhtml of the text node and 
            //add click event for the save_btn that would write the inner html of the textarea to the text element
        };
    }
    
</script>

css:
#textarea_form{
    display:none;
}

html:
<p id="editable">
    this is some text
</p>
<form id="textarea_form">
<textarea id="editable:textarea" rows="3" cols="30">    
</textarea><input type="button" value="save" id="save_button" />
</form>
[code]

[/code]

Link to comment
Share on other sites

It seems like that code just does what i already have done, it allows you to click a spot of text and turns it into a text box and then when you hit save it puts in the new innerHtml.  I got that part.  The part thats tough is the SIZE of the textbox is always set, and it needs to be dynamic to the size of the text area your editing, not to mention the size of the window (did that part) and it needs to extend as you type, (i found a script for that i cant get to work).

 

But the part that gets me, is how i can tell what CSS is appllied to the area b4 you edit so you can reApply the same styles in the new text box, basically a wysiwyg but not as complicated as the other one.  Just a few simple things in this one.

 

here is the script that extends the textarea as you type

http://www.felgall.com/jstip45.htm

 

and here is the script that ive altered to do what emehrykay was saying

http://www.quirksmode.org/dom/cms.html

 

 

Link to comment
Share on other sites

is there any reason why there is a syntax error?

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
 		if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
 	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

 

i copied straight from the site, and it didnt work, i changed their x to my i and it still doesnt work, any ideas?

Link to comment
Share on other sites

is there any reason why there is a syntax error?

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
		if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

 

i copied straight from the site, and it didnt work, i changed their x to my i and it still doesnt work, any ideas?

 

My guess, without looking at the rest of your code, is that you are using global variables when you dont write var in front of them. But there could be an error with my original code. try

 

y.onkeyup = function(){

sz(this);

}

 

Link to comment
Share on other sites

would global/local variables be a reason for that code having to be in the head of the document.  I mean the function alone, not even the call right now, but the function sz(t) { } part, when i past that in the body with the rest of the JS it gets an error, but it works in the head, although i cant even get the code to work at that point.

var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
if (attr) y.id = attr;
y.style.border="none";
y.style.width=pageX;
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(done,obj);
z.insertBefore(bold_butt,obj);
z.insertBefore(ital_butt,obj);
z.insertBefore(color_butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
y.onkeyup = sz(this);
editing = true;

 

 

Link to comment
Share on other sites

yea i tried that.

 

i believe the problem is that the the sz function is in the <head> of the document.  I dont get it, nothing else needs to be there, why does this stupid function have to be.  See in the end it needs adjust to the CURRENT size of the text, and then adjust as you type as well.

 

i also need to figure out how, when you hit enter, insert a \n.  when you edit the text box and hit enter in it, and then get out of the text box, it doesnt register the line break.  Id like it to be a \n and not a <br> though because i dont want the user to see <br> in the text box.

 

I checked out nicedit.com.  Im not looking to use someone elses script, im trying to make my own, and since their source is sooooooo packed i cant really read through it for help.  thanks for the suggestion though.

Link to comment
Share on other sites

Having the script in the head or the body doesnt matter, it all gets put to the memory.

 

You need to do

 

y.onkeyup = function(){func();}; because you need that function (func) to fire when a key is pressed

 

try

 

y.onkeyup = function(){

alert('key pressed');

};

Link to comment
Share on other sites

im not even ready for the function call, i cant get the script to not ruin everythign else

 

this causes a syntax error

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
 		if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
 	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

this doesnt

function sz(t) {
a = t.value.split('\n');
b=1;
for (i=0;i<a.length;i++) {
		//if (a[i].length >= t.cols) b+= Math.floor(a[i].length/t.cols);
	}
b+= a.length;
if (b > t.rows) t.rows = b;
}

 

when i comment out that line, my original code runs, (doesnt work obviously) but something is wrong there that is causing an error.

Link to comment
Share on other sites

var editing  = false;
var pageX = (document.all)?document.body.offsetWidth:window.innerWidth - 50;
var myObj;

if (document.getElementById && document.createElement) {
// create done button
var done = document.createElement('BUTTON');
var donetext = document.createTextNode('Done Editing')
done.style.position="absolute";
done.style.top="0px";
done.style.left="0px";;
done.appendChild(donetext);
done.onclick = saveEdit;

//create bold button
var bold_butt = document.createElement('BUTTON');
bold_butt.style.position="absolute";
bold_butt.style.top="0px";
bold_butt.style.left="120px";
var boldtext = document.createTextNode('Bold');
bold_butt.appendChild(boldtext);

//create italics button
var ital_butt = document.createElement('BUTTON');
ital_butt.style.position="absolute";
ital_butt.style.top="0px";
ital_butt.style.left="170px";
var italtext = document.createTextNode('Italics');
ital_butt.appendChild(italtext);

//create color button
var color_butt = document.createElement('BUTTON');
color_butt.style.position="absolute";
color_butt.style.top="0px";
color_butt.style.left="230px";
var colortext = document.createTextNode('color');
color_butt.appendChild(colortext);
}

// show what tag your on as you move mouse around
document.onmouseover = function() {
self.status = "Current Tag is:   " + window.event.srcElement.tagName;
}


function catchIt(e) {
// cant click if your busy editing
if (editing) return;
// validate check
if (!document.getElementById || !document.createElement) return;
//  get the current element tag
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
// go up DOM till we get to a tag
while (obj.nodeType != 1) {
	obj = obj.parentNode;
}

// if Textarea or link dont do anything
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
//allow inner most tag to be created
while (obj.nodeName != 'P' && obj.nodeName != 'HTML' && obj.nodeName != 'SPAN' && obj.nodeName != 'DIV' && obj.nodeName != 'B' && obj.nodeName != 'I' && obj.nodeName != 'TD') {
	obj = obj.parentNode;
}
// if its HTML dont do anything
if (obj.nodeName == 'HTML') return;
// create a global varaible of the current tag
myObj = obj;
// get the text
var x = obj.innerHTML;
// create the new textarea
var y = document.createElement('TEXTAREA');
// get the node above that so you can insert b4 it
var z = obj.parentNode;
// put the new textarea in
z.insertBefore(y,obj);

//put all the buttons in
z.insertBefore(done,obj);
z.insertBefore(bold_butt,obj);
z.insertBefore(ital_butt,obj);
z.insertBefore(color_butt,obj);

// we dont need to know the above node anymore
z.removeChild(obj);
// put the text in the new textarea
y.value = x;
// make it borderless
y.style.border="none";
// make it long
y.style.width=pageX;
// make it tall
y.style.height="50px";
// give it an id to use later
y.id = "cur_edit";
// put the focus on it
y.focus();
// user is editing right now
editing = true;
}

function saveEdit() {
var area = document.getElementById('cur_edit');

// get the ID attribute
//NEXT FIND IF ONE EXISTS, AND DO THAT FOR EACH AND SO ON
alert(myObj.getAttribute('id'));
//Re-create inner most element
if (myObj.nodeName == 'P') var y = document.createElement('P');
if (myObj.nodeName == 'SPAN') var y = document.createElement('SPAN');
if (myObj.nodeName == 'DIV') var y = document.createElement('DIV');
if (myObj.nodeName == 'B') var y = document.createElement('B');
if (myObj.nodeName == 'I') var y = document.createElement('I');
if (myObj.nodeName == 'TD') var y = document.createElement('TD');

// get node above new textarea
var z = area.parentNode;
// get the new text in the textarea
y.innerHTML = area.value;
//  put the text between the re-created tag
z.insertBefore(y,area);
//  get rid of the text area
z.removeChild(area);
// how many buttons are there
numButtons = 3;
// get rid of each button
for (i=numButtons;i>=0;i--) {
z.removeChild(document.getElementsByTagName('button')[i]);
}
// not editing anymore
editing = false;
}
// when you click, Start
document.onclick = catchIt;

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.