タグ別アーカイブ: height

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

ページ内でのScroll位置表示

今回もページ内での演出効果です。
ページ内で scroll した際の現在位置を表示したいと思います。

<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 winTop;
                var winHeight;
                var winWidth;
                var nowLeft;
                $(window).scroll(function () {
                    winTop    = $(this).scrollTop();
                    winHeight = $(window).height();
                    winWidth  = $(window).width();
                    nowLeft   = ((winWidth * (winTop / (winHeight - window.innerHeight))) - 80);
                    $('#pointer').stop().animate({left: + nowLeft + 'px'}, 'normal');
                });

            });

        --></script>

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

            div#main_area .message {
                margin              : 300px;
            }

            div#point_area {
                position            : fixed;
                bottom              : 0px;
                height              : 80px;
                width               : 100%;
            }

            div#pointer {
                position            : absolute;
                top                 : 0px;
                left                : -80px;
                background-image    : url('icon_jpeg15.jpg');
                width               : 80px;
                height              : 80px;
                background-repeat   : no-repeat;
                background-position : center;
            }


        --></style>

    </head>
    <body>

        <div id="main_area">
            <div class="message">Pleas Scroll Down 01</div>
            <div class="message">Pleas Scroll Down 02</div>
            <div class="message">Pleas Scroll Down 03</div>
            <div class="message">Pleas Scroll Down 04</div>
            <div class="message">Pleas Scroll Down 05</div>
            <div class="message">Pleas Scroll Down 06</div>
            <div class="message">Pleas Scroll Down 07</div>
            <div class="message">Pleas Scroll Down 08</div>
            <div class="message">Pleas Scroll Down 09</div>
            <div class="message">Pleas Scroll Down 10</div>
        </div>
        <div id="point_area">
            <div id="pointer"></div>
        </div>

    </body>
</html>

sample

sample で 上下に scroll すると画面の下部に現在位置を視覚的に表示してみました。

ページの残り長さがどの程度あるのかが視覚的にわかるのは良いものですね。
章仕立てでページが構成されている場合、章ごとに画像を変えるなどしても面白いと思います。
実際にはメニュー表示のほうが望ましいのかもしれませんが、遊び心はメニューよりも良い気がします。

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

                $("body").height($(window).height() + 50);
                var heightB  = $("body").height();
                
                var heightW  = 0;
                var heightST = 0;
                var baseTop  = 1;
                
                $(window).scroll(function() {

                    heightW  = window.innerHeight;
                    heightST = $(window).scrollTop();

                    if ( heightST >= (heightB - heightW) ) {
                        $(window).scrollTop(baseTop);
                    } else if (heightST == 0) {
                        $(window).scrollTop(heightB - heightW - baseTop);
                    }

                });

            });


        --></script>

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

            #main_area div {
                margin : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <div>text01 text01 text01 text01 text01</div>
                <div>text02 text02 text02 text02 text02</div>
                <div>text03 text03 text03 text03 text03</div>
                <div>text04 text04 text04 text04 text04</div>
                <div>text05 text05 text05 text05 text05</div>
                <div>text06 text06 text06 text06 text06</div>
                <div>text07 text07 text07 text07 text07</div>
                <div>text08 text08 text08 text08 text08</div>
                <div>text09 text09 text09 text09 text09</div>
                <div>text10 text10 text10 text10 text10</div>
                <div>text11 text11 text11 text11 text11</div>
                <div>text12 text12 text12 text12 text12</div>
                <div>text13 text13 text13 text13 text13</div>
                <div>text14 text14 text14 text14 text14</div>
                <div>text15 text15 text15 text15 text15</div>
                <div>text16 text16 text16 text16 text16</div>
                <div>text17 text17 text17 text17 text17</div>
                <div>text18 text18 text18 text18 text18</div>
                <div>text19 text19 text19 text19 text19</div>
                <div>text20 text20 text20 text20 text20</div>
                <div>text21 text21 text21 text21 text21</div>
                <div>text22 text22 text22 text22 text22</div>
                <div>text23 text23 text23 text23 text23</div>
                <div>text24 text24 text24 text24 text24</div>
                <div>text25 text25 text25 text25 text25</div>
                <div>text26 text26 text26 text26 text26</div>
                <div>text27 text27 text27 text27 text27</div>
                <div>text28 text28 text28 text28 text28</div>
                <div>text29 text29 text29 text29 text29</div>
                <div>text30 text30 text30 text30 text30</div>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを上下にスクロールすると無限ループします。

よくある処理のため、ありがちではありますが結構面白いですね。
あまりにもページが短い場合などは別途対応する必要もありそうですが、
そのあたりは臨機応変に対応する必要がありそうです。

表示する内容に最寄りますが綺麗な写真などを繰り返し表示する場合など、
使い方によっては効果的に表示することができそうです。
まぁ、今回の sample の様なページでは魅力も半減ですが(笑)

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

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

ウィンドウのサイズに合わせて画像のサイズを変更(3)

前々回,前回に引き続いてウィンドウサイズに合わせた画像サイズの変更です。
表示方法には色々な意見がありますね、高さのサイズは変更したくない(ページ全体のレイアウトは崩さない)場合に挑戦です。
高さは固定で画像の拡大・縮小と内部的な調整をやって見ます。
まぁ、前々回と前回の「まとめ」みたいなものですね。

<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 objAreaDiv    = $('#disp_area');
                var objImgDiv     = $('#image_area');
                var objImage      = $('#image_area img');

                var mAreaSizeW    = 0;
                var mAreaSizeH    = 80;

                var mBaseSizeW    = 220;    // Image Width
                var mBaseSizeH    = 80;     // Image Height

                var mDispSizeW    = 0;
                var mDispSizeH    = 0;
                var mDispPointT   = 0;
                var mDispPointL   = 0;

                // ReSize
                function fnMovieReSizeSet() {

                    mDispPointL = 0;
                    mDispPointT = 0;
                    mAreaSizeW = objAreaDiv.width();

                    mAspectRatio = (mAreaSizeW / mBaseSizeW);
                    mDispSizeW = mAreaSizeW;
                    mDispSizeH = mBaseSizeH * mAspectRatio;

                    mDispPointT = (((mDispSizeH - mBaseSizeH) / 2) * -1);

                    if (mAreaSizeH < mDispSizeH) {
                        objImgDiv.width(mAreaSizeW).height(mAreaSizeH);
                        objImage.width(mDispSizeW).height(mDispSizeH).css({'top' : mDispPointT});
                    }

                }

                $(window).resize(function() {
                    fnMovieReSizeSet();
                });
                fnMovieReSizeSet();

            });

        --></script>

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

            #disp_area {
                position   : relative;
                margin-top : 50px;
            }

            #image_area {
                left       : 0;
                right      : 0;
                top        : 0;
                position   : absolute;
                overflow   : hidden;
            }

            #image_area img {
                position   : absolute;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="image_area">
                <img src="./icon_jpeg01.jpg">
            </div>

        </div>

    </body>
</html>

sample

sampleではウィンドウの Size に合わせて画像の拡大率が変わります。
但し、画像(縦)の表示領域は変わりません。
また、画像の表示は高さに合わせて中心を表示しています。

高さを限定することでページのレイアウトが変わらずに全画面の表示が可能です。
・・・結構実用性があるのではないでしょうか、思ったよりも出来が良いです。
それに画像よりは動画向きかも知れませんね。
まぁ、色々なところで使ってみようかと思います。

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 objAreaDiv    = $('#disp_area');
                var objImgDiv     = $('#image_area');
                var objImage      = $('#image_area img');

                var mAreaSizeW    = 0;
                var mAreaSizeH    = 0;

                var mBaseSizeW    = 220;    // Image Width
                var mBaseSizeH    = 80;     // Image Height

                var mDispSizeW    = 0;
                var mDispSizeH    = 0;
                var mDispPointT   = 0;
                var mDispPointL   = 0;

                // ReSize
                function fnMovieReSizeSet() {

                    mDispPointL = 0;
                    mDispPointT = 0;
                    mAreaSizeW = objAreaDiv.width();

                    mAspectRatio = (mAreaSizeW / mBaseSizeW);
                    mDispSizeW = mAreaSizeW;
                    mDispSizeH = mBaseSizeH * mAspectRatio;

                    mDispPointL = (((mDispSizeW - mBaseSizeW) / 2) * -1);
                    mDispPointT = (((mDispSizeH - mBaseSizeH) / 2) * -1);

                    objImgDiv.width(mBaseSizeW).height(mBaseSizeH);
                    objImage.width(mDispSizeW).height(mDispSizeH).css({'top' : mDispPointT, 'left' : mDispPointL});

                }

                $(window).resize(function() {
                    fnMovieReSizeSet();
                });
                fnMovieReSizeSet();

            });

        --></script>

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

            #disp_area {
                position   : relative;
                margin     : 50px;
            }

            #image_area {
                left       : 0;
                right      : 0;
                top        : 0;
                position   : absolute;
                overflow   : hidden;
            }

            #image_area img {
                position   : absolute;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="image_area">
                <img src="./icon_jpeg01.jpg">
            </div>

        </div>

    </body>
</html>

sample

sampleではウィンドウの Size に合わせて画像の拡大率が変わります。
但し、画像の表示領域は変わりません。

今回の案件は「画像の領域は変えずに画像の Size を変えてもらえないか。」とのお問い掛けからでした。
それなら前回の内容を変えてみればなんとかできるかな、と云う思いつきです。
思ったより上手く行ったようで良かったです。

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

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