asked on

Javascript Menu Modification

I have a web site www.crysanthos.com which is all in English. I would like to make it dual language, but keep control of the web site myself as i maintain it.

The menu tree is all in english at the moment. mtm is the menu tree and code is the menu tree layout.

The other langugae that i want to introduce is Chinese. So we have tranlated the whole web site to Chinese and i just need to includ eit in the englesh website.

What I would like is a toggle button on the left hand side of the screen say on the bottom or below the logo on the left that will switch the menu between English and chinese. The default need to be English ( but make this configurable for me so that i can select the default language. Once the button is pressed the menu on the left will switch to that language and start referring to the appropriate files when items are selected.

I want the internal layout of the code file to remain the same, so that all i need to do is add the refereces to the chinese html files.
mtmcode.js
code.htm

Sar1973

I cannot manage to open your links, but I suggest to place a couple of divs and make them visibile/hidden on that button click.

Tony Crisafi

ASKER

I dont know what a div is and i dont think its that simple. Sorry, there is a type in the link. Its www.chrysanthos.com

Sar1973

I see you web page now: the HTML code is made in frames, so that the menu should be at line 15 <frame name="menu" src="menu_empty.htm" target="_self" scrolling="auto">
You can adopt different solutions, such as:
1. create 2 different pages/frames like "menu_empty_EN.htm" in English and "menu_empty_CH.htm" in Chines and call a script like this:
function ShowMenu() {
var myMenu=document.getElementsByName("menu")[0].src;
      if (myMenu.indexOf("EN")>0) {
            myMenu.src="menu_empty_CH.htm";
      } else {
            myMenu.src="menu_empty_EN.htm";
      }
}
2. add another similar line of HTML which shows the other menu in Chines and show or hides them depending on the event you want:
function ShowMenu() {
var myMenuEN=document.getElementsByName("menuEN")[0];
var myMenuCH=document.getElementsByName("menuCH")[0];
      if (myMenuEN.style.display=="inline") {
            myMenuEN.style.display="none";
            myMenuCH.style.display="inline";
      } else {
            myMenuEN.style.display="inline";
            myMenuCH.style.display="none";
      }
}

Barry62

Here is an example page. You can adapt it to your page. The key thing to remember is: if you change the id's of the divs, make sure you change the javascript to those id's

<html>
<head>
	<title></title>
<script type="text/javascript">
function hideChinese(){
    document.getElementById("chineseMenu").style.display="none";
    document.getElementById("englishMenu").style.display="block";
}

    function translateMenu(){
        if(document.getElementById("englishMenu").style.display=="block"){
            document.getElementById("englishMenu").style.display="none";
            document.getElementById("chineseMenu").style.display="block";
        } else if(document.getElementById("chineseMenu").style.display=="block"){
            document.getElementById("chineseMenu").style.display="none";
            document.getElementById("englishMenu").style.display="block";
        }
    }
</script>
	</head>
<body onload="hideChinese()">
    <div id="englishMenu">English Menu</div>
    <div id="chineseMenu">Chinese Menu</div>
<input type="button" name="Translate" value="Translate" onclick="translateMenu()"/>
</body>
</html>

Open in new window

Sar1973

That's it: a div tag is a section in your web page which allows you to encapsulate its content; since your web page has named frames, you can add a script with a function that manages them.

Tony Crisafi

ASKER

I am not a Javascript or HTML Expert. The last bit of code i cut was Cobol 20 years ago. So i need help more detailed help with the code.

You have given me info on how to code the JS for the menu to display, but how do i get that variable of which menu to display from a toggle button that i put on the screen below the logo. How do i also change the text on the button to display English or Chinese?

Sar1973

You should post the http address of the "menu_empty.htm" web page to which the frame refers to, so that I can toggle its HTML and give some complete solution.
I ignore actually if there is some software which converts/translates HTML pages from one language to another, so I have posted a solution for 2 distinct pages.
Otherwise, you should set a Javascript code which changes for every tag in the HTML pages and frames its text: if you take a look to this page of example, you will notice on top right just below the picture a button which allows the user to switch from Japanes to English, and in the origin source that the texts of the page change from one language to another since there are 2 different pages in that site, one for each language.

Barry62

I am not sure what variable you are talking about. My javascript doesn't use any variables. It works with javascript styles. I have modified my example to include changing the button text to Chinese.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
<script type="text/javascript">
function hideChinese(){
    document.getElementById("chineseMenu").style.display="none";
    document.getElementById("englishMenu").style.display="block";
}

    function translateMenu(){
        if(document.getElementById("englishMenu").style.display=="block"){
            document.getElementById("englishMenu").style.display="none";
            document.getElementById("chineseMenu").style.display="block";
            document.getElementById("Translate").value="¿¿";
        } else if(document.getElementById("chineseMenu").style.display=="block"){
            document.getElementById("chineseMenu").style.display="none";
            document.getElementById("englishMenu").style.display="block";
            document.getElementById("Translate").value="Translate";
        }
    }
</script>
	</head>
<body onload="hideChinese()">
    <div id="englishMenu">English Menu</div>
    <div id="chineseMenu">Chinese Menu</div>
<input type="button" name="Translate" id="Translate" value="Translate" onclick="translateMenu()"/>
</body>
</html>

Open in new window

Tony Crisafi

ASKER

Look guys, i am going to have to try and work my way throuhg these solutions to see what i can get to work... i dont even know where to insert this code... i posted some JS up earlier. Below is the index.htm of the website... is that were i paste this stuff?
index.htm

Sar1973

You should post the menu.htm page to which the frame refers to with src="..." property.

Tony Crisafi

ASKER

There is no menu.htm page. There is a menu that is automatically generated by the mtmcode.js code that i posted above in conjunction with the code.htm file that i posted earlier.

Sar1973

In the main page HTML I just see 2 scripts, one loading "...urhin.js" Javascript file from another web site, and anothe which launches the function "urchinTracker()".
The mtmcode.js you posted and that I've read summarily seems to be a code which mirrors some web site like yours, by replicating/cloning its graphics, textual and menu contents and also its HTML whole code. Since it seems to me that it uses alse the same url to refer to the frames contents, it will not be useful to switch from English language to Chinese until you have not substituted the frames' .htm contents. Or I'm wrong...?

Tony Crisafi

ASKER

Here are a few more files from the web site.... I am no sure if you need anymore to provide a solution...

Regards the last comment from Sar1973... i dont know what urhin.js or "urchinTracker()".

I have added a section of code here from the code.htm file:

menu.MTMAddItem(new MTMenuItem("HOME","main.htm","main"));
menu.MTMAddItem(new MTMenuItem("ABOUT US","aboutus.htm","main"));
menu.MTMAddItem(new MTMenuItem("WHAT'S NEW","whatsnew.htm","main"));
menu.MTMAddItem(new MTMenuItem("PRODUCTS"));
menu.MTMAddItem(new MTMenuItem("INFORMATION"));
menu.MTMAddItem(new MTMenuItem("INHOUSE SHOWROOM"));
menu.MTMAddItem(new MTMenuItem("EDUCATION"));
menu.MTMAddItem(new MTMenuItem("DISTRIBUTORS","distributors.htm","main"));
menu.MTMAddItem(new MTMenuItem("LINKS","links.htm","main"));
menu.MTMAddItem(new MTMenuItem("CONTACT US","contactus.htm","main"));
menu.MTMAddItem(new MTMenuItem("SEARCH","search.htm","main"));

As an example for ease of maintenance, i would like to change line one above as follows:

menu.MTMAddItem(new MTMenuItem("HOME","main.htm","HOME{in Chinese}","mainch.htm","main"));

In this example, extended the menu item entry to include 2 more variable, that realate to the chinese equivalent to the menu and htm pages to display.

At line 4 above the line would be changed to the following:

menu.MTMAddItem(new MTMenuItem("PRODUCTS","PRODUCTS{in chinese}"));

I would do this for each entry in the code.htm menu items.

So the mtmcode.js needs to be modified to handle this change.

The other change i need is to have a toggle button above the menu to allow users to select chinese or english. English is the default.

Hope this is clearer.

Sar1973

If this script is launched only once, on main page load, it's correct to populate the main menu with 2 lines for each option and then hide the Chinese option for default, until the user does not click on the language button and switches with another script from one menu to another.
Otherwise you will have to remove from the menu with a ".RemoveItem" function the items you don't want to be displayed.

Tony Crisafi

ASKER

Well can you amend the js so that it will do this? and also provide a toggle button?

Sar1973

The button input HTML is very easy:
<input id="switchBTN" type="button" value="ENGLISH" onclick="ShowMenu()"></input>
Also add in the ShowMEnu function this lines:
myBTN=document.getElementById("switchBTN");
if (myBTN.value=='ENGLISH'){
myBTN.value='CHINESE';
} else {
myBTN.value='ENGLISH';
}

Tony Crisafi

ASKER

You guys are absolutely no help.... how can i get the code modified for me... i am not a javascript or html code cutter... I can only do basic stuff.

Sar1973

The codes have been explicitely posted above: often you are supposed to get a full comprehension of the solution in order to know how to use it.

Tony Crisafi

ASKER

OK. The button code, where do i put that and where does it say to put an image on the screen that people can click on..Also when click on the button, the text dispakyed in the button will change from "English" to "Chinese"

I would like the button to appear directly below the logo on the left of the screen just above the menu.

Sar1973

It should be placed on top of "menu_empty.htm" page HTML; otherwise, you can insert it at line 15 of the index page, but always remember to associate a function which switches the menu. I am not able to translate English to Chinese, this should be implicit in youyr question.

Tony Crisafi

ASKER

I just want to have a button that says english and another that says chinese, it will be 2 gif's that can be displayed. So how do i do code for that?

ASKER CERTIFIED SOLUTION

Sar1973

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rob

It sounds from reading the posts that you need to get in contact with a professional web developer to integrate the solutions posted from the experts above. In doing so they will be will have the understanding of the whole project and not just snippets

Tony Crisafi

ASKER

I dont think thats the case... all i need is the mtm.js code modified to handle a larger array and generate the relevent html menu (either english or chinese) depending on the status of the toggle switch that is displayed on the top of the menu frame.

I can deal with the rest of the web site and the chinese aspect of it.

Rob

I am referring to you saying:

You guys are absolutely no help.... how can i get the code modified for me... i am not a javascript or html code cutter... I can only do basic stuff.

This is what is required to make the changes to your site, a code cutter as you call it or a professional web developer as I would call it.

The experts have answered your original question so if you are still having issue with getting it working you have the following options:

1.

Hire a developer (there are some experts on EE that can do this for you)

2.

Open a new question for each of the issues you are having getting this integrated and attempt to do it yourself
As experts we can answer questions about specific issues you are having but to do the whole project (in this case programmably integrate the Chinese language) is chargeable because of the effort and intellectual property involved.

Tony Crisafi

ASKER

Fair comment. I will attempt to do it myself based on the info provided and if i succeed i will award the points...

Rob

Great. Please let us know how you go.

Tony Crisafi

ASKER

Hi,

I have spent the last 2 days trying to make out the above... But i have tackled the problem differently. I have taken the code file and defined a variable called MTMSwitch which i test and set up english or chinese depending on the state.

I then created another frame called "buttons" which sits on top of the menu_empty frame and displays 2 buttons. I have inserted the code in the index.htm file to load the buttons.htm code. See attached.

If i set the MTMSwitch to true or false in code.htm, it does the right thing and dsipalyes the correct menu.

But how do i reference the MTMSwitch in code.htm that is defined in buttons.htm in a seperate frame?

Also, once a button is clicked, how do i force a reload of the menu in the selected language?

I have attached the code for the menu_empty.htm i cant see how entering any of the code suggested above in menu_empty actually solves my problem which is why i took a different approch.

The web site is www.chrysanthos.com

Thanks,
code.htm
index.htm
mtmcode.js
buttons.htm
menu-empty.htm

Tony Crisafi

ASKER

I accepted sara1973 solution as it was closest to what i eventually got to work.