難でもアリ: 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を表示する場所の指定とフェードアウトと表示したい内容をフェードインします。
ちなみに上記のコードサンプルにはブラウザの幅や高さを変更した時の処理を書いていません。

2015年6月19日金曜日

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

ラベル