月別アーカイブ: 2014年5月

指定時間帯の表示

店舗や美容院など営業時間を表示することは多々あります。
但し、画像で対応する場合時間帯が変更になると画像を作りなおす必要があります。
今回は画像を使用せずに対応できる方法をやってみます。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            jQuery(function() {

                function timeTable(mainID, appendID, setHS, setMS, setHE, setME) {
                    // Set Time
                    var timeS = ( (setHS   * (360 / 12)) + (setMS * ((360 / 12) / 60)) );
                    var timeE = ( (setHE   * (360 / 12)) + (setME * ((360 / 12) / 60)) );
                    // Main
                    for (var step = timeS; step <= timeE; step = (step + 0.1)) {
                        jQuery('#' + mainID).clone().attr('id', '').appendTo('#' + appendID).css({transform:'rotateZ(' + step + 'deg)', visibility:'visible'});
                    }
                };
                
                // clock 1
                timeTable('line_base1', 'clock_area1', 8, 15, 12, 0);
                // clock 2
                timeTable('line_base2', 'clock_area2', 10, 0, 12, 0);
                timeTable('line_base2', 'clock_area2', 3, 30,  7, 30);
                // clock 3
                timeTable('line_base3', 'clock_area3', 2, 45,  5, 15);
                timeTable('line_base3', 'clock_area3', 7, 30,  11, 0);
                // clock 4
                timeTable('line_base4', 'clock_area4', 9, 00, 12, 0);
                timeTable('line_base4', 'clock_area4', 1, 0,  3, 30);
                timeTable('line_base4', 'clock_area4', 4, 0,  6, 30);

            });

        --></script>

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


            .disp_clock {

                margin-top       : 100px;
                margin-left      : 200px;

                width            : 150px;
                height           : 150px;

            }


            .common_line {

                position                 : absolute;

                width                    : 1px;
                height                   : 75px;

                visibility               : hidden;

                -webkit-transform-origin : center 100%;
                -moz-transform-origin    : center 100%;
                -ms-transform-origin     : center 100%;
                -o-transform-origin      : center 100%;
                transform-origin         : center 100%;

            }


            .disp_line1 {
                background-color : #ff0000;
            }

            .disp_line2 {
                background-color : #00ff00;
            }

            .disp_line3 {
                background-color : #0000ff;
            }

            .disp_line4 {
                background-color : #cccccc;
            }


        --></style>

    </head>

        <div id="clock_area1" class="disp_clock">
            <div id="line_base1" class="common_line disp_line1"></div>
        </div>

        <div id="clock_area2" class="disp_clock">
            <div id="line_base2" class="common_line disp_line2"></div>
        </div>

        <div id="clock_area3" class="disp_clock">
            <div id="line_base3" class="common_line disp_line3"></div>
        </div>

        <div id="clock_area4" class="disp_clock">
            <div id="line_base4" class="common_line disp_line4"></div>
        </div>

    </body>
</html>

sample

spmple を表示するとアナログ時計の形式で時間帯を表示出来るようにしました。
一つの時計に複数の時間帯を設定出来るようにしています。
午前午後に分けて表示したいただ事も可能です。

画像を使用していないので数字を変更するだけで時間帯の変更が可能です。
社内の人間が「アナログ時計」を見て「こういったことができるか」と云われて対応してみました。
「他にも出来ればいいな」と思っている人がいれば使っていただければと思います。

jQuery はここからダウンロードしてください。

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

時間差で表示する文字列


2014/11/22 追記
時間差で表示する文字列(2)に jQuery 版を掲載しました。
jQuery を使う場合は新しく投稿した方を見てください。

今回は時間差での表示処理についてです。
正直な話、あまり jQuery は使いません(笑)
とある仕事で「使うかも・・・」との打診を受けたのですが、別の表示をする様に変わりました。
必要は無くなりましたが、今後の事を考えて作ってみます。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {
                $('#obj01').hide(0);
                $('#obj02').hide(0);
                $('#obj03').hide(0);
                $('#obj04').hide(0);
            });

            function dispObject(id) {
                id.show('slow');
            }
            setTimeout("dispObject($('#obj01'))", 1000);
            setTimeout("dispObject($('#obj02'))", 2000);
            setTimeout("dispObject($('#obj03'))", 4000);
            setTimeout("dispObject($('#obj04'))", 5000);


        --></script>

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

            div {
                margin      : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="obj01">
                <p>Massage Line 01</p>
            </div>
            <div id="obj02">
                <p>Massage Line 02</p>
            </div>
            <div id="obj03">
                <p>Massage Line 03</p>
            </div>
            <div id="obj04">
                <p>Massage Line 04</p>
            </div>

        </div>

    </body>
</html>

sample

spmple では時間がを置いて四行の文字列が表示されるます。
指定する数字で表示する間隔を変更することができます。
別に画像なども表示する事が出来るため用途は色々広がります。

・・・機能としてはありふれた機能なんですがデザイナーさんが考えると夢が広がる内容ですね。
毎度のことながら私自身の美的センスの無さにはうんざりです・・・

jQuery はここからダウンロードしてください。

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

ページ上部に戻るボタン

急ぎの仕事でちょっとした動作が必要になりそうです。
footer に固定で設置した button を押すとページトップに移動する処理だそうです。
今回はこの機能をネタに作ってみます。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('button').click( function() {
                    $('html,body').animate({scrollTop: 0}, 500);
                });

            });

        --></script>

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

            #disp_area {
                margin      : 50px;
            }

            #target_area {
                padding-top : 2000px;
                width       : 500px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <p>Please scroll.</p>
            <div id="target_area">
                <button>Page Top</button>
            </div>
        </div>

    </body>
</html>

sample

spmple では最初は何も表示していません。
下にスクロールしていくと、Footer 部に button が表示してあります。
button を押すとページトップに戻ります。

「実際のサイトでは plugin を結構使うため、単純な機能に関しては plugin を使わないほうがいいのではないか?」
昔はそんなことも考えましたが、特別な事情がなければ plugin で良いと思うようになりました。

まぁ、それでもスマホ用に機能制限をするため簡易的に、とか、簡単な Javascript の用途も多いと思います。
今回の内容もそういった類のものだと思っています。
用途さえ合えば色々なところで使用していきたいですね。

jQuery はここからダウンロードしてください。

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

アナログ時計

さて今回はアナログ時計を作成してみます。
前々回の内容「円形表示」を参考に何か役に立つものを作ろうという意向です。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var getDate;
                var hour;
                var minute;
                var second;

                var clockHandH;
                var clockHandM;
                var clockHandS;

                setInterval(function(){

                    getDate = new Date();

                    hours   = getDate.getHours();
                    if (hours > 12) {
                        hours -= 12;
                    } else if (hours === 0) {
                       hours = 12;
                    }
                    minutes = getDate.getMinutes();
                    seconds = getDate.getSeconds();

                    clockHandH = ( (hours   * (360 / 12)) + (minutes * ((360 / 12) / 60)) + (seconds * (((360 / 12) / 60) / 60)) );
                    clockHandM = ( (minutes * (360 / 60)) + (seconds * ((360 / 60) / 60)) );
                    clockHandS =   (seconds * (360 / 60));

                    $("#hours").css("transform",   "rotate(" + clockHandH + "deg)");
                    $("#minutes").css("transform", "rotate(" + clockHandM + "deg)");
                    $("#seconds").css("transform", "rotate(" + clockHandS + "deg)");

                },1000);

            });

        --></script>

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


            #disp_area {
                position         : relative;
                margin-top       : 100px;
                margin-left      : 200px;
            }


            div.hand {
                position         : absolute;
                -webkit-transform-origin : center 90%;
                -moz-transform-origin    : center 90%;
                -ms-transform-origin     : center 90%;
                -o-transform-origin      : center 90%;
                transform-origin         : center 90%;
            }

            #hours {
                width            : 5px;
                left             : 0px;
                height           : 70px;
                top              : 30px;

                background-color : #000000;
                z-index          : 1;
            }

            #minutes {
                width            : 3px;
                left             : 1px;
                height           : 100px;
                top              : 0px;

                background-color : #000000;
                z-index          : 2;
            }

            #seconds {
                width            : 1px;
                left             : 2px;
                height           : 90px;
                top              : 10px;

                background-color : #ff0000;
                z-index          : 3;
                
            }

        --></style>

    </head>

        <div id="disp_area">
            <div id="hours"   class="hand"></div>
            <div id="minutes" class="hand"></div>
            <div id="seconds" class="hand"></div>
        </div>

    </body>
</html>

sample

sample を表示するとアナログ時計の針が表示されるかと思います。

今回は1秒ごとの秒針・分針・時針の内容を変えています。
今回はそれぞれの時計の針を Div の Border で表現しています。
実際にはそれぞれの画像を透過の画像で作成いただければ良いかと思います。

時針に関しては1時間ずつ刻むわけでは無いので、若干ややこしいですね。
最初は時針が動いておらず、しばらく頭を捻っていました(笑)

このほかにも文字板など適当に作成していただければオリジナルの時計がサイトに表示できます。
まぁ、Webサイト上で時間を確認をする必要があるかは微妙かと思いますが・・・

jQuery はここからダウンロードしてください。

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

onload 読み込み済み判定について

現在作成中のサイトですが、画像のアップロードを画面遷移無しで行う計画です。
アップロードまでは問題なく動作しましたが、プレビューがうまく動作しません。
どうもブラウザによっては onload は、読み込み済みの画像を再度 load させても正常に動作してくれないんですね・・・

実は若干仕様が変わったため、別のパラメータに画像の有無を保持することになったため、
この処理は不要になったのですが、このままだとちょっとモヤモヤします。
ということで今回はその部分を解決してみたいと思います。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var img_url = './icon_jpeg05.jpg';
                    
                // Action 1
                var image1 = new Image();
                $('#get_button1').click( function () {
                    image1.src = img_url;
                    image1.onload = function () {
                        $('#set_image1').attr('src', image1.src);
                        alert('Image1 On Load');
                    }

                });


                // Action 2
                var image2 = new Image();
                $('#get_button2').click( function () {
                    image2.src = img_url;
                    if (image2.width > 0) {
                        $('#set_image2').attr('src', image2.src);
                        alert('Image2 Width' + image2.width);
                    } else {
                        image2.onload = function () {
                            $('#set_image2').attr('src', image2.src);
                            alert('Image2 On Load');
                        }
                    }
                });

            });

        --></script>

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

            div {
                margin  : 20px;
            }

        --></style>

    </head>

        <div id="disp_area">

            <div>
                <h1>Action 1 Image</h1>
                <img id="set_image1" src="" />
                <button id="get_button1">Click Image 1 Load!!!</button>
            </div>

            <div>
                <h1>Action 2 Image</h1>
                <img id="set_image2" src="" />
                <button id="get_button2">Click Image 2 Load!!!</button>
            </div>

        </div>

    </body>
</html>

sample2

spmple の Button を Click すると画像をロードするはずです。
「Action 1 Image」の button ではブラウザによっては一度表示すると、もう表示してくれなくなります。
「Action 2 Image」の button では正常キャッシュを読み込んだ場合はサイズイメージを表示します。
 ※ 実際に読み直しが発動しているかの判定のため alert を実行しています。

これでアップロードしたファイル名が同じ画像でも、プレビュー処理の更新が正常に動作するはずです。
要はすでに存在している場合はロードする必要がないんですね。
仕様が変わる前に気がつかなかったのが若干悔しいですね。

今までは、同一ページ内で同じ名前の画像ファイルを繰り返し読み込むことがなかったため、
最初は原因が分からずに苦労しました。
とりあえず、今後は同じことが起きても対応出来そうです。

jQuery はここからダウンロードしてください。

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