ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2015年8月2日日曜日

cssでのMENU表示

Menuでいいやつがないかと探してたところ lopan.jp   
にCSSでできる良さそうなのが載っていましたので試してみました。

Sample

詳細な説明は link先     にわかりやすくまとめられていますので、そちらで確認してください。
ポイントはチェックの使い方と メニュー内容は見えない位置に配置している点でしょうか
見えない位置というのは、ブラウザの外の左側に配置しておくというもの

もし、ここでそのまま使用すると記事の左ではなく
ブラウザ左上隅に表示されてしまい記事とは関係ないような位置表示になります
これを解決するためiframeをつかって表示させてます
iframeなしで任意の場所でメニューを出すなら、ブラウザ上部とかのほうがいいかもしれません
でもワイド画面を考えると左右の余裕があるので左右も捨てがたいんですよね

あとはメニュー表示した際に内容もスライドしたい場合は contents以下に記載するとよいです
      <div class="contents">
      移動させたい内容はここに記載!
      </div>
    


2015年7月26日日曜日

またcodropsに載っている画像の上で動くCSSを試してみる

また楽しそうなのが codrops     にあったのでやってみました
サンプルは左右ボタンがずれてます;
おそらく何かのCSSが影響してしまってる気がしますが
Blogger以外で試してみたところ綺麗に表示されてました

SAMPLE
  • Landscape.1

  • Eclipse

  • Shishi-odoshi

  • Landscape.2

  • Illumination

  • Mt.Daisen

  • Cosmos

cssとjsを複数読み出す必要があります
    <head>
      <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
      <link rel="stylesheet" type="text/css" href="css/custom.css" />
      <script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
    </head>
    <body>
    <div class="wrapper" >
      <ul id="sb-slider" class="sb-slider">
        <li>
          <a href="画像アドレス1" target="_blank" imageanchor="1" >
            <img border="0" src="画像アドレス1" />
          </a>
          <div class="sb-description">
            <h3>画像説明1</h3>
          </div>
        </li>
        <li>
          <a href="画像アドレス2" target="_blank" imageanchor="1" >
            <img border="0" src="画像アドレス2" />
          </a>
          <div class="sb-description">
            <h3>画像説明2</h3>
          </div>
        </li>
        <div id="nav-arrows" class="nav-arrows">
          <a href="#" style= "opacity: 0.4;">Next</a>
          <a href="#" style= "opacity: 0.4;">Previous</a>
        </div>
      </ul>
    </div>
    </body>
    
あとはjavascriptですがbody部の閉じ括弧前で以下を記載します。
jqueryは1.8.2以降であれば大丈夫と思われます。
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.slicebox.js"></script>
    <script type="text/javascript">
    $(function () {
      var Page = (function () {
        var $navArrows = $('#nav-arrows').hide(),
          $shadow = $('#shadow').hide(),
          slicebox = $('#sb-slider').slicebox({
            onReady: function () {
              $navArrows.show();
              $shadow.show();
            },
            orientation: 'r',
            cuboidsRandom: true,
            disperseFactor: 30
          }),
          init = function () {
            initEvents();
          },
          initEvents = function () {
            // add navigation events
            $navArrows.children(':first').on('click', function () {
              slicebox.next();
              return false;
            });
            $navArrows.children(':last').on('click', function () {
              slicebox.previous();
              return false;
            });
          };
        return {
          init: init
        };
      })();
      Page.init();
    });
    </script>
    


2015年7月25日土曜日

codropsに載っている画像の上で動くCSSを試してみる

またまた codrops     に載っているものを試してみました。
下の画像にマウスを持って行ってください
動きのあるのが楽しくてついついやってみたくなりますね

修造暑すぎ

Wow hot since Shuzo has returned home.

Read More

htmlはこんな以下です。
    <head>
    <link rel="stylesheet" type="text/css" href="style_common.css" />
    <link rel="stylesheet" type="text/css" href="style3.css" />
    </head>
    <!-- body -->
    <div class="main">
      <div class="view view-third">
        <img src="画像ファイル" />
        <div class="mask">
          <h2 style="font-weight:100;">修造暑すぎ</h2>
          <p>Wow hot since Shuzo has returned home.</p>
          <a href="リンク" class="info" target="_blank">Read More</a>
        </div>
      </div>
    </div>
    
2つのCSSを読み込んでおき
動きはsytle(n).cssで決まります。
あとはイメージやらコメント内容を記載するのみです
簡単ですねぇ


2015年7月11日土曜日

CSSで簡単なアニメーションさせてみる

cssでGIFのような動きをさせてみました。
sample





こんな感じです。もちろん画像は使ってません

htmlでは要素の真ん中にくるようにwarrperとmainを作っておきます
ぐるぐる回してる●を必要数だけ並べてます
    <div id="wrapper">
      <div class="main">
        <p id="maru0" class="load">●</p>
        <p id="maru1" class="load">●</p>
        <p id="maru2" class="load">●</p>
        <p id="maru3" class="load">●</p>
        <p id="maru4" class="load">●</p>
        <p id="maru5" class="load">●</p>
        <p id="maru6" class="load">●</p>
        <p id="maru7" class="load">●</p>
        <p id="maru8" class="load">●</p>
        <p id="maru9" class="load">●</p>
      </div>
    </div>
    
cssは回転速度を要素ごとに分けているため長いです
.loadのbackground-colorを透過じゃない色をつけて
#maru0だけにすると何が起こっているのかわかりやすいかもしれません
    /*  外枠基本設定 */
    #wrapper {
      position: relative;
      width: 50px;
      left:0;
      top:40px;
    }
    .main {
      display: none;
      width: 100%;
      height: 100%;
    }
    
    /*  ●の基本設定
    (適宜変更して下さい)
    */
    .load {
      background-color: transparent;
      position: absolute;
      font-size: 8px;
      top:50%; /* 上から半分 */
      left:50%; /* 左から半分 */
      width:40px;
      height: 40px;
      margin:-20px 0 0 -20px; 
    }
    
    /*  ●の0%~100%まで動きを指定(webkitも記載) */
    @keyframes rotate {
      0% { 
          transform: rotate(0deg); 
          color:black; 
          -moz-opacity: 1.0;
          opacity: 1.0;
        }
    100% { 
        transform: rotate(360deg);
        color :#BDBDBD;
        -moz-opacity: 0.5;
          opacity: 0.5;
        }
    }
    @-webkit-keyframes rotate {
      /* webkit用keyframes */
      0% { -webkit-transform: rotate(0deg);
          color:black;
          opacity: 1.0;
        }
      100% {
        -webkit-transform : rotate(360deg);
        color : #BDBDBD;
        opacity : 0.5;
        }
    }
    /* 以下は●1つずつの動作
    cubic-bezierの値で動く速度に変化を与えてます
    */
    #maru0 {
      animation: rotate 2s cubic-bezier(0.1, 1.0, 1.0, 1.0);
      -webkit-animation: rotate 2s cubic-bezier(0.1, 1.0, 1.0, 1.0);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }   
    #maru1 {
      animation: rotate 2s cubic-bezier(0.2, 0.9, 0.9, 0.9);
      -webkit-animation: rotate 2s cubic-bezier(0.2, 0.9, 0.9, 0.9);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru2 {
      animation: rotate 2s cubic-bezier(0.3, 0.8, 0.8, 0.8);
      -webkit-animation: rotate 2s cubic-bezier(0.3, 0.8, 0.8, 0.8);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru3 {
      animation: rotate 2s cubic-bezier(0.4, 0.7, 0.7, 0.7);
      -webkit-animation: rotate 2s cubic-bezier(0.4, 0.7, 0.7, 0.7);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru4 {
      animation: rotate 2s cubic-bezier(0.5, 0.6, 0.6, 0.6);
      -webkit-animation: rotate 2s cubic-bezier(0.5, 0.6, 0.6, 0.6);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru5 {
      animation: rotate 2s cubic-bezier(0.6, 0.5, 0.5, 0.5);
      -webkit-animation: rotate 2s cubic-bezier(0.6, 0.5, 0.5, 0.5);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru6 {
      animation: rotate 2s cubic-bezier(0.7, 0.4, 0.4, 0.4);
      -webkit-animation: rotate 2s cubic-bezier(0.7, 0.4, 0.4, 0.4);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru7 {
      animation: rotate 2s cubic-bezier(0.8, 0.3, 0.3, 0.3);
      -webkit-animation: rotate 2s cubic-bezier(0.8, 0.3, 0.3, 0.3);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru8 {
      animation: rotate 2s cubic-bezier(0.9, 0.2, 0.2, 0.3);
      -webkit-animation: rotate 2s cubic-bezier(0.9, 0.2, 0.2, 0.3);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    #maru9 {
      animation: rotate 2s cubic-bezier(1.0, 0.1, 0.1, 0.1);
      -webkit-animation: rotate 2s cubic-bezier(1.0, 0.1, 0.1, 0.1);
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    
ちなみにLoadingのように使うと
以下のような感じになります
GIFのがお手軽に感じましたが
GIFよりはサイズが小さい点と画質に左右されないのはいいところですね

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


鳥取-大山






2015年7月5日日曜日

予測変換しながらメールアドレスを選択。要素追加削除

予測変換しつつ、要素を足したり消したりします。
都道府県を入力して見て下さい。
予測が表示されるので何か選択します
「、」または「,」を押すと要素が増えます
増えた要素は×を押すと消されます

Sample

    ×

今回は×をAdd-Clear というJqueryのplug-inを使用してますが、少し手を加えてます
内容を消すのではなく要素を消したり、closeSymbolの変更、常時表示等に変更してます
Firefoxは微妙に「、」での追加が動作しないですが半角「,」なら大丈夫です
safari(iOS)は例のごとく未確認です。



HTMLです。要素追加のためにulが要ります。
    <ul>
      <div id="jquery-ui-autocomplete" class="ui-widget">
        <label for="jquery-ui-autocomplete-label">To:</label>
        <input id="mailto1" class="mailto" placeholder = "名前またはアドレスを入力して下さい">
          <span id="close1" class="close" title="Close" onclick="adclear()">×</span>
        </input>
      </div>
    </ul>
  

addclear.jsの重要な変更点である要素削除の所だけ書きます
元々はクリックされた場合にテキストがクリアされる関数でした。

    $("a[href='#clear']").click(function(e) {
        $(this).parent(me.element).remove();
        $(this).remove();
        e.preventDefault();
    });
  

 次はメインのjsです

  //JQuery必須です。
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js'></script>
  <link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css' rel='stylesheet'>
  <script src="../jquery/addclear.min.js"></script>
  
  //追加要素id用INDEX
  var index = 1;
  //×押下時クリア
  function adclear() {
    var objmail = $("#mailto1");
      objmail.val("");
  }
  $(function () {
    var data = ["北海道(hokkaido.1@gmail.com)",
    "青森県(aomori.2@gmail.com)",
    "沖縄県(okinawa.7@gmail.com)"];

    prediction(data);
    //予測変換
    function prediction(result) {
      var ArrData = [""];
      for (var i = 0; i < result.length; i++) {
        //var arr = [result[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;
      $("#mailto1").autocomplete({
        source: pin
      });
    }
    //要素追加処理
    $("#mailto1").on("keyup", function (e) {
      if (e.keyCode === 188) {
        var data1 = $("#mailto1").val();
        if (data1.indexOf("、") !== -1) {
          data1 = data1.replace(/、/g,',');
          $("#mailto1").val(data1);
          //return true;
        }
        if ((data1 !== "") && (data1.length > 1)) {
          e.keyCode = 0;
          data1 = data1.replace(/,/g,'');
          if (data1!=="") {
            index++;
            //必要幅取得
            var wid = fncStrCount(data1);
            wid = (wid / 2) + 3.5;
            //タグエスケープをしておく
            data1 = escapeHtml(data1);
            //要素追加
             $('ul').append('
'); var $mails = $('#mailto' + index); //幅設定 $mails.width(wid + 'em'); //追加要素へCSS反映 $('#mailto' + index).addClass('ui-autocompletelto'); $("#mailto1").val(""); $mails.addClear(); } } } }); }) //全角2半角1で数える function fncStrCount(str) { len = 0; str = escape(str); for (i=0;i<str.length;i++,len++) { if (str.charAt(i) == "%") { if (str.charAt(++i) == "u") { i += 3; len++; } i++; } } return len; } //タグエスケープ function escapeHtml(content) { return content .replace(/&/g, '&amp;') .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, '&quot;') .replace(/'/g, '&#039;') .replace(/\r?\n/g, "<br />"); }

cssは特に変わったことはしてません

    .ui-widget {
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
      font-size: 13px;
      margin-left: -24px;
      }
    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget button {
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
      font-size: 13px;
    }
    .ui-autocomplete {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
      font-size: 13px;
    }
    .mailto {
      margin-left: 5px;
      font-size: 13px;
      width: 350px;
      margin-top: 5px;
      font-family: 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Noto Sans Japanese', sans-serif;
    }
    .mailto:hover + .close {
      display: inline-block;
    }
    
    .close {
      display: none;
      color: #585858;
      cursor: pointer;
      font-size: 13px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      top: 1px;
      position: relative;
      right: 25px;
      width: 16px; 
    }
    
    .close:hover {
      display: inline-block;
    }
    .waku {
      display: inline-block;
    }
        /*リスト系*/
    ul {
      line-height: 1em;
    }
  

2015年7月1日水曜日

ToolTipをCSSだけで出せるのがあったのでやってみました

使いやすそうなTooltipが欲しかったので
探してみた結果、良さそうなのが codrops    にありました。
いろいろあるのですが、1つ動作させてみます
表示は View demo   で確認できます
codrops   のDownload souceから落として解凍します
あとは目的のcssを読み込んで使用するだけです

Sample

夏目漱石 1867年2月9日(慶応3年1月5日) - 1916年(大正5年)12月9日)は、日本の小説家、評論家、英文学者。本名、金之助(きんのすけ)。江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。俳号は愚陀仏。 wiki 正岡子規 1867年10月14日(慶応3年9月17日) - 1902年(明治35年)9月19日)は、日本の俳人、歌人、国語学研究家。名は常規(つねのり)。幼名は処之助(ところのすけ)で、のちに升(のぼる)と改めた。 wiki

今回はダウンロードした中のtooltip-classic.cssをちょっとだけ変更してます
html は以下のようにします。
      <p class="tooltips">
        <span class="tooltip tooltip-effect-4">
          <span class="tooltip-item">ここにマウスをもってくると表示</span>
          <span class="tooltip-content clearfix">
            <img src="画像" />
            <span class="tooltip-text">tooltipの中身
              <a href="tooltip内のリンクURL">wiki</a>
            </span>
          </span>
        </span>
      </p>
    
cssだけでできるのは有難いですね
最近のブラウザであればどれでも動くと思います。

2015年6月27日土曜日

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は未確認ですがたぶん動作すると思います

2015年6月25日木曜日

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

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



上段
    IE:×動作せず
    Firefox:×は2回目以降グレースケールにならない。なぜかは不明
    Chrome:動作します
    safari(iOS)はアップするまで見れる環境無し・・
下段
    IE:動作します
    Firefox:動作します
    Chrome:動作します
    safari(iOS)はアップするまで見れる環境無し・・
違いは・・?
上段はブラウザ毎に1つずつアイコンがあり
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枚画像のが好みです

2015年6月20日土曜日

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">To:</label>
    <input id="mailto">
    <span id="close1" class="close" title="Close" onclick="adclear(1)">×</span>
    </input><br />
    <label for="jquery-ui-autocomplete-label">Cc:</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とかいらないですが
面倒だったのでこのまま;
あとは要素の追加削除を加えれば
どんどんアドレスを追加していけるような入力欄も作れるかも?

2015年6月19日金曜日

divのidにむけてLoading表示をしてみる

指定のdivのidにむけてLoadingアイコン表示をやってみたので備忘です
サンプルが昨日は動作しなかったんだけど、今日同じコードを書くととちゃんと動いてますね。。謎だ。。

SAMPLE


吾輩は猫である。名前はまだ無い。
どこで生れたか頓(とん)と見當がつかぬ。
何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
吾輩はこゝで始めて人間といふものを見た。
然(しか)もあとで聞くとそれは書生といふ人間中で一番獰悪(だうあく)な種族であつたさうだ。
此書生といふのは時々我々を捕(つかま)へて煮て食ふといふ話である。
然し其當時は何といふ考(かんがへ)もなかつたから別段恐しいとも思はなかつた。
但(たゞ)彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許(ばか)りである。
掌の上で少し落ち付いて書生の顔を見たのが所謂(いはゆる)人間といふものゝ見始(みはじめ)であらう。
此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾され.....

次はsyntaxhighlighterにLoading表示
    function hogehoge() {
      var hoge = "hongeee";
      return hoge;
    }
    function hoghog3() {
    var hoge1 ="";
    var hoge2 ="";
    var hoge3 ="";
    var hoge4 ="";
    var hoge5 ="";
    }
    
まず文章部分のコードです。
    <!--文章部分-->
      <div id="loading1"></div>
      <div id="container1" style="border-style:solid; border-width:2px; border-color:#ddd;">
        吾輩は猫である。名前はまだ無い。<br>
        どこで生れたか頓(とん)と見當がつかぬ。<br>
        何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。<br>
        吾輩はこゝで始めて人間といふものを見た。<br>
        然(しか)もあとで聞くとそれは書生といふ人間中で一番獰悪(だうあく)な種族であつたさうだ。<br>
        此書生といふのは時々我々を捕(つかま)へて煮て食ふといふ話である。<br>
        然し其當時は何といふ考(かんがへ)もなかつたから別段恐しいとも思はなかつた。<br>
        但(たゞ)彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許(ばか)りである。<br>
        掌の上で少し落ち付いて書生の顔を見たのが所謂(いはゆる)人間といふものゝ見始(みはじめ)であらう。<br>
        此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾され.....<br>
      </div>
    <!--syntaxhighlighter部分-->
      <div id="loading2"></div>
        <div id="container2">
          <pre class="brush: js;">
            function hogehoge() {
              var hoge = "hongeee";
              return hoge;
            }
            function hoghog3() {
            var hoge1 ="";
            var hoge2 ="";
            var hoge3 ="";
            var hoge4 ="";
            var hoge5 ="";
            }
          </pre>
        </div>
    
HTML部では loadingとcontainerのidを持つdivを必ず準備して下さい
    /* 文章部分 */
    #container1{
      display:none;
    }
     #loading1{
      position:absolute;
      display: inline-block;
      background: url("301.GIF") 50% 80% no-repeat; /*画像は用意してください*/
      left: 0;
    }
    
    /* syntaxhighlighter部分 idが違うだけです */
    #container2{
      display:none;
    }
     #loading2{
      position:absolute;
      display: inline-block;
      background: url("301.GIF") 50% 80% no-repeat; /*画像は用意してください*/
      left: 0;
    }
    
    //Jquery必須
    
      
    
    
JavaScriptではgifを表示する場所の指定とフェードアウトと表示したい内容をフェードインします。
ちなみに上記のコードサンプルにはブラウザの幅や高さを変更した時の処理を書いていません。