SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
-
Dec 8, 2003, 18:21 #1
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to manipulate an element that is part of the same fieldset?
So I'm trying to build a little editor, a bit like the one I'm typing in right now
.
Right now I've something like this:Code:<input type="button" class="tagbutt-B" onclick="insertTag(this, 'my-textarea-id');"
- Find the fieldset 'this' is a child of
- Find the first textarea or text input field within this fieldset
RikEnglish tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
-
Dec 8, 2003, 18:27 #2Code:
this.getElementsByTagName("TEXTAREA").item(0).getAttribute("id");
.
-
Dec 8, 2003, 19:18 #3
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Vinnie!
I see what you mean, but how do I find the fieldset? See, my 'this' is the 'this' of a button that's contained within the same fieldset as the textarea.
I don't know if I'm making myself clear... let's try another way...
What I want is a button that manipulates the content of a textarea without having to know anything (id, whatever... ) about this textarea except that it is contained within the same fieldset as the button.
I guess my main difficulty is to find the parent node of this button. When I look around at javascript tutorials et all there's a lot of ways to slide down the tree, but I haven't found anything to climb up it.
RikEnglish tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
-
Dec 8, 2003, 19:40 #4
How about:
Code://if you don't need to know about the fieldset this.form.getElementsByTagName("TEXTAREA").item(0).getAttribute("id"); //or if you really need to go through the fieldset this.form.getElementsByTagName("FIELDSET").item(0).getElementsByTagName("TEXTAREA").getAttribute("id");
Hope this helps!
Edit:
To get the parent node of an element with the DOM, simply use its .parentNode property
-
Dec 8, 2003, 21:31 #5
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
Code:<html> <head> <title>Test</title> <script type="text/javascript"> function findAncestor( elem, ancestorName ) { var p = elem.parentNode; while( p.parentNode ) { if ( p.nodeName == ancestorName.toUpperCase() ) { return p; } p = p.parentNode; } return null; } function tester( elem, fs, text ) { if ( fs != null ) { var tas = fs.getElementsByTagName( "TEXTAREA" ); if ( tas.length ) { tas[0].value += text; } } } </script> </head> <body > <form> <fieldset> <textarea></textarea> <input type="button" value="Try it" onclick="tester(this, findAncestor( this, 'fieldset' ), 'blah' );" /> <textarea></textarea> </fieldset> </form> </body> </html>
-
Dec 9, 2003, 05:31 #6
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks guys!
I will be playing with this today. I want to go with 'parent detection' because I would like to be able to put more then one of these thingy's in one form by copying and pasting and just change one 'parameter', ie the id of the fieldset, to make things work client side.
I'll let you know how I got on, thanks again!
RikEnglish tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
-
Dec 9, 2003, 10:09 #7
Originally Posted by beetle
.
-
Dec 9, 2003, 10:36 #8
-
Dec 9, 2003, 16:47 #9
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Great minds think alike and all that
.
I've used Beetle's getAncestor function. Then I played some more and I came up with this:Code:<html> <head> <title>Edit Form</title> <!-- Source: http://www.sitepointforums.com/showt...18#post1030518 --> <script type="text/javascript"> function findAncestor( e, ancestorName ) { var p = e.parentNode; while(p.parentNode) { if (p.nodeName == ancestorName.toUpperCase() ) { return p; } p = p.parentNode; } return null; } function findDest(e) { if (null != e) { var fs = findAncestor(e, 'FIELDSET'); if (null != fs) { var tas = fs.getElementsByTagName('TEXTAREA'); if (tas.length) { return tas[0]; } else { var i; var ips = fs.getElementsByTagName('INPUT'); for (i=0; ips[i]; i++) { if ('text' == ips[i].type) { return ips[i]; } } } } } return null; } function writeText(text, dest) { // dest is the element to write *to* (destination) dest.value += text; dest.focus(); // make sure to focus back on the element to continue editing } function insertTag(e, tag) { if (null != e && null !=tag) { var dest = findDest(e); if (null != dest) { writeText('[' + tag.toUpperCase() + ']', dest); } } } </script> </head> <body > <form> <fieldset> <legend>Title</legend> <div class="tagbuttons"> <input type="button" class="tb-I" value="I" onclick="insertTag(this, 'i')" /> </div> <input type="text" name="title" /> </fieldset> <fieldset> <legend>Content</legend> <div class="tagbuttons"> <input type="button" class="tb-B" value="B" onclick="insertTag(this, 'b')"; /> <input type="button" class="tb-I" value="I" onclick="insertTag(this, 'i')" /> <input type="button" class="tb-Quote" value="Quote" onclick="insertTag(this, 'quote')" /> </div> <textarea name="content"></textarea> </fieldset> </form> </body> </html>
I'm so happy I know how to climb up the tree now.
Must dash! Have to find a way to close these damn tags!
Thanks again guys!
Rik
Edit:
I had forgotten I wanted to say this:
What I find truly beautifull about this is that it doesn't need id's or anything, just dump the buttons and the text field inside the same fieldset and done!English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
-
Dec 9, 2003, 17:01 #10
-
Dec 9, 2003, 18:45 #11
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for those, Peter!
Originally Posted by beetle
Originally Posted by beetle
Thanks again!
RikEnglish tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
-
Dec 11, 2003, 13:18 #12
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think you need Firebird 0.6.1+ for it to work.
Are you interested in using the other one? What do you think you need to get started?
-
Dec 11, 2003, 15:41 #13
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for your answer Peter.
First let me expain that I'm not really going to use it, at least not immediatelly. Right now I'm just experimenting and learning.
To get started to use it, i don't really need anything. I'm getting the API, at least, I think so. But the underlying code is way over my head
. I've only this week seriously started to look at DOM scripting. Since my last post I've browsed a bit (as one does) and I've come across this article which I will revisit once I get to that level.
Today I'm spending some time over here learning about events.
I've actually got a small question on event accessing if you don't mind.
Is 'this' not widely supported when non-inline event registration is used?
Or... why do I need to do this:Code:function viewIt(e) { if (typeof e == 'undefined') var e = window.event; return viewImage(e); }
Code:function viewIt() { return viewImage(this); }
Thanks again!
RikEnglish tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
-
Dec 11, 2003, 19:43 #14
- Join Date
- Nov 2002
- Location
- Malta
- Posts
- 1,111
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I had a bit of fun in the last couple of hours and I thought I'd share...
The idea was to make that lovely TAEditor a bit more user friendly by adding accesskeys and title tags to the buttons. Like so:Code:function initTaeAccessKeys() { // the id of the element that contains the buttons for which // the accesskeys need to be generated (bce - Button Container Element): var bce_id = 'buttonArea'; // bat - Button value, Accesskey, Title text var bat = [ ['B','b','Bold'], ['I','i','Italic'], ['U','u','Underline'], ['http://','l','Link'], ['@','e','Email'], ['img','p','Picture'], ['#','c','Code'], ['php','h','Php'], ['Quote','q','Quote']]; var bce = document.getElementById(bce_id); var ins = bce.getElementsByTagName('INPUT'); // ins - INputS for (var i = 0 ; i < ins.length ; i++) { if ('button' == ins[i].type) { var b = ins[i]; // b - Button for (var j = 0 ; j < bat.length ; j++) { if ((' '+ bat[j][0] +' ') == b.value) { var ttext = bat[j][2] + ' (accesskey: ' + bat[j][1] + ')'; // ttext - Title TEXT b.setAttribute('accesskey', bat[j][1]); b.setAttribute('title', ttext); } } } } } function initAll() { init(); initTaeAccessKeys(); } </script> </head> <body onload="initAll()">
. The title tags work but the accesskeys simply don't. Pitty, because that would have added some real value to the script.
Well, guess I could make a 'light' version just to show some title tags.
RikEnglish tea - Italian coffee - Maltese wine - Belgian beer - French Cognac
Bookmarks