Solved

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

Posted on 2003-11-06
3
413 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

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 …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

705 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