How to remove ccclass which is applied earlier. Very urgen :( :( running out of time :(
Ravi Gadag
out of time now. here are the problem i have facing
1. Below is the code, when i select some text, then click make red
button, it will change color, and add spans class to them,
2. now suppose user want to deselect the text, how we can remove the
span class which is generate by rangy.
please tell me how to do this. using this code. please its very
urgent ;( :(. can you reply in this example. beacuse i implemented
all my logic using this example.
i need to deselect the text which user has selected, then remove the
sapn class. i.e, if user select 3 words, then later he tought to
deselct one word, then he'll selct the word, and click reset.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="rangy-core.js" type="text/javascript"></script>
<script src="rangy-cssclassapplier.js" type="text/javascript"></
script>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="rangy-selectionsaverestore.js" type="text/javascript"></
script>
<script type="text/javascript">
function makeSelectionRed() {
var savedSel;
rangy.init();
var randomCssClass = "rangyTemp_" + (+new Date());
var classApplier =
rangy.createCssClassApplier(randomCssClass, true);
classApplier.applyToSelection();
// Now use jQuery to add the CSS colour and remove the
class
$("." + randomCssClass).css({"background-color":
"red" }).removeClass(randomCssClass).addClass("spans");
}
function reset()
{
rangy.init();
var randomCssClass = "spans";
var classApplier =
rangy.createCssClassApplier(randomCssClass, true);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
asdasdasdasdasdklasdnasd kjsdhskjsah dhdasjdhasdkjashdk
adhasjhda
<input type="button" onclick="makeSelectionRed()" value="make
red">
<input type="button" onclick="reset()" value="reset"></div>
</form>
</body>
</html>
Tim Down
I'm sorry I can't answer these questions right away: I'm at work right
now and anything requiring me to looking at it for more than a couple
of minutes has to wait until my free time. I will do my best to look
at it this evening (UK time).
Tim
Ravi Gadag
libraries :) so eagerly waiting for your help
On Feb 23, 9:01 pm, Tim Down <t...@timdown.co.uk> wrote:
> Hi Ravi,
>
> I'm sorry I can't answer these questions right away: I'm at work right
> now and anything requiring me to looking at it for more than a couple
> of minutes has to wait until my free time. I will do my best to look
> at it this evening (UK time).
>
> Tim
>
Tim Down
You can do this by essentially reversing the original process. It's
annoyingly fiddly though. Example code is below. Demo is here:
http://jsfiddle.net/URms2/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="currentrelease/rangy-core.js" type="text/javascript"></script>
<script src="currentrelease/rangy-cssclassapplier.js"
type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.1.js"
type="text/javascript"></script>
<script src="currentrelease/rangy-selectionsaverestore.js"
type="text/javascript"></script>
<style>
.spans {
border: solid green 1px;
}
</style>
<script type="text/javascript">
function makeSelectionRed() {
var savedSel;
rangy.init();
var randomCssClass = "rangyTemp_" + (+new Date());
var classApplier = rangy.createCssClassApplier(randomCssClass, true);
classApplier.applyToSelection();
// Now use jQuery to add the CSS colour and remove the class
$("." + randomCssClass)
.css({"background-color": "red" })
.removeClass(randomCssClass)
.addClass("spans");
}
function getSelectionContainerElement() {
var sel = rangy.getSelection(), selectionContainerElement = null;
if (sel.rangeCount) {
selectionContainerElement =
sel.getRangeAt(0).commonAncestorContainer;
if (selectionContainerElement.nodeType == 3) {
selectionContainerElement =
selectionContainerElement.parentNode;
}
}
return selectionContainerElement;
}
function resetSel() {
rangy.init();
var randomCssClass = "spans";
var sel = rangy.getSelection();
if (sel.rangeCount) {
var selectionContainerElement =
sel.getRangeAt(0).commonAncestorContainer;
if (selectionContainerElement.nodeType == 3) {
selectionContainerElement =
selectionContainerElement.parentNode;
}
var $redSpans =
$(selectionContainerElement).find("*").andSelf().filter(function() {
return
/^(red|rgb\(255,\s*0,\s*0\))$/i.test($(this).css("background-color"));
});
// Add a class and remove the background colour using jQuery
$redSpans.addClass(randomCssClass).css("background-color", "");
// Now unapply class to selection using Rangy
var classApplier =
rangy.createCssClassApplier(randomCssClass, true);
classApplier.undoToSelection();
// Finally, add the red background back in for the
remaining elements with the random class
$("." + randomCssClass).css({"background-color": "red" })
}
}
</script>
</head>
<body>
<form id="form1" action="ravi.html">
<div>
asdasdasdasdasdklasdnasd kjsdhskjsah dhdasjdhasdkjashdk
adhasjhda
<input type="button" onclick="makeSelectionRed()" value="make red">
<input type="button" onclick="resetSel()" value="reset"></div>
</form>
</body>
</html>