language options to change all text

[tinkermob]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: I would like to change the language of the text shown by clicking flags. I have implemented the menu into my site (www.meta.projectmio.com) and have a mock up here of how I would place the flags: http://flickr.com/photos/8-8/3296663318/

Now I can imagine the answer being no, but there were a lot of things that people said no to when designing my page and I got around all of them. The problems and results I am thinking of are:

The user sees the flags in the left bottom part of the menu and clicks the language they understand or are comfortable with, this then changes the text in the menu and links to new pages to be shown in the right page.

I imagine I would have to have separate blocks of code in my main code so that if a flag was clicked the links e.g. would go to a new language?

<a href="javascript:ajaxpage('/code/osx.htm', 'rightcolumn');">☃ <b>met.a</b> on Mac OSX</a>

The flags would direct the code to a different block of language specific code..

Thanks.

[jscheuer1]

Have you actually tried this? I mean, as long as the javascript in the imported content is of the sort quoted in your post (ie: not dependant upon initialization), it will work. You will need separate pages to go to that will be in the languages offered. There may be a way to deal with that more easily via PHP or some other server side language. You should also look into using the link element as a way to SEO your various multilingual pages, but that's a fine point.

[tinkermob]

No, I haven't tried it - I was basically throwing ideas out. Coming to a website that gives people free code I confess I am the type of person who cannot code themselves, sure I managed to modify the code but that's it.

When you start talking PHP it scares me a bit, not of the work involved, just that I would not be able to do it. Below is the code I use, its not vastly modified from the example but I am not sure what you mean by "not dependant upon initialization"

<h3 class="pos_abs">
met.a</h3><br />



<div id="leftcolumn">
<a href="javascript:ajaxpage('/code/what.htm', 'rightcolumn');">☃ What is <b>met.a</b> ??</a>
<a href="javascript:ajaxpage('/code/guts.htm', 'rightcolumn');">☃ <b>met.a</b> has guts</a>
<a href="javascript:ajaxpage('/code/osx.htm', 'rightcolumn');">☃ <b>met.a</b> on Mac OSX</a>
<a href="javascript:ajaxpage('/code/win.htm', 'rightcolumn');">☃ <b>met.a</b> on Vista</a>
<a href="javascript:ajaxpage('/code/thoughts.htm', 'rightcolumn');">☃ Thoughts behind <b>met.a</b></a>
<a href="javascript:ajaxpage('/code/changelog.htm', 'rightcolumn');">☃ changelog</a>
<a href="javascript:ajaxpage('/code/feedback.htm', 'rightcolumn');">☃ feedback</a>

<script type="text/javascript">

ajaxpage('/code/what.htm', 'rightcolumn')

</script>

I was thinking about making separate pages available for the other languages, but not sure how to "SEO your various multilingual pages", all of this sounds really good, but I can't do it

[jscheuer1]

Well code like:

<a href="javascript:ajaxpage('/code/what.htm', 'rightcolumn');">

can be imported because as long as the function it needs (in this case the ajaxpage() function) is available when it arrives on the page, it will use it. But whole scripts or even markup that needs to be initialized onload cannot be imported via AJAX and be expected to work. You can import the different menus via the same type of links to your flag images, ex:

<a href="javascript:ajaxpage('frenchmenu.htm', 'menucolumn');"><img src="frenchflag.gif></a>

Just remember that any paths used on the imported content (for links, images, etc.) must be valid for the page that they are getting imported to. If in doubt, the absolute path can always be used.

Now, I don't know much about PHP either, but you can use it to set up variables for users that could for example only show them content in a given language. This is better than AJAX because it would allow non-javascript users to see the site in their language.

About SEO using the link tag. You can put <link> tags in the head of a page, see:

http://www.w3.org/TR/REC-html40/stru....html#h-12.3.3

that allow search engines to present a page based upon the language preference of the person searching, simply by telling search engine what languages are available for the page and where to find the alternative pages. It's pretty straightforward. You just put the information in each <link> tag (one for each language version of that page) in the proper format. The search engine does the rest.

[tinkermob]

I tried your solution for the AJAX method, the example you gave loads a page inside the left pane as pages already load in the right pane. It looks like I would have to make the menu in the .htm file look exactly like the one that exists to begin with - is this correct? Also, how do I get the links loaded in the .htm file in the menucolumn to load links into the rightcolumn like the menu currently does?

Here below is the code I am trying now:

<div id="leftcolumn">

<a href="javascript:ajaxpage('/code/what.htm', 'rightcolumn');">☃ What is <b>met.a</b> ??</a>

<a href="javascript:ajaxpage('/code/guts.htm', 'rightcolumn');">☃ <b>met.a</b> has guts</a>

<a href="javascript:ajaxpage('/code/osx.htm', 'rightcolumn');">☃ <b>met.a</b> on Mac OSX</a>
<a href="javascript:ajaxpage('/code/win.htm', 'rightcolumn');">☃ <b>met.a</b> on Vista</a>
<a href="javascript:ajaxpage('/code/thoughts.htm', 'rightcolumn');">☃ Thoughts behind <b>met.a</b></a>
<a href="javascript:ajaxpage('/code/changelog.htm', 'rightcolumn');">☃ changelog</a>
<a href="javascript:ajaxpage('/code/feedback.htm', 'rightcolumn');">☃ feedback</a>

<a href="javascript:ajaxpage('/code/language_menu_test1.htm', 'leftcolumn');"><img src="/imagery/ES.png"></a>
<script type="text/javascript">

ajaxpage('/code/what.htm', 'rightcolumn')

</script>



</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>

<div style="clear: left; margin-bottom: 1em"></div>

**please do try the code at my site (click the bottom right image to go to the menu) at www.meta.projectmio.com**

As you can see the menu titles I have given are hard coded and not on a webpage, so I assume these would now need to be in a separate .htm file? I also see the flag links are shown as if they are an option link, I didn't want that effect, I was looking for them to be independent and have their own rollovers, also as the mock-up shows I wanted to have them side by side..http://flickr.com/photos/8-8/3296663318/


So should I pursue the AJAX route or do you think I should go the PHP? How am I doing?

[jscheuer1]

Basically, yes. I think you are being a little timid, which is understandable.

One thing though, if you are importing various menus. It would be best to use as plain of a page as possible. For example, if the existing menu (when the page loads) were an external page, it could look like so:

<a href="javascript:ajaxpage('/code/what.htm', 'rightcolumn');"><FONT SIZE=3> ☏ <FONT SIZE=1> What is <b>met.a</b> ??</a>
<a href="javascript:ajaxpage('/code/guts.htm', 'rightcolumn');"><FONT SIZE=3> ☎ <FONT SIZE=1> <b>met.a</b> has guts</a>
<a href="javascript:ajaxpage('/code/osx.htm', 'rightcolumn');"><FONT SIZE=3> ☏ <FONT SIZE=1> <b>met.a</b> on Mac OSX</a>
<a href="javascript:ajaxpage('/code/win.htm', 'rightcolumn');">☎ <b>met.a</b> on Vista</a>
<a href="javascript:ajaxpage('/code/thoughts.htm', 'rightcolumn');">☎ Thoughts behind <b>met.a</b></a>
<a href="javascript:ajaxpage('/code/changelog.htm', 'rightcolumn');">☎ changelog</a>
<a href="javascript:ajaxpage('/code/feedback.htm', 'rightcolumn');">☎ feedback</a>
<a href="javascript:ajaxpage('/code/language_menu_test1.htm', 'leftcolumn');"><img border="0" src="/imagery/ES.png"></a>

Save that as englishmenu.htm or similar because you will need it if someone wants to change back to English from another language. Unfortunately I am not well versed in other languages, otherwise I could more easily give examples of other menus.

Also, there is an error on the page:

<body onload="moveWindow()" style="overflow: hidden">

The highlighted onload event refers to an unavailable function, get rid of it. I would also advise you to replace the java applet with an ordinary image, at lest for the time being. The Java applet adds unpredictable circumstances to the page and appears to be preventing it from loading normally in both Firefox and Internet Explorer. If you need an animation object, Flash would probably be a better choice, but an ordinary image would be best if it can work for you.

[tinkermob]

A ha, I am really getting somewhere! What I have now is almost what I wanted. For starters thanks, the menu system operates as I wanted but, I wanted to have the flags bunched up, however using the present menu system they can only be on a line of their own:

<a href="javascript:ajaxpage('/code/menu_es.htm', 'leftcolumn');"><img border="0" src="/imagery/es_flag.png"></a>

If you look at the mock-up (http://flickr.com/photos/8-8/3296663318/) I was hoping they could be simple image links, from this I wanted them to have rollover effects so that the flags would be less noticeable on the page, except for when choosing (I wanted that to be subtle).


Not much can be done about the Java, other computers I have loaded the site on accept it just fine. Its an output from an open source thing similar to Flash called Processing (www.processing.org), it exports as a Java applet and is integral to the site.

Thanks for flagging that up though. Nearly there..

[tinkermob]

Hi, er, I was hoping you might know what to do regarding the flags, how to have them control the menu but not inserted on a separate line as is now. I wanted to have them bunched together but with the same effect as they currently have, can that be done?

Thanks again.