Menu item with target="_self" enhancement or bug i

[alexs]

We recently added some google translate support to our website (see http://snape.ecoscentric.com/, the flags on the right of the main menu), but are having problems fitting in google's requirements and frames.

The problem is google's use of frames. They have a primary frame with the translated page appearing in a secondary frame. You would then get nested primary frames (frames within frames within frames ...) when you decided to translate to a different language within the second frame - our site.

We worked around this by using target="xxx" to make the first translation appear in a new window with subsequent translations appearing in the same new window. This prevented the multiple frames within frames occuring when a user selected more than one translation.

However, we would prefer not to force the user to open a new window to start with. With certain firefox tab extensions loaded, somehow we manage to crash the latest version of firefox. We would prefer the translation happens in the same window, but MM does not support target="_self" (since this results in a new window with name _self .

I do not know if there is any other way to achieve this, or simply request for a target="_self" enhancement.

Suggestions?

[Ruth]

Hi,

What would happen if you didn't put any target? Would it not just open in that window?

Ruth

[alexs]

Hi

Yes, it would just open in that window. However, as I mentioned in my post, if you then selected another translate option, the google translate will occur in that frame, opening another title frame (so you now have two), followed by the page. Repeating this will continue the process.

To see what I mean, goto http://snape.coscentric.com/ and then select German (Deutch). I have removed

Code: Select all

target="_self"

from that translation option only. Then select German again. Each time you do this you go deeper and deeper into the frames as shown here:


The only way I could think of stopping this was to put in a target, forcing it to open in the same window.

[Ruth]

Hi,

Well, I'm not really up on the different translation thingees, but there is a page which shows how to include in the menu an item for BabelFish translations and that one will open in a new window, but when you click for a new language in that new window, it opens in that same window and doesn't put that extra frame in it, it opens a new page. Perhaps that will give you some ideas.

I don't do much with frames, nor with opening new windows. Could you perhaps name the window and use js to open that translation? Maybe Google would think it was loading a new window each time and not actually load the second translation as a frameset inside the already loaded frameset. But what the heck do I know

Here's the BabelFish one on Milonic to check out. Click on a language and you'll see a new window, then in that window click another language, it will do it in that window and not as a frameset in a frameset

http://milonic.com/babelfish_milonic.php

Ruth

[alexs]

Hi

Yes, I know about the babelfish example. You can still see it implemented on our live website http://www.ecoscentric.com/ now.

Unfortunately Babelfish does not do reasonable translations which is why we are switching to Google. We had a couple of native chinese, french and italian speaking friends and customers look at the translations produced by Babelfish and compare them to Google. Google was rated much better, even readable, by each.

However I believe I may have figured a workaround to the problem which still fits within Google's usage policy. Hopefully this will also get around another bug with FireFox - I can crash it reliably simply navigation the google translated pages. I think that problem is all to do with frames and new windows/pages, so may eliminate the target="self" requirement.

-- Alex

[alexs]

Just to close this topic, my workaround worked. I am able to avoid the frame within frame issue and no longer crash firefox.

Simple really. I wrote JS to detect when pages were being translated and then which backend server of google was being used. From there I could adjust the menu urls to go through the backend server rather than the frontend which added the frames.

[Ruth]

I'm really glad you got it to work.

Would this be a proprietary js function? If not would you be willing to post it so others might use it if they needed such? Not required of course. I'm sure most js coders can do their own.

Ruth

[alexs]

Not proprietary, others are welcome to use - glad to be able to contribute something back. To see it in action, goto http://www.ecoscentric.com/

To add this feature, all that is needed is this piece of code below - added before you declare any menus.

Code: Select all

// Extract the google translate backend address if present, local server name and local url part.
var ec_URL = location.href;
var ec_lang = 'en';
var ec_trans = ec_URL.match(/^(http:\/\/\d+\.\d+\.\d+\.\d+\/translate\w+\?)hl=([\w\-]+)&langpair=([^&]+)&u=http:\/\/([^\/]+)\/(.*)$/);
if (ec_trans) {
  ec_URL = 'http://'+ec_trans[4]+'/'+ec_trans[5];
  ec_lang = ec_trans[2];
}

// Provide the url link, via translation site if necessary
function add_url(item) {
  if (ec_trans)
    return 'pagematch=/'+item +
           ';url=`'+ec_trans[1]+
             'hl='+ec_trans[2]+
             '&langpair='+ec_trans[3]+
             '&u=http://'+ec_trans[4]+'/'+item+'`;';

  return "url=/"+item+";";
}

function goto_page(item) {
  top.location.href = item;
}

As google translate does not modify the links for the Milonic Menu navigation to go via it's backend, you need to do this yourself when you are being translated. Otherwise when someone navigates the site through the MM system, you will return back to the original version of that page. Also, you will end up in a google translate frame which is misleading as it gives the impression the page is being translated.

To work around this, use the functions add_url() and goto_page() declared above.

• add_url() is used to provide the url for aI() - either direct or through translate.
  goto_page() is used to remove the google frame and return to the original english (in our case) version.

So, instead of declaring your menus like this:

Code: Select all

with(milonic=new menuname("Company")){
  style=menuStyle;
  aI("text=About;url=/about.shtml;");
  aI("text=Contact;url=/contact.shtml;");
  aI("text=People;url=/people.shtml;");
  aI("text=Careers;url=/careers.shtml;");
}

declare your menus like this:

Code: Select all

with(milonic=new menuname("Company")){
  style=menuStyle;
  aI("text=About;"+add_url("about.shtml"));
  aI("text=Contact;"+add_url("contact.shtml"));
  aI("text=People;"+add_url("people.shtml"));
  aI("text=Careers;"+add_url("careers.shtml"));
}

As for providing the translation, we simply add a translation menu item to our main menu with sub-menu:

Code: Select all

with(milonic=new menuname("Translate")){
  style=menuStyle;
  imagealign='right';
  menualign='right';
  menuwidth=122;

   aI("text=`About Translation`;"+add_url("abouttrans.shtml"));
   if (ec_lang == "en") {
    aI("imagepadding=2;overimage=/images/trans_arabic.gif;pageimage=/images/trans_arabic.gif;image=/images/trans_arabic.gif;url=`http://translate.google.com/translate?langpair=en%7Car&hl=ar&u="+ec_URL+"`;text=` `");
    aI("imagepadding=2;overimage=/images/trans_chinese.gif;pageimage=/images/trans_chinese.gif;image=/images/trans_chinese.gif;url=`http://translate.google.com/translate?langpair=en%7Czh-CN&hl=zh-CN&u="+ec_URL+"`;text=` `");
    aI("imagepadding=2;overimage=/images/flag_germany.gif;pageimage=/images/flag_germany.gif;image=/images/flag_germany.gif;url=`http://translate.google.com/translate?langpair=en%7Cde&hl=de&u="+ec_URL+"`;text=`Deutsch`");
    aI("imagepadding=2;overimage=/images/flag_spain.gif;pageimage=/images/flag_spain.gif;image=/images/flag_spain.gif;url=`http://translate.google.com/translate?langpair=en%7Ces&hl=es&u="+ec_URL+"`;text=`Español`");
    aI("imagepadding=2;overimage=/images/flag_france.gif;pageimage=/images/flag_france.gif;image=/images/flag_france.gif;url=`http://translate.google.com/translate?langpair=en%7Cfr&hl=fr&u="+ec_URL+"`;text=`Français`");
    aI("imagepadding=2;overimage=/images/flag_italy.gif;pageimage=/images/flag_italy.gif;image=/images/flag_italy.gif;url=`http://translate.google.com/translate?langpair=en%7Cit&hl=it&u="+ec_URL+"`;text=`Italiano`");
    aI("imagepadding=2;overimage=/images/trans_japanese.gif;pageimage=/images/trans_japanese.gif;image=/images/trans_japanese.gif;url=`http://translate.google.com/translate?langpair=en%7Cja&hl=ja&u="+ec_URL+"`;text=` `");
    aI("imagepadding=2;overimage=/images/trans_korean.gif;pageimage=/images/trans_korean.gif;image=/images/trans_korean.gif;url=`http://translate.google.com/translate?langpair=en%7Cko&hl=ko&u="+ec_URL+"`;text=` `");
    aI("imagepadding=2;overimage=/images/flag_portugal.gif;pageimage=/images/flag_portugal.gif;image=/images/flag_portugal.gif;url=`http://translate.google.com/translate?&langpair=en%7Cpt&hl=pt&u="+ec_URL+"`;text=`Portuguese`");
  } else {
    aI("imagepadding=2;overimage=/images/flag_us_uk.gif;pageimage=/images/flag_us_uk.gif;image=/images/flag_us_uk.gif;url=javascript:goto_page('"+ec_URL+"');text=`English`");
  }
}

This provides options to translate to all languages supported by google translate, unless you are already within a translated page in which case you get the option to return to english using the call to goto_page();

You could replace the individual items with your own map, something like the Milonic Alta-Vista translate map translate example, if you wanted to get fancy. We do this for the non-javascript enabled versions of our pages, if you want to see another example.

Have fun

[Ruth]

Hi Alexs,

That's terrific, especially your explanations for those of us who are js illiterate

As to the thing for non-js browsers, I'd like seeing it. For many, these kinds of things are not something we would ever be able to figure out.

Thanks so much for taking the time to post this.

Ruth