Thank you. I understand some of this but not all I'm afraid. I have not been able to make a tbk file to use this xml. I get this message: XML <make> element:
NotFoundError: Node.insertBefore: Child to insert before is not a child of this node
Please check your XML file <make> tag. but maybe this is not a great problem.
Sorry if I'm being a bit dense but in your first reply above you wrote: You can make your words that use classnames clickable if that is desired too. Just give the word an id and use XML to create a click event on the word. Are you now saying that this is not possible after all or have I misunderstood you?
In the text of your second field its says: You ...cannot programmatically set position. In what I have done so far, it is possible to retrieve the start and end points of a word (or even a sentence if that is required) when the user places the caret somewhere in the text. My plan is for the user to do this and then click on a button which would use the retrieved start and end numbers to create a colored word in a hidden field. That field would then be shown, creating the illusion that there is only one field.
Could you you make me a example of You can make your words that use classnames clickable if that is desired too. Just give the word an id and use XML to create a click event on the word. of this is indeed possible, please?
Thanks for your time
John
Projects new and old
48 posts
• Page 2 of 5 • 1, 2, 3, 4, 5
Re: Projects new and old
by John Robin Dove » Thu Jun 20, 2024 4:26 am
- John Robin Dove
- Posts: 538
- Joined: Thu Jan 23, 2014 4:35 am
Re: Projects new and old
by Clifton » Thu Jun 20, 2024 7:29 am
Make sure you are using the latest version of the PowerPac.
Also, you can remove the refObj="myTBField" (refObj="") in the XML for the <make> tag and the error will go away. Or make sure you have an object named "myTBField" on your page.
You can still format to your hearts delight using contentEditable <div>'s. The only problem comes in when you need to set the cursor position when using complex formatting. The anomally is that the cursor will always get positioned at 0 or the home position. The GETTER works fine, but the SETTER fails. You can experiment with it in the XML by adding the following code in the <html> tag for the editable <div>:
If using the color as a classname:
Then in your stylesheet ([name].css), define the class:
Of course, you must load your [name].css file in the <config> section of the XML:
Now when you run the code, if you try and SET the cursor position, it will fail if the position required is located after the above added code. It will SET fine if the position is before the above code. It is a weird anomally that I am yet to overcome. You can see the GET operation working by just moving the cursor around with your mouse and noticing the field below the <div> update the position.
In your case, however, you will likely only need the GET feature and then insert at that point using the innerHTML of the <div> and then replace the entire contents of the <div> with the revised version. Then SET the cursor to the home position or 0. But if I were to use this in my work, I would probably need a functioning GET and SET operation on the cursor position.
Clifton
Also, you can remove the refObj="myTBField" (refObj="") in the XML for the <make> tag and the error will go away. Or make sure you have an object named "myTBField" on your page.
You can still format to your hearts delight using contentEditable <div>'s. The only problem comes in when you need to set the cursor position when using complex formatting. The anomally is that the cursor will always get positioned at 0 or the home position. The GETTER works fine, but the SETTER fails. You can experiment with it in the XML by adding the following code in the <html> tag for the editable <div>:
<span style="color:blue;">[text you want to colorize]</span>If using the color as a classname:
<span class="_blue">[text you want to colorize]</span>Then in your stylesheet ([name].css), define the class:
._blue {
color : blue;
}Of course, you must load your [name].css file in the <config> section of the XML:
<config>
<stylesheet>
../media/[name].css
<stylesheet>
</config>
Now when you run the code, if you try and SET the cursor position, it will fail if the position required is located after the above added code. It will SET fine if the position is before the above code. It is a weird anomally that I am yet to overcome. You can see the GET operation working by just moving the cursor around with your mouse and noticing the field below the <div> update the position.
In your case, however, you will likely only need the GET feature and then insert at that point using the innerHTML of the <div> and then replace the entire contents of the <div> with the revised version. Then SET the cursor to the home position or 0. But if I were to use this in my work, I would probably need a functioning GET and SET operation on the cursor position.
Clifton
- Clifton
- Site Admin
- Posts: 781
- Joined: Tue Jan 14, 2014 1:04 am
Re: Projects new and old
by John Robin Dove » Fri Jun 21, 2024 3:56 am
I think I have made some progress but I still have some way to go.
I fail to understand why I can't use the page1.xml that you sent. Here's the tbk file that I made. https://www.mediacours.com/tb_examples/unknownError.zip It has always contained an object called 'myTBField'. I am using Powerpac 15.521.2.
I fail to understand why I can't use the page1.xml that you sent. Here's the tbk file that I made. https://www.mediacours.com/tb_examples/unknownError.zip It has always contained an object called 'myTBField'. I am using Powerpac 15.521.2.
- John Robin Dove
- Posts: 538
- Joined: Thu Jan 23, 2014 4:35 am
Re: Projects new and old
by Clifton » Fri Jun 21, 2024 7:26 am
The latest is now v15.530.x and a couple of revisions ago I noticed that the XML Engine was not taking into account when handling ToolBook form objects that they are embedded in a <form> tag. This is likely the error that is occurring for you. If your "myTBField" points to a textarea, then the XML Engine will likely come up against this error. The latest version fixes this.
Plus the latest version has finally got caretPosition() to work as both GET and SET for the cursor on <textarea>, <input>, and <div>, and <span> elements with contentEditable="true". I have a couple of additional tests to conduct, but so far I have used some fairly complex formatting inside the contentEditable element and the current code nails the position for the cursor every time.
I will post the result shortly.
Clifton
Plus the latest version has finally got caretPosition() to work as both GET and SET for the cursor on <textarea>, <input>, and <div>, and <span> elements with contentEditable="true". I have a couple of additional tests to conduct, but so far I have used some fairly complex formatting inside the contentEditable element and the current code nails the position for the cursor every time.
I will post the result shortly.
Clifton
- Clifton
- Site Admin
- Posts: 781
- Joined: Tue Jan 14, 2014 1:04 am
Re: Projects new and old
by John Robin Dove » Fri Jun 21, 2024 9:48 am
If you have a minute, I have a new problem:
css:
xml:
My code: var newWord = '<span class="blueWords"> ' + myWord + '</span>'; doesn't work but this does var newWord = '<span onclick= "top.testMe()" style="color: blue; cursor: pointer"> ' + myWord + '</span>'; What am I doing wrong?
css:
- Code: Select all
.myText {
tab-size: 1 !important;
}
.blueWords {
color: blue;
cursor: pointer;
}
xml:
- Code: Select all
<config>
<styleSeet>
../media/selection.css
</styleSeet>
</config>
My code: var newWord = '<span class="blueWords"> ' + myWord + '</span>'; doesn't work but this does var newWord = '<span onclick= "top.testMe()" style="color: blue; cursor: pointer"> ' + myWord + '</span>'; What am I doing wrong?
- John Robin Dove
- Posts: 538
- Joined: Thu Jan 23, 2014 4:35 am
Re: Projects new and old
by Clifton » Fri Jun 21, 2024 11:33 am
In your XML you have a typo:
<stylesheet>
../media/selection.css
</stylesheet>
- Clifton
- Site Admin
- Posts: 781
- Joined: Tue Jan 14, 2014 1:04 am
Re: Projects new and old
by John Robin Dove » Fri Jun 21, 2024 11:55 am
Correct! 
theanks but I've corrected it and it still doesn't work. I'll have another look at it tomorrow.
theanks but I've corrected it and it still doesn't work. I'll have another look at it tomorrow.- John Robin Dove
- Posts: 538
- Joined: Thu Jan 23, 2014 4:35 am
Re: Projects new and old
by Clifton » Fri Jun 21, 2024 12:03 pm
Also make sure you have added "selection.css" to the export of your project and that is in the correct location in the export folder list. This is a common omission when working with external resources.
- Clifton
- Site Admin
- Posts: 781
- Joined: Tue Jan 14, 2014 1:04 am
Re: Projects new and old
by John Robin Dove » Fri Jun 21, 2024 12:07 pm
Got it! Yes, you're right but it wasn't exactly that but something similar and just as silly. I'm calling it a day.
- John Robin Dove
- Posts: 538
- Joined: Thu Jan 23, 2014 4:35 am
Re: Projects new and old
by John Robin Dove » Sat Jun 22, 2024 9:31 am
I am now using 15.530.5.
I've been looking at a contentEditable div. As far as I can tell, it's not possible to use this to select individual words. Is that correct? If so, what I have done so far has not been in vain. Please have a look at it here if you have time.
https://www.mediacours.com/programs/selection John
UPDATE Just tested it again and found a problem. For reasons unknown, the blue words are not permanent. I'll try and fix this tomorrow.
I've been looking at a contentEditable div. As far as I can tell, it's not possible to use this to select individual words. Is that correct? If so, what I have done so far has not been in vain. Please have a look at it here if you have time.
https://www.mediacours.com/programs/selection John
UPDATE Just tested it again and found a problem. For reasons unknown, the blue words are not permanent. I'll try and fix this tomorrow.
- John Robin Dove
- Posts: 538
- Joined: Thu Jan 23, 2014 4:35 am
48 posts
• Page 2 of 5 • 1, 2, 3, 4, 5
Who is online
Users browsing this forum: No registered users and 4 guests