JavaScript - A Simple Translator
Hey guys!
I need a simple JavaScript word translator where the user can type a sentence into a text box and then be presented with what they just typed in on the page but with any programmed word replacements. I want to be able to programme in the words myself for replacement so no Google; this will be a personal offline thing and isn't used to translate a language. For example, if I programmed the word " chocolate " to be replaced with " strawberry ", and " a lot " to be replaced with " loads ", and typed into the text-box: "I like chocolate sauce a lot ". It would then display the sentence on the page, but with the word alterations. Therefore looking like this: "I like strawberry sauce loads ". That being just an example. I want to be able to easily add additional word replacements without hassle using only JavaScript, I don't want it to translate the text on the page or anything, just what you type into the text-box. So let's pretend the words were programmed as follows: . cat = dog, . love = adore . very much = a lot And I typed into the text-box the following: "I have a cat, and I love her very much. " On the same page, it would then display this text: "I have a dog, and I adore him a lot. " I cannot use other code as I am only fond with JavaScript. I would need the text-box to automatically be selected by default everytime the page is loaded, and then for it to clear everytime you click 'Submit' or press the [Enter] key, ready for the next sentence to be typed in. I know this is a lot to ask but I didn't know who else to turn to. Anyways, I know you'll know this WAY better than me, ha; hope you can help! Cheers guys!!! Similar TutorialsSo I have an assignment where I need to make a program to make a simple translator. Where I insert a text box for the user to input i.e. "Hello" and the other textbox to display the word in spanish. Problem is im having trouble displaying the output and having a textbox to out put it too. Also i dont think my button is functioning correctly. Please help! It would be greatly appreciated! <html> <h2> English to Spanish Translator </h2> <head> <script type = "text/javascript"> PHRASES = [["hello", "hola"], ["hi, hola"], ["how are you", "como estas"], ["sorry", "lo siento"], ["thank you", "gracias"], ["please", "por favor"], ["how are you doing today"], ["como estas hoy"], ["I love you", "te amo"], ["hey, eh"], ["welcome", "bienvenido"], ["my name is", "mi nombre es"], [ "good morning", "buenos dias"], ["goodbye","adios"], ["i don't know", "no se"], ["help", "ayudame"], ["happy birthday", "feliz cumpleanos"]] function capitalize (str) { return str.charAt(0).toUpperCase() + str.substring(1); } function translate (text) { for (var i = 0; i < PHRASES.length; i++) { var toReplace = new RegExp("\\b" + PHRASES[i][0] + "\\b", "i"); var index = text.search(toReplace); while (index != -1) { if (text.charAt(index) >= "A" && text.charAt(index) <= "Z") { text = text.replace(toReplace, capitalize(PHRASES[i][1])); } else { text = text.replace(toReplace),PHRASES[i][1]); } index = text.search(toReplace); } } return text; } </script> </head> <body> <form name = "ButtonForm"> <p> Enter a word or phrase </p> <input type = "text" name = "input" value = "" /> <br></br> <input type = "button" value = "Translate" onClick = "translate();" /> <br> </br> </form> </body> </html> Reply With Quote 02-03-2015, 10:12 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts I have not tested your entire array of words, but this should get you started. NOTES: 1. You did not pass a word to 'translate()' for it to check 2. You did not have a place to store the returned value of the translation 3. You should not use reserved words as variables (ie, text as a function parameter) Code: <html> <h2> English to Spanish Translator </h2> <head> <script type = "text/javascript"> PHRASES = [ ["hello", "hola"], ["hi, hola"], ["how are you", "como estas"], ["sorry", "lo siento"], ["thank you", "gracias"], ["please", "por favor"], ["how are you doing today"], ["como estas hoy"], ["I love you", "te amo"], ["hey, eh"], ["welcome", "bienvenido"], ["my name is", "mi nombre es"], ["good morning", "buenos dias"], ["goodbye","adios"], ["i don't know", "no se"], ["help", "ayudame"], ["happy birthday", "feliz cumpleanos"] ]; function capitalize (str) { return str.charAt(0).toUpperCase() + str.substring(1); } function translate (txt) { for (var i=0; i<PHRASES.length; i++) { var toReplace = new RegExp("\\b" + PHRASES[i][0] + "\\b", "i"); var index = txt.search(toReplace); while (index != -1) { if (txt.charAt(index) >= "A" && txt.charAt(index) <= "Z") { txt = txt.replace(toReplace, capitalize(PHRASES[i][1])); } else { txt = txt.replace(toReplace,PHRASES[i][1]); } index = txt.search(toReplace); } } return txt; } </script> </head> <body> <form name="ButtonForm" action="" method="post" onsubmit="return false"> <p> Enter a word or phrase </p> <input type="text" name="inText" id="inText" value="" /> <p> <input type="button" value="Translate" onClick = "document.getElementById('outText').value = translate(document.getElementById('inText').value)" /> <p> <input type="text" name="outText" id="outText" value="" /> </form> </body> </html> BTW, you should enclose your script between [ code] and [ /code] tags (without the spaces) to retain formatting and make it easier for forum members to read, test, debug, etc. Good Luck! I have tried using Microsofts translator widget but it messes up my menu that I wish it to sit beside, the widget is almost twice the height if my menu bar. I am after a widget that is just text and the user clicks it to open up a select language box. Does anyone have other widgets they use that is based on a single line selector not more than say 15px high or some thing like that ? I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript"> function translate() { if (document.form1.elements[0].checked == true) { EtoA() } else if (document.form1.elements[1].checked == true) { AtoE() } else { } } function EtoA() { var toggle = "false" var xlate = document.form1.elements[4].value var xlation = "" document.form1.elements[5].value = "" for (var i = 0; i <= xlate.length; i++) { tempa = xlate.charAt(i) if ( tempa == "[") { toggle = "true" i++ } else if ( tempa == "]") { toggle = "false" i++ } tempa = xlate.charAt(i) if (toggle == "true") { tempb = tempa } else if(tempa == "a") { tempb = "9" } else if(tempa == "b") { tempb = "a" } else if(tempa == "c") { tempb = "0" } else if(tempa == "d") { tempb = "c" } else if(tempa == "e") { tempb = "3" } else if(tempa == "f") { tempb = "b" } else if(tempa == "g") { tempb = "4" } else if(tempa == "h") { tempb = "?" } else if(tempa == "i") { tempb = "5" } else if(tempa == "j") { tempb = "6" } else if(tempa == "k") { tempb = "e" } else if(tempa == "l") { tempb = "+" } else if(tempa == "m") { tempb = "x" } else if(tempa == "n") { tempb = "7" } else if(tempa == "o") { tempb = "v" } else if(tempa == "p") { tempb = "1" } else if(tempa == "q") { tempb = "t" } else if(tempa == "r") { tempb = "q" } else if(tempa == "s") { tempb = "g" } else if(tempa == "t") { tempb = "n" } else if(tempa == "u") { tempb = "<" } else if(tempa == "v") { tempb = ">" } else if(tempa == "w") { tempb = "^" } else if(tempa == "x") { tempb = "!" } else if(tempa == "y") { tempb = "@" } else if(tempa == "z") { tempb = "#" } else if(tempa == "A") { tempb = "9" } else if(tempa == "B") { tempb = "a" } else if(tempa == "C") { tempb = "0" } else if(tempa == "D") { tempb = "c" } else if(tempa == "E") { tempb = "3" } else if(tempa == "F") { tempb = "b" } else if(tempa == "G") { tempb = "4" } else if(tempa == "H") { tempb = "h" } else if(tempa == "I") { tempb = "5" } else if(tempa == "J") { tempb = "6" } else if(tempa == "K") { tempb = "e" } else if(tempa == "L") { tempb = "f" } else if(tempa == "M") { tempb = "x" } else if(tempa == "N") { tempb = "7" } else if(tempa == "O") { tempb = "v" } else if(tempa == "P") { tempb = "1" } else if(tempa == "Q") { tempb = "t" } else if(tempa == "R") { tempb = "q" } else if(tempa == "S") { tempb = "g" } else if(tempa == "T") { tempb = "n" } else if(tempa == "U") { tempb = "<" } else if(tempa == "V") { tempb = ">" } else if(tempa == "W") { tempb = "^" } else if(tempa == "X") { tempb = "!" } else if(tempa == "Y") { tempb = "@" } else if(tempa == "Z") { tempb = "#" } else if(tempa == "1") { tempb = "}" } else if(tempa == "2") { tempb = "{" } else if(tempa == "3") { tempb = "(" } else if(tempa == "4") { tempb = "'" } else if(tempa == "5") { tempb = "|" } else if(tempa == "6") { tempb = "`" } else if(tempa == "7") { tempb = ":" } else if(tempa == "8") { tempb = ";" } else if(tempa == "9") { tempb = "=" } else if(tempa == "0") { tempb = ")" } else if(tempa == "~") { tempb = "R" } else if(tempa == "!") { tempb = "T" } else if(tempa == "@") { tempb = "F" } else if(tempa == "#") { tempb = "Y" } else if(tempa == "$") { tempb = "K" } else if(tempa == "%") { tempb = "J" } else if(tempa == "^") { tempb = "H" } else if(tempa == "&") { tempb = "G" } else if(tempa == "*") { tempb = "X" } else if(tempa == "_") { tempb = "V" } else if(tempa == "-") { tempb = "B" } else if(tempa == "+") { tempb = "M" } else if(tempa == "=") { } else if(tempa == "<") { tempb = "N" } else if(tempa == ">") { tempb = "U" } else if(tempa == ".") { tempb = "S" } else if(tempa == ",") { tempb = "W" } else if(tempa == "?") { tempb = "." } else if(tempa == ":") { tempb = "," } else if(tempa == ";") { tempb = "$" } else { tempb = tempa } xlation = document.form1.elements[5].value document.form1.elements[5].value = xlation + tempb } } function AtoE() { var toggle = "false" var xlate = document.form1.elements[4].value var xlation = "" document.form1.elements[5].value = "" for (var i = 0; i <= xlate.length; i++) { tempa = xlate.charAt(i) if ( tempa == "[") { toggle = "true" i++ } else if ( tempa == "]") { toggle = "false" i++ } tempa = xlate.charAt(i) if (toggle == "true") { tempb = tempa } else if(tempa == "9") { tempb = "a" } else if(tempa == "a") { tempb = "b" } else if(tempa == "0") { tempb = "c" } else if(tempa == "c") { tempb = "d" } else if(tempa == "3") { tempb = "e" } else if(tempa == "b") { tempb = "f" } else if(tempa == "4") { tempb = "g" } else if(tempa == "?") { tempb = "h" } else if(tempa == "5") { tempb = "i" } else if(tempa == "6") { tempb = "j" } else if(tempa == "e") { tempb = "k" } else if(tempa == "+") { tempb = "l" } else if(tempa == "x") { tempb = "m" } else if(tempa == "7") { tempb = "n" } else if(tempa == "v") { tempb = "o" } else if(tempa == "1") { tempb = "p" } else if(tempa == "t") { tempb = "q" } else if(tempa == "q") { tempb = "r" } else if(tempa == "g") { tempb = "s" } else if(tempa == "n") { tempb = "t" } else if(tempa == "<") { tempb = "u" } else if(tempa == ">") { tempb = "v" } else if(tempa == "^") { tempb = "w" } else if(tempa == "!") { tempb = "x" } else if(tempa == "@") { tempb = "y" } else if(tempa == "#") { tempb = "z" } else if(tempa == "9") { tempb = "A" } else if(tempa == "a") { tempb = "B" } else if(tempa == "0") { tempb = "C" } else if(tempa == "c") { tempb = "D" } else if(tempa == "3") { tempb = "E" } else if(tempa == "b") { tempb = "F" } else if(tempa == "4") { tempb = "G" } else if(tempa == "?") { tempb = "H" } else if(tempa == "5") { tempb = "I" } else if(tempa == "6") { tempb = "J" } else if(tempa == "e") { tempb = "K" } else if(tempa == "+") { tempb = "L" } else if(tempa == "x") { tempb = "M" } else if(tempa == "7") { tempb = "N" } else if(tempa == "v") { tempb = "O" } else if(tempa == "1") { tempb = "P" } else if(tempa == "t") { tempb = "Q" } else if(tempa == "q") { tempb = "R" } else if(tempa == "g") { tempb = "S" } else if(tempa == "n") { tempb = "T" } else if(tempa == "<") { tempb = "U" } else if(tempa == ">") { tempb = "V" } else if(tempa == "^") { tempb = "W" } else if(tempa == "!") { tempb = "X" } else if(tempa == "@") { tempb = "Y" } else if(tempa == "#") { tempb = "Z" } else if(tempa == "}") { tempb = "1" } else if(tempa == "{") { tempb = "2" } else if(tempa == "(") { tempb = "3" } else if(tempa == "'") { tempb = "4" } else if(tempa == "|") { tempb = "5" } else if(tempa == "`") { tempb = "6" } else if(tempa == ":") { tempb = "7" } else if(tempa == ";") { tempb = "8" } else if(tempa == "=") { tempb = "9" } else if(tempa == ")") { tempb = "0" } else if(tempa == "R") { tempb = "~" } else if(tempa == "T") { tempb = "!" } else if(tempa == "F") { tempb = "@" } else if(tempa == "Y") { tempb = "#" } else if(tempa == "K") { tempb = "$" } else if(tempa == "J") { tempb = "%" } else if(tempa == "H") { tempb = "^" } else if(tempa == "G") { tempb = "&" } else if(tempa == "X") { tempb = "*" } else if(tempa == "V") { tempb = "_" } else if(tempa == "B") { tempb = "-" } else if(tempa == "M") { tempb = "+" } else if(tempa == "N") { tempb = "<" } else if(tempa == "U") { tempb = ">" } else if(tempa == "S") { tempb = "." } else if(tempa == "W") { tempb = "," } else if(tempa == ".") { tempb = "?" } else if(tempa == ",") { tempb = ":" } else if(tempa == "$") { tempb = ";" } else { tempb = tempa } xlation = document.form1.elements[5].value document.form1.elements[5].value = xlation + tempb } } Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. hai....any of you got free javascripts text Translator code...i really need it ASAP..tq.. i got one but it not work very good when i put 1000++ words...example : Code: <script type="text/javascript"> function translate(phrase) { phrase = document.getElementById('input').value; phrase = phrase.replace(/why/g, "y"); phrase = phrase.replace(/are/g, "r"); phrase = phrase.replace(/you/g, "u"); phrase = phrase.replace(/for/g, "4"); phrase = phrase.replace(/to/g, "2"); document.getElementById('output').value = phrase; } </script> <textarea id="input"></textarea><br /> <input type="button" value="translate" onClick="translate();" /><br /> <textarea id="output"></textarea> I am trying to write a translator box for my website. So far, I've been able to get working code from a tutorial: Code: <input id="ori" type="text" /> <button onclick="translate();">Translate</button> <div id="trans"></div> <script> var languageFrom = "en"; var languageTo = "fr"; function translate() { document.getElementById('trans').innerHTML="Translating... please wait"; var text= document.getElementById('ori').value; window.mycallback = function(response) { document.getElementById('trans').innerHTML=response; } var s = document.createElement("script"); s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=<MY-APP-ID>&from=" + languageFrom + "&to=" + languageTo + "&text=" + text; document.getElementsByTagName("head")[0].appendChild(s); } </script> (Script it from he http://wizardsoweb.com/microsoftbing...itcher=desktop) Basically, once I fill in my APPID, it will translate the text in the ori text box to French. Of course, this all works fine, but here's what I'm trying to do: I want there to be two drop down menus. One will populate the languageFrom variable with a specified language, and another drop down menu which will populate the languageTo variable with a specified language. I've already posted about this matter in a different post: http://stackoverflow.com/questions/8...from-drop-down (It's on stackoverflow). That way, when you select a value from the drop down menu, it populates the variable. I have a working example of this on jsFiddle: http://jsfiddle.net/charlescarver/hk2bJ/1/ (This includes my working API key so I it's easy to work on) SO, I think the problem with this is that the script which controls the translation is loaded when the variables are empty, and then doesn't update when a drop down option is selected. I think this can be fixed by calling the script when the button is clicked, instead of when the page is loaded. How can this be accomplished? The Microsoft support is poorly documented and I can't find a solution there or on google. Here's a link to the API documentation: http://msdn.microsoft.com/en-us/library/ff512385.aspx hi all,, actually i used ajax api script.the problem is, the code works well in mozilla and other browser but in IE the dropdown list not showing.. its showing the error google/default+en.I.js line114 (c.g) object not defined.. the code is <script type="text/javascript" src="js/jquery.js"></script> <script src="js/jquery.translate-1.3.7.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function($){ //when DOM is ready $.translate(function(){ //when the Google Language API is loaded function translateTo( destLang ){ //this can be declared in the global scope too if you need it somewhere else $('body').translate( 'english', destLang, { //translate from english to the selected language not: '.jq-translate-ui, .header', //by default the generated element has this className fromOriginal:true //always translate from english (even after the page has been translated) }); } $.translate.ui('select', 'option') .appendTo('#aj') //insert the element to the page .change(function(){ //when selecting another language translateTo( $(this).val() ); return false; //prevent default browser action }); }); }); </script> <div id="aj"></div> Hi, I'm currently trying to get javascript to work with internet explorer. I managed to get one part of the translation file to work. It's a javascript to change some of the words on Facebook from English to Secwepemc (native american language). The original file works in Firefox and Chrome but not in safari. I knew it was because internet explorer has its own parameters. A file works completely for FF and chrome but not for IE. So, I changed the language a bit so that IE can understand it. Now I have one part of the translation working but not the others. I am wondering if it would be better to use ID's, names, and class all together to get the english words I want to change. I am using grease monkey for IE to use this script. I know firefox and chrome are much better but the plan is for everyone to use and some people still use IE. I know that if I have part of the words translating, then it must be the wrong identifiers. If someone can either help me find the right identifiers or if I missed changing syntax from FF and Chrome to IE, that would be amazing! Here is the javascript file. Code: var es = new Array(); es["Home"] = "Tsitcw"; es["News Feed"] = "Lexeyem"; es["Friends"] = "Kweselkten"; es["Like"] = "Xwexwisten"; es[" likes this."] = " r xwexwistes."; es["Today"] = "Pyin Te Sitqt"; es["Say hello."] = "Say weytk."; es["Say hi."] = "Say weytk."; es["Tomorrow"] = "Pexweyt"; es["What are you planning?"] = "Me7 Stemi ke7 tsuwet?"; es["Where?"] = "T'he7en"; es["Who's invited?"] = "Sweti7?"; es["What's on your mind?"] = "Stemi ke7 peti'nesme?"; function loadSecwepemc() { var fbelem = document.getElementsByTagName('a'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = document.getElementsByTagName('span'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = document.getElementsByClassName('ego_social_context'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = document.getElementsByTagName('input'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.getAttribute('placeholder') in es) { thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]); } if (thisElem.getAttribute('value') in es) { thisElem.setAttribute('value',es[thisElem.getAttribute('value')]); } } var fbelem = document.getElementsByTagName('textarea'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.getAttribute('placeholder') in es) { thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]); } if (thisElem.getAttribute('title') in es) { thisElem.setAttribute('title',es[thisElem.getAttribute('title')]); } if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = document.getElementsByTagName('h3'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; thisElem.attachEvent( "onClick", loadSecwepemc()); // capture phase } } var fbelem = document.getElementsByTagName('h2'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { icon = thisElem.childNodes[0] thisElem.innerText = es[thisElem.innerText]; thisElem.appendChild(icon) } } } loadSecwepemc(); function changedNode(e) { var fbelem = e.target.getElementsByTagName('a'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = e.target.getElementsByTagName('span'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; thisElem.attachEvent( "onLoad", loadSecwepemc()); // capture phase } } var fbelem = e.target.getElementsByClassName('ego_social_context'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = e.target.getElementsByTagName('input'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.getAttribute('placeholder') in es) { thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]); } if (thisElem.getAttribute('value') in es) { thisElem.setAttribute('value',es[thisElem.getAttribute('value')]); } } var fbelem = document.getElementsByTagName('textarea'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.getAttribute('placeholder') in es) { thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]); } if (thisElem.getAttribute('title') in es) { thisElem.setAttribute('title',es[thisElem.getAttribute('title')]); } if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; } } var fbelem = e.target.getElementsByTagName('h3'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { thisElem.innerText = es[thisElem.innerText]; thisElem.attachEvent( "onClick", loadSecwepemc()); // capture phase } } var fbelem = e.target.getElementsByTagName('h2'); for (var i = 0; i < fbelem.length; i++) { var thisElem = fbelem[i]; if (thisElem.innerText in es) { icon = thisElem.childNodes[0] thisElem.innerText = es[thisElem.innerText]; thisElem.appendChild(icon) } } } document.attachEvent('onNodeInserted', changedNode()); I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean Hi, Im trying to make an imacro/javascript script that checks a webpage for names, and if either of the names are found, i want the script to alert me, if not, continue looping/reloading the page. Im not at all good with javascript, imacro is more sort of my thing, however what i do have, doesnt seem to do anything. var links = document.getElementsByTagName('a'); for (var i in links){ if (links[i].value == "Simon" || links[i].value == "James"){ alert("ATTENTION"); } } i dont know if its something simple i'm missing, or whether im nowhere near, but ive spent all day trying to do this, and lost all patience. Any suggestion/fixes? Hi Folks, I've been trying to learn Javascript, I'm fluent with CSS, HTML and not to bad with jQuery and PHP. But I've been trying to learn the core fundamentals of JavaScript. Basically, I have a friend who has a strange take on the English language, so I wanted to make him a translator, so that you could input one of his misspellings and it would bring up the proper word. <html> <head> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript"> // Mox spellings function checkMox () { var bm = document.forms["transMox"]["mox"].value; if (bm == "wid") { document.write("wid = with"); } else { document.write("Please enter a Moxism"); } }; </script> </head> <body> <header> <div id="title"> <h1>I drink!</h1> <h2>Therefor I am...</h2> </div> <nav> <ul> <li>The history of Moxisms</li> <li>Examples of Moxisms</li> <li>The man himself...</li> </ul> </nav> </header> <h3>Welcome to the Big Mox translator</h3> <form id="transMox" action="#output" method="post" onsubmit="return checkMox()"> <input type="text" id="mox">Enter a Moxism</input> <br /> <input type="submit" id="submit" onSubmit="checkMox();">G0!</input> </form> <div id="output"> </div> </body> </html> Obviously that's just for one word, so I wondered how to structure more words into an array or something? Anyway, cheers in advance for the help guys! Hello, Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit. When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work? Thank you in advance for any input! Code: function initMenus() { $('ul.menu ul').hide(); $.each($('ul.menu'), function(){ var cookie = $.cookie(this.id); if(cookie === null || String(cookie).length < 1) { $('#' + this.id + '.expandfirst ul:first').show(); } else { $('#' + this.id + ' .' + cookie).next().show(); } }); $('ul.menu li a').click( function() { var checkElement = $(this).next(); var parent = this.parentNode.parentNode.id; if($('#' + parent).hasClass('noaccordion')) { if((String(parent).length > 0) && (String(this.className).length > 0)) { if($(this).next().is(':visible')) { $.cookie(parent, null); } else { $.cookie(parent, this.className); } $(this).next().slideToggle('normal'); } } if((checkElement.is('ul')) && (checkElement.is(':visible'))) { if($('#' + parent).hasClass('collapsible')) { $('#' + parent + ' ul:visible').slideUp('normal'); } return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#' + parent + ' ul:visible').slideUp('normal'); if((String(parent).length > 0) && (String(this.className).length > 0)) { $.cookie(parent, this.className); } checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenus();}); Code: <ul id="menu1" class="menu" style="margin-top:20px;"> <li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li> <li><a class="m1" href="">WHO WE ARE ...</a> <ul><li><a href="">Company Overview</a></li> <li><a href="">Clientele</a></li> <li><a href="">Multimedia</a></li> <li><a href="">Careers</a></li> <li><a href="">Contact Us</a></li> </ul> </li> <li><a class="m1" href="">WHAT WE DO ...</a> <ul><li><a href="">Promotional Products</a></li> <li><a href="">Screen Printing</a></li> <li><a href="">Embroidery</a></li> <li><a href="">Signage</a></li> <li><a href="">Web Design</a></li> </ul> </li> <li><a class="m3" href="">FIND PRODUCTS ...</a> <ul><li><a href="">Web Search</a></li> <li><a href="">Online Catalogs</a></li> </ul> </li> <li><a class="m4" href="">SUPPORT TOPICS ...</a> <ul><li><a href="">General Information</a></li> <li><a href="">Available Brands</a></li> <li><a href="">Artwork Submissions</a></li> <li><a href="">Color & Substrate Charts</a></li> <li><a href="">Dartman Game</a></li> </ul> </li> <li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li> </ul> Code: ul.menu { border-bottom:1px solid #ccc; } ul.menu, ul.menu ul { list-style-type:none; margin: 0; padding: 0; width: 240px; } ul.menu a { display: block; text-decoration: none; } ul.menu li { margin-top: 0px; border-top:1px solid #ccc; font-size:10pt; font-family: Segoe-B; } ul.menu li a { background: #fff; color: #333; padding: 3px 20px; } ul.menu li a:hover { background: #2b76b7; color:#fff; } ul.menu li ul li a { background: #fff; color: #2b76b7; padding-left: 35px; font-size:10pt; font-family: Segoe-R; } ul.menu li ul li a:hover { background: #eee; border-left: 5px #000 solid; padding-left: 25px; color:#333; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; } .code code { display: block; padding: 3px; margin-bottom: 0; } .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; } .indent1 { padding-left: 1em; } .indent2 { padding-left: 2em; } .indent3 { padding-left: 3em; } .indent4 { padding-left: 4em; } .indent5 { padding-left: 5em; } I'm a student learning javascript, I'm having a very basic problem. I have to write a script that outputs XHTML text that keeps displaying in the browser window that multiples of the integer 2, namely 2, 4, 8, 16, 32, 64, etc. This is the code i have, Code: <!-- var product=2; while { product =2*product; } document.writeln( +product+ ); // --> And it pretty much does nothing. Help would be much appreciated Dave For the first program I am trying to have the user input the password "stamp" to advance to the next page which is a pizza menu. The first program is supposed to give the user 3 tries and if they do not get it correct an alert is to pop up and tell them how many tries they have left. If they do not get it correct the input field for the riddle is to be locked. However if they have it correct they should be forwarded to the pizza menu. Code: <html> <body> <FORM name= "myForm"> <h3> What goes around the world but stays in a corner?</h3> <br> <INPUT type="password" name="passPhrase" id="pass"> <script language= "javaScript"> alert("Enter the correct password to proceed"); function checkpass(form) { if(form.passPhrase.value == "stamp") { alert("page unlocked!"); form.compute.disabled = false; form.authenticate.disabled = true; } else alert("that is not the correct response!"); </form> } </script> </body> </html> For the second program I am having a few small problems, I need to make a button that updates and clears the order. The updated order is supposed to be displayed in the text box that I have at the bottom. Also I am trying to make a function that computes the total cost for the order. Code: </head> <body> <body bgcolor="Silver"> <p> <center> <form method="post" > <p><font size="+4"><strong><font color="#000000">Lance's Pizza <br></font><font size="+4"><strong><font color="#000000"><img src="pizza.jpg" width="163" height="134"></font></strong></font></strong></font></p> <center> <p><strong> Pizza Size:</strong></p> <p> <input type="radio" name="size" value="mini" id="Size_mini"> Mini 14in [$9.99] <input type="radio" name="size" value"=medium" id="Size_Medium"> Medium 16in [$12.99] <input type="radio" name="size" value="large" id="Size_Large"> Large 18in [$15.99] </p> <p><strong>Toppings:</strong>: <center> <input name="toppings" type="checkbox" id="Pepperoni"> Pepperoni [$0.50] <input name="toppings" type="checkbox" id="Suasage"> Sausage [$1.00] <input name="toppings" type="checkbox" id="Greenpeppers"> Green peppers [$0.25] <input name="toppings" type="checkbox" id="Onions"> Onions [$0.25] </p> <input name="toppings" type="checkbox" id="Mushrooms"> Mushrooms [$0.50] <input name="toppings" type="checkbox" id="Olives"> Olives [$0.25] <p> <TEXTAREA NAME="" ROWS="10" COLS="40" onBlur="blurHandlerRouting"> </TEXTAREA> <br><input name="clear" type="button" value="Clear" onClick="Reset();"> </p> </form> </p> </body> </html> http://www.outwarstop.com/woz/woz09r3a.php On this page located around where it says Drops under where it says "Sha-Zhul ArchDemon [60]" are the mouseover's but the location of the popup doesnt come up at the mouse, but on the left side of the table, i need help gettin the popup to appear where the mouse is located. I have very limited understanding of programming, but I want to do something with javascript in the browser and don't know how to go about it. I know it could be done in C or some other language, but I have even less experience with that, so I want to see if I can do it in the browser. I have a questionnaire that the respondents filled out by hand, and I have to tally the results. Rather than go through and tally up the results for each question by hand on paper, I'd rather just be able to punch the values for the answers (the questions are "worst to best; 1-5" type responses) on the 10-key, have it add 1 to the appropriate box for each question, move to the next question, wait for my next entry of 1-5, and start back at the beginning again when I'm finished inputting answers for all the questions. I have an idea that there'd be 5 boxes per question for the tallied results and a box alongside each of those for entry of the answer. If you input "1" in that box, it'd add 1 to the first box; if you hit "2," it'd add 1 to the second box; if you hit "3," it'd add 1 to the third box, etc. I know this probably requires onKeyDown or onKeyUp to get the value of the answer, but I'm not sure how to get values captured from onKeyDown/Up through the javascript and back into the appropriate boxes. I'm not sure if I need an if...then conditional in the javascript or if it can be done some other way. Anyway, can anyone post some simple, sample code so I can get this going for at least one question and then I can scale it up from there? Thank you! Basically i have an image of a ball that i am trying to make bounce from top to bottom so far it is just going to the bottom and stopping plz help thanks <head> <title></title> </head> <body> <center> <input type="button" value="Click" onClick="moveDown()"/> </center> <img id="Ball" src="ball.jpg" style="position:absolute; top:100px; left:100px;"/> <script language="JavaScript"> var Image = document.getElementById("Ball"); var Position = 100; var direction = 1; function moveDown() { if(direction > 0) { Image.style.top = parseInt(Image.style.top) + 20+'px'; } if(parseInt(Image.style.top)> 100 || direction > 1 ) direction = 1 if(parseInt(Image.style.top)> 500 || direction < 1 ) { direction = -1 Image.style.top = parseInt(Image.style.top) - 20+'px'; } } setInterval ("moveDown()", 50 ); </script> </body> </html> i have this simple js example to click Delete Post and then give the user two options. If they click yes then they go that page...but how do i set it to where when they click cancel it goes back to "Delete Post" ??? i suck at javascript Code: <html> <body> <p><b>Delete Post</b></p> <script type="text/javascript"> window.onclick=function(){ document.getElementsByTagName("p")[0].innerHTML="<b><a href='#'>Delete</a> || Cancel</b>" } </script> </body> </html> Hey guys, I'm new to jquery and I'm sure this is a VERY simple problem.. Here's my code Quote: <style type="text/css"> #box { background: red; width: 300px; height: 300px; display: none; } </style> <script type="text/javascript"> $(function() { $('a').click(function() { $('#box').slideDown(4000); }); }); </script> </head> <body> <div id="box"></div> <a href="#">Click Me!</a> </body> </html> As you can see it's pretty simple, I've made the box slideIn. My problem is I want to make a separate button to slide it back out, but because I've used the "a" tag it's associating all links with the same function, how do I get around this? I'm sure it's really simple! Thanks I have been having problems adding checkboxes and option selects in the same function.. Here's what I have. Code: <script type="text/javascript"> function bonuscalc() { var aaaa = document.getElementById("aaaa").value; var bbbb = document.getElementById("bbbb").value; var cccc = document.getElementById("cccc").value; if (dddd.checked){ var dddd = document.dddd.value = 2; } else { var dddd = document.dddd.value = 1; } var eeee = document.getElementById("eeee").value; var bonus = aaaa* bbbb * dddd * cccc * eeee; var roundbonus = Math.round(bonus*10)/10; document.getElementById("roundbonus").value = roundbonus; } </script> Javascript first.. The part I'm not sure about is the if/else part for checbox. Now the html: Code: <form action="" id="calc1"> <table width="100%"> <tbody> <tr> <td>A status: <select id="aaaa"> <option value="1.1">A1</option> <option value="1.02">A2</option> <option value="1">A3</option> <option value="0.95">A4</option> </select> </td> <td>B status: <select id="bbbb"> <option value="1">0%</option> <option value="0.99">1%</option> <option value="0.98">2%</option> <option value="0.97">3%</option> <option value="0.96">4%</option> <option value="0.95">5%</option> <option value="0.94">6%</option> <option value="0.93">7%</option> <option value="0.92">8%</option> <option value="0.91">9%</option> <option value="0.90">10%</option> </select> </td> <td>E status:<input id="eeee" type="text" /> </td> <td>D status: <input id="dddd" name="dddd" type="checkbox"> </td> <td>C status: <select id="cccc"> <option value="1">No</option> <option value="1.2">Yes</option> </select> </td> </tr> <tr> <td width="100%"> <input type="button" value="Submit" onclick="bonuscalc()" /> <br /> Result: <input type="text" readonly="readonly" id="roundbonus" /> </td> </tr> </tbody> </table> </form> I hope it's not too confusing. The idea is to assign value 2 if the checkbox is checked and value 1 is it isn't.. |