search

Irrelon / jquery-lang-js

i18n Allow instant language switching on HTML pages without reloading the page.
https://www.irrelon.com
362 stars 132 forks source link

How to translate this? #63

Closed raysefo closed 8 years ago

raysefo commented 8 years ago

Hello,

Is there a way to translate TURKEY?

<div class="newline col-sm-3 text-center">
                        <i class="fa fa-home fa-2x"></i>

                        TURKEY.
                    </div>
Irrelon commented 8 years ago

Place a span tag around it with a lang attribute :)

raysefo commented 8 years ago

Hi @Irrelon , thanks for your reply. I would like to change language according to the selection as follows:

<div class="lang">
        <a href="#turkish" onclick="window.lang.change('tr'); return false;"><img src="images/turkey-icon.png" alt="Türkçe" ></a>
        <a href="#english" onclick="window.lang.change('en'); return false;"><img src="images/uk-icon.png" alt="English" ></a>

    </div>

Is it enough to have those in the header

<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript">
        // Create language switcher instance and set default language to en
        window.lang = new Lang('en');
    </script>

and defined langpack for eng and tur in the project folder?

raysefo commented 8 years ago

Should I also add this?

<script src="js/langpack/nonDynamic.js" charset="utf-8" type="text/javascript"></script>
raysefo commented 8 years ago

Hi @Irrelon , It doesn't work. It just displays the keys (MOTTO1, MOTTO2 etc.)

Here is my sample html:

<div id="rotate">
                <h1 class="rotate" lang="en">MOTTO1<span>MOTTO2</span><br>MOTTO3 <br>MOTTO4 <span>MOTTO5.</span></h1>
                <!--<h1 class="rotate" translate="TAGLINE"></h1>-->
                <h1 class="rotate" lang="en">MOTTO6 <br><span>MOTTO7</span> <br>MOTTO8 <span>MOTTO9</span></h1>
            </div>

and here is the en-lang pack:

{
    "token": {
        "CONTACT": "CONTACT",
        "TAGLINE": "We Provide <br><span>Connected Intelligence</span> <br>For A <span>Smart World.</span>",
        "MOTTO1": "We are ",
        "MOTTO2": "IOTERM",
        "MOTTO3": "INTERNET OF THINGS (IOT)",
        "MOTTO4": "Solutions",
        "MOTTO5": "Company",
        "MOTTO6": "We Provide",
        "MOTTO7": "Connected Intelligence",
        "MOTTO8": "For A",
        "MOTTO9": "Smart World.",
        "WAIT1": "We are Coming",
        "WAIT2": "Really Soon",
        "CONTACT_CONTENT": "Just want to say hello? Send us an email or fill out the form below and we will get back to you ASAP.",
        "COUNRTY1": "Turkey",
        "COUNRTY2": "USA",
        "CONTACT_NAME": "Your name",
        "CONTACT_EMAIL": "Email address",
        "CONTACT_PHONE": "Phone",
        "CONTACT_QUESTION": "Your question",
        "CONTACT_SUBMIT": "Send"
    }
}
Irrelon commented 8 years ago

The system assumes your language on the page is whatever you tell it the default is... in this case you are not starting with english, you are starting with tokens so you need to change the language default:

window.lang = new Lang('tokens', 'en');

The second argument tells the system to switch to "en" immediately as it is the currently selected language.

raysefo commented 8 years ago

I added this to header but still same issue.

 window.lang = new Lang('tokens', 'en');

Is it about jquery version?

raysefo commented 8 years ago

Here is my html:


<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-US" class="no-js">
<!--<![endif]-->
<head>
    <!-- ==============================================
       Title and basic Meta Tags
       =============================================== -->
    <meta charset="utf-8">
    <title>IOTERM Connected Intelligence</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ioterm">
    <meta name="keywords" content="IOTERM,IOT,Sensors,Device,Connected">

    <!-- ==============================================
       Mobile Metas
       =============================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- ==============================================
       Google Fonts
       =============================================== -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- ==============================================
       CSS
       =============================================== -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- ==============================================
      Google Analytics
      =============================================== -->

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-70078154-1', 'auto');
      ga('send', 'pageview');

    </script>
    <!-- ==============================================
       Multi Language Pack
       =============================================== -->

    <script type="text/javascript">
        // Create language switcher instance and set default language to en
        window.lang = new Lang('tokens', 'en');
    </script>
</head>
<body class="preload">

    <!-- Overlay -->
    <div id="firefly" class="bg-overlay">
        <canvas id="star-canvas"></canvas>

    </div>
    <!-- End Overlay -->
    <div class="lang">
        <a href="#turkish" onclick="window.lang.change('tr'); return false;"><img src="images/turkey-icon.png" alt="Türkçe" ></a>
        <a href="#english" onclick="window.lang.change('en'); return false;"><img src="images/uk-icon.png" alt="English" ></a>

    </div>
    <!-- Header -->
    <header>

        <div class="intro">

            <!-- Site Logo -->
            <div class="logo"></div>
            <!-- End Site Logo -->
            <!-- Rotator Title -->
            <div id="rotate">
                <h1 class="rotate" lang="en">MOTTO1<span>MOTTO2</span><br>MOTTO3 <br>MOTTO4 <span>MOTTO5.</span></h1>
                <!--<h1 class="rotate" translate="TAGLINE"></h1>-->
                <h1 class="rotate" lang="en">MOTTO6 <br><span>MOTTO7</span> <br>MOTTO8 <span>MOTTO9</span></h1>
            </div>
            <!-- End Rotator Title -->

            <p lang="en">WAIT1</p>
            <p><span></span><i class="fa fa-hourglass-half"></i><span></span></p>
            <p lang="en">WAIT2</p>

        </div>
        <!-- Nav -->
        <nav>
            <ul class="navigation">
                <!--<li class="link left middle side move"><a href="#about" title="About">About</a></li>-->
                <li class="link center bottom move"><a href="#contact" title="Contact" lang="en">CONTACT</a></li>
                <!--<li class="link center bottom move"><a class="btn" href="#subscribe" title="Subscribe">Subscribe</a></li>-->
            </ul>
        </nav>
        <!-- End Nav -->
    </header>
    <!-- End Header -->
    <!-- About Section -->
    <!--<section id="about" data-direction="from-left">
        <div class="container">
            <a href="#" class="close"></a>
            <h1>
                <span>About IOTERM</span>
            </h1>
             ./End Section Title
            <div class="row text-center">
                <div class="col-md-8 col-md-offset-2">
                    <h4>Lorem ipsum dolor sit amet consectetuer dis augue interdum quis a. Pretium habitant et volutpat egestas et elit facilisi et porttitor mauris.</h4>
                    <p>Sed wisi congue egestas Vestibulum et augue mi et Vivamus Cum. Penatibus laoreet Nullam sagittis metus turpis non mus facilisi Sed justo. Libero felis tellus molestie Aliquam orci elit et pretium ac consectetuer. Vestibulum mus mollis Vestibulum augue sagittis convallis sit at nec a. Vitae Vestibulum Quisque facilisis sem Pellentesque dui quis augue amet sapien. Enim Nullam Sed tortor sem pellentesque cursus malesuada lacus eget sapien. Wisi porttitor Suspendisse.</p>
                </div>
            </div>
        </div>
    </section>-->
    <!-- End About Section -->

    <!-- Contact Section -->
    <section id="contact" data-direction="from-right">
        <div class="container fill">
            <h1>
                <span lang="en">CONTACT</span>
            </h1>
            <!-- ./End Section Title -->
            <a href="#" class="close"></a>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h4 lang="en">CONTACT_CONTENT</h4>
                    <!-- Begin Phone -->
                    <div class="newline col-sm-3 text-center">
                        <i class="fa fa-mobile fa-2x"></i>
                        <br>
                        +90 (530) 1407342
                    </div>
                    <!-- End Phone -->
                    <!-- Begin Email -->
                    <div class="newline col-sm-3 text-center">
                        <i class="fa fa-envelope-o fa-2x"></i>
                        <br>
                        info@ioterm.com
                    </div>
                    <!-- End Email -->
                    <!-- Begin Address -->
                    <div class="newline col-sm-3 text-center">
                        <i class="fa fa-home fa-2x"></i>
                        <br>
                        IOTERM
                        <br>
                        İstanbul, <span lang="en">COUNRTY1</span>.
                    </div>
                    <!-- End Address -->
                    <!-- Begin Address -->
                    <div class="newline col-sm-3 text-center">
                        <i class="fa fa-home fa-2x"></i>
                        <br>
                        IOTERM
                        <br>
                        Boston, <span lang="en">COUNRTY2</span>.
</div>
                    <!-- End Address -->
                    <div class="clearfix"></div>
                    <div class="contactForm">
                        <!-- Start Contact Form -->
                        <form id="contactForm" action="#" method="post" role="form">

                            <div class="col-lg-6 col-xs-12">
                                <div class="form-group">
                                    <input id="formName" type="text" class="input required" name="name" placeholder="CONTACT_NAME" lang="en">
                                </div>
                                <div class="form-group">
                                    <input id="formEmail" type="email" class="input required" name="email" placeholder="CONTACT_EMAIL" lang="en">
                                </div>
                                <div class="form-group">
                                    <input id="phone" type="text" placeholder="CONTACT_PHONE" value="" size="30" name="phone" lang="en">
                                </div>
                            </div>

                            <div class="col-lg-6 col-xs-12">
                                <div class="form-group">
                                    <textarea id="message" class="textarea required" name="message" rows="3" cols="40" placeholder="CONTACT_QUESTION" lang="en"></textarea>
                                </div>
                                <button value="Submit" id="submit" class="btn btn-green-border btn-lg" type="submit" lang="en">CONTACT_SUBMIT</button>
                            </div>

                        </form>
                        <div class="successMsg"></div>
                        <!-- End Contact Form -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Contact Section -->
    <!-- Loading... -->
    <div id="preload">
        <div id="preload-content">
            <div class="preload-bounce">
                <span class="bounce1">
                </span>
                <span class="bounce2">
                </span>
                <span class="bounce3">
                </span>
                <span class="bounce4">
                </span>
            </div>
        </div>
    </div>
    <!-- ==============================================
       JS
       =============================================== -->
    <script type="text/javascript" src="js/modernizr.custom.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
    <script src="js/langpack/nonDynamic.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/plugins.js"></script>
    <script type="text/javascript" src="js/init.js"></script>

</body>
</html>

I have lang pack for tr and en. I also added nonDynamic.js.

raysefo commented 8 years ago

Why it is not working? What I am doing wrong Rob?

raysefo commented 8 years ago

was it only this thing?

var lang = new Lang('en');
Irrelon commented 8 years ago

Hey ya, start with the demo files and check they work, then change one thing at a time until it breaks to find the error. It's very difficult to debug without a working page to visit etc :)

raysefo commented 8 years ago

This solved my pain, thanks :)

<script type="text/javascript">
        // Create language switcher instance and set default language to en
        var lang = new Lang('en');
        window.lang = new Lang('tokens', 'en');
    </script>
Irrelon commented 8 years ago

You should remove:

var lang = new Lang('en');

Since you are declaring lang twice otherwise. Just keep the line:

window.lang = new Lang('tokens', 'en');