タグ別アーカイブ: fadeIn

ダイアログの表示

今回はダイアログ表示についてです。

それほど何か重要と云うのではありませんが、標準のダイアログでは
ちょっと寂しいという方に向けて対応方法です。

<!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(){

                $('#input_submit').click( function( eObj ) {
                    eObj.preventDefault();
                    $('#dialog_area').fadeIn('normal');
                });

                $('#input_yes').click( function() {
                    $('#form_main').submit();
                });

                $('#input_no').click( function() {
                    $('#dialog_area').fadeOut('normal');
                });

            });

        --></script>

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

            #main_area {
                padding          : 10px;
            }

            #dialog_area {
                width            : 100%;
                height           : 100%;
                position         : absolute;
                background-color : rgba(48, 48, 48, 0.7);
                display          : none;
            }

            #dialog {
                width            : 200px;
                height           : 120px;
                margin           : 100px auto;
                background-color : #f0f0f0;
            }

            #dialog p {
                height           : 60px;
                padding          : 10px;
            }

            #dialog div {
                padding          : 5px;
                margin           : 0 auto;
                text-align       : center;
            }

        --></style>

    </head>
    <body>

        <div id="dialog_area">
            <div id="dialog">
                <p>
                    Please select a check post-processing the wording .
                </p>
                <div>
                    <input id="input_no" type="button" value="No Submit">
                    <input id="input_yes" type="button" value="Yes Submit">
                </div>
            </div>
        </div>

        <div id="main_area">
            <div id="input_area">
                <form id="form_main" method="gett">
                    <input type="text" name="t" value="Sample Input">
                    <input id="input_submit" type="submit" value="Check">
                </form>
            </div>
        </div>

    </body>
</html>

sample

sample の button を click すると dialog が表示されます。
「No」を click した際には dialog が非表示となり、
「Yes」を click した際には実際の submit の処理を行います。

実際にはもっとデザインを設定して頂く必要はありますが、
標準な dialog では寂しい、という場合には十分ではないでしょうか。

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

一定時間で画像を切り替える

先日定期的に画像を切り替えたいとの依頼を頂きました。
画像を切り替えた際には画像をズームするというおまけ付きです。
とりあえず忘備録を兼ねて記載しておきます。

<!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(){

                var objArea;
                    objArea = $('ul#image_area li');

                // Data Set
                minCnt    = 1;
                maxCnt    = objArea.length;
                setTimer  = 1500;  // ms
                minSizeX  = 80;
                minSizeY  = 220;
                sizeRate  = 1.5;
                maxSizeX  = (minSizeX * sizeRate);
                maxSizeY  = (minSizeY * sizeRate);

                objArea.hide();
                function moveImage( cnt ) {

                    // Init
                    objTarget = $('ul#image_area li:nth-child(' + cnt + ')');
                    objArea.fadeOut( setTimer );

                    // Image Move
                    objTarget.find('img')
                             .css({ 'width':  minSizeY + 'px', 'height': minSizeX + 'px' })
                             .animate({ 'width': maxSizeY + 'px', 'height': maxSizeX + 'px' }, setTimer);
                    objTarget.fadeIn( setTimer )

                    // Next Image
                    if ( cnt >= maxCnt ) {
                        cnt = minCnt;
                    } else {
                        cnt = cnt + 1;
                    }
                    $(window).delay( setTimer ).queue( function () {
                        moveImage( cnt );
                        $(this).dequeue();
                    });

                }

                // Move Start
                moveImage( minCnt );

            });

        --></script>

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

            div {
                margin     : 10px;
            }

            #image_area li {
                position   : absolute;
            }

        --></style>

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

            <ul id="image_area">
                <li><img src="./icon_jpeg01.jpg"></li>
                <li><img src="./icon_jpeg02.jpg"></li>
                <li><img src="./icon_jpeg03.jpg"></li>
                <li><img src="./icon_jpeg04.jpg"></li>
                <li><img src="./icon_jpeg05.jpg"></li>
                <li><img src="./icon_jpeg06.jpg"></li>
                <li><img src="./icon_jpeg07.jpg"></li>
                <li><img src="./icon_jpeg08.jpg"></li>
                <li><img src="./icon_jpeg09.jpg"></li>
                <li><img src="./icon_jpeg10.jpg"></li>
            </ul>

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

sample

sample を開くと一定期間ごとに画像が切り替わります。
切り替わった際には画像が少し拡大していく感じです。

とりあえず簡易的に目を引く様な項目は出来たのではないかと思います。
実際には css で画像の中心を固定するとかの対応は必要ですが、
バナー程度のサイズならこのまま使用しても良いんじゃないでしょうか。

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

時間差で表示する文字列(2)

以前に時間差で表示する文字列を記述しました。
なぜなのかは不明ですが、最近意外と閲覧数が伸びています。
せっかくなので 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(){

                $('#disp_area div').hide();
                $('#obj01').delay(1000).fadeIn().delay(1500).fadeOut();
                $('#obj02').delay(2000).fadeIn().delay(1500).fadeOut();
                $('#obj03').delay(3000).fadeIn().delay(1500).fadeOut();
                $('#obj04').delay(4000).fadeIn().delay(1500).fadeOut();

            });

        --></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 以外のものに関しては書き直さないといけないなぁ・・・

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

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

時間による画像変更

今回は時間経過にて画像の入れ替えをやってみたいと思います。
定期的に画像の入れ替えがされる plugin がありますが、それの簡易版ですね。

<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 nowCount = 0;

                setInterval(function () {

                    $('.image_div').fadeOut();
                    
                    nowCount += 1;
                    switch (nowCount % 10) {
                        case 1:
                            $('#disp_image01').fadeIn();
                            break;
                        case 2:
                            $('#disp_image02').fadeIn();
                            break;
                        case 3:
                            $('#disp_image03').fadeIn();
                            break;
                        case 4:
                            $('#disp_image04').fadeIn();
                            break;
                        case 5:
                            $('#disp_image05').fadeIn();
                            break;
                        case 6:
                            $('#disp_image06').fadeIn();
                            break;
                        case 7:
                            $('#disp_image07').fadeIn();
                            break;
                        case 8:
                            $('#disp_image08').fadeIn();
                            break;
                        case 9:
                            $('#disp_image09').fadeIn();
                            break;
                        case 0:
                            $('#disp_image10').fadeIn();
                            break;
                    }

                }, 2000);

            });

        --></script>

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

            div .image_div{
                margin   : 30px;
                position : absolute;
                display  : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="disp_image01" class="image_div"><img src="./icon_jpeg01.jpg"></div>
            <div id="disp_image02" class="image_div"><img src="./icon_jpeg02.jpg"></div>
            <div id="disp_image03" class="image_div"><img src="./icon_jpeg03.jpg"></div>
            <div id="disp_image04" class="image_div"><img src="./icon_jpeg04.jpg"></div>
            <div id="disp_image05" class="image_div"><img src="./icon_jpeg05.jpg"></div>
            <div id="disp_image06" class="image_div"><img src="./icon_jpeg06.jpg"></div>
            <div id="disp_image07" class="image_div"><img src="./icon_jpeg07.jpg"></div>
            <div id="disp_image08" class="image_div"><img src="./icon_jpeg08.jpg"></div>
            <div id="disp_image09" class="image_div"><img src="./icon_jpeg09.jpg"></div>
            <div id="disp_image10" class="image_div"><img src="./icon_jpeg10.jpg"></div>
        </div>

    </body>
</html>

sample

sample を表示して暫くすると時間によって画像が切り替わります。

特にこれといって特殊な事をしているわけではありませんが、画像の切り替えは
一度試して見たかったのですがどうでしょうか。

以外としっかりした形になった気がします。
お試しください。

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

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

一定時間後に処理を行う

今回は一定時間放置した場合の処理です。
今までも一定時間度に処理を行う「setTimeout」や一定時間毎に同じ処理を実行する「setInterval」は使ったことがあります。
今回は jQuery の中にそういったものが無いのかなぁと調べた結果「delay」がありました。
今回は「delay」の使い方をやってみます。

<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() {

                    $(this).fadeOut().delay(4000).fadeIn();

                    $('#delay_n').fadeIn().fadeOut();
                    $('#delay_1').fadeIn().delay(1000).fadeOut();
                    $('#delay_2').fadeIn().delay(2000).fadeOut();
                    $('#delay_3').fadeIn().delay(3000).fadeOut();

                });
                $('.box').hide();

            });

        --></script>

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

            div.box {
                margin          : 10px;
                padding         : 10px;
                
                width           : 50px;
                height          : 50px;
                border          : 1px solid #000000;
            }

            #form_area {
                width           : 420px;
                border          : 1px solid #000000;
            }

        --></style>

    </head>

        <div id="button_area">
            <button>Click Me!!!</button>
        </div>

        <div id="disp_area">
            <div id="delay_3" class="box">3 second Delay</div>
            <div id="delay_2" class="box">2 second Delay</div>
            <div id="delay_1" class="box">1 second Delay</div>
            <div id="delay_n" class="box">No Delay</div>
        </div>

    </body>
</html>

sample

spmple には button が存在しています。 
今回は button を click することで4つの div を表示してから所定の秒数後に div を消しています。
上から順に「3秒後」「2秒後」「1秒後」「指定なし」です。

別段難しい処理でもなくそのまま処理に待ち時間を設定できるのはありがたいですね。
実際の処理内容は内部処理にて「setTimeout」を使用しているようです。
使用する際の注意事項も「setTimeout」と同じであれば、今後は「delay」を使用していくようにしたいですね。

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

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