Thread

Hi,

I looked around the site to see if there is specifically this topic, but don’t think so.

I have an english site that I also need to be in Chinese.  I’ve considered all the options, but wonder if
there is a simple way to switch css links.  Ideally this would be a set of buttons that also manage to
reload the page with the new css.  This would then carry through for the rest of the users visit.

Since I provide all the content and have it translated I had this vision of simply hiding and unhiding divs
for the language (all built into a set of css differing only in this way, one for en and one for cn).

Thanks for any insights…

Helo Wonk,

Thank you for posting your question here on the ExpressionEngine forums.

I image you could use some JavaScript to change CSS on the fly, but I would think that more than CSS would need to be changed in order to switch the language.

Devot://ee lists a few different options for Multi-Language site, that might be a better solution. Something like Multi Language Module and Transcribe.

I hope this helps!

Please let me know if I understand your request correctly or if you have any more questions.

Cheers,

Thanks Shane,

Yes, I have been looking into those and yet I keep thinking that if I have to already have 2 fields with different languages it’s a simple thing to switch css.

btw, I’ve already reported this to Devotee, but no matter which browser I use and whether or not I am using vpn (which gives me a US ip) nothing from
the /add-ons branch of their site comes down the pipe.  I was ready to buy the Multi Language module but can’t.  Hence…

Anyway, I’ll figure out something,

cheers…

If I am understanding you correctly and you have two fields one having the english version and one having the chinese then you could just output them both in your code and show and hide them with jquery

[removed]
$(document).ready(function(){
  $('#languageswitch').click(function(e){
    $('.language').toggle();
    e.preventDefault();
  });
});

span class="language"  none;">View in english</span><span class="language english">View in Chinese</span>
  <div class="language">
    This is the chinese
  </div>
  <div class="language">
    This is the english
  </div>
  <div class="language">
    This is another chinese
  </div>
  <div class="language ">
    This is another english
  </div>

That is just a quick example. It would of course depend how much info you were talking about. If its not enormous amounts of text it wont increase load times too much.  You might want to get fancier than this and set a cookie or something so it remembers their language choice on further pages. I would imagine one of the language addons would probably deal with that sort of case more effectively. This was just a quick simple fix I thought of.

hmm for some reason it won’t hold on the code but either in your css file (i had it inline for posting) you would need to set display: none on your chinese language div’s. that way the page loads with the english only showing and then when it toggles it sets the english to none and the chinese to show.

Wow, thanks a lot Phil,

I had also thought the div display attribute would be the way to go.  The amount of text per page
for my site wil be very small so I think this could work nicely.  Since it’s a small site the other way would
be to duplicate the structure, but that just seems way more untidy than this.

I am still very much a newbie to dom controls and javascript in general so this gives me a great start.

I’ll let you know what happens when I get to it.  First I’m updating the site design, then language.

thanks again for your effort.  I will look into setting cookies as well.

Hey all,

I love seeing the community help out like this! This is great.

I am going to move this over to the Community Help Forum and you can keep us posted on how things are going.

Have a great week guys.

Cheers,

I usually try and make it a habit to answer a few questions whenever I have to come over and ask my own.

PhilBrienesse,

That’s awesome bro. AWESOME!

Thanks,

Well, I’m usually the beneficiary in this sort of space since it’s not my expertise.

Thank you both for the support.

If SEO / Google is a concern then I would have reservation about the jquery + display toggle. Google tends to frown on such things. I do believe that it’s doable but perhaps not ideal in a broader context. 

Since you want it to be session persistent then I would consider reserving segment_1 for a language code. You could then use preload replace and build your display fields on the fly. Pseudo code something like this:

if segment_1 = en then preload_replace lang=“en”
otherwise lang=“ch”

{exp channel…}
{field1_{lang}}
{field2_{lang}}
some link href=“path=/{lang}/...”
etc.
{/exp channel}

Note: preload_replace - my new best friend - doesn’t like if / elses. They also work top to bottom so if the conditional is true {lang} down the page will be replaced with en and even though the other lang is still processed there’s no place for it to replace, en took those slots.

A toggle would just be a call to the same page but the segment_1 replaced. You’d have to do a page refresh but to me that’s minor.

Finally, instead of a code spelling out english and chinese could have SEO benefit.

I don’t think you need any addons, etc. Off the top of my head I think the above will work just fine.

Hi,

Is there an easy way to control the language selection flags with CSS to position those at the bottom-right like the “built with indexhibit” of Centhered theme?

Thanks!!

In my experience, there are many things to consider. First of all; do you want to provide a straight translation of your site or do you want to cater for a different market i.e. Spanish?

I’ve modified our in-house CMS to do either. With straight translations, the main thing to consider with CSS is how it will look in a language that runs right to left. Those audiences (such as Japanese or Arabic) will likely have different expectations of layout such as having sub-menus on the right instead of left, etc.

fake doctors note