0

ロードされている css に依存するコードがいくつかあります。
フッターに JavaScript をロードする前に、ヘッダーに CSS をロードします。

でjavascriptを試しました$(document).ready



$(document).ready(function() {
  var bar_position, width;
  bar_position = $('body').height() - 38;
  width = $('body').width();
  console.log(bar_position);
  if (width <= 480) {
    console.log("Entered");
    $('#accounts-bar').css("top", bar_position);
  }
});

$(window).ready、を試し$(window).loadましたが、すべて失敗しました。

4

5 に答える 5

3

あなたのコードは本当にめちゃくちゃです (CoffeeScript を使用していない限り)。

$(function () {
    bar_position = $('body').height() - 38; //38 is the size of the bar 
    width = $('body').width();
    console.log(bar_position);
    if (width <= 480) { //480 is the mobile width
        console.log("Entered");
        $('#accounts-bar').css("top", bar_position);
    }
});
于 2012-07-31T19:27:21.473 に答える
0

ready イベントで十分です。

CSS スタイル プロパティの値に依存するスクリプトを使用する場合は、スクリプトを参照する前に、外部のスタイルシートを参照するか、スタイル要素を埋め込むことが重要です。

コードが読み込まれたアセットに依存している場合 (たとえば、画像のサイズが必要な場合)、代わりにコードを load イベントのハンドラーに配置する必要があります。

また、JavaScript が無効です。それがCoffeeScriptであると思われる場合、あなたは欠けています->：

$(document).ready ->
  bar_position = $('body').height() - 38 #38 is the size of the bar 
  width = $('body').width() 
  console.log(bar_position)
  if (width <= 480) #480 is the mobile width
    console.log("Entered");
    $('#accounts-bar').css("top", bar_position)
  return

JavaScript であると思われる場合は、さらに問題があります。

$(document).ready(function(){
    bar_position = $('body').height() - 38; //38 is the size of the bar 
    width = $('body').width(); 
    console.log(bar_position);
    if (width <= 480) //480 is the mobile width {
      console.log("Entered");
      $('#accounts-bar').css("top", bar_position);
    }
});
于 2012-07-31T19:32:19.203 に答える
0

JavaScript コメントは ではありません#。//

違う

bar_position = $('body').height() - 38 #38 is the size of the bar

右

bar_position = $('body').height() - 38 //38 is the size of the bar

そして、そのコードが実行されない他のエラーがたくさんあります。タグを見逃したと思いますが、これは純粋な JavaScript ではありません。これは、ブロック スコープのためにインデントされており、中かっこ/クロージャが全体的に欠落しているためです。

于 2012-07-31T19:25:07.963 に答える
0

CSS がヘッダーに読み込まれ、JS がフッターに読み込まれ、doc-ready にラップされているため、JS コードが実行される前に CSS が適用されている限り問題ありません。あなたの要素に幅がない理由は、それがdisplay: none;、または浮動要素のみを含むか、それらの線に沿った何かであると推測しています。つまり、これは CSS の問題であり、JS のタイミングの問題ではないと思います。Firebug/Chrome コンソールに移動して、問題の要素を選択し、その幅を取得してみてください。

于 2012-07-31T19:29:35.840 に答える