質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15864questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6521questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ウィンドウの幅に合わせてファーストビュー要素の大きさを変更するソースについて質問です。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,343

aaaaaaaa

score 465

下記のソースは、イベント名にある通り、ページを読み込んだ時点(load)、ウィンドウの大きさを変更した時点(resize)いづれかを満たしたときにスライダーの要素がウィンドウの大きさに連動するソースの一部です。しかし、なぜかページが読み込まれてもスライダー要素の大きさが指定通りにならないのです。

ちなみに指定した通りに要素の大きさが表示されない時は、なぜかいくつかあるスライダーのうち
最後に表示される部分(下記のソースでいう所のslide03)が表示されてしまいます。
本来ならslide00が表示されるのですが、読み込んでも大きさが指定されないので
流れ込んでくるのでしょうか。

しかしウィンドウの大きさを変更すると指定通り、ウィンドウの幅に合わせて動くレスポンシブなスライダーになります。尚且つ、最後に表示されるべきスライダーから、本来最初に表示されるべきスライダー(slide00)も表示されるようになります。
なぜ、ページが読み込まれた際に、指定通りの大きさにならないのでしょうか。

使用しているjqueryのバージョンは、1.7.1です。
この現象を確認したブラウザは、IE11、クローム45.0.2454.99 m、safari5.1.7です。


    //ウィンドウの幅、高さに合わせて背景の大きさが連動する 
    var slider_resize = [
        '.slide00',//一番目のスライダー
        '.slide01',//二番目のスライダー
        '.slide02',//三番目のスライダー
        '.slide03'//最後のスライダー
    ]
    $.each(slider_resize,function(index, value){
        $(window).on('load resize', function() {
            var w = $(window).width();
            var h = $(window).height();

            $(value).css({'width': w, 'height': h - 70})
        });
    })
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

イベントと処理の概念が抜けているのでしょうか?
なんだか変な実装になっていますね。

本問題を対応するのもそうですが、
それ以外にも修正しておいた方がよさそうです。
// windowのリサイズイベントを設定する
// windowは一個しかないのだから一回だけ行う。
$(window).bind('resize', function() {// bindの方が新しい書き方です、可能ならばこっちを使いましょう
            
            var w = $(window).width(); 
            var h = $(window).height(); 
            
            var slider_resize = [ 
                    '.slide00',//一番目のスライダー 
                    '.slide01',//二番目のスライダー 
                    '.slide02',//三番目のスライダー 
                    '.slide03'//最後のスライダー 
                ] 
                
            // 各スライダーに処理を行う
            $.each(slider_resize,function(index, value){ 
                $(value).css({'width': w, 'height': h - 70}) ;
            });
        }).trigger('resize');// 設定したイベントを一度だけ動かす 
                             // このイベント設定の時点でloadイベントは終わっているかもしれないので使わない。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/02 18:31

    ご回答有難うございました。
    解決した後で申し訳ないのですが、もしお時間がありましたらご回答お願いします。

    bindを使うということですが、onよりbindのほうが新しいのですか。
    参考にしている書籍等では、bindは使わずonを使うよう指導していました。

    >>イベントと処理の概念が抜けているのでしょうか?
    >>なんだか変な実装になっていますね。
    イベントというのは、とある処理を行うのに必要なユーザーの行動のこと、処理は言葉通りだと思うのですが、二つの要素がソースにうまいこと落とし込めていないということなのでしょうか。具体的にどの部分が問題だったのでしょうか。

    キャンセル

+1

ちょっと別件にはなりますが、resizeイベントは発火が激しいので、
その中の処理が大きいと、すごく重くなってしまったりします。
その時は下記のような書き方をすると、resizeイベントが落ち着いた時のみ実行出来ます。

覚えておいて損は無いと思います。

var resizeFunc = function resizeFunc() {
  // リサイズした時に走る処理
  console.log('resized');
};

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(resizeFunc, 200);
});

// 読み込み時に一度処理
resizeFunc();

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15864questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6521questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。