こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

読み込み直後からjavascriptを適用させたい

閲覧いただき、ありがとうございます。
先に質問をさせていただきましたが、根本的な部分について、解決に至っておりませんでしたため、
恐縮ですが、今一度お知恵をお借りさせていただきたいと思います。

タイトルに記述してありますが、ページを開いた直後はjavascriptが動作せず、
ブラウザサイズを変化させたときにのみ、javascriptが動作します。
これを、ブラウザを開いた直後から適用させたいのですが、
この記述ではリサイズ時に実行するようになっています。
かと言って、$(window).onloadを別途作成しても動作してくれません。
onload時にまず処理をし、リサイズ時に処理をさせるためには、
どのように書き換えれば良いのでしょうか。
if文で動作させるjavascriptを分ければ良いかとも思いますが、
ではonload時に書くべきjavascriptが考え付きません。
なにとぞご教示いただけますよう、お願い申し上げます。

以下情報
プログレッシブエンハンスメントのため、まずはモダンブラウザのみ対象。
文字数制限のため、最小状態に編集。

<script type="text/javascript">
$(window).resize(function(){
var h = $(window).height();
var w = h * 1.5;
//alert('縦幅' + h + 'なら横幅は' + w + 'pxになります');
var bodyW = document.getElementsByTagName('body');
var bW = bodyW.item(0);
bW.style.width = w + 'px';
var contentBox = document.getElementById('content-box');//別のjs適用の都合による分離
contentBox.style.width = w + 'px';
});
</script>
</head>
<body>
<div id="hdr">
</div>
<div id="content-box">
</div>
<div id="ftr">
</div>
</body>
</html>

CSS
body {
min-width: 1024px;
margin: 0 auto;
position: relative;
}
div#hdr {/*下段に表示*/
position: absolute;
top: 580px;
left: 0;
background: #ffffff;
width: 100%;
height: 100px;
z-index: 100;
background: #dff;
}
div#content-box {/*中段に表示*/
position: relative;/*別のjs用。できれば削除したいが、削除すると動作しないので現状維持。*/
position: absolute;
top: 20px;
left: 0;
min-width: 1024px;
height: 560px;
overflow: hidden;
}
div#ftr {/*上段に表示*/
position: absolute;
top: 0;
left: 0;
background: #fdf;
height: 20px;
width: 100%;
}

投稿日時 - 2014-01-13 19:26:41

QNo.8428328

すぐに回答ほしいです

質問者が選んだベストアンサー

全然試してないけど以下のようにすると動くんじゃないかな。
function onResize()とvar onResize = functionとか、$(function() {});の書き方などは私の好みでこうしているだけなので適宜良いように書き直していただきたい。
ごにょごにょの中身は一切いじってないっす。

<script type="text/javascript">
function onResize(){ //ごにょごにょを行うファンクションを定義
  var h = $(window).height();
  var w = h * 1.5;
  //alert('縦幅' + h + 'なら横幅は' + w + 'pxになります');
  var bodyW = document.getElementsByTagName('body');
  var bW = bodyW.item(0);
  bW.style.width = w + 'px';
  var contentBox = document.getElementById('content-box');//別のjs適用の都合による分離
  contentBox.style.width = w + 'px';
}

$(function () {
  $(window).resize(onResize); // ウィンドウサイズが変わったときにごにょごにょするようにイベントハンドラを登録
  onResize(); // ロード完了時にもごにょごにょする
});
</script>

投稿日時 - 2014-01-13 23:07:12

お礼

回答ありがとうございます。
バッチリでした!
誠にありがとうございます

投稿日時 - 2014-01-13 23:21:36

ANo.1

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問