Solved

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

Posted on 2003-11-06
3
405 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

737 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