タグ別アーカイブ: find

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

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

<!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 人がこの 投稿 は役に立ったと言っています。

一覧の「もっとみる」ボタン

今回は一覧の「もっと見る」ボタンです。
実際のデータ取得の方法は ajax などを使用するなどの対応が必要ですが、
とりあえず 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(){

                $('#button').click( function () {
                    $('div.areaDays').last().clone().appendTo('#disp_area');
                    setDateTime();
                });

                function setDateTime () {
                    var now   = new Date();
                    var nowDY = now.getFullYear();
                    var nowDM = now.getMonth() + 1;
                    var nowDD = now.getDate();
                    var nowTH = now.getHours();
                    var nowTM = now.getMinutes();
                    var nowTS = now.getSeconds();
                    var objDays = $('div.areaDays').last();
                    objDays.find('.dateY').html(nowDY);
                    objDays.find('.dateM').html(nowDM);
                    objDays.find('.dateD').html(nowDD);
                    objDays.find('.timeH').html(nowTH);
                    objDays.find('.timeM').html(nowTM);
                    objDays.find('.timeS').html(nowTS);
                }

                // init
                setDateTime();

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            #button_area {
                clear            : both;
            }

            button {
                margin           : 5px;
            }

            div.areaDays {
                clear            : both;
            }
            div.areaDays dl {
                float            : left;
                margin           : 10px;
                padding          : 10px;
            }
            div.areaDays dl.areaDate {
                float            : left;
                background-color : #ffcccc;
                width            : 200px;
            }
            div.areaDays dl.areaTime {
                float            : left;
                background-color : #ccccff;
                width            : 200px;
            }
            div.areaDays dt {
            }
            div.areaDays dd {
                padding-bottom   : 10px;
                padding-left     : 10px;
            }

        --></style>

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

            <div id="disp_area">

                <div class="areaDays">
                    <dl class="areaDate">
                        <dt>Date Year</dt>
                        <dd class="dateY">YEAR</dd>
                        <dt>Date Month</dt>
                        <dd class="dateM">MONTH</dd>
                        <dt>Date Day</dt>
                        <dd class="dateD">DAY</dd>
                    </dl>
                    <dl class="areaTime">
                        <dt>Time Hour</dt>
                        <dd class="timeH">HOUR</dd>
                        <dt>Time Minute</dt>
                        <dd class="timeM">MINUTE</dd>
                        <dt>Time Second</dt>
                        <dd class="timeS">SECOND</dd>
                    </dl>
                </div>

            </div>

            <div id="button_area">
                <button id="button">more</button>
            </div>

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

sample

sample の button を click すると現在時刻が追加されます。
実際のデータ取得は別処理にはなりますが追加していくロジックとしては
上出来ではないでしょうか。

また、一回に追加する件数を増やす場合も loop 処理をすれば行けると思います。
実際に全てのデータをとっても良いのですが・・・
やはりサーバーへの負荷は少しでも下げたいですからね。

何か案件か決まっている訳ではないのですが、何かの際には使ってみたいですね。

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

                $('#exec_o_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').css({'background-color' : '#ff0000'});
                });
                $('#exec_e_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').css({'background-color' : '#00ff00'});
                });

                $('#exec_odd').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').addBack().css({'background-color' : '#ff0000'});
                });
                $('#exec_even').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').addBack().css({'background-color' : '#00ff00'});
                });

                $('#exec_class-a').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.a').addBack().css({'background-color' : '#0000ff'});
                });
                $('#exec_class-b').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.b').addBack().css({'background-color' : '#ff00ff'});
                });
                $('#exec_class-c').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.c').addBack().css({'background-color' : '#ffff00'});
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div.disp_area {
                width            : 500px;
                border           : solid 1px #000000;
            }

            div.target_div {
                width            : 50%;
                border           : solid 1px #000000;
            }

        --></style>

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

            <div id="button_area">
                <button id="exec_o_only">click me! change odd only</button>
                <button id="exec_e_only">click me! change even only</button>
                <br />
                <button id="exec_odd">click me! change odd add parent</button>
                <button id="exec_even">click me! change even add parent</button>
            </div>
            <div id="disp_area" class="disp_area">
                <div class='target_div odd '>Target Div  1</div>
                <div class='target_div even'>Target Div  2</div>
                <div class='target_div odd '>Target Div  3</div>
                <div class='target_div even'>Target Div  4</div>
                <div class='target_div odd '>Target Div  5</div>
                <div class='target_div even'>Target Div  6</div>
                <div class='target_div odd '>Target Div  7</div>
                <div class='target_div even'>Target Div  8</div>
                <div class='target_div odd '>Target Div  9</div>
                <div class='target_div even'>Target Div 10</div>
            </div>

            <div id="button_area2">
                <button id="exec_class-a">click me! change class-a</button>
                <button id="exec_class-b">click me! change class-b</button>
                <button id="exec_class-c">click me! change class-c</button>
            </div>
            <div id="disp_area2" class="disp_area">
                <div class='target_div a'>Target Div  1</div>
                <div class='target_div b'>Target Div  2</div>
                <div class='target_div c'>Target Div  3</div>
                <div class='target_div b'>Target Div  4</div>
                <div class='target_div a'>Target Div  5</div>
                <div class='target_div b'>Target Div  6</div>
                <div class='target_div a'>Target Div  7</div>
                <div class='target_div a'>Target Div  8</div>
                <div class='target_div c'>Target Div  9</div>
                <div class='target_div b'>Target Div 10</div>
            </div>

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

sample

sample の動作自体は前回と変わりません。
変更内容は andSelf が addBack に変わったところです。

「andSelf 万歳!!!」ぐらいのノリで喜んでいたのですが、とある方より
「andSelf は Ver1.8 以降は非推奨ですよ」とのご指摘を頂きました。
ご指導は非常に非常にありがたいですね。

とりあえず、andSelf の代替手段を探してみましたが、addBack での対応が可能なようです。
残念ながらこの間知ったばかりの機能なら、非推奨は避けたいですからね・・・
非推奨はいつから削除されるかわかりませんし(笑)

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

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

直前の選択オブジェクトと現在の選択オブジェクト


直前の選択オブジェクトと現在の選択オブジェクト(訂正版)に訂正版を掲載しました。
andSelf は Ver.1.8 以降は非推奨とのことです。
今後は addBack をご使用ください。

Object の階層が深いと何時も苦労していたんですが、今までの苦労が嘘のようです。

親子階層のObject に対して 親階層を変更して 子階層の一部のみ find で検索して
其々に同じ変更を行うと云った処理です。

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

                $('#exec_o_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').css({'background-color' : '#ff0000'});
                });
                $('#exec_e_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').css({'background-color' : '#00ff00'});
                });

                $('#exec_odd').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').andSelf().css({'background-color' : '#ff0000'});
                });
                $('#exec_even').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').andSelf().css({'background-color' : '#00ff00'});
                });

                $('#exec_class-a').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.a').andSelf().css({'background-color' : '#0000ff'});
                });
                $('#exec_class-b').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.b').andSelf().css({'background-color' : '#ff00ff'});
                });
                $('#exec_class-c').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.c').andSelf().css({'background-color' : '#ffff00'});
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div.disp_area {
                width            : 500px;
                border           : solid 1px #000000;
            }

            div.target_div {
                width            : 50%;
                border           : solid 1px #000000;
            }

        --></style>

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

            <div id="button_area">
                <button id="exec_o_only">click me! change odd only</button>
                <button id="exec_e_only">click me! change even only</button>
                <br />
                <button id="exec_odd">click me! change odd add parent</button>
                <button id="exec_even">click me! change even add parent</button>
            </div>
            <div id="disp_area" class="disp_area">
                <div class='target_div odd '>Target Div  1</div>
                <div class='target_div even'>Target Div  2</div>
                <div class='target_div odd '>Target Div  3</div>
                <div class='target_div even'>Target Div  4</div>
                <div class='target_div odd '>Target Div  5</div>
                <div class='target_div even'>Target Div  6</div>
                <div class='target_div odd '>Target Div  7</div>
                <div class='target_div even'>Target Div  8</div>
                <div class='target_div odd '>Target Div  9</div>
                <div class='target_div even'>Target Div 10</div>
            </div>

            <div id="button_area2">
                <button id="exec_class-a">click me! change class-a</button>
                <button id="exec_class-b">click me! change class-b</button>
                <button id="exec_class-c">click me! change class-c</button>
            </div>
            <div id="disp_area2" class="disp_area">
                <div class='target_div a'>Target Div  1</div>
                <div class='target_div b'>Target Div  2</div>
                <div class='target_div c'>Target Div  3</div>
                <div class='target_div b'>Target Div  4</div>
                <div class='target_div a'>Target Div  5</div>
                <div class='target_div b'>Target Div  6</div>
                <div class='target_div a'>Target Div  7</div>
                <div class='target_div a'>Target Div  8</div>
                <div class='target_div c'>Target Div  9</div>
                <div class='target_div b'>Target Div 10</div>
            </div>

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

sample

sample の其々の button を click すると親階層と指定した子階層のに対しての
背景色を変更してみました。

実際には業務で使用してみないと正直わかりませんが、私としては非常に便利です。

今までは其々に行う変更内容を親子で別けて其々に指定していました。
そのせいで修正の際にどちらかのみを修正してお客様に怒られる・・・

皆さんはそんな経験は無いでしょうか。
今後は極力使っていきたいと思います。

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

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

複数RSS の取得と一覧表示

普段は RSS の取得は PHP で処理していますが、今回は以下の提案を頂きました。
「サブドメイン配下にある複数の Blog の RSS 一覧を HTML 拡張子で表示したい。」
それに合わせて今回はRSSの取得をやってみます。

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

                // Set URL
                var maxFeed = 10;
                var urls = [
                    'http://jsource.nakweb.com/?feed=rss2',
                    'http://jsource.nakweb.com/?feed=comments-rss2'
                ];

                // Get RSS
                var arrFeed = new Array();
                var cntFeed = 0;
                for ( var urlCnt = 0; urlCnt < urls.length; urlCnt++ ){
                    $.ajax({
                        url      : urls[urlCnt],
                        dataType : 'xml',
                        success  : function(xml) {
                            // Get Feed
                            $(xml).find('item').each(function(){
                                var title = $(this).find('title').text();
                                var link  = $(this).find('link').text();
                                var date  = $(this).find('pubDate').text();
                                // Date Format
                                date = getFormatDate(date);
                                // Set Array
                                arrCnt = arrFeed.length;
                                arrFeed[arrCnt] = new Array();
                                arrFeed[arrCnt]['date'] = date;
                                arrFeed[arrCnt]['feed'] = '<dl><dt><a href="' + link + '">' + date + '</a></dt><dd><a href="' + link + '">' + title + '</a></dd></dl>';
                            });
                            cntFeed++;
                            exeDispFeed();
                        },
                        error    : function() { // Error
                            //$('#disp_area').append('<p>Not Read Feed</p>');
                            cntFeed++;
                        }
                    });
                }

                // Feed Disp Function
                var exeDispFeed = function(){
                    // Feed Disp
                    if (cntFeed >= urls.length) {
                        // Sort
                        arrFeed.sort(function(a, b) {
                            return (a.date > b.date) ? -1 : 1;
                        });
                        // Disp
                        for ( var feedCnt = 0; feedCnt < arrFeed.length; feedCnt++ ){
                            if (maxFeed <= feedCnt) {
                                return;
                            }
                            $('#disp_area').append(arrFeed[feedCnt]['feed']);
                        }
                    }
                };

                // Day Format
                var getFormatDate = function(date){
                    var getDate  = new Date(date);
                    var year     = getDate.getFullYear();
                    var month    = getDate.getMonth() + 1;
                        month    = ('0' + month).slice(-2);
                    var day      = getDate.getDate();
                        day      = ('0' + day).slice(-2);
                    var dispDate = year + '/' + month + '/' + day + '/';
                    return dispDate;
                };

            });

        --></script>

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

            div {
                margin           : 20px;
            }
            dd {
                margin-bottom    : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <ul id="disp_area"></ul>
        </div>

    </body>
</html>

sample

sample を開くと当サイトの Feed が一覧表示されます。
投稿とコメントの Feed です。
# コメントが余りにも無いんで「投稿」しか表示されていませんが(笑)

RSSを指定すると指定数分の URL からの情報を取得します。
一応投稿日付によって Sort して指定数までの Feed を表示します。

全部読みこんでから表示する必要もあるのでちょっと悩みましたが
こんな感じでどうでしょう。
apache の設定を変えても良かったんですが、これも良い感じではないでしょうか。

今度から Blog の投稿一覧はこれでも良い気がします。

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

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