I find most rich internet text editors, developers put in the product many many features but fail to make a decent undo redo mechanism, I pressed crtl+z they deleted my whole paragraph. Unlike googledocs's one, it knows exactly what to undo.
If anyone can let me know what the logic of google docs/Ms word machanism is, maybe I can give it shot building one.
<!--
I'm working on an undo-redo function. Couldnt really find anything useful in the internet.
So I have a try. Guess it could be quite useful for a lot of people out there.
Wonder if the concept is any good?
Please critizise hard!
Try it out if you dare!
Any feedback is welcome!
All suggestions are appreciated!
Yours
Axinya
-->
<html>
<head>
<style type="text/css">
<!--
#wisiwig {
overflow: auto;
position: relative;
height: 300px;
width: 600px;
margin-top: 5px;
padding: 5px;
border: thin groove #999999;
}
-->
</style>
<script language="JavaScript">
<!--
var b_ackup = new Array(); //Store data in Array
var undo_pos= 0;//Position of undo
var flag = false;// shall we start new undo thread and delete obsolete items?
var w_isiwig;//editor interface
function init(){
w_isiwig = document.getElementById("wisiwig");
w_isiwig.contentEditable = true;
w_isiwig.onkeyup = HandleKeys;
b_ackup[0] = w_isiwig.innerHTML;
}
function HandleKeys(evt) {//events to write to backup
//
if (event) {
switch (event.keyCode) {
case 32:
BACKUP();
break;
case 8:
BACKUP();
break;
case 13:
BACKUP();
break;
case 46:
BACKUP();
break;
default:
return;
}
}
}
function BACKUP(){
if (flag){// action if undo was clicked
var removed= b_ackup.splice(flag,b_ackup.length - flag);
for (var i = 0; i < removed.length; i++) {
delete removed[i];//delete obsolete array items
}
b_ackup[b_ackup.length] = w_isiwig.innerHTML;
undo_pos = b_ackup.length - 1;
flag = false;
w_isiwig.focus();
}
else{//write to backup array
b_ackup[b_ackup.length] = w_isiwig.innerHTML;
undo_pos = b_ackup.length - 1;
flag = false;
w_isiwig.focus();
}
}
function undo(){
if (b_ackup.length){//
if(undo_pos==0){w_isiwig.focus();return;}// beginning of backup items
if(flag == false){BACKUP();}// save last state of document
w_isiwig.innerHTML=b_ackup[undo_pos -1];
undo_pos=undo_pos - 1;
flag = undo_pos +1;
look();
w_isiwig.focus();
}
}
function redo(){
if(undo_pos == b_ackup.length -1){w_isiwig.focus();return;}
//end of backup array
w_isiwig.innerHTML=b_ackup[undo_pos +1];
undo_pos=undo_pos + 1;
flag = undo_pos +1;
look();
w_isiwig.focus();
}
function look(){// monitor our Array data
var e='flag:'+flag+'
undo_pos:'+undo_pos+'
'
e+='b_ackup.length:'+b_ackup.length+'
'
for (i=0; i<b_ackup.length; i++){
e+= 'Backup item '+i+':'+b_ackup[i]+'
'
}
document.getElementById('bup_a').value=e;
}
</script>
<title>undo-redo</title>
</head>
<body id = "body" onload= "init();">
<p><b>undo/redo</b> <br>
development version: for <b>IE</b> only<br>
Backup written by <b>'onkeyup'</b> event(space,back,return,del), or
<b>'add to backup'</b> button. </p>
<div id="menu">
<a href="#" onclick='BACKUP();return false'>[add to backup]</a>
<a href="#" onclick='setTimeout("undo()",10)'>[undo]</a>
<a href="#" onclick='setTimeout("redo()",10)'>[redo]</a>
<a href="#" onclick='look()'>[view backup-data]</a> </div>
<div id="wisiwig">Type text: </div>
Backup Array Data: <br>
<div id="bup">
<textarea id="bup_a" name="bup_a" cols="80" rows="6"></textarea>
</div>
</body>
</html>
I`m writing a javascript regex tester (IE 6 only) and would like to include
an undo button for a text input field.
I want it to handle individual keystrokes, pasting and drop, and also
text added by clicking various buttons.
I have tried a LOT of handler combinations and fancy conditionals to
make it work perfectly, and I`m ALMOST there.
I am working on a UI that, when you click on a menu option, a div opens and show three divs inside. These divs all have different
heights. The heights are based on the divs content.The problem I'm having is... how do I measure what the divs height should be? IE, how do I grab the height for a div BEFORE it has had any style applied to it.
I am using IE 6.0. On a page, I have placed a contenteditable div
which I want to use as a Rich Text Area. I am using the execCommand method of
the document to control bold, italics, underlining, and undo for this div.
I have placed an input element on the page to. All but the undo, are
restricted to working only on the div. How can I restrict the undo to
working on only the div?
Below is the complete page so you can see what I am talking about.
Just paste it into an htm file and traverse to it via your browser.
Type something in the div and the input and then try the buttons. Code:
I have a web form. I use a simple function to generate a letter ouput based on the form fields and populate them into a word doc for printing. Below is a basic example, but you get the idea.
function createDocument() {
strDoc = "
"
strDoc += "Hello there!
[Code]....
Note this is only intended to be used on IE8. As it stands, the ouput generates and formats exactly as I want bar two things:
1) Does anyone know how I can get some of the text to bold? I've tried everything I can think of (html tags, escape characters etc etc). Is there a way to open a word window in rtf perhaps?
2) Does anyone know how I can insert a small image (a signature in gif or jpg) into the document?
I can use a browser window instead of word, which formats, bolds, images etc, however I then get the issue of headers/footers when printing. I cannot disable headers everytime I want to print a letter, it's not practical.
I'm trying to create a list of prices where the cost is tabbed across so they all line up...
I'm sure there is an easy way of doing that's better than I have so far.
<SCRIPT LANGUAGE='Javascript'>
document.write("<XMP>")
document.write("May £853
")
document.write("June £906
")
document.write("July £1,012
")
document.write("August £1,012
")
document.write("September £906
")
document.write("October £853
")
document.write("</XMP>")
</SCRIPT>
I've tried looking through the forums but it keeps landing me on threads about tabbing between text fields.
is it possible to do a CTRL-z (undo) in a onclick event ?
View 3 Replies View RelatedHow does one take the selected text in a textarea dn replace it with something else?
like id like to be able to wrap words for markup innit:
this is an [ b]example[/b] sentence
-------------------
all I can seem to find on the web regarding selecting text are scripts for select text off page, but never from within an input field.
I am very able to restrict char length by using substr() but this means that in some cases the word gets cut off in the middle of it.
How can I restrict the char length to the nearest word.
This is where I got to and then went blank?
Code:
if(comparename.length > 18){
if(comparename.substr(0,18) != ' '){
for(var tzx=0;tzx<comparename.length;tzx++){
while(comparename.substr(0,(18-tzx)) != ' '){
[Code]....
I am trying to find a word inside a string.the search his going fine but I need to know which word has been found in the string.
Code:
Code:
Now in the string only one value can be found at a time.So its either a1 or a2 or so on.....
<script src="http://code.jquery.com/jquery-latest.js"></script> //for reference
Code Java:
function nameList(){
url ="post-json.php?action=search&keyword="+$("#keyword").val()+"&additionalInfo=whatever";
$("#modaldisplay").load(url);
alert(url);
}
Normally this works, the problem is when i write two words in the input box the value isnt getting passed properly to the php side.
[Code]....
how to get both words from the input box?
I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up. so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one.
[Code]...
I have a long paragraph and I have been asked to display words in red and green in such a way that that fist word should be red, 2nd word should be green, 3rd word should be red and 4th word should be green and so on. For example: this is just a sample.
View 3 Replies View RelatedI am having no luck with my post form to mysql. It is only posting the first letter of the word/phrase for the text input fields to the mysql database. It is a photo and text post form. The photo and only first letter of text are posting to database. I am using Jqtouch, jquery, and phonegap.
Here is my form fields:
Here is my java script:
I'd like to be able to change the color of each first word in a h2 tag, is this possible with jquery?
View 8 Replies View RelatedI have a div with some content in it, within the content there's an anchor and when you click it all the content but the anchor itself should fadeTo('slow', 0.2);
What I have now is;
$("p a#somelink").click(function()
{
$(this).parent().parent().children("p").fadeTo("slow", 0.2);
return false;
});
Which obviously just fades all paragraphs. Is it possible to do what I want and with which selection string would I achieve it?
i use this code, (works fine)
$.post("verzenden.php", { note: content, action: "send", subject: subject },
function(data){ $("#myspan").html(data);
$("#myspan:contains('error')").css("color", "red");
[code]....
Let me explain the issue which I'm facing with an example.My URL is http://localhost/~gaurav/dstreetmantra/register.php.One of the anchor tags in my navigation bar is <a href="register.php">Register</a>.The code needs to be able to check whether the value in this very anchor tag's href attribute is present in the URL.If it is present, the word 'Register' register would be highlighted. If not, some other link would be highlighted.As I said, I'm doing this for the navigation bar. This way, it'll check which of the links' 'href' value is present in the URL, and thus highlight that link.I'm assuming this can be done using Regex, but I do not know how to use it.
View 4 Replies View RelatedI have a client, let's call them "BuyNow." They would like for every instance of their name throughout the copy of their site to be stylized like "BuyNow," where the second half of their name is in bold.
I'd really hate to spend a day adding <strong> tags to all the copy. Is there a good way to do this using jQuery?
I am wanting to add a style (bold and blue for example) to every instance of a word or words on my website. Is this possible with jQuery? And how would I write it?
View 1 Replies View RelatedI'm trying to have a sentence change a single word every 2 seconds, and i have little experience using jQuery, but I'm trying, I've spent a while looking all over and the closest I came was to cycle through a list.[code]....
I'm trying to have only the word (blue) change to (red) after 2 seconds and then to (green) after 2 seconds, but all with either a scroll, or a fade in/out.
I'm wondering if anyone could point me in the right direction?
I'm using the Quicksearch plug-in and it does everything I need except for one thing. If I have two rows, for example:
"Blood oranges" and
"Green apples"
And I search for "a", it's going to match both rows because it matches the "a" in "oranges". What I need to is to match only the beginning of each word, so that typing "a" in this case would only give me "Green apples". Is this possible?
If I have an 'dynamic' Div that sometimes contains the word Red or sometimes contains the word Green, i would like to replace (or something) the ID to something else.If the word inside the div is Green I need to use a green background, but if the word is red in the div, i need to have it in a red background.
<div id="x">Green</div>
<style>
#y {
background-color:Red;
[code]....
Can method replaceWith() be used to replace just ONE WORD in body of a tag (i.e., element.html()?) with another word? I have li's with "tab one", "tab two", "tab three" etc.. I have to replace dynamically ONLY the word "tab" with another word..
View 2 Replies View RelatedHow can I find first word of the paragraph an then copy it?Second bit I've already work out, but could not find any example of finding first word.
View 1 Replies View Related
