Loading表示を改良

loadingをもうちょっと改良してみました
まずloadingが終了するまで触れないよう
半透明のdivを重ねました
ついでに画像でもやってみました
※jqueryが必要です。

つれづれなるまゝに：退屈なこと、さみしいこと、無聊。 日くらし：＜ひぐらし＞と読む。
朝から晩まで。終日。 ひねもす。 心に移りゆくよしな

      test :function () {
        var j = 100;
        for (var i = 0; i < j ; i++){
          console.log(i);
        }
      }
      

龍神スカイライン

ではHTMLから

    <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
    </head>
    <!-- 文章  -->
    <div id="waku1">
      <div class="main">
      つれづれなるまゝに：退屈なこと、さみしいこと、無聊。 日くらし：＜ひぐらし＞と読む。
      <br> 朝から晩まで。終日。 ひねもす。 心に移りゆくよしな
      </div>
      <div class="scrn"></div>
      <div class="load"></div>
    </div>
    
    <!-- sytax  -->
    <div id="waku2">
    <div class="main">
    <pre class="brush:js" title="検証">
      test :function () {
      var j = 100;
      for (var i = 0; i < j ; i++){
        console.log(i);
      }
    }
    </pre>
    </div>
    <div class="scrn"></div>
    <div class="load"></div>
    </div>

    <!-- 画像  -->
    <div id="waku3">
    <div class="main">
    <img class="photo01" height="358" width="540" src="画像">
    </div>
    <span class="tag"><span id="tagtxt">タグ名</span></span>
    <div class="scrn"></div>
    <div class="load"></div>
    </div>
    

CSSは多少長いです
画像はサイズ指定必須です

各セレクタのpositionがポイントです

/*通常の文章*/
    #waku1 {
      position: relative;
      width: 300px;
      height: 100px;
      border: solid 1px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
    }
/*Syntaxhighlighter*/
    #waku2 {
      position: relative;
    }
/*画像*/
    #waku3 {
      position: relative;
      width: 553px;
      height: 373px;
      top:5px;
    }
    
/*loadingしたい場所*/
    .main {
      display: none;
      width: 100%;
      height: 100%;
    }
/*半透明枠*/
    .scrn {
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.4;
      margin-top: 5px;
      user-select: none;
      position: absolute;
      bottom: 0px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
    }
/*ローディング画像用*/
    .load {
      width: 100%;
      height: 100%;
      background: url("loading画像") 50% 50% no-repeat;
      position: absolute;
      bottom: 0px;
    }
/*画像のタグ*/
    .tag{
      position: absolute;
      right: 0px;
      top: 20px;
      background-color: black;
      color: white;
      padding: 2px 15px;
      font-size: 13px;
      box-shadow: 5px 5px 20px rgba(20, 20, 20, 0.5);
    }
    

jQueryを使用してます。
表示したい内容をフェードインして
不要なものをフェードアウトするだけなので短いものです

    window.onload = function () {
      $(".main").fadeIn(2000);
      $(".scrn").fadeOut(2000);
      $(".load").fadeOut(2000);
    }
    

safariは未確認ですがたぶん動作すると思います

ブラウザのアイコンをHTML上でグレースケールにしたりしてみる

ブラウザ毎に動作する、しないを
アイコンをグレースケールにして表現したかったので
やってみました
チェックを操作すると動きます

SAMPLE

chrome firefox ie safari(iOS)

上段

IE：×動作せず

Firefox：×は2回目以降グレースケールにならない。なぜかは不明

Chrome：●動作します

safari(iOS)はアップするまで見れる環境無し・・

下段

IE：●動作します

Firefox：●動作します

Chrome：●動作します

safari(iOS)はアップするまで見れる環境無し・・

違いは・・？
上段はブラウザ毎に１つずつアイコンがあり
cssでグレースケールで変色させてます
それに対し下段は1枚の画像の中にカラーとグレースケールがあり
cssでその座標の一部を表示しています
↓このような1枚の画像です

ではコードです。

    
    <span></span>
    <span></span>
    <span></span>
    <span></span><br />
    
    <div id= "c2"></div>
    <div id= "f2"></div>
    <div id= "i2"></div>
    <div id= "s2"></div>
    

    
    #c1 {
      filter: url("data:image/svg+xml;utf8,#grayscale");
      filter: gray;
      -webkit-filter: grayscale(100%);
    }
    
    #f1 {
      filter: url("data:image/svg+xml;utf8,#grayscale");
      filter: gray;
      -webkit-filter: grayscale(100%);
    }
    
    #i1 {
      filter: url("data:image/svg+xml;utf8,#grayscale");
      filter: gray;
      -webkit-filter: grayscale(100%);
    }
    
    #s1 {
      filter: url("data:image/svg+xml;utf8,#grayscale");
      filter: gray;
      -webkit-filter: grayscale(100%);
    }
    
    #c2 {
      background-image:url("1枚画像のURL");
      width:32px;
      height:32px;
      float: left;
    }
    #f2 {
      background-image:url("1枚画像のURL");
      width:32px;
      height:32px;
      float: left;
      margin-left: 3px;
    }
    #i2 {
      background-image:url("1枚画像のURL");
      width:32px;
      height:32px;
      float: left;
      margin-left: 3px;
    }
    #s2 {
      background-image:url("1枚画像のURL");
      width:32px;
      height:32px;
      margin-left: 3px;
      float: left;
    }
    

    //チェックボタン押下時処理
    function oncheck(){
      var chromef = (document.getElementById("chk-chrome").checked);
      var firefoxf = (document.getElementById("chk-firefox").checked);
      var ief = (document.getElementById("chk-ie").checked);
      var safarif = (document.getElementById("chk-safari").checked);
      fncBrowserIco(chromef,firefoxf,ief,safarif);
    }
    //メイン処理
    // chrome1 firefox1 ie1 safari1は上段用処理
    // chrome2 firefox2 ie2 safari2は下段用処理
    function fncBrowserIco(chromef, firefoxf, ief, safarif) {
        var chrome1 = $('#c1');
        var chrome2 = $('#c2');
        var firefox1 = $('#f1');
        var firefox2 = $('#f2');
        var ie1 = $("#i1");
        var ie2 = $("#i2");
        var safari1 = $("#s1");
        var safari2 = $("#s2");
        if (chromef === true) {
          chrome1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
          chrome2.css('background-position', '0px 0px');
        } else {
          chrome1.css('url("data:image/svg+xml;utf8,#grayscale")');
          chrome1.css({filter: 'gray' , '-webkit-filter': 'grayscale(100%)'});
          chrome2.css({'background-position': '0px -32px'});
        }
        if (firefoxf === true) {
          firefox1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
          firefox2.css({'background-position': '96px 0px'});
        }else{
          firefox1.css('url("data:image/svg+xml;utf8,#grayscale")');
          firefox1.css({filter: 'gray','-webkit-filter': 'grayscale(100%)'});
          firefox2.css({'background-position': '96px 32px'});
        }
        if (ief === true) {
          ie1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
          ie2.css({'background-position': '64px 0px'});
        }else{
          ie1.css('url("data:image/svg+xml;utf8,#grayscale")');
          ie1.css({filter: 'gray','-webkit-filter': 'grayscale(100%)'});
          ie2.css({'background-position': '64px 32px'});
        }
        if (safarif === true) {
          safari1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
          safari2.css({'background-position': '32px 0px'});
        }else{
          safari1.css('url("data:image/svg+xml;utf8,#grayscale")');
          safari1.css({filter: 'gray', '-webkit-filter': 'grayscale(100%)'});
          safari2.css({'background-position': '32px 32px'});
        }
      }
      
    //初回は全部グレースケールとする
    fncBrowserIco(false, false, false, false);
    

個人的に下段のほうが良いです。
画像が1枚で済む上、最近のブラウザならほぼ大丈夫でしょう
下段だけの処理だとコードが少ないです。
上段はfirefox用のグレースケール処理の「url("data:image・・・」が長すぎるんですけどね
他にもそもそもグレースケールしたアイコンを用意しておく手もあります
そっちのが楽かもしれませんが、やはり早いので1枚画像のが好みです

Google Apps ScriptでGmaiのアドレス帳のメールアドレス予測変換をする入力欄を作ってみる

GMAILメールアドレス予測をする入力欄を作ってみたので
サーバ側はコード.gs（GAS）でやります
chrome、firefoxは動作しますがIEはダメでした
safariは未確認です
佐藤やら山田等の名前　gmail やらのアドレスの一部などを入力して見て下さい
※jquery.min.js,jquery-ui.min.js,jquery-ui.cssを使用します。
んー、、投稿直後ってjqueryなどの読み込み動かないっぽいです？ 　　
ロード時の処理を書いてしまったのが影響してました 　　
とりあえず動くようになったと思います。
SAMPLE

Ｔｏ： ×
Ｃｃ： ×

以下コードです
HTMLから

  <div id="jquery-ui-autocomplete" class="ui-widget">
    <label for="jquery-ui-autocomplete-label">Ｔｏ：</label>
    <input id="mailto">
    <span id="close1" class="close" title="Close" onclick="adclear(1)">×</span>
    </input><br />
    <label for="jquery-ui-autocomplete-label">Ｃｃ：</label>
    <input id="mailcc">
    <span id="close2" class="close" title="Close" onclick="adclear(2)">×</span>
    </input><br />
  </div>
  

span行は無くてもいいですが、×をつけたかったのでつけてます

CSSです。×ボタンが要らない場合は
21行目から不要です

    .ui-autocomplete {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 15px;
    }
    #jquery-ui-autocomplete label {
      float: left;
      margin-right: 5px;
      margin-top: 8px;
      color: black;
      font-size: 15px;
    }
    #mailto,#mailcc {
      margin-left: 5px;
      font-size: 15px;
      width: 350px;
      font-family: 'Noto Sans Japanese', sans-serif;
      margin-top: 5px;
    }
    #mailto:hover + .close,#mailcc:hover + .close {
      display: inline-block;
    }
    .close {
      display: none;
      background-color: #848484;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      font-size: 12px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      top: 0px;
      position: relative;
      right: 20px;
      width: 16px;
    }
    .close:hover {
      display: inline-block;
    }
  

まずhead内のjavascriptで必要なものをロードします

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  

メインのjavascriptです

    <script type="text/javascript">
    var ArrData = new Array;
    //×押下時 内容クリア
    function adclear(prm) {
      switch (prm) {
      case 1:
        document.getElementById('mailto').value = "";
        break;
      case 2:
        document.getElementById('mailcc').value = "";
        break;
      case 3:
        break;
      }
    }
    $(function () {
        //アドレス取得
        google.script.run.withSuccessHandler(onSuccess)
        .withFailureHandler(onFailure) .getContact();

        function onSuccess(result) {
          for (var i = 0; i < result.length; i++) {
            var num = ArrData.push(result[i]);
          }
          var word = [];
          for (var i = 0; i < ArrData.length; i++) {
            word.push(String(ArrData[i]));
          }
          var pin = word;
          $("#mailto").autocomplete({
            source: pin
          });
          $("#mailcc").autocomplete({
            source: pin
          });
        }
      },

      function onFailure(e) {
        alert("連絡先にアクセス失敗しました");
      }
    );
  </script>
  

最後にサーバ側gsです。アドレス帳の取得が主な処理です。

    function doGet(e) {
      try{
        return HtmlService.createHtmlOutputFromFile('index');
      }catch(err){
      }
    }

    function getContact() {
      var wadress = new Array;
      var con = ContactsApp.getContacts();
      for(var i = 0;i < con.length;i++){
        var name = con[i].getFullName();
        var emails = con[i].getEmails();
        for (var j in emails) {
            var num = wadress.push(name + "(" + emails[j].getAddress() + ")");
        }
      }
      return wadress;
    }
  

×ボタンのクリア方法などはもうちょっと工夫するとswichとかいらないですが
面倒だったのでこのまま；
あとは要素の追加削除を加えれば
どんどんアドレスを追加していけるような入力欄も作れるかも？