|
JavaScript - Help With Word Stacks...
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><?php createWordStack("name","one","two"); ?></code><br />
into<br />
<code>
<pre>
<span class="stack">
<label for="name">
<input type="radio" name="name" value="one" />one
</label>
<label for="name">
<input type="radio" name="name" value="two" checked="checked" />two
</label>
</span>
</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>
<span class="stack">
</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 Similar TutorialsSorry about the title, I didn't know what else to use to describe my problem. Basically, I'm generating a random word with a function; then I'm trying to pass this word down to another function. The problem is, when I pass the word, it changes each time (due to it being randomly generated originally). I'm only calling the function once (via button click), but I'm also calling the function in my code lower down to retrieve the returned variable; and the function seems to be running again and returning a new word from my array. Here's a snippet of my code: Code: function ranNum(){
var ranNum = Math.round(Math.random()*10);
var chosenWord = wordArray[ranNum];
return chosenWord;
}
function makeBoxes(x){
//remove children when new word is chosen
var hM = document.getElementById("hangMan");
while(hM.firstChild){
hM.removeChild(hM.firstChild);
}
var chosenWord = ranNum(x);
var wL = chosenWord.length;
//create box for length of letters in word
var i = 0;
for(i=0;i<wL;i++){
var cBoxes = document.createElement("div");
cBoxes.className = "letterBoxes";
cBoxes.innerHTML = chosenWord.charAt(i);
hangMan.appendChild(cBoxes);
}
return chosenWord;
}
function checkLetter(y){
var chosenWord = makeBoxes(y);
alert(chosenWord);
}
So I generate a word with one button; now I need to be able to work with said word in my checkLetter() function. The word changes however. Any help would be greatly received. I found a nice script online that will count words. Problem is, I need it to also count each DIGIT (0-9) as a seperate word, whether the numbers are seperated by a space or not. I've searched this forum to no avail. Can anyone help me or show me how to do this, here is the original script: Code: <!-- TWO STEPS TO INSTALL WORD COUNT:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Shawn Seley -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function CountWords (this_field, show_word_count, show_char_count) {
if (show_word_count == null) {
show_word_count = true;
}
if (show_char_count == null) {
show_char_count = false;
}
var char_count = this_field.value.length;
var fullStr = this_field.value + " ";
var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");
var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;
var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");
var splitString = cleanedStr.split(" ");
var word_count = splitString.length -1;
if (fullStr.length <2) {
word_count = 0;
}
if (word_count == 1) {
wordOrWords = " word";
}
else {
wordOrWords = " words";
}
if (char_count == 1) {
charOrChars = " character";
} else {
charOrChars = " characters";
}
if (show_word_count & show_char_count) {
alert ("Word Count:\n" + " " + word_count + wordOrWords + "\n" + " " + char_count + charOrChars);
}
else {
if (show_word_count) {
alert ("Word Count: " + word_count + wordOrWords);
}
else {
if (show_char_count) {
alert ("Character Count: " + char_count + charOrChars);
}
}
}
return word_count;
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<form>
<textarea cols=40 rows=5 name=x>
</textarea>
<br>
<input type=button value="Count Words" OnClick ="CountWords(this.form.x, true, true);">
</form>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.04 KB -->
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 Help, AM I doing this right ??? So, I am trying to use a longest word function nad have to use the using the split string method to break into an array of words. I am using var parts = str.split(" "); function get_longest_word(str){ var str = document.getElementById('input_text').value;//str is the string from the input text area var parts = str.split(" "); var longest_word = ""; alert(longest_word); } so this would need to create an array, then I need to loop through the array and examine each word to see which is the longest. your help would be appreciated ! 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! Hi Guys, I have a javascript, which counts the specified words.. I want javascript to count some of the html tags and symbols when i enter a html code in the textarea.. - the below searchwords are not functioning properly. http://(space) http:/(space) etc... (no spaces are searching) - www. (.(dot) is not searching, also when i enter wwww(4 times) in the textarea it shows www. as count 1) - i can't enter the below symbols in searchwords array [ < ' ? I thank once again Bullant for helping me on the below script... But i am trying to fix my above issue and i couldn't.. :( Please help me out guys... Here is my Code... Code: <html>
<head>
<title>Word Count</title>
<script type = "text/javascript">
function searchForWords(){
document.getElementById('resultsContainer').innerHTML = '';
var txt = document.getElementById('txtMsg').value;
var strWords = document.getElementById('txtSearchWords').value;
var searchWordsTokens = strWords.split(' ');
var searchWords = ['href','LINK_ID','mailto','src="','src= ','src =','.jpg','.gif','.png','www','www.','http','http:// ','http:/ ','http: ','http ',' http',' "','@','amp;','TBD'];
for(i=0; i < searchWordsTokens.length; i++){
if(searchWordsTokens[i].length > 0){searchWords.push(searchWordsTokens[i]);} //remove spaces between words
}
var results = [],matches;
for(i=0; i < searchWords.length; i++){
var regex = new RegExp('\\b'+searchWords[i]+'\\b','gi');
matches = txt.match(regex);
results[searchWords[i]] = (matches)? matches.length : 0;
}
//output results
var str = '';
for(var i in results){
str += i+'--'+results[i]+'<br />';
}
document.getElementById('resultsContainer').innerHTML = str;
}
window.onload=function(){
document.getElementById('form_submit').onclick=searchForWords;
}
</script>
</head>
<body>
<table>
<tr><td align="center">
<form id="contact_form"><h4>Paste your HTML Code he </h4>
<p><label class="form_label" for='message'></label>
<textarea rows="20" cols="60" id="txtMsg"></textarea>
</p>
<div>
<input type="text" id="txtSearchWords"/>
</div>
<p><input id='form_submit' type="button" value="Check for Counts"></p>
<div><p><input id='form_submit' type="reset" value="Clear"></p></div>
<div id="resultsContainer"></div>
</form><br /></td>
</table>
</body>
</html>
Hey guys. It's been a while since I was last here but I'm having a few problems. I'm building a random word generator form for a friend but my knowledge of JS is limited. I have found a script to randomly generate a word at the click of a button. Quote: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <SCRIPT LANGUAGE="JavaScript"> <!-- // Use the following variable to specify // the number of random words var NumberOfWords = 28 var words = new BuildArray(NumberOfWords) // Use the following variables to // define your random words: 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) { // Generate a random number between 1 and NumberOfWords var rnd = Math.ceil(Math.random() * NumberOfWords) // Display the word inside the text box frm.WordBox.value = words[rnd] } //--> </SCRIPT> </head> <body> <FORM NAME="WordForm"> <INPUT TYPE=TEXT SIZE=10 NAME="WordBox"><BR> <INPUT TYPE=BUTTON VALUE="Click Here to Get a Random Word" onClick="PickRandomWord(document.WordForm);" > <input TYPE="reset" VALUE="CLEAR" onClick="clearForm(this.form)"> </FORM> </body> </html> This works without problems, however by friend wants to be able to fill multiple boxes with words from different lists by clicking only 1 button. The script above will allow me to do separate boxes with their own buttons. If anyone can help it would be greatly appreciated. Foster 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;
}
//-->
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| )*<\/\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. Hello everybody I have two frame in one page. say frame1 & frame2. Now I want to replace <body> to <body bgcolor="#FFFFFF"> in frame2. Is it possible? if possible then please help me 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. hello, i want to trim a word that too long.. example "I don't know what i will dooooooooooooooooooooooooooooooo now" how trim it with javascript function so i will get 'I don't know what i will doooo... now" any body help.. Regards, I want to be able to grab words from a database with javascript. How do I do that?
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> Count pure words<input type="radio" name="radio1" value="1" CHECKED>
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> <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>
======================================================= Im making a simple "gallow" guessing game. I got a virtual keyboard styled with boxes and onclick event, and a randomized guessing word when i click on button new game. Here is the virtual keyboard: Code: <div align="center" style="width: 700px; float: left;" id="keys">
<span onclick="selection(this)">Q</span>
<span onclick="selection(this)">W</span>
<span onclick="selection(this)">E</span>
<span onclick="selection(this)">R</span>
<span onclick="selection(this)">T</span>
<span onclick="selection(this)">Z</span>
<span onclick="selection(this)">U</span>
... all keys
+ a .css for looking like a keyboard - see picture at bottom</div>
The function that randomizes a word from the array of words + css styled boxes around the word chars. the array of words: Code: var strings= [ "indexof", "round", "fixed", "touppercase", "alert", "prompt"]; Code:
function newgame() {
document.getElementById('display').innerHTML = "";
var wordArr = strings[Math.floor(Math.random() * strings.length)].split("");
for (var i=0; i<wordArr.length; i++)
{
document.getElementById('display').innerHTML += '<span>'+wordArr[i]+'</span>';
}
}
css for this words Code: #display span {
border-top:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
width:10px;
background-color:gray;
text-align:justify;
padding:5px 10px;
}
#display span:first-child {
border:1px solid #000;
}
I also have function to colorize the pressed key on virtual keyboard-that colors it red-so the user knows it pressed it already Code: function selection(key) {
key.style.background = "red";
}
So now i have the question how do i make the guessing word - the boxes around chars without the chars - that the boxes are empty, but somehow the word stays in back of it or something like that -temporary save?.. I mean now i got [f] [i] [x] [e] [d], i wanna when i press new game to be like [] [] [] [] [].. and then i need to guess the word.. i press e on keyboard.. then it comes like this [] [] [] [e] []... Somehow i need to check if the pressed key on the keyboard is inside the word, and then show it in the box (but how).. then i press f -> [f] [] [] [e] [] .... and so on till i guess all of the word.. Here is an screenshot if u dont know what i mean.. http://img13.imageshack.us/i/printscreenshot1.jpg/ Thank you for helping! Hi guys, here again with another question. I would parse a file, my js read fine an html file, but this one is an export from msword. I don't know if this is the problem. I can't change the file. here is how my js read: Code: <body>
<input type='button' value='Load' onclick="doLoad()" />
<script type='text/javascript'>
/* THIS IS THE FILE TO READ */
var fileToRead="test.html";
/* THIS FUNCTION IS TO READ THE HTML FILE */
function IO(U) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open('GET', U, false );
X.setRequestHeader('Content-Type', 'text/html')
X.send('');
return X.responseXML;}
function doLoad(){
/* HERE IS THE CALL TO READ THE FILE */
var orari=(IO(fileToRead));
var arrTR=orari.getElementsByTagName('tr');
var arrTD_3nd_line=arrTR[1].getElementsByTagName('td');
var arr_p_1c_3l=arrTD_3nd_line[0].getElementsByTagName('p');
alert(arr_p_1c_3l[0].nodeValue);
}
</script>
and here is a snip of the html i read: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="ProgId" content="Word.Document">
<meta name="Generator" content="Microsoft Word 10">
<meta name="Originator" content="Microsoft Word 10">
<link rel="File-List" href="orarioinvernale_file/filelist.xml">
<title>ORARI </title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Ufficio Stampa</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>Ufficio Stampa</o:LastAuthor>
<o:Revision>4</o:Revision>
<o:TotalTime>1</o:TotalTime>
<o:Created>2005-11-28T12:25:00Z</o:Created>
<o:LastSaved>2006-01-13T10:24:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>762</o:Words>
<o:Characters>4344</o:Characters>
<o:Company>mycomp</o:Company>
<o:Lines>36</o:Lines>
<o:Paragraphs>10</o:Paragraphs>
<o:CharactersWithSpaces>5096</o:CharactersWithSpaces>
<o:Version>10.2625</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:SpellingState>Clean</w:SpellingState>
<w:GrammarState>Clean</w:GrammarState>
<w:HyphenationZone>14</w:HyphenationZone>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Comic Sans MS";
panose-1:3 15 7 2 3 3 2 2 2 4;
mso-font-charset:0;
mso-generic-font-family:script;
mso-font-pitch:variable;
mso-font-signatu 647 0 0 0 159 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
p
{mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
span.SpellE
{mso-style-name:"";
mso-spl-e:yes;}
span.GramE
{mso-style-name:"";
mso-gram-e:yes;}
@page Section1
{size:595.3pt 841.9pt;
margin:70.85pt 2.0cm 2.0cm 2.0cm;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Tabella normale";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";}
</style>
<![endif]-->
<meta http-equiv="Content-Language" content="it">
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="4098"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
</head>
<body style="" bgcolor="#ccffff" lang="IT">
<div class="Section1">
<div style="text-align: center;">
</div>
<table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" height="1733" width="100%">
<tbody>
<tr style="height: 75.75pt;">
.... and so on.... the problem is that my error console (from firefox) when i click my read button (not when i load the page) gives me errors: Code: sintax error: source: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> if i comment this it give me: Code: missing tag </meta>
source:
</head>
and if i put Code: </meta> another meta is required and so on. But i can't modify the source i read, so is there a way to read this file? Many thanks Backit I need to save an HTML page to Word using JavaScript. Any ideas on that? I have found some script on-line but all of them use the "Save As" procedure which only allows to save in txt and html format. I need it to be in Word. Thanks! |
|||||||