optikalefx

actually, i dont need to do that anymore. I changed the ID when i needed to. UMMMMM you know how i was trying to getAttributes? Well some of the styles arent attributes like (<p style="color:blue">) some of the styles are up in the head <style type="text/css"> p {color:blue;} </style> how can i get those styles?

ok so say i have this <span id="1" style="color:blue" class="htext" name="number">My text</span> how would i get {id="1" , style="color:blue" , class="htext" , name="number"} or more appropriatley a 2d array [id][1] [style][color:blue] [class][htext] etc.

intresting. I have both firefox and firebug. I didnt look at it though. I knew the status bar didnt work in ff so i just used it in safari since it did work, ill get rid of it, but i have a followup. Can i get all Attributes on a tag and store them into an array? i can use element.getAttribute('attribute'); but i cant get ALL of them

that code works fine. It puts the current tag under mouse in the browser. Its very helpful for me when developing this. It works in the newest safari.

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;

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.

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.

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;

ok it says it needs to be in the head, but, i dont want it in the head, it needs to be with the rest of the javascritpt...grrr

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?

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

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?

and on the same line, a button that will disable all links, and then when pressed again, enables all links. if im getting annoying let me know

well maybe you could help me go this route. I can style the textareas so they dont look like textareas. BUT, how can scan a document and put <p> in front of everything thats text?

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

Oh yea, the other option is, there can be a button to turn on Text editing mode or whatever. so your not ALWAYS editing text. the reason for this is so that links dont work in text edit mode. So you can change the text of the link.

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.

Ahh that works great, thats exactly what i was looking for. schweeeet. I look forward to you figuring out this next (hopefully last) problem in my next thread.

yea i want to access all the images on the page. But they dont have an ID to begin with either. I want to add the ID to all the <img tags on the page

well with what we are doing in our project, Im able to get into the FTP server of the client. But even having the file list of / directory of the site, i dont know how to tell which file is the main file.

If i have <img src="myimage.jpg"> and i want to click a button that changes the code to <img src="myimage.jpg" id="newlyaddedid"> I can use innerHTML to add txt around it, but idk how to set/create attributes within the tag.

Ok, so i was wrong. If there is no file with extension in the URL IE www.mysite.com/ then it just says index.htm. Which is fine most of the time, except when the default page is index.php. Is there a way to detect that as well? The problem is that a server can default to index.htm OR index.php OR main.htm OR main.html OR index.html. How can i know which one of these its going

MAD PROPS MAN!!! great job! it works! Ill recommend you to my comrads. Thanks so much!

wait, i just read what the code is doing, itll say index.htm no matter what. lol. This one doesnt actually read from the URL?

OK making progress!!! great job!! The only problem is that if the index file is index.php and not index.htm then it still shows index.htm even though that doesnt exist. Can we modify to accept all forms of index types? here are some common ones index.html, index.htm, main.html, main.htm, index.pl, index.php great job btw!