|
JavaScript - I Need Help With A Custom Translator
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. Similar Tutorialshai....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>
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!!! 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 ? 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> 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 So 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! 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 am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc. Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine? Many thanks in advance should you respond to this. I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that? Code: function toggle() {
var ele = document.getElementById("dropdown-items");
var text = document.getElementById("dropdown-menu");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much! Also, heres something I'd like to achieve: The box I'd like to create is at the top, while the default one is at the bottom. I'm trying to understand how a custom object can call a function within itself. Say I have something like this: Code: function functiontest()
{
this.prop1 = '',
this.prop2 = '',
this.options = {initiallevels:0},
this.prop3 = '/blah',
this.prop4 = true,
this.function4 = function(x)
{
console.log(x)
},
this.init = function(options)
{
this.uid=options.uid
this.t=options.target
document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false)
}
}
myfun1=new functiontest
myfun1.init({uid:'myfun1',target:'target1'})
myfun2=new functiontest
myfun2.init({uid:'myfun2',target:'target2'})
And the html: Code: <html> <head></head> <body> <div id="target1">T1</div> <br> <div id="target2">T2</div> </body> </html> I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks! Hi, I want to build a custom calendar using javascript. On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month. There are 3 button below the calendar as prev mnth,create schedule,next mnth. when prev is clicked it should works same as on load for previous month, similarly for next mnth. Pls help its urgent. Thanks I am building a custom slideshow that is pulling data from an xml sheet to create each "Slide" each slide consists of several elements on the xml sheet. I have javascript currently putting together the correct information and creating a new div for each "slide". What I need is to display the first div(slide) and then hit a next button to get to display the next div(slide). Below the first set of code is a snapshot of code simply to illustrate that it is creating the correct divs. Those divs all have content in them I just took the code from firebug. 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>
<body>
<div id="page-wrap">
<button id="nextButton2">next('div')</button>
<button id="prevButton2">prev('div')</button>
<div id="start" style="background: none repeat scroll 0% 0% red;"></div>
<div id="link_Babbling Brook" class="art">
<div id="link_Botany 101" class="art">
<div id="link_Cracking Up" class="art">
<div id="link_Eclipse" class="art">
<div id="link_Equinox" class="art">
<div id="link_Foliage Fluoresced" class="art">
<div id="link_In Vein" class="art">
<div id="link_Microscopic" class="art">
<div id="link_Pickup Sticks" class="art">
<div id="link_Relief" class="art">
<div id="link_Rhubarb" class="art">
<div id="link_Snow Dyed Shibori" class="art">
<div id="link_Symmetry" class="art">
<div id="link_Undulations" class="art">
<div id="link_Willow Mist" class="art">
<div id="link_Wired" class="art">
</div>
</body>
</html>
Javascript code Code: if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('art').each(function () {
var id = $(this).attr('id');
var name = $(this).find('name').text();
var full = $(this).find('large').text();
var detail = $(this).find('detail').text();
var thumb = $(this).find('thumb').text();
var category = $(this).find('category').text();
var dimensions = $(this).find('dimensions').text();
var description = $(this).find('description').text();
var detailthumb = '<img src= " ' + thumb + ' " />';
var detailfull = '<iframe name= "portfolio ' + name + ' " src=" ' + detail + ' " iframe/>';
var large = '<iframe height="482px" width="786px" class="image-frame" name= "portfolio ' + name + ' " src= " ' + full + ' " />';
$('<div class="art" id="link_' + name +'"></div>').html('<div id="portfolio-content" class="' + name +'"><div class="thumb"><a href= " ' + detail + ' " target= "portfolio ' + name + ' ">' + detailthumb + '<br/></a>(Click for Detail)</div><div class="image">' + large + "</div><div class='text'><h1>" + name + "</h1>" + category + "<br/>" + dimensions + "<br/>" + description + "</div></div>").appendTo('#page-wrap');
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#nextButton2").click(function () {
if(!$currElement.next('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.next('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#prevButton2").click(function () {
if(!$currElement.prev('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.prev('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
}
});
});
Im currently running out of ideas of how else to attack this. This page will be navigated to by clicking on a thumbnail that will then open that particular element. How do I also get it to open to the correct element in the xml sheet. PLEASE HELP Currently we have an implementation of Lightbox (not sure which version) on our site that aids in the process of a voting system. I wasn't around when it was created, and after creating a new version of the site, have no idea how to re-integrate it so I was hoping some seasoned JS people out there can help me. Now what happens is that people go to the voting page where the list is populated with entries from a mysql db. The names are clickable and, when clicked, a lightbox should show up with the information about the person and have a vote and close button. The vote button, when pressed, should tick a single vote back in the mysql db, and then take them to a "Thank you for voting, here are the current top 10" type page. That's the overall function. Here's what information I do have so far: In the root directory there's a folder named templates Inside of that, there's a folder called Lightbox inside of Lightbox, there are 3 folders [css, images, and js] The *.js folder has [builder.js, effects.js, lightbox.js, prototype.js and scriptaculous.js] inside When clicking on a name, however, it just takes me to the image as if it's directly linked instead of opening up the Lightbox. So I need some help getting this to work. Hi there I'm trying to use custom events in jQuery to emulate a keyup event. Basically the main keyup event would trigger multiple custom events that emulate keyup events. That way I can bind and unbind these events to/from the DOM without unbinding other events that may be attached to the main keyup event. Here's a non-working example, any explanation as to why this doesn't work would be greatly appreciated! Ps. I think the problem is because the keyCode from the keyup event is not passed to the the trigger, but I don't know how to make that work. Code: var flag = 0;
$(document).bind("keyup", function(e) {
if(flag) {
$(this).trigger("customkeyup1");
} else {
$(this).trigger("customkeyup2");
}
}).bind("customkeyup1", function(e) {
if(e.keyCode == 13){
alert('customkeyup1');
$(document).unbind("customkeyup1");
}
}).bind("customkeyup2", function(e) {
if(e.keyCode == 13){
alert('customkeyup2');
}
});
$("#foo").click(function() {
flag = flag == 1 ? 0 : 1;
});
I wanted a custom look for my list menu. Here is what I came up with... http://schrene.web44.net/List-Menu.html I created it using divs with text overflow to get the scroll bar. Here is my code Code: <div id="colorList"> <center> <div class="mySelect" onClick="myFunction()">Abalone</div> <div class="mySelect" onClick="myFunction()">Acorn</div> <div class="mySelect" onClick="myFunction()">Adobe</div> <div class="mySelect" onClick="myFunction()">Allspice</div> <div class="mySelect" onClick="myFunction()">Antarctica</div> <div class="mySelect" onClick="myFunction()">Anthracite</div> <div class="mySelect" onClick="myFunction()">Aqualite</div> <div class="mySelect" onClick="myFunction()">Arctic Blueberry</div> <div class="mySelect" onClick="myFunction()">Arctic Ice</div> <div class="mySelect" onClick="myFunction()">Arctic Lime</div> <div class="mySelect" onClick="myFunction()">Cilantro</div> <div class="mySelect" onClick="myFunction()">Cinnabar</div> <div class="mySelect" onClick="myFunction()">Clam Shell</div> <div class="mySelect" onClick="myFunction()">Clove</div> <div class="mySelect" onClick="myFunction()">Cobalt</div> <div class="mySelect" onClick="myFunction()">Cocoa Brown</div> <div class="mySelect" onClick="myFunction()">Concrete</div> <div class="mySelect" onClick="myFunction()">Copperite</div> <div class="mySelect" onClick="myFunction()">Cottage Lane</div> <div class="mySelect" onClick="myFunction()">Designer White</div> <div class="mySelect" onClick="myFunction()">Doeskin</div> <div class="mySelect" onClick="myFunction()">Dove</div> <div class="mySelect" onClick="myFunction()">Earth</div> </center> </div> It worked great but it loses the scroll bar on iPhone. I want something that works for mobile web as well as traditional.. Does anybody have any ideas how to create a list menu like this??? Any help would greatly be appreciated I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax? Also, if you see any ways to make this code better, please post your fixes in this post Code: /*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".
For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>
Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.
If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.
Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/
//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
var c;
for(c in array) {
document.getElementById(array[c]).style.display = "none";
}
click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
click.style.display = "inline";
}}
|
|||||||