JavaScript - Generating Random Word With Function - But Need To Keep The Exact Word For Another

1st, Hi Coding forums!

I'll get to the point, I'm a noob -.-

I'm using greasemonkey for a certain website.

Basically, I'm using gm to refresh the page after a certain time, I was however wondering, If I can set it to a random number between 2 specific times?

The code I'm using atm is

setTimeout(function() { document.location.reload(); } , 10000);

I know I have to use math.random, well, I think I do. But I'm not sure how to do it between 2 certain times?

So to summarise, I'm trying to refresh a page at any given random time between say 5-10 minutes.

Any help is appreciated, thanks!

I'm trying to find a much simpler way than this current script I am using to generate and print a random word. I don't want to have to name each word but instead just include a very large list of about 300,000 words that javascript uses to pull a random word out of. Can you please help me out?? The list of words I have is a straight list with no commas or anything.

I am currently outputting to a text box, but I am looking to generate words according to users input. For example, a user wants 500 words starting with the letter "b" and is less than 5 characters long appended to the character "de."

Any help would be awesome! Even a right direction. I'm also willing to pay some for such a script if need be. Thanks!

Here's my code:

Code:

<SCRIPT LANGUAGE="JavaScript">
<!--

var NumberOfWords = 28

var words = new BuildArray(NumberOfWords)

words[1] = "czarevitch"
words[2] = "brightwork"
words[3] = "verkrampte"
words[4] = "protectrix"
words[5] = "nudibranch"
words[6] = "grandchild"
words[7] = "newfangled"
words[8] = "flugelhorn"
words[9] = "mythologer"
words[10] = "pluperfect"
words[11] = "jellygraph"
words[12] = "quickthorn"
words[13] = "rottweiler"
words[14] = "technician"
words[15] = "cowpuncher"
words[16] = "middlebrow"
words[17] = "jackhammer"
words[18] = "triphthong"
words[19] = "wunderkind"
words[20] = "dazzlement"
words[21] = "jabberwock"
words[22] = "witchcraft"
words[23] = "pawnbroker"
words[24] = "thumbprint"
words[25] = "motorcycle"
words[26] = "cryptogram"
words[27] = "torchlight"
words[28] = "bankruptcy"

function BuildArray(size){
    this.length = size
    for (var i = 1; i <= size; i++){
        this[i] = null}
    return this
}

function PickRandomWord(frm) {
    var rnd = Math.ceil(Math.random() * NumberOfWords)

    // Display the word inside the text box
    frm.WordBox.value = words[rnd]
}
//-->
</SCRIPT>

I want a certain amount of image spots to show a certain set of images (specifically 8) in a random order every time the page is refreshed. I do not want the images to be repeated, however. The solution I came up with was to create an array and generate a number one to eight and then compare that number to the numbers previously in the array, and if it matched one that was previously generated, to generate a new number and then compare it. This continues until i have an array of the numbers 1-8 in a random order.
Code:

	var imgs=new Array(8);
	for(i in imgs)
	{ 
		function generate()
		{
			return Math.floor(1+Math.random()*8);
		}

		var rand=generate();

		function compare(i)
		{
			for(var n=i-1; n>=0; n--)
			{ 
				if (n<0)
				{
					imgs[i]=rand;
				}
				
				else
				{
					if (rand==n)
					{
						rand=generate();
						compare(i);
					}
				}
			}
		}
	}

This does not strike me as the most efficient way to go about this. If someone has a better solution, that would help a great deal.

New to JS, and not too good at it.

Trying to take some prewritten code and add script that displays some random text. Having trouble with assignment.

Instructions are to replace a section of the file I am given with a script element. In the script element I am suppose to declare a variable named tipNum equal to a random integer between 1 and 10 returned by the randInt() function (which I made and have shown below). Then I am suppose to use a series of document.write() methods to write the following HTML code into the page:

Code:

<h1>Random Tip<br />title</h1>
<p>tip</p>

(Where "title" is the title of the random text as generated by the tipTitle() function from a external file, and which I did not make; and "tip" is the text of the random tip as genereated by the tipText() function, which is also from the external file, and not made by me)

My code for the randInt() function is
Code:

function randInt(lower, upper) {
	var size = ++(upper - lower);
	var randValue = Math.floor(lower + size*Math.random());
}

The script I made to display the HTML code is
Code:

<script type="text/javascript">
	var tipNum = randInt(1, 10);
	document.write("<h1>Random Tip<br />"+tipTitle(tipNum)+"</h1>");
	document.write("<p>tipText()</p>");
</script>

I am getting nothing on my page where the random text should be. Any help or advice would be great, thanks.

I am working on a work project that requires a 5*5 table, that will generate random letters in each cell upon button click. I have most of the coding complete with the exception of the letter generation. I am currently generating numbers, I would even be fine with having a RandBetween(and listing the 26 letters of the alphabet) at this point.

Any suggestions?

Code:

<script type="text/javascript">

var random1, random2, random3, random4, random5, random6, random7, random8, random9, random10, random11, random12, random13, random14, random15, random16, random17, random18, random19, random20, random21, random22, random23, random24, random25;

var randomArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

//generate the random characters

function CreateCellData() {
for (var i=0; i<randomArray.length; i++) {
randomArray[i] = Math.floor(Math.random()*99 + 1); 
}
}

Hello,

I need help creating a function in javascript that produces random numbers generated from a normal curve distribution with a mean and standard deviation that I can specify (and easily change). I would like only whole numbers and the ability to set reasonable maximum and minimums.

Thanks,
Adrian

Hi !

I would need to select whole word (same thing as when you double click a word) just by single clicking on it, or by positioning the cursor above the word(any letter of a word). Then i would need to manipulate the selection(to change selected text to some other text).

The outcome would be an editor with a possibility to change selected word (to add diacritical marks to selected word).

I've been googling for this for long time and can't find an answer. It can be connected to range object that is not the same in IE a firefox - but i did not manage to make it work. Or is my approach wrong ?

Do you have any idea how to do this?


Thank you in advance !

Tomas

I am trying to transform a set of two radio buttons in a stack of two labels, one blue and on gray representing, respectively, the selected radio and the unselected one. Clicking on this stack will change which of the labels is blue (and which of the radio buttons is checked). It works well but it breaks down in an ugly manner when the two labels aren't of the same width. The best way to see what I mean is to try the test page I made out on your own server or to navigate here to see the page in action.

The comments in the source code and actual content explain pretty much what I am aiming for and what the problems are. Also, this is an attempt at accessibility and graceful degradation, so any remarks concerning those issues are most welcome.
Code:

<!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>
		<title>word stacks</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">

			.stackContainer
			{
				line-height: 2em;	/* Prevents the stackBottom from overlaping the second line of text found in the stack container, should there be a second line. */
			}
			
			.stack
			{
				display: inline-block; /* prevent the block options to induce line breaks in your text */
				line-height: 1; /* Have the 2 options verticaly close to each other */
				position: relative; /* Moves the lines to be in between*/
				top: 0.5em;
				white-space: nowrap; /* prevent line breaks */
			}
		
			.stackTop, .stackBottom
			{
				display: block; /* Stack the options on top of each other */
			}
			
			/* The following is extra for presentation */
			.stackSelected	/* Represents the chosen  value */
			{
				color: #009;
			}
			
			.stackUnselected	/* Represents the other option */
			{
				color: #777;
			}
			
			.stack
			{
				cursor: pointer;
			}
			
			p
			{
				margin: 3em;
			}
		</style>
		<?php
			function createWordStack($name, $value1, $value2)
			{
				// Set default values (by default, $value1 is checked and not $value2)
				$firstChecked = "checked=\"checked\" ";
				$secondChecked = "";
				if(isset($_POST[$name]))	// One value was chosen
				{
					if($_POST[$name] == $value2)	// Not default value
					{
						$firstChecked = "";
						$secondChecked = "checked=\"checked\" ";
					}
					// else fall back to default value
				}
				// else fall back to default value
				// Write out the html
				echo("<span class=\"stack\">
						<label for=\"" . $name . "\">
							<input type=\"radio\" name=\"" . $name . "\" value=\"" . $value1 . "\" " . $firstChecked . "/>" . $value1 . "
						</label>
						<label for=\"" . $name . "\">
							<input type=\"radio\" name=\"" . $name . "\" value=\"" . $value2 . "\" " . $secondChecked . "/>" . $value2 . "
						</label>
					</span>");
			}
		?>
		<script type="text/javascript">
			// It is recommended to use this function only if stacks have been created with the php function createStack and if these stacks are contained in an element of class stackContainer
			function makeStacks()
			{
				var forms = document.getElementsByTagName("form");	// Find all forms
				var nb_forms = forms.length;
				for(var i = 0; i < nb_forms; ++i)
				{
					if(forms[i].className.indexOf("stackContainer") != -1)	// If it's a stackContainer
					{
						var spans = forms[i].getElementsByTagName("span");	// Find all spans
						var nb_spans = spans.length;
						for(var j = 0; j < nb_spans; ++j)
						{
							if(spans[j].className.indexOf("stack") != -1)	// If it's a stack
							{
								var labels = spans[j].getElementsByTagName("label");	// Find all labels
								var nb_labels = labels.length;
								if(nb_labels == 2)	// Only works with two labels!
								{
									labels[0].className += " stackTop";
									labels[1].className += " stackBottom";
									for(var k = 0; k < nb_labels; ++k)
									{
										var inputs = labels[k].getElementsByTagName("input");	// Find all inputs
										var nb_inputs = inputs.length;
										if(nb_inputs == 1 && inputs[0].type == "radio")	// Only works with one radio button per label!
										{
											inputs[0].style.display = "none";	// Hide radio button
											labels[k].className += (inputs[0].checked)?" stackSelected":" stackUnselected";
										}
									}
								}
								// add onclick listener to invert which radio button is checked and invert which label appears on top
								spans[j].onclick = function()
								{
									var labels = this.getElementsByTagName("label");	// Find all labels
									// We already know that there are only two labels, from earlier!
									for(var l = 0; l < 2; ++l)
									{
										// Invert className from stackTop to stackBottom (or vice-versa)
										if(labels[l].className.match(/stackSelected/))
										{
											labels[l].className = labels[l].className.replace(/stackSelected/, "stackUnselected");
										}
										else if(labels[l].className.match(/stackUnselected/))
										{
											labels[l].className = labels[l].className.replace(/stackUnselected/, "stackSelected");
										}
									}
									// Change which of the radios is checked
									var inputs = labels[0].getElementsByTagName("input");	// Find all inputs from first label
									// We already know that there is a single label and that it is a radio, from earlier!
									if(!inputs[0].checked)	// If this one is not checked, check it to change which of the radios is checked
									{
										inputs[0].checked = true;
									}
									else
									{
										var inputs = labels[1].getElementsByTagName("input");	// Find all inputs from second label
										// We already know that there is a single label and that it is a radio, from earlier!
										if(!inputs[0].checked)	// If this one is not checked, check it to change which of the radios is checked
										{
											inputs[0].checked = true;
										}
										// else there is something wrong as none of the radios are checked!
									}
								}
							}
						}
					}
				}
			}
			window.onload = makeStacks;
		</script>
	</head>
	<body>
		<h1>Word stacks</h1>

		<h2>How it works</h2>
		<ol>
			<li>PHP transforms<br />
				<code>&lt;?php createWordStack("name","one","two"); ?&gt</code><br />
				into<br />
				<code>
					<pre>
&lt;span class="stack"&gt;
	&lt;label for="name"&gt;
		&lt;input type="radio" name="name" value="one" /&gt;one
	&lt;/label&gt;

	&lt;label for="name"&gt;
		&lt;input type="radio" name="name" value="two" checked="checked" /&gt;two
	&lt;/label&gt;
&lt;/span&gt;
					</pre>
				</code>
			</li>
			<li>
				javascript hides the radio buttons, applies class declarations to the labels and adds an onclick event listener to the<br />
				<code>
					&lt;span class="stack"&gt;
				</code>
			</li>
		</ol>
		
		<h2 id="example">Example</h2>
		<form action="<?php echo($_SERVER['PHP_SELF'] . "#example"); ?>" class="stackContainer" method="post">
			<p>Choose between <?php createWordStack("name","one","two"); ?> options.</p>
			<input type="submit" value="Test that the radio buttons hidden behind this still work" />
		</form>
		<h3>print_r($_POST)</h3>
		<pre>
			<?php print_r($_POST); ?>
		</pre>

		<form class="stackContainer">
			<h2>Known issues</h2>
			<p>
				This technique
				<?php createWordStack("no_matter","absolutely does not","does"); ?>
				look good with two different sizes of `words`,
				<?php createWordStack("no_matter2","no matter","although this depends"); ?>
				in which order they appear. If looks better when the longer word is above the other though. Plus, the way it breaks makes it unreadable when the longer word is on the bottom if the remainder of the text needs to span many lines.
			</p>
			<p>
				Another problem is when the bottom word
				<?php createWordStack("no_matter3","is","isn't"); ?>
				longer than the top word but actually consists of a single word. It cannot wrap and therefore interferes with the following text.
		 	</p>
		
			<p>
				<?php createWordStack("no_matter4","It really becomes unusable and quite ugly if the top word happens to wrap and span over two or more lines. Of course, the first know issue shown above is enough to understand that THIS known issue doesn't mean a thing if it is the bottom that is too long as it will span over many lines no matter what since it is limited by the width of the shorter word above..","It still works"); ?>
				.. and so, all in all, it is better to avoid long words altogether.
			</p>
			<p>
				Now, just to illustrate what I am saying above.. 
				<?php createWordStack("no_matter5","Look at this ****!","It really becomes unusable and quite ugly if the top word happens to wrap and span over two or more lines. Of course, the first know issue shown above is enough to understand that THIS known issue doesn't mean a thing if it is the bottom that is too long as it will span over many lines no matter what since it is limited by the width of the shorter word above.."); ?>
				.. and so, all in all, it is better to avoid long words altogether.
			</p>
		 	<h2>Notes</h2>
			<p>
				At least, the next paragraph
				<?php createWordStack("no_matter6","isn't","is"); ?>
				pushed down too far.
		 	</p>
		 	<p>
				<?php createWordStack("no_matter7","It works","It doesn't work"); ?>
				when I put the stackBottom BEFORE the stackTop, so I could also call them stackChosen and stackAlternate and just change the className in order to choose one or the other. This is what the javascript used to do when you click on the stack: if the label is of class stackTop, it changes it to stackBottom, and vice-versa. Now, only the colour is changed..
			</p>
	 	</form>
	</body>
</html>

I'm sorry, I know this is no way of asking a question, but I just don't know how else to phrase it. I did put much effort in making this test page as clear as possible.

Thanks in advance

Hi all i have a question...

In my below code, I need to get rid of the radio option in my file.
Count pure words and Count everything as words

Also if i specify some content in the input box, it shows all the word count in the output box. I need only few mentioned words to be dispalyed instead

For example, if i give input as below in the input box

"Java allows you to play online games, chat with people around the world,
calculate your mortgage interest, and in view images in 3D, just to name a few. It's also integral to the intranet applications and and other e-business solutions that are the foundation of corporate computing."

I need only to display the count of
Java , yours , in , and

so that i output will be
Java - 1
yours - 0
in - 2
and - 3

Can someone help me out in this please...

Thanks a lot!!!:)


Html Code
=======================================================

Code:

<html>
 <head>
  <title> Word Count </title>
<script language = "JavaScript"> 
function process1 (count)	{		// for words	
	m=new Array(10000);
	m1=new Array(10000);
	N=new Array (10000);
	for (i=0;i<=1;i++)		// which is chosen
	{	if (count=1)
		{	ch=i;
		}
	}
		
	A=count.message.value;			// original message 
	B="";
	A=" " + A+" ";
	A=A.toUpperCase();		// changes all alphas to Upper case
	if (ch==0)		// get rid of everything but apha's
	{	condense1(count);
	}
	else
	{	lesscondense(count);
	}
	for (i=1;i<=A.length;i++)		//  trims leading spaces and multiple spaces
	{	if ((!(A.charAt(i)==" ")) || (!(A.charAt(i-1)==" ")))
		{B=B + A.charAt(i);
		}
	}
	//count.result1.value=B;
	B=B+" ";				// makes sure there is a space at end
		
	k=0; str=" ";
	
	for (i=0;i<=B.length;i++)
	{	k1=B.indexOf(str,k);
		if (k1==-1)		//end of string B
		{	Numwords=i-1;
			break;
		}
		m[i+1]=B.substring(k,k1); // places all the words into an array m
		k=k1+1;
	}
	//count.result1.value=B; 
	C="";
	NN=0;
	for (i=1;i<=Numwords; i++)	// Numwords is total number of words
	{	if (!(m[i]==""))	// only looks at m1 words that have not been processed before (not empty)
		{	NN=NN+1;			//unique word stored in m1 array
			m1[NN]=m[i];
			N[NN]=1;			// initialize counter for word
			for (j=i+1;j<=Numwords+1;j++)	//counts and makes m1 elements with unique word empty.
			{	if (m1[NN]==m[j])
				{	N[NN]=N[NN]+1;
					m[j]="";
				}
			}	
		}	
	}		
	C=C+"Unique:" + NN+"  Total:" + Numwords+"\n";
	C=C+"Freq.\tWord\n";
	for (i=1;i<=NN;i++)		// sets up C for showing
	{	C=C + N[i]+ "\t" + m1[i] + "\n";
	}
	count.result1.value=C; 
}
 
function condense1(count) {	// allows only alpha's and spaces for choice 1
	C="";
	for (i=0;i<=A.length-1;i++)
		{	k=A.charCodeAt(i);
			if (((k>64) && (k<91)) || (k==32))
			{	C=C+A.charAt(i);
			}
			else 
			{	C=C+" ";
			}
		}
	A=C;
	//count.result1.value=B;
}
function lesscondense(count)	{	// allows all characters from space on
	C="";
	for (i=0;i<=A.length-1;i++)
		{	k=A.charCodeAt(i);
			if (k>31)
			{	C=C+A.charAt(i);
			}
			else 
			{	C=C+" ";
			}
		}
	A=C;
}
//========================================
function letters1(count)	{		// counting characters upto unicode #255
	mN=new Array(5000);
	for (i=0;i<=1;i++)		// which is chosen
	{	if ( count.radio2[i].checked)
		{	ch1=i;
		}
	}
	A=count.message.value;
	T=0;
	for (i=0;i<=5000;i++)		// initialize Array mN to 0
	{	mN[i]=0;
	}
	
	for (i=0;i<=A.length-1;i++)	// k is character and counted in mN[k]
	{	k=A.charCodeAt(i);
		mN[k]=mN[k]+1;	
	}
	//count.result1.value=E;
	D="";
	D=D+"Freq.\tLetter\n"
	if (ch1==0)			// shows only alpha's and total number of letters T
	{	for (i=65; i<91;i++)
		{	if (!(mN[i]==0))
			{	D=D + mN[i] + "\t"+ String.fromCharCode(i) + "\n";
				T=T+mN[i];
			}
		}
		for (i=97;i<=122;i++)
		{	if (!(mN[i]==0))
			{	D=D+mN[i]+"\t"+String.fromCharCode(i)+"\n";
				T=T+mN[i];
			}
		}
	}
	else		// shows all characters from space (32) to unicode 255
	{	for (i=32; i<=255;i++)
		{	if (!(mN[i]==0))
			{	D=D + mN[i] + "\t"+ String.fromCharCode(i) + "\n";
				T=T+mN[i];
			}
		}
	}
	count.result1.value=D; 
	count.total.value=T;
	count.wordav.value=Math.round(T/Numwords*10000)/10000; // rounds off 
}

//-- End
</script>
 </head>

 <body>
           
<form name ="count"><a name="Word_Counter"></a><font size="+1"><p> &nbsp;Count pure words<input type="radio" name="radio1" value="1" CHECKED>&nbsp;&nbsp;
Count everything as words <input type ="radio" name="radio1"  value="0"><br> <br>
 
  <table border="0" cellPadding="1" cellSpacing="1"> 
  
  <tr> 
    <td><input id="button1" name="button1" onclick="process1(document.count)" style="height: 24px; width: 165px; font-weight: bold" type="button" value="COUNT WORDS"></td> 
  <strong><font face="Arial" color="#000080">Input your text into the box below:</font></strong><br><textarea cols=33 name=message rows=12 style="background-color: #ffffff; font-size: 10pt" wrap=PHYSICAL></textarea>&nbsp;&nbsp;<textarea cols=33 name=result1 rows=12 style="font-size: 10pt; font-family: Arial" wrap=PHYSICAL>WORD COUNT OUTPUT BOX</textarea> 
<br><table border=0 cellPadding=1 cellSpacing=1> 
<input type="reset" value="Reset" name="B1"> 
 
 </body>
</html>

=======================================================

Hello

I have a div I want to delete any word start by /art and finish by les/ inside the div content.

Here an example below :

Before :

PHP Code:
<div id="article" class="article">
Du texte, du texte /articles sur les boucles/ du texte ... du texte.
</div> 


After :

PHP Code:
<div id="article" class="article">
Du texte, du texte  du texte ... du texte.
</div> 


Thank You

Hi friends,

I am very well aware that ctrl-a and ctrl-c will not copy images (only the text) in ms-word/openoffice writer.

so, the better option is to convert the doc into html and place the contents of the html in Tinymce editor. (This is what i want to accomplish).

I know this thing can be done in javascript but i dont know how.

Please tell me or any guidance to copy the contents of word(text and images at one go) into a tinymce editor.

Any help would be highly appreciated.

Thanks,
aras

Hi all,

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.

Code:

function createDocument() {
	 strDoc = "\n\n"
	 strDoc += "Hello there!\n"
	 strDoc += "Answers to form stuff goes here\n"

	 var w =new ActiveXObject("Word.Application");
	 w.Visible=true;
	 w.Documents.Add();
	 w.Selection.TypeText("" + strDoc);
}

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.

Any advice would be greatly appreciated

Cheers!

I have a CMS with basic toolbar and have major issues with copying and pasting from MS Word.

I have a code below that I would like to test cleaning up MS Word....
Code:

<script language='javascript'>
function word_cleanup ($str)
{
    $pattern = "/<(\w+)>(\s|&nbsp;)*<\/\1>/";
    $str = preg_replace($pattern, '', $str);
    return mb_convert_encoding($str, 'HTML-ENTITIES', 'UTF-8');
}
</script>

And would like to add it onClick within code below, but it doesn't seem to do anything......
Quote:
<?php
//we will have to dynamically generate either the edit and delete buttons or
//the save button here depending on numevent.
if($numMain!=-1)
{
echo("<tr><td colspan='2' align='center'><input type='submit' id='button' name='edit' value='Save Changes' onClick=\"saveChanges('edit'); onClick=\"function('word_cleanup');\"><input type='submit' id='button' name='delete' value='Delete' onClick=\"saveChanges('delete');\"></td></tr></table></form>");
}
else
{
echo("<tr><td colspan='2' align='center'><input type='submit' id='button' name='save' value=' Save ' onClick=\"saveChanges('save'); onClick=\"function('word_cleanup');\"></td></tr></table></form>");
}

?>
Any help, tips, suggestions would be so greatly appreciated.

I've downloaded a simple wysiwyg script from the internet, however I want to add a wordcounter to it. The main idea is that the amount of words is refreshed every time a new character is entered. However I haven't got a clue on how to implement this,

I've used javascript a lot a few years ago.. but this is out of my league. So I'm hoping someone can help me with this.

The html file: Quote:
<html>
<head>
<style type="text/css">@import url('SimpleTextEditor.css');</style>
<script src="SimpleTextEditor.js"></script>

<script type="text/javascript">
function countWords(){
document.form1.wordcount.value = document.form1.inputString.value.split(' ').length + '/300 words';
if (document.form1.inputString.value.split(' ').length >= 50){
document.getElementById("wordcount").style.color = "red";
}else{
document.getElementById("wordcount").style.color = "black";
}
}
</script>



</head>
<body>

<form name="form1" method="post">

<div style="height:34px;width:750px;margin-bottom:5px;background-image:url('mainbar.png');background-repeat:no-repeat;
"><input style="margin-top:6px;margin-left:25px;" name="wordcount" type="text" value="" size="6"></div>
<textarea name="inputString" id="inputString" cols="70" rows="4" onkeyup='countWords();'></textarea>
<br>
<script>
var ste = new SimpleTextEditor("inputString", "ste");
ste.cssFile = 'test.css';
ste.charset = 'iso-8859-1';
ste.init();
</script>
<input type="submit" value="submit" onclick="ste.submit();">

</form>
</body>
</html>
The javascript file: Quote:

function SimpleTextEditor(id, objectId) {
if (!id || !objectId) { alert("SimpleTextEditor.constructor(id, objectId) failed, two arguments are required"); }
var self = this;
this.id = id;
this.objectId = objectId;
this.frame;
this.viewSource = false;

this.path = ""; // with slash at the end
this.cssFile = "";
this.charset = "iso-8859-1";

this.editorHtml = "";
this.frameHtml = "";

this.textareaValue = "";

this.browser = {
"ie": Boolean(document.body.currentStyle),
"gecko" : (navigator.userAgent.toLowerCase().indexOf("gecko") != -1)
};

this.init = function() {
if (document.getElementById && document.createElement && document.designMode && (this.browser.ie || this.browser.gecko)) {
// EDITOR
if (!document.getElementById(this.id)) { alert("SimpleTextEditor "+this.objectId+".init() failed, element '"+this.id+"' does not exist"); return; }
this.textareaValue = document.getElementById(this.id).value;
var ste = document.createElement("div");
document.getElementById(this.id).parentNode.replaceChild(ste, document.getElementById(this.id));
ste.id = this.id+"-ste";
ste.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml();
// BUTTONS
var buttons = ste.getElementsByTagName("td");
for (var i = 0; i < buttons.length; ++i) {
if (buttons[i].className == "button") {
buttons[i].id = this.id+'-button-'+i;
buttons[i].onmouseover = function() { this.className = "button-hover"; }
buttons[i].onmouseout = function() { this.className = this.className.replace(/button-hover(\s)?/, "button"); }
buttons[i].onclick = function(id) { return function() { this.className = "button-hover button-click"; setTimeout(function(){ document.getElementById(id).className = document.getElementById(id).className.replace(/(\s)?button-click/, ""); }, 100); } }(buttons[i].id);
}
}
// FRAME
if (this.browser.ie) {
this.frame = frames[this.id+"-frame"];
} else if (this.browser.gecko) {
this.frame = document.getElementById(this.id+"-frame").contentWindow;
}
this.frame.document.designMode = "on";
this.frame.document.open();
this.frame.document.write(this.frameHtml ? this.frameHtml : this.getFrameHtml());
this.frame.document.close();
insertHtmlFromTextarea();
}
};

function lockUrls(s) {
if (self.browser.gecko) { return s; }
return s.replace(/href=["']([^"']*)["']/g, 'href="simpletexteditor://simpletexteditor/$1"');
}

function unlockUrls(s) {
if (self.browser.gecko) { return s; }
return s.replace(/href=["']simpletexteditor:\/\/simpletexteditor\/([^"']*)["']/g, 'href="$1"');
}

function insertHtmlFromTextarea() {
try { self.frame.document.body.innerHTML = lockUrls(self.textareaValue); } catch (e) { setTimeout(insertHtmlFromTextarea, 10); }
}


this.getEditorHtml = function() {
var html = "";
html += '<input type="hidden" id="'+this.id+'" name="'+this.id+'" value="">';
html += '<table class="ste" cellspacing="0" cellpadding="0">';
html += '<tr><td class="bar"><table id="'+this.id+'-buttons" cellspacing="0" cellpadding="0"><tr>';
//html += '<td><select onchange="'+this.objectId+'.execCommand(\'formatblock\', this.value);this.selectedIndex=0;"><option value=""></option><option value="<h1>">Heading 1</option><option value="<h2>">Heading 2</option><option value="<h3>">Heading 3</option><option value="<p>">Paragraph</option><option value="<pre>">Preformatted</option></select></td>';
//html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/bold.gif" width="20" height="20" alt="Bold" title="Bold" onclick="'+this.objectId+'.execCommand(\'bold\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/italic.gif" width="20" height="20" alt="Italic" title="Italic" onclick="'+this.objectId+'.execCommand(\'italic\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/underline.gif" width="20" height="20" alt="Underline" title="Underline" onclick="'+this.objectId+'.execCommand(\'underline\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/left.gif" width="20" height="20" alt="Align Left" title="Align Left" onclick="'+this.objectId+'.execCommand(\'justifyleft\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/center.gif" width="20" height="20" alt="Center" title="Center" onclick="'+this.objectId+'.execCommand(\'justifycenter\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/right.gif" width="20" height="20" alt="Align Right" title="Align Right" onclick="'+this.objectId+'.execCommand(\'justifyright\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/ol.gif" width="20" height="20" alt="Ordered List" title="Ordered List" onclick="'+this.objectId+'.execCommand(\'insertorderedlist\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/ul.gif" width="20" height="20" alt="Unordered List" title="Unordered List" onclick="'+this.objectId+'.execCommand(\'insertunorderedlist\')"></td>';
html += '<td><div class="separator"></div></td>';
html += '<td class="button"><img src="'+this.path+'images/outdent.gif" width="20" height="20" alt="Outdent" title="Outdent" onclick="'+this.objectId+'.execCommand(\'outdent\')"></td>';
html += '<td class="button"><img src="'+this.path+'images/indent.gif" width="20" height="20" alt="Indent" title="Indent" onclick="'+this.objectId+'.execCommand(\'indent\')"></td>';
//html += '<td><div class="separator"></div></td>';
//html += '<td class="button"><img src="'+this.path+'images/link.gif" width="20" height="20" alt="Insert Link" title="Insert Link" onclick="'+this.objectId+'.execCommand(\'createlink\')"></td>';
//html += '<td class="button"><img src="'+this.path+'images/image.gif" width="20" height="20" alt="Insert Image" title="Insert Image" onclick="'+this.objectId+'.execCommand(\'insertimage\')"></td>';
//html += '<td><div class="separator"></div></td>';
//html += '<td class="button"><img src="'+this.path+'images/help.gif" width="20" height="20" alt="Help" title="Help" onclick="'+this.objectId+'.openWindow(\''+this.path+'help.html\', \'300\', \'300\')"></td>';
html += '</tr></table></td></tr>';
html += '<tr><td class="frame"><iframe id="'+this.id+'-frame" frameborder="0"></iframe></td></tr>';
html += '<tr><td class="source"><input id="'+this.id+'-viewSource" type="checkbox" onclick="'+this.objectId+'.toggleSource()"> View Source</td></tr>';
html += '</table>';
return html;
};

this.getFrameHtml = function() {
var html = "";
html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
html += '<html><head>';
html += '<meta http-equiv="Content-Type" content="text/html; charset='+this.charset+'">';
html += '<title>SimpleTextEditor frame</title>';
html += '<style type="text/css">pre { background-color: #eeeeee; padding: 0.75em 1.5em; border: 1px solid #dddddd; }</style>';
if (this.cssFile) { html += '<link rel="stylesheet" type="text/css" href="'+this.cssFile+'">'; }
html += '<style type="text/css">html,body { cursor: text; } body { margin: 0.5em; padding: 0; }</style>';
html += '</head><body></body></html>';
return html;
};

this.openWindow = function(url, width, height) {
var x = (screen.width/2-width/2);
var y = (screen.height/2-height/2);
window.open(url, "", "scrollbars=yes,width="+width+",height="+height+",screenX="+(x)+",screenY="+y+",left="+x+",top=" +y);
};

this.toggleSource = function() {
var html, text;
if (this.browser.ie) {
if (!this.viewSource) {
html = this.frame.document.body.innerHTML;
this.frame.document.body.innerText = unlockUrls(html);
document.getElementById(this.id+"-buttons").style.visibility = "hidden";
this.viewSource = true;
} else {
text = this.frame.document.body.innerText;
this.frame.document.body.innerHTML = lockUrls(text);
document.getElementById(this.id+"-buttons").style.visibility = "visible";
this.viewSource = false;
}
} else if (this.browser.gecko) {
if (!this.viewSource) {
html = document.createTextNode(this.frame.document.body.innerHTML);
this.frame.document.body.innerHTML = "";
this.frame.document.body.appendChild(html);
document.getElementById(this.id+"-buttons").style.visibility = "hidden";
this.viewSource = true;
} else {
html = this.frame.document.body.ownerDocument.createRange();
html.selectNodeContents(this.frame.document.body);
this.frame.document.body.innerHTML = html.toString();
document.getElementById(this.id+"-buttons").style.visibility = "visible";
this.viewSource = false;
}
}
document.getElementById(this.id+"-viewSource").checked = this.viewSource ? "checked" : "";
document.getElementById(this.id+"-viewSource").blur();
};

this.execCommand = function(cmd, value) {
if (cmd == "createlink" && !value) {
var url = prompt("Enter URL:", "");
if (url) {
this.frame.focus();
this.frame.document.execCommand("unlink", false, null);
if (this.browser.ie) this.frame.document.execCommand(cmd, false, "simpletexteditor://simpletexteditor/"+url);
else if (this.browser.gecko) this.frame.document.execCommand(cmd, false, url);
this.frame.focus();
}
} else if (cmd == "insertimage" && !value) {
var imageUrl = prompt("Enter Image URL:", "");
if (imageUrl) {
this.frame.focus();
this.frame.document.execCommand(cmd, false, imageUrl);
this.frame.focus();
}
} else {
this.frame.focus();
this.frame.document.execCommand(cmd, false, value);
this.frame.focus();
}
};

this.isOn = function() {
return Boolean(this.frame);
};

this.getContent = function() {
try { return unlockUrls(this.frame.document.body.innerHTML); } catch(e) { alert("SimpleTextEditor "+this.objectId+".getContent() failed"); }
};

this.submit = function() {
if (this.isOn()) {
if (this.viewSource) { this.toggleSource(); }
document.getElementById(this.id).value = this.getContent();
}
};


}

As you can see there are a few lines I wrote myself in the HTML file, but they didn't do the trick.

Hi All,

There is a code something like the one below which searches for a word on a page, highlights it and scrolls to it (which the code below can do). However, the code shown has an issue in firefox in so much as it stops looking once the search arrives at the input field if the field is above the text on page.

However, by placing the the input field below the text on the page the search will find words as it should. If for testing the input field were placed in the middle of the page text, the search would work and find until it hits the input field and the field itself highlights but it won't search past the field.

By chance a while back I did come across a forum in which a reply had some additional code which solved the issue and allowed the search to continue past the input field. However, I just remember the item and have no idea where I saw it or what the code was or even if it actually worked because at the time I was not actually looking for that and it was just a chance encounter.

So the question is, has anyone any idea as to what that bit of code may have been?

Martin.

<input type="text" id="mytext" name="mytext" value="" size="20">
<input type="button" value="Find on page" onClick="findit()">

Code:

<!--

var TRange=null;

function findit () {


var str= document.getElementById("mytext").value;

 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  // CODE FOR BROWSERS THAT SUPPORT window.find

  strFound=self.find(str);
  if (!strFound) {
   strFound=self.find(str,0,1);
   while (self.find(str,0,1)) continue;
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.getElementById("area").createTextRange();
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera browsers not supported, sorry...")
  return;
 }
 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}
//-->