JSFiddle

  • Preloader Page - Usagilabs #10 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id='preloader'>
      <div id='status'>
        <img class='loader-img' src='https://1.bp.blogspot.com/-nCAISkaZVtY/WNAMDVS7JWI/AAAAAAAAAnw/fVTmHs32Xhw-ODpTF7mc5ZJnpkVcGuZ5gCLcB/s1600/chibi_yoshino_by_kurama_chan.png'/>
        <b>Loading</b>
        <div class='loader-inner ball-clip-rotate'><div></div></div>
      </div>
    </div>
    <div>
    <script>
    $(window).on('load', function() {
    var timing = 1700; // replace with your want
    $('#status').delay(timing).fadeOut();
    $('#preloader').delay(timing).fadeOut ...</script></div>
  • Turn Off Light Effect #9 is the latest revision

    http://usagilabs.blogspot.com/

    $(function(){$("#btn-turnlight").click(function(){$(this).toggleClass("active"),$(this).text(function(t,n){return"OFF"===n?"ON":"OFF"}),$("#turnofflight").toggle()})});
  • Menu Dropdown Select Chapter

    See Tutorial : http://usagilabs.blogspot.com/2017/02/how-to-create-dropdown-menu-select.html

    <select class="select-chapter" id="usagi_selectchapt" onchange="document.location.href=this.options[this.selectedIndex].value;">
    <option style="display:block;text-align:center;" value="#">Select Chapter </option>
    <option value="#">Sub Menu 1</option>
    <option value="#">Sub Menu 2</option>
    <option value="#">Sub Menu 3</option>
    <option value="#">Sub Menu 4</option>
    <option value="#">Sub Menu 5</option>
    <option value="#">Sub Menu 6 ...</option></select>
  • Multi-Language Dropdown #4 is the latest revision

    http://usagilabs.blogspot.co.id/2017/02/how-to-create-multi-language-menu-in.html

    <div class='lang_nav'><b>Select a country/region :</b>
    <ul role='tablist'>
    <li role='presentation' class='active'><a href='#id' aria-controls='id' role='tab' data-toggle='tab'>Indonesia</a></li>
    <li role='presentation'><a href='#en' aria-controls='en' role='tab' data-toggle='tab'>English</a></li>
    </ul>
    </div>
    
    <div class="lang_content">
    <div role="tabpanel" class="lang_pane active" id="id">
    This Language ID
    </div>
    <div role="tabpanel" class="lang_pane" id="en">
    This Language EN
    </div>
    </div>