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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Q&A

解決済

2回答

3194閲覧

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

aaaaaaaa

総合スコア501

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2015/09/24 05:50

編集2015/09/24 08:03

下記のソースは、イベント名にある通り、ページを読み込んだ時点(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}) }); })

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

javascript

1var resizeFunc = function resizeFunc() { 2 // リサイズした時に走る処理 3 console.log('resized'); 4}; 5 6var timer = false; 7$(window).resize(function() { 8 if (timer !== false) { 9 clearTimeout(timer); 10 } 11 timer = setTimeout(resizeFunc, 200); 12}); 13 14// 読み込み時に一度処理 15resizeFunc();

投稿2015/09/29 06:46

rk7fd3s

総合スコア61

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

本問題を対応するのもそうですが、
それ以外にも修正しておいた方がよさそうです。

JavaScript

1// windowのリサイズイベントを設定する 2// windowは一個しかないのだから一回だけ行う。 3$(window).bind('resize', function() {// bindの方が新しい書き方です、可能ならばこっちを使いましょう 4 5 var w = $(window).width(); 6 var h = $(window).height(); 7 8 var slider_resize = [ 9 '.slide00',//一番目のスライダー 10 '.slide01',//二番目のスライダー 11 '.slide02',//三番目のスライダー 12 '.slide03'//最後のスライダー 13 ] 14 15 // 各スライダーに処理を行う 16 $.each(slider_resize,function(index, value){ 17 $(value).css({'width': w, 'height': h - 70}) ; 18 }); 19 }).trigger('resize');// 設定したイベントを一度だけ動かす 20 // このイベント設定の時点でloadイベントは終わっているかもしれないので使わない。

投稿2015/09/29 04:51

bigfatrat

総合スコア187

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aaaaaaaa

2015/10/02 09:31

ご回答有難うございました。 解決した後で申し訳ないのですが、もしお時間がありましたらご回答お願いします。 bindを使うということですが、onよりbindのほうが新しいのですか。 参考にしている書籍等では、bindは使わずonを使うよう指導していました。 >>イベントと処理の概念が抜けているのでしょうか? >>なんだか変な実装になっていますね。 イベントというのは、とある処理を行うのに必要なユーザーの行動のこと、処理は言葉通りだと思うのですが、二つの要素がソースにうまいこと落とし込めていないということなのでしょうか。具体的にどの部分が問題だったのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問