<head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Initialize version 1.0 of Google AJAX API google.load("language", "1"); function translate(lang) { var source = document.getElementById("article").innerHTML; var len = content.length; // Google Language API accepts 500 characters per request var words = 500; // This is for English pages, you can change the // sourcelang variable for other languages var sourcelang = "en"; document.getElementById("translation").innerHTML = ""; for(i=0; i<=(len/words); i++) { google.language.translate (source.substr(i*words, words), "en", lang, function (result) { if (!result.error) { document.getElementById("translation").innerHTML = document.getElementById("translation").innerHTML + result.translation; } }); } // Hide the text written in the original language document.getElementById("article").style.display = 'none'; return false; } // Switch to the original language function original() { document.getElementById("translation").style.display='none'; document.getElementById("article").style.display = 'block'; return false; } </script> </head> <body> <select onchange="translate(this.options[this.selectedIndex].value);"> <option value="de">deutsch</option> <option value="pt">português</option> <option value="fr">français</option> <option value="ja">日本語</option> <option value="ar">عَرَبيْ</option> <option value="it">italiano</option> <option value="ru">pуÑÑкий</option> <option value="po">polski</option> <option value="zh-CN">ä¸æ–‡</option> <option value="es">español</option> <option value="ko">í•œêµì–´</option> <option value="nl">nederlands</option> <option value="hi">हिनà¥à¤¦à¥€ </option> <option value="el">Ελληνική</option> <option value="ro">română</option> </select> </body> this is a drop down menu for translation But i want <a> herf links for this work how i can do it? this code don't work: <a href="#" onclick="translate(this.options[this.selectedIndex].value);">germany</a> please help ....
It doesn't seem to work that way. The select has options inside it, and the default with selects is that you may only choose one option-- so the option chosen (de/deutch for example) gives the script one of its arguments (this.options[this.selectedIndex].value). Anchors don't have options with values inside them. The script was written for a select drop-down. It's supposed to change all the words in "article" with a limit of 500 words. Sorry, you'll need a different script to make links change languages I think.
Actually, it's simpler than you think... <a href="#" onclick="translate('de'); return false;">deutsch</a> <a href="#" onclick="translate('pt'); return false;">português</a> <a href="#" onclick="translate('fr'); return false;">français</a> The "return false" is important so that the browser doesn't try to follow the link when you click on it. Ideally your anchors should ALSO have a URL inside them that would reload the whole page in the desired language when javascript isn't present. (Something 90% of this AJAX rubbish fails to even consider, which is sad considering how little effort it takes to do so)
How does it know to translate the whole page though? Meaning, where does it say that (what the target text is)? Crawling through Simply JS, JS Anthology and Crockford's book now (which I'm not computer literate enough to read easily)... going pretty slow.
if (!result.error) { document.getElementById("translation").innerHTML = document.getElementById("translation").innerHTML + result.translation; } Code (markup): Which means the translated bit is being tossed into the innerHTML of some element named translation. Though I'd probably write that as: if (!result.error) document.getElementById("translation").innerHTML+=result.translation; So getElementById is only called once, being perhaps the slowest of all javascript commands. I'd also probably go through and swap all those double quotes for singles since doubles take longer to parse... and I'd probably change the FOR loop so that it didn't need the multiply in the SUBSTR or the divide in the FOR. for (var i=0; i<=len; i+=words;) { google.language.translate( source.substr(i,words),sourcelang,lang,function (result) { if (!result.error) document.getElementById('translation').innerHTML+=result.translation; } ); } Code (markup): Rule #1 - less code you use, the less there is to break... Rule #1a - and being javascript is an interpreted language, less code means faster execution. Rule #2 - optimize INSIDE your loops. I would even consider going so far as to create a global variable pointing at the 'translation' ID just to avoid calling document.getElementById inside the loop - though with all those nested function calls that's probably going overboard. My real concern with the function though is that the SUBSTR could chop a word in half, so any word that falls on the 500 byte boundary would get mistranslated or not translated at all. I'd probably add a bit smarter a parsing engine in there, perhaps using a regexp, though a simple boundary check and adjust could also do the job using WHILE instead of FOR. I'd manually increment after parsing, then do a while that decreases the index if the currently pointed to character is not a space or punctuation. Unless of course their API has a memory of left over characters from the last iteration (which I doubt) But what do I know - I'd not even be manually shoving the CSS around and instead just do a class swap on some parent container.
First I've heard that, though it makes sense IF the id is not near the top (I assume the script looks DOWN through HTML). After seeing SimplyJavascript's explanation of how to make your own getElementByClass (which isn't super fully explained because it relies on his Core library which I rather don't like), it just seems easier and more targeted to getElementById or by TagName. offtopic: http://forums.digitalpoint.com/showthread.php?t=1021190 what would you do here?
Depends on the implementation - Firefox is the worst becuase it does it exactly that way, which is odd given how much they TALK a good game when it comes to the DOM. Ideally it should be a tree search where the tree has non-ID elements pruned from it pre-built during render. Assuming that said tree was built as a binary tree and properly optimized during construction you could get down to where only 8 'iterations' would be needed to search 256 ID's. All hinges on how much time you want to spend building that sort of information during the render. Which is where semantic markup can come in handy, as can a degree of parent targeting. Take a menu for example, is it easier to drop a class on every item in the menu and then use one of those getElementByClass type functions, or to simply get a pointer to the UL by ID, then pull a getElementsByTagName('li') off that pointer? I wouldn't - that type of tracking bullshit usually incurs too high a penalty on performance for information that really isn't all that useful or important. Excellent example of fat bloated ajax rubbish. If I REALLY had to implement that sort of thing, I would simply send the requested URL as a parameter to the php file, then call that php file NORMALLY inside the anchor instead of the javascript nonsense.