Solved

onFocus? indented when clicked on bold text in textarea, not when text is not bold

Posted on 2003-11-06
3
401 Views
Last Modified: 2007-12-19
Hi, me again!
I have some code which makes highlighted text in a rich text box bold or unbold.
At the moment I have an image which onmouseover is indented and onmouseout is normal.
What I want is the code to see where the cursor is in the textbox (what place in the text it is clicked) and see whether it is bold or not. if it is then I want the image sbold and if it isn't then I want the image bold to be shown.

I believe it may be something to do with onfocus but my attempts have not worked.

Can anyone point me in the right direction, I'v been looking at other code but I can't distiguish which bit of code does this.

The code I already have is as follows:

<html>
<head>
<script>
function FormatText(command, option) {
            document.getElementById("edit").contentWindow.focus();
            document.getElementById("edit").contentWindow.document.execCommand(command, false, option);
            document.getElementById("edit").contentWindow.focus();
}
</script>
</head>
<body scroll=no onLoad='frames.edit.document.designMode = "On"'; rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a href="javascript:" onClick="FormatText('bold','')" onmouseover="bold.src='images/buttons/sbold.gif'" onmouseout="bold.src='images/buttons/bold.gif'"><img name="bold" border=0 src="images/buttons/bold.gif">&nbsp;Make text bold</a>

<iframe id="edit" width="100%" height="57%"></iframe>
</body>
</html>

Thanks
0
Comment
Question by:wjdashwood
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
NetGroove earned 500 total points
ID: 9695658
Here again a small example:

<html>
<head>
<script>
function FormatText(command, option) {
  document.getElementById("edit").focus();
  document.execCommand(command);
  document.getElementById("edit").focus();
}


// markSelectedElement(): called by onClick and onKeyup events
// on the contectEditable area
function markSelectedElement() {
   var r = document.selection.createRange();
}


// reset(): called from all over the place to make the toolbar
// represent the current text. If el specified, it was called from
// hover(off)
function reset(el)
{
   if (!el || el == btnBold)         setState(btnBold, document.queryCommandValue('Bold'), 'images/buttons/bold.gif', 'images/buttons/sbold.gif');
}

// setState(): called from reset() to make a button represent the state
// of the current text.  Pressed is on, unpressed is off.
function setState(el, on, onGif, offGif)
{
      if (on) {
         el.src = onGif;
      } else {
         el.src = offGif;
      }
}

</script>
</head>
<body scroll="no">

<img name="bold" id="btnBold" border=0 src="images/buttons/bold.gif" onClick="FormatText('bold')">
<table id="editor" unselectable="on" height="100%" cellspacing="0" cellpadding="0" width="100%" bgcolor="buttonface" border="1"><tr><td>
<div id="edit" onkeyup="reset(); markSelectedElement();" contenteditable="true" style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%" onclick="reset(); markSelectedElement()"  onmouseup="markSelectedElement();" height="100%" width="100%">
</td></tr></table>
</div>
</html>

0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9695667
Parts of this example are from this version:
http://richtext.cs.ramesys.com/rt-0.3/help/samples/test_embedded.asp


0
 

Author Comment

by:wjdashwood
ID: 9698184
thanks, that seems to do what I wanted. A little more complicated than I hoped it would be but nevermind. I'll just have to work a little harder to get my head around it.

Thank you.
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Where is java script information saved? 2 53
PHP Form Calculate Total Price 10 42
Jquery 2 13
key press alert 2 19
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question