if text is bold function

[marko_one]

Hi All,
I need a function to change button source depending on whether the text is bold or not.

example - Bold Text

when I click anywhere in this region, I want to be able to make a button change its appearance. I can write the function, but I need to know how to get the formatting of the text.

I am writing a rich text box control for my web site and so I need this ability to tell when text is bold (this will also extend to italic and underline)

if you look at MS Word and set formatting differently you can see how the appearance of the bold, underline, italic etc change as you select or insert the cursor in the region

to use rich text you need to use a DIV with the contenteditable property set -it is a MSHTML wrapper.

any ideas?

Marko.

[Khalid Ali]

In my opinion,unless you ecplicitly set font-weight using CSS and/or JavaScript to bold you can not retrieve it prgramatically.
Suppose you set it programattically,then you can get it for any element,in this case may be an input type="button"
<input type="button" id="btnID" value="Some value" style="font-weight:normal;"/>

var obj = document.getElementById("btnID");
if(obj.style.fontWeight!="bold"){
obj.style.fontWeight="bold";
}else{
obj.style.fontWeight="normal"
}

[marko_one]

Thanks Khalid,
I'm not sure whether this is the right place to post this one, but I'm here now anyway..

The thing is that I am using the contenteditable feature which subsequently enables the MSHTML editor, so by using keyboard shortbuts such as Ctrl + B you can make the text bold from within a div. Alternatively you can use a function which will call functions to make the text bold like document.myTextDiv.execCommand('bold', false, '') ; this will render the text within the div as bold, if you extract this formatted text from the div you get < B > Bold Text < / B >. (without the spaces ) So what I need to know is, if I am within the text between < B > and < / B > tags then can I determine whether it is bold text? Surely there must be some way to tell if text is between opening and closing bold tags?

Marko.

[Khalid Ali]

Since you are way into MS domain( which I have ner been even closer to..:D ), I can sugest that will work in a simple html document( hopefully it should workin MS stuff as well)

You can always get the previous or next element to any html element in a document(with all DOM compliant browsers).
el.previousSibling;
You can always get a parent element(true in your case ).
el.parentNode

I think if you can work with these you can solve your problem.

[marko_one]

Hi Khalid,
Thanks for your reply, but I'm not sure how to do this one you posted. Below is part of the code I am using, This is where the user types thier text, from within the DIV element.

<td id="myTextTD">
<div id="myTextDiv" name="myTextDiv" contenteditable style="OVERFLOW-Y:auto; OVERFLOW-X:auto; HEIGHT:100%; WIDTH:100%; BACKGROUND-COLOR:white;"></div>
</td>

To the user this looks like a normal text area to type in, but it is not a textarea and I am not sure how to access individual pieces of text within the div area.

If I have a piece of text like this:

My Piece of < B > Bold Text < / B > is not bold any more

This is now made up of :

<td id="myTextTD">
<div id="myTextDiv">
My Piece of < B > Bold Text < / B > is not bold any more
</div>
</td>

which is written from within the myTextDiv element, If I was to move the cursor to the 'Bold Text' (which of course shows up as bold text without the Tags shown) Section, then the placing of the cursor from within the 'Bold Text' section does not allow me to access parentNode. I Imagine the parentNode of the myTextDiv element is the <td> element?

can you tell me how to access this '< B >' parentNode to check whether it is bold?

My DHTML is not that great :(

Thanks

Marko.

[marko_one]

I'll post the code which is a basic Rich Text editor. If you use it, I think you will only be able to use it in IE 5+.

If you put some text in it and highlite some of it and make it bold, then click the mouse somewhere that is not bold, you will see that the bold button is still highlited. So this is my problem. Also if you select some text, make it bold then move the cursor with the keyboard the problem is still there.
I need to know when the cursor is between bold tags so I can set the state of the buttons. This is two different types of event, an onmouseclick and an onkeypress which can check to see whether the text is bold.

how can I do that in this code?

Many thanks for reading,

MArko.

[Khalid Ali]

see if this works for you,I bet if worked hard on it,it can even be made allot better.

make sure the youselect the bold word so that it will give you the node name

http://68.145.35.86/temp/marko_one/test/test.html

[marko_one]

Thanks for that Khalid, that opens up a new can of worms though - what about selecting text like

< STRONG > < U > Bold Underlined Text < / U > < /STRONG >
how will we know if this is bold AND underlined?

I hear you say "One step at a time", I know (sorry)...

I was kind of aware of how to do something like this anyway, what I really want to do is check the formatting when the cursor is 'IN' the bold region etc... not by selecting a region, just by clicking the mouse on a region or moving the cursor over the region with the keyboard.

Is this possible?

Marko.

[Khalid Ali]

see in the code

I capture 2 kinds of events

document.ondblclick = getSelectedText;
document.onmouseup = getSelectedText;

you can change it to only capture one type of events something like this

document.onclick = getSelectedText;

now it will react to a click.At this point you have all the amo to handle this,I leave it here,the rest is only playing around with dom properties, look at the DOM documentation by MS and see which is the most approrpriate methods for youto find out what you want.