Hi.
I have a page that uses a RadWindow to insert symbols into a content page.
When a symbol in the RadWindow is clicked, an OnClick function is called. In the OnClick function, the BrowserWindow is called from which the Javascript function InsertC(symbol) is called. The html code of the radwindow looks like this:
The function InsertC, located in a separate javascript file, looks like this:
In firefox is works as expected. In internet explorer, the problem is this:
Thankful for any help.
Fredrik
I have a page that uses a RadWindow to insert symbols into a content page.
When a symbol in the RadWindow is clicked, an OnClick function is called. In the OnClick function, the BrowserWindow is called from which the Javascript function InsertC(symbol) is called. The html code of the radwindow looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head><link rel="stylesheet" type="text/css" href="Common/Styles.css" /> |
<script language="javascript" type="text/javascript" > |
function GetRadWindow() { |
var oWindow = null; |
if (window.radWindow) |
oWindow = window.radWindow; |
else if (window.frameElement.radWindow) |
oWindow = window.frameElement.radWindow; |
return oWindow; |
} |
function Click(symbol) { |
var curWin = GetRadWindow(); |
var bw = curWin.BrowserWindow; |
bw.insertC(symbol); |
} |
</script> |
<title> |
</title></head> |
<body> |
<div id="Symbol_div"> |
<table id="Symbol_div_table" cellpadding="0" cellspacing="0" class="symbolTable"> |
<tr> |
<td onclick="Click('α');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">α</span></span></a></div></td> |
<td onclick="Click('β');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">β</span></span></a></div></td> |
<td onclick="Click('γ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">γ</span></span></a></div></td> |
<td onclick="Click('π');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">π</span></span></a></div></td> |
<td onclick="Click('ω');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">ω</span></span></a></div></td> |
</tr> |
<tr> |
<td onclick="Click('δ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">δ</span></span></a></div></td> |
<td onclick="Click('φ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">φ</span></span></a></div></td> |
<td onclick="Click('θ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">θ</span></span></a></div></td> |
<td onclick="Click('κ');" align="center"><div style="width:25px; height:25px;" onmouseout="this.style.backgroundColor = '#fff';" onmouseover="this.style.backgroundColor = '#22f';"> <a class="rtbWrap" href="#"><span style="width:100%; height:100%" ><span class="rtbIcon">κ</span></span></a></div></td> |
</tr> |
</table> |
</div> |
</body> |
</html> |
The function InsertC, located in a separate javascript file, looks like this:
function insertC(c) { |
if (document.selection) { // IE |
var rng = document.selection.createRange(); |
rng.text = c; |
rng.select(); |
} |
else { //Firefox |
var sel = document.getSelection(); |
var range = window.getSelection().getRangeAt(0); |
range.deleteContents(); |
range.insertNode(document.createTextNode(c)); |
} |
} |
In firefox is works as expected. In internet explorer, the problem is this:
- after opening the radwindow, the focus is set to the radwindow.
- Clicking on a symbol, it is inserted inside the RadWindow, and not in the content page.
- Clicking on the content page restores focus. Clicking on symbols in the radwindow now works as expected, they are inserted on the content page. But: clicking inside the radwindow, somewhere other than on a symbol, sets focus to the radwindow again.
Thankful for any help.
Fredrik