Hi I am trying to create a highlighter that should work exactly the same way in ms word. I searched a lot but couldnot find any proper code to do it in two step. i.e a user select the highlighter once and then he just has to keep selecting the text for hightlighting.
The maximum i could do is to do in two steps, which is just okay but not what i exactly require. Below is the code but it also has one problem with it.. if you select a word that has a space before it then i dont know why it omits that space while pasting the HTML back agian. I will really appreciate if someone can offer me a better code for this job.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Item Bank</title>
<style type="text/css">.button
{
border:none;
border-style
utset;
height:20px;
width: 20px;
border-width:2px;
}
.buttonPressed
{
border:none;
border-style:inset;
height:20px;
width: 20px;
border-collapse:collapse;
border-width:1px;
border-left-color:#000000;
border-top-color:#000000;
border-right-color:#FFFFFF;
border-bottom-color:#FFFFFF;
color:#000000;
border-spacing:0px;
}
</style>
</head>
<script language="javascript">
function hglight(color)
{
alert("working")
document.frmMain.btnGreen.className='button';
document.frmMain.btnYellow.className='button';
document.frmMain.btnRed.className='button';
strColorCode="#000000";
switch (color)
{
case "Green":
strColorCode="#6CFF6C";
document.frmMain.btnGreen.className = 'buttonPressed';
break;
case "Yellow":
strColorCode = "#FFFF00";
document.frmMain.btnYellow.className = 'buttonPressed';
break;
case "Red":
strColorCode="#FF7171";
document.frmMain.btnRed.className = 'buttonPressed';
break;
}//end switch
if (window.getSelection)
{
window.getSelection();
alert("window.getSelection()");
}
else if (document.getSelection)
{
alert("getselection");
document.getSelection();
}
else if (document.selection)
{
var myRange = document.selection.createRange();
var myText = "<span style=\"background-color:"+ strColorCode + "\">" + myRange.text + "</span>";
myRange.pasteHTML(myText);
}//if
}//function
</script>
<body>
<form id="frmMain" name="frmMain" method="post" action="" runat="server">
<p><strong>Candiadate Response</strong><br />
<input name="btnGreen" type="button" class="button" id="btnGreen" value="" style="background-color:#006600" onclick="hglight('Green')"/>
<input name="btnYellow" type="button" class="button" id="btnYellow" value="" style="background-color:#FFFF00" onclick="hglight('Yellow')"/>
<input name="btnRed" type="button" class="button" id="btnRed" value="" style="background-color:#990000" onclick="hglight('Red')"/>
</p>
<!--<span style="background-color:#6CFF6C">Green</span>
<span style="background-color:#FFFF00">Yellow</span>
<span style="background-color:#FF7171">Red</span> -->
<table border="1" style="border-style:inset" id="cResponse"><tr><td>
The spine may have post operative changes make access to the spinal canal difficult and a more inferior location may be needed. Also a somewhat lateral approach may be helpful.
The patients body size may make access difficult and selecting a different (longer) needle may be needed.
The patient may be very aggiated so sedation may be in order. The patient needs to be relaxed and with mucsle tension n the lower back.</td></tr></table>
<br />
</form>
</body>
</html>
thanks
The maximum i could do is to do in two steps, which is just okay but not what i exactly require. Below is the code but it also has one problem with it.. if you select a word that has a space before it then i dont know why it omits that space while pasting the HTML back agian. I will really appreciate if someone can offer me a better code for this job.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Item Bank</title>
<style type="text/css">.button
{
border:none;
border-style
utset;height:20px;
width: 20px;
border-width:2px;
}
.buttonPressed
{
border:none;
border-style:inset;
height:20px;
width: 20px;
border-collapse:collapse;
border-width:1px;
border-left-color:#000000;
border-top-color:#000000;
border-right-color:#FFFFFF;
border-bottom-color:#FFFFFF;
color:#000000;
border-spacing:0px;
}
</style>
</head>
<script language="javascript">
function hglight(color)
{
alert("working")
document.frmMain.btnGreen.className='button';
document.frmMain.btnYellow.className='button';
document.frmMain.btnRed.className='button';
strColorCode="#000000";
switch (color)
{
case "Green":
strColorCode="#6CFF6C";
document.frmMain.btnGreen.className = 'buttonPressed';
break;
case "Yellow":
strColorCode = "#FFFF00";
document.frmMain.btnYellow.className = 'buttonPressed';
break;
case "Red":
strColorCode="#FF7171";
document.frmMain.btnRed.className = 'buttonPressed';
break;
}//end switch
if (window.getSelection)
{
window.getSelection();
alert("window.getSelection()");
}
else if (document.getSelection)
{
alert("getselection");
document.getSelection();
}
else if (document.selection)
{
var myRange = document.selection.createRange();
var myText = "<span style=\"background-color:"+ strColorCode + "\">" + myRange.text + "</span>";
myRange.pasteHTML(myText);
}//if
}//function
</script>
<body>
<form id="frmMain" name="frmMain" method="post" action="" runat="server">
<p><strong>Candiadate Response</strong><br />
<input name="btnGreen" type="button" class="button" id="btnGreen" value="" style="background-color:#006600" onclick="hglight('Green')"/>
<input name="btnYellow" type="button" class="button" id="btnYellow" value="" style="background-color:#FFFF00" onclick="hglight('Yellow')"/>
<input name="btnRed" type="button" class="button" id="btnRed" value="" style="background-color:#990000" onclick="hglight('Red')"/>
</p>
<!--<span style="background-color:#6CFF6C">Green</span>
<span style="background-color:#FFFF00">Yellow</span>
<span style="background-color:#FF7171">Red</span> -->
<table border="1" style="border-style:inset" id="cResponse"><tr><td>
The spine may have post operative changes make access to the spinal canal difficult and a more inferior location may be needed. Also a somewhat lateral approach may be helpful.
The patients body size may make access difficult and selecting a different (longer) needle may be needed.
The patient may be very aggiated so sedation may be in order. The patient needs to be relaxed and with mucsle tension n the lower back.</td></tr></table>
<br />
</form>
</body>
</html>
thanks
