月別アーカイブ: 2015年7月

ブロックのドラッグ&ドロップ

前回 jQuery Ui を使用しました。
引き続き jQuery Ui による動作を紹介したいと思います。
今回は drag & drop です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){
                $("#move_div").draggable({containment: '#target_area', snap:'#target_area div'});
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        
            div {
                margin : 10px;
            }

            #move_div {
                border              : solid 1px #000000;
                width               : 100px;
                height              : 100px;
                background-color    : #cccccc;
            }

            #target_area {
                width               : 306px;
            }
            #target_area div {
                border              : solid 1px #cccccc;
                margin              : 0;
            }

            #top ,
            #bottom {
                clear               : both;
                width               : 304px;
                height              : 100px;
            }

            #left ,
            #center ,
            #right {
                float               : left;
                width               : 100px;
                height              : 100px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="target_area">
                <div id="top">top</div>
                <div id="left">left</div>
                <div id="center">center</div>
                <div id="right">right</div>
                <div id="bottom">bottom</div>
            </div>

            <div id="move_div"></div>

        </div>
    </body>
</html>

sample

sample を表示したとき、下部に表示されている灰色の div を drag してみてください。
上部に用意した領域の中に強制的に移動させられます。
移動後は指定した領域でしか動かせない様にすることもできます。

後は drop するだけです。
今回は特に何もしていませんが、drop した際に event を起こすことで
飛び出す絵本的なことも出来ます。

Web 上で色んな動作が出来ますが、drag & drop は結構喜ばれます。
使いどころは難しい気がしますけどね・・・

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

アニメーションでの色変更

今回は animate での色変更に挑戦したいと思います。
既に animate は何度か行っているため、「何をいまさら・・・」な感も否めませんが、
実は animate には色の変更機能が有りません(笑)
「何で出来ない?」と思った事は何度もありますが標準では動作しないのです。


 animate は値が数字のものしか動けないのは理解しているのですが
 色も16進の数字情報だと思うのですが・・・

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){

                $('#button').click(function() {
                      // init
                      $('#disp_area p').css({'color' : '#000000', 'background-color' : '#ffffff'});
                      // color change
                      $('#text_1').stop().animate({'color' : '#ff0000', 'background-color' : '#cccccc'}, 3000);
                      $('#text_2').stop().animate({'color' : '#00ff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_3').stop().animate({'color' : '#0000ff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_4').stop().animate({'color' : '#00ffff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_5').stop().animate({'color' : '#ffff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_6').stop().animate({'color' : '#ff00ff', 'background-color' : '#cccccc'}, 3000);
                      //
                      $('#text_7').stop().animate({'color' : '#ff0000', 'background-color' : '#00cccc'}, 1500)
                                         .animate({'color' : '#00ff00', 'background-color' : '#cc00cc'}, 1500)
                                         .animate({'color' : '#0000ff', 'background-color' : '#cccc00'}, 1500)
                                         .animate({'color' : '#00ffff', 'background-color' : '#cc0000'}, 1500)
                                         .animate({'color' : '#ffff00', 'background-color' : '#0000cc'}, 1500)
                                         .animate({'color' : '#ff00ff', 'background-color' : '#00cc00'}, 1500)
                                         .animate({'color' : '#000000', 'background-color' : '#ffffff'}, 1500);
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        
            div {
                margin           : 10px;
            }

            p {
                margin           : 10px;
                padding          : 10px;
                width            : 300px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="disp_area">
                <p id="text_1">Sample Message Text Red</p>
                <p id="text_2">Sample Message Text Lime</p>
                <p id="text_3">Sample Message Text Bule</p>
                <p id="text_4">Sample Message Text Cyan</p>
                <p id="text_5">Sample Message Text Yellow</p>
                <p id="text_6">Sample Message Text Magenta</p>
                <p id="text_7">Sample Message Text Color Change</p>
            </div>

            <div id="text_area">
                <button id="button">Color Change</button>
            </div>

        </div>
    </body>
</html>

sample

sample の button を click すると文字色と背景色が変更されます。
もちろん連続で色を変更することも出来ます。

行った内容は、「別途 jQuery UI を読み込む」でした。
色々と優秀な Plugin があるのですが、今回は jQuery の機能だけで完結してみました。

「jQuery UI」とは jQuery を使用した UI 用の機能を纏めたものです。
開発元が「The jQuery Project」なので安心です。
今回は jQuery より上記機能となる Color Animation と云う Effects を
使用する形となります。

・・・それにしても色変更の animate ぐらいは jQuery 標準で出来るように
変更してほしいなと思いますよね。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

画面の高さ 100%

最近は縦に長いページが多くなりました。
それにデバイスの多様化で表示画面の縦サイズがまちまちです。
CSS だけの場合、幅は自動で 100% の指定が出来ますが
縦は 100% を指定しても思った通り動作してくれません。
そんな時に、特定のブロックの縦を画面サイズ一杯に指定する方法です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"><!--

            function setHeight () {
                dispHeight = $(window).height();
                $(".auto_height").height(dispHeight);
            }

            $(function(){

                // resize
                $(window).resize(function() {
                    setHeight();
                });

                // init
                setHeight();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #area_1 {
                background-color : #ff0000;
            }
            #area_2 {
                background-color : #00ff00;
            }
            #area_3 {
                background-color : #0000ff;
            }
            #area_4 {
                background-color : #ffff00;
            }
            #area_5 {
                background-color : #00ffff;
            }
            #area_6 {
                background-color : #ff00ff;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="main_area">
                <div id="area_1" class="auto_height"></div>
                <div id="area_2" class="auto_height"></div>
                <div id="area_3" class="auto_height"></div>
                <div id="area_4" class="auto_height"></div>
                <div id="area_5" class="auto_height"></div>
                <div id="area_6" class="auto_height"></div>
            </div>

        </div>
    </body>
</html>

sample

sample を表示すると6色の div が画面の縦幅一杯に表示されると思います。
サイズを変更しても追随するように設定しています。

特に処理としては難しいことをしておらず、最初と resize 時に画面の高さを設定し、
特定の class (今回は auto_height)を指定した 領域の縦サイズを直指定しています。

比較的簡単だろうなと思いつつ行ってみましたが、一箇所落とし穴がありました。
それは 一番最初に記述する以下の1文です。

<!DOCTYPE html>

これを記述しておかないと縦サイズを正常に取得してくれません。
「何でかな~」とばかりに無作為に小一時間ほど悩みました・・・
宣言文って重要ですね(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

テキストを1文字ずつフェードイン

文字列の fadeIn はよく見かけます。
「こんなことが出来る」と聞かれましたのでやってみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){
                $('#exec').click( function(){
                    $('#text_area').empty();
                    var arrText = $('#input_text').val().split('');
                    $.each(arrText, function(index, val){
                        $('#text_area').append('<span id="cnt' + index + '" style="opacity:0;">' + val + '</span>');
                        $('#cnt' + index).delay(index * 300).animate({opacity:1},1000);
                    });

                });
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 50px;
            }

            #text_area {
                height : 50px;
                margin : 50px;
                border : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="main_area">
                <p id="text_area"></p>
            </div>

            <div id="button_area">
                <input id="input_text" type="text" value="Sample Message">
                <button id="exec">click!</button>
            </div>

        </div>
    </body>
</html>

sample

sample には textbox が存在しています。
入力したうえで button を click すると入力した文字列が 一文字ずつ fadeIn します。
別に fadeIn を使っても良いんですが最終形はもう少し凝ったこともするらしいので
あえて animate を使用しています。

どうでしょう、意外といけているかと思うのですが・・・
一度これで確認してもらおうかと思います。
最終的にはもう少し装飾などを追加しますが、まずはこれで確認してもらおうと思います。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。