タグ別アーカイブ: addClass

jQuery 3 の show / hide

前回 jQuery 3 の話をしましたが、その際に show / hide の例を挙げました。
今回は実際にどのように変化があるのかを試したいと思います。

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

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

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

            $(function(){

                $('#show').click( function() {
                    $('#disp_area1').show();
                    $('#disp_area2').removeClass('disp_hide');
                });
                $('#hide').click( function() {
                    $('#disp_area1').hide();
                    $('#disp_area2').addClass('disp_hide');
                });

            });


        --></script>

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

            div {
                margin           : 10px;
            }

            .disp_area {
                width            : 300px;
                height           : 300px;
                float            : left;
            }

            #disp_area1 {
                width            : 250px;
                height           : 250px;
                background-color : #ff0000;
                display          : none;
            }

            #disp_area2 {
                width            : 250px;
                height           : 250px;
                background-color : #0000ff;
            }

            .disp_hide {
                display          : none;
            }

        --></style>

    </head>
    <body>
        <div id="button_area">
            <button id="show">Show</button>
            <button id="hide">Hide</button>
        </div>
        <div id="main_area">
            <div class="disp_area">
                <h1>Ver. Old</h1>
                <div id="disp_area1">Sample Text</div>
            </div>
            <div class="disp_area">
                <h1>Ver. 3</h1>
                <div id="disp_area2" class="disp_hide">Sample Text</div>
            </div>
        </div>

    </body>
</html>

sample

sample の「show」「hide」を click すると表示されている領域が表示され・・・ますね。
・・・表示されますね。想定していた動きと異なります。
どうも sample が良くないようですね(笑)

jQuery 3 では以下の動きにあ変わるようです。
 「show」 display の style を削除するのみ
 「hide」 display に style=”none” を追加するのみ

そのため、show / hide を含み、fadeIn, sadeOut, slideDown, slideUp の処理が
正常に動かなくなることがあるそうです。

そのため、jQuery 3 を使用して初期を非表示をする場合には addClass, removeClass
にて表示を切り替える必要があるようです。

とりあえずは既存のものでなければとくには問題がないのでしょうか(笑)
う~ん、正直よくわかりませんが、取り立てて恐れる必要はないようですね。
今後は jQuery 3 も選定の範囲に入れてもよさそうですね。

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

横に固定されるメニュー(2)

前回サイドメニューではさすがにちょっと寂しかったので、
今回はサイドメニューに表示に多少の動きをつけてみたいと思います。

<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 menuMargin = 100;
                var classCnt   = 0;
                $(window).scroll(function () {
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            if (classCnt != (cnt + 1)) {
                                $('div.menu_point').removeClass('active').stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                                classCnt = cnt + 1;
                                $('#menu_' + classCnt).addClass('active').stop().animate({'margin-left':'0'}, 'slow', 'swing').css({'background-color':'#ff9999'});
                            }
                            return false;
                        }
                    });
                });

                $('div#menu_area .menu_point').hover(
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'0'}, 'fast', 'swing').css({'background-color':'#99ffff'});
                        }
                    },
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                        }
                    }
                );

            });

        --></script>

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

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : -70px;
                z-index          : 9999;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area div.active {
                background-color : red;
                margin-left      : 0;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample の内容も基本的には前回と変わりません。
違いとして該当の menu 部分に来たときにちょっとした動きをつけてみました。

今回の様に多少でも動きをつける方がやはり見映えは良いですね。
色々な動きの発想が出来るといいんですが難しいですね。

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 menuMargin = 100;
                $(window).scroll(function () {
                    var classCnt = 0;
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            $('div.menu_point').removeClass('active');
                            classCnt = cnt + 1;
                            $('#menu_' + classCnt).addClass('active');
                            return false;
                        }
                    });
                });

            });

        --></script>

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

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : 0;
                z-index          : 9999;
                background-color : #ffffff;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area .active {
                color            : #ffffff;
                background-color : #00ff00;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample を下に scroll していくと表示内容によって menu 部分の色が変わります。
もちろん menu ですので click すれば対象の部分を表示できます。

現在表示中のページ位置を表示できます。
menu 用の div に対して class を設定しているだけですので色を変えるだけではなく
文字の表示内容を変えたりも出来ます。

今後はパララックス効果などの多様がありますので、使用する機会が無いかもしれません。
それでも使い方さえ間違えなければ役に立つ機能だと思います。
ぜひお試しください。

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

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

上部に固定されるメニュー(2)

今回はページ上部に固定されるメニューの亜種です。
以前に上部に固定されるメニューを作成しましたが、ちょっと変形したものを作りました。

<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 menuBox = $('#menu_box');
                var topPoint;
                $(window).scroll(function () {

                    var winTop = $(this).scrollTop();
                    if (winTop < 50) {
                        menuBox.slideDown();
                        menuBox.addClass('menu_fixed');
                    } else {
                        if (topPoint > winTop) {
                            menuBox.slideDown();
                            menuBox.addClass('menu_fixed');
                        } else {
                            menuBox.slideUp();
                            menuBox.removeClass('menu_fixed');
                        }
                    }
                    topPoint = winTop;

                });


            });

        --></script>

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

            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                
            }
            
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
            
            .disp_box {
                width            : 100%;
                height           : 1500px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }

        --></style>

    </head>
    <body>

        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>

        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>

    </body>
</html>

sample

smaple ページを開いた時点では特に何もありません。
画面下に向けてスクロールするとメニューも表示が消えていきます。

ここまでだと、jQuery を使用していない場合と同じです。
但し、スクロールを少しでも上に戻すと常にメニューが表示されるようになります。
上部に向けたスクロール中は常に上部に固定されます。

・・・結構いいですね。
サイトが綺麗になるほどメニューを画面上に表示するかを悩むかと思います。
普段は表示されなくても、メニューを表示したい場合はすぐに使える。
中々便利だと思います。

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 checkFlg;
                $('.tab').click(function() {

                    // Select Check
                    checkFlg = false;
                    if ( $(this).hasClass('selected') ) {
                        checkFlg = true;
                    }

                    // All Hide
                    $('.panel').hide();
                    $('.tab').removeClass('selected');

                    // Select Show
                    if (checkFlg == false) {
                        $(this).next().show();
                        $(this).addClass('selected');
                    }

                });

            });

        --></script>

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

            #disp_area .area{
                float            : left;
                margin           : 20px;
            }

            #disp_area .panel{
                display          : none;
            }

            .selected {
                color            : #0000ff;
                background-color : #ff0000;
            }

        --></style>


    </head>
    <body>

        <div id="disp_area">

            <div class="area">
                <span class="tab">TabName1 </span>
                <div class="panel">Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.</div>
            </div>
            <div class="area">
                <span class="tab">TabName2 </span>
                <div class="panel">Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.</div>
            </div>
            <div class="area">
                <span class="tab">TabName3 </span>
                <div class="panel">Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.</div>
            </div>
            <div class="area">
                <span class="tab">TabName4 </span>
                <div class="panel">Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.</div>
            </div>

        </div>

    </body>
</html>

sample

spmple では最初の段階ではパネルは表示されていません。
タブをクリックすることで、選択したタブの内容を表示しています。
選択中のタブを再度クリックした場合は、全てのパネルが表示されない状態になります。

すでに選択済みのタブかどうかが分かればいいだけなのですが、地味にめんどくさい処理です。
今度からはこの方法を使用していければいいなぁと思いますね。

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

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