This is all well and good, but the links in each <div> all link to the same pages, regardless of language. What I want to do now is specify that when the links are clicked, they continue to open the same pages, but when opened, open different <divs> within those same HTML docs.

I'd also like it if the page could "remember" what language was selected when the user clicks the back button, again to avoid having to reselect their language on every page.

Can anyone suggest an answer to the first problem, if not the second? Thanks.

Paul_Wilkins
—
2011-05-22T22:14:29Z —
#2

Domhi said:

but the links in each <div> all link to the same pages, regardless of language. What I want to do now is specify that when the links are clicked, they continue to open the same pages, but when opened, open different <divs> within those same HTML docs.

The FragmentIdentifier is used so that the page scrolls to the identified location.

<a href="military.html#d2">...</a>

If the target page needs to take action to reveal that section, it can check location.hash to get '#d2' from which it can get the id

The page still opens with the 'English' div showing, and the 'welsh' one not. Also, if I use a hash to open the page at a specific location, won't that preclude the page opening at the very top - instead displaying the content from a point scrolled halfway down, or wherever the new <div> starts? If it had worked, that is. I think I've missed something :/

Paul_Wilkins
—
2011-05-23T13:18:19Z —
#4

Domhi said:

The page still opens with the 'English' div showing, and the 'welsh' one not. Also, if I use a hash to open the page at a specific location, won't that preclude the page opening at the very top - instead displaying the content from a point scrolled halfway down, or wherever the new <div> starts?

When you do use the location.hash to manage things on the page, you can also use window.scroll(0,0) to position things to the top, typically in a setTimeout event.

Another alternative is to pass info via the querystring instead of the hash, which might work better depending on what your page is doing.

Domhi said:

If it had worked, that is. I think I've missed something :/

Can you show us what you're doing, with a test page perchance?

Domhi
—
2011-05-23T14:46:16Z —
#5

Since the page still functions adequately despite not working how I want it to, I've uploaded the test pages (index.html and military.html) to the website, so they're here: [OLD RECTORYLAND.com and [url=http://www.woofkitty.co.uk/3972/military.html]OLD RECTORYLAND.com](http://www.woofkitty.co.uk/3972/index.html)

I'm using the welsh or British section for testing things out, so if you scroll down to that in the html (about line 637 in index, and 551 in military; the javascript is at about 115 in both) you'll see what it is I'm doing.

Paul_Wilkins
—
2011-05-23T14:58:24Z —
#6

Before you go any further with this idea, you need to know that it's incredibly wrong to load an HTML page that contains the same content in up to five languages, only to show one of them. It is an incredible waste of bandwidth, and your load times will suffer dramatically.

Internationalization is not a job that javascript does well, but using ajax to load separate sections can have its place.

I'll put together a simple example where each language is in its own separate file, and the web page builds itself by bringing together those separate files.

Needless to say though, this is not a job that the client-side should be doing. Server-side with PHP or some other type of server-side language is where this type of work should be done.

But, as it's 3am now, I'll run up a client-side example that does a better job that what I think you have been intending to do.

Domhi
—
2011-05-23T15:03:16Z —
#7

Thanks Paul. Like I said, I'm more of a tinkerer than an expert. PHP is just as scary as Javascript!

Paul_Wilkins
—
2011-05-24T00:03:28Z —
#8

Accessibility for no-script situations

First up, we need to keep in mind that the page should still be accessible when scripting is not available. We are storing the different language parts in separate files, such as military-english.html and military-prydeinig.html, so the most accessible technique is to link to those pages. That allows people without scripting to get to the content they need, and when scripting is available it can replace those links with the retrieved content.

With the select box, we give it values so that the script can easily find the appropriate file. The language suffix on the above filenames match the below option values, so that the script can automatically determine the correct file to retrieve.

When someone selects Prydeinig we want the content section to be replaced with that which is in the military-prydeinig.html file. Ajax is used for that, for which there's a very good book called [Bulletproof Ajax. When we go to its [url="http://bulletproofajax.com/code/"]code and examples](Prydeinig) we can see that Chapter 4 contains code to retrieve content from an HTML page and display it within the existing page.

The code to do that (slightly modified in the parseResponse() function to work with our content section) is:

Now is a good time to bring up that scripting code should not be embedded in the HTML code for the page. Instead, it should be in a separate script file that you load at the end of the body with:

<script src="js/script.js"></script>
</body>
</html>

That allows the page to load even faster than if the script were in the head, and the script can be used on more than one page without needing to download the script again.

Which content file to retrieve?

As the page loads, we attach an onchange event to the select field that retrieves the content.

While it's possible to use 'military-' + language + '.html' to create the file name, I want the script to be more flexible so that it can be used on more than just the military page, so I'll instead use a regular expression to find the filename, split it, and then append the language on to the filename.

So if the page was history.html and the chosen language is Francais, it will try to load the content from history-francais.html

The last part triggers the onchange event, so that the content can be automatically retrieved as the page loads.

Load the page with a desired chosen langauge

So the page now automatically retrieves the content when you select different language settings. How can we get the page to load with a language of our choice?

We can load the page with a querystring such as ?lang=prydeinigThe script can then set the select box value to whatever it provided as that value. If the select box contains a matching value, it will set the select box to that value.Then the typical page-load checking of the select value can take place.

JavaScript doesn't provide a way to easily interpret the querystring value, so we'll roll our own solution:

I've edited the quotation for the French and German languages too, to help you see things working in action.

Next steps?

The next step to take from here would be for the page to remember your chosen language. That can be done by storing the chosen language as a cookie value, so that other pages on the site can automatically retrieve that chosen language. But that can be for later on once the basic setup is in place.

Domhi
—
2011-05-24T10:41:49Z —
#9

Thanks a lot, Paul! I really appreciate the effort you've put into explaining this for me. Thank goodness for patient people like you

Hmm... Have you any idea why OLD RECTORYLAND.com is not working and index.html is only working intermittently? To be more specific, the content doesn't show up. Sometimes re-starting the browser does it, but refreshing doesn't seem to change it either. I've scanned the code and can't see anything wrong. The JS script is loaded... hmph

Domhi
—
2011-05-24T17:22:06Z —
#12

...in fact index.html doesn't operate load the script either, when reached from oldrectoryland.com as opposed to through its folder on woofkitty.co.uk. I can't figure out why this should be so (it's just framed, I think...)

Paul_Wilkins
—
2011-05-24T21:36:20Z —
#13

Stomme_poes said:

Huh, I've seen many iterations of this, but this is the first time I've seen the empty var declared "false" right away before redefining it.

Why is that?

That's setting a default value for it. That way if you are on a web browser that does not support any kind of Ajax technique, it will return false to let the script know that it can't be done.

var request = getHTTPObject();
if (request) {
...
}

Paul_Wilkins
—
2011-05-24T21:40:00Z —
#14

Domhi said:

Hmm... Have you any idea why OLD RECTORYLAND.com is not working and index.html is only working intermittently?

I don't know about intermittently, but what I do know is that the content in military-english.html and military-prydeinig.html and the other language files don't currently exist on your server. You need to create those files and load them with content.

Domhi
—
2011-05-25T13:11:56Z —
#15

Odd - they're definitely there. I can see them in the FTP... they even have the right names...

Paul_Wilkins
—
2011-05-25T13:17:55Z —
#16

Can you navigate to them via the on-page link? That will definitely confirm whether they are publicly available or not.

Paul_Wilkins
—
2011-05-25T13:19:02Z —
#17

It looks like they are working now.

You might want to use proper HTML entities for the French translation, such as é and ê

Domhi
—
2011-05-25T13:19:57Z —
#18

Well that's one problem sorted - for some reason they were stored as .htm instead of .html. The other still exists, but as it seems to be a problem with my web forwarding I don't expect you can help. When it forwards to the folder where I've located the index file it doesn't load properly - and now I've changed it to forward to the index file itself it's ceased to work completely. Gah.