search

shuntaroy / shuntaroy.github.io

my profile site with a simple resume
https://shuntaroy.com
0 stars 0 forks source link

create Japanese ver. #2

Closed shuntaroy closed 7 years ago

shuntaroy commented 7 years ago

The example of seamless switching language via jQuery

redpen.cc

  <head>
    <!-- omit above -->
    <script>
      <!-- omit above -->
      var setLanguage = function (lang) {
      lang = lang.substr(0, 2);
      var from = lang == 'en' ? 'ja' : 'en';
      $('.lang-' + from).hide();
      $('.lang-' + lang).fadeIn();
      $('.redpen-lang')
      .removeClass("active")
      .each(function (i, el) {
      if ($(el).data("lang") == lang) {
      $(el).addClass("active");
      }
      });
      };

      $(".redpen-lang").click(function () {
      setLanguage($(this).data("lang"));
      });

      setLanguage(navigator.language || navigator.userLanguage || "en");
      });
    </script>
  </head>

  <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
    <!-- Preloader -->
    <div id="preloader" style="display: none;">
      <div id="load" style="display: none;"></div>
    </div>

    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
      <div class="container">
    <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
            <i class="fa fa-bars"></i>
          </button>
          <a class="navbar-brand" href="./index.html">
            <h1 class=""><span class="redpen-red">Red</span>Pen</h1>
          </a>
        </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="http://blog.redpen.cc/">Blog</a></li>
            <li><a href="http://redpen.herokuapp.com/">Server</a></li>
            <li><a href="https://github.com/redpen-cc/redpen/">Source</a></li>
            <li><a href="https://github.com/redpen-cc/redpen/issues?state=open">Issues</a></li>
            <li><a href="docs.html">DOC</a></li>
            <li class="redpen-lang-selector">
              <a class="redpen-lang" data-lang="en">English</a>
            </li>
            <li class="redpen-lang-selector">
              <a class="redpen-lang" data-lang="ja">日本語</a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>

    <!-- Section: intro -->
    <section id="intro" class="intro">
      <div class="slogan">
        <img class="wow bounceInDown animated redpen-logo img-responsive" data-wow-delay="0.0s" src="./img/logo/logo-002.png" />

        <h2 class="lang-en">What is RedPen?</h2>

        <h2 class="lang-ja">RedPen?</h2>

        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
              <div class="wow bounceInDown animated" data-wow-delay="0.4s"
                   style="visibility: visible;-webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s;">
                <h4 class="lang-en">
                  RedPen is a proofreading tool to help writers or programmers who write technical documents or
                  manuals that need to adhere to a writing standard.<br/><br/>
                  RedPen automates the verifications of input
                  documents written in natural languages &mdash; <i>NOT</i> computer languages such as C++ or Java.
        </h4>
                <h4 class="lang-ja">
                  RedPen はプログラマや記者が規約にしたがって文書（マニュアルやソフトウェアドキュメント）を記述しているか検査します。<br/><br/>RedPen
                  は自然言語で記述された入力文書のチェックを自動化します。</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-scroll">
        <a href="#service" class="btn btn-circle">
          <i class="fa fa-angle-double-down animated"></i>
        </a>
      </div>
    </section>
    <!-- /Section: intro -->