Код jQuery работает в Safari, но не в Firefox

Question

Я пытаюсь использовать смесь jQuery и CSS, чтобы песок в песочных часах казался текучим, когда вы прокручиваете страницу вниз. В основном у меня есть два «песочных» изображения, и я использую jQuery для изменения высоты своих контейнеров по мере прокрутки пользователем.

<!-- Load jQuery -->
  <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- Handle Hourglass Scrolling -->
  <script type="text/javascript" charset="utf-8">
   $(document).ready(function(){

    // Set value of topStart and bottomStart to equal to y-position of the equivilent divs
    var topStart = parseInt($('#top-sand').css('top'));
    var bottomStart = parseInt($('#bottom-sand').css('top'));

    // Calculate the maximum height of the sand relative to the window size
    var sandHeight = $(window).height()*0.22;

    // setValues sets positions based on window size
    function setValues() {
     topStart = parseInt($('#top-sand').css('top'));
     bottomStart = parseInt($('#bottom-sand').css('top'));
     sandHeight = $(window).height()*0.22;
     var hourglassWidth = $('#hourglass #outline img').css('width');
     var leftMargin = $(window).width()*0.5+ 320;

     $('#top-sand').height(22+"%");
     $('#top-sand img').height(sandHeight)
     $('#bottom-sand img').height(sandHeight)
     $('#hourglass').css({left:leftMargin+"px"})
     $('#trace').text(hourglassWidth)


     // contentMarginLeft = $('#hourglass #outline').width();
     //  $('#content').text(contentMarginLeft);
     // css({"margin-left": contentMarginLeft + "px"});
    };

    setValues();

    // This listens for a window scroll event and then handles the height and position of the sand in the Hourglass
       $(window).scroll(function () {

     // Calculating the position of the scrollbar
     var doc = $("body"), 
         scrollPosition = $("body").scrollTop(),
         pageSize = $("body").height(),
      windowSize = $(window).height(),
      fullScroll = pageSize - windowSize;
         percentageScrolled = (scrollPosition / fullScroll);

     // Calculating the Y-positions of the two sand piles
     var topPosition = topStart+(22*percentageScrolled);
     var bottomPosition = bottomStart-(22*percentageScrolled);

     // Updating the sand piles
          $('#top-sand').height(22-(22*percentageScrolled)+"%")
           .css({top: topPosition+"%"});
      $('#bottom-sand').height(22*percentageScrolled+"%")
          .css({top:bottomPosition+"%"});

       });

    // This listens for a window resize event and then reconfigures the layout
    $(window).bind('resize', function() {
     // Reconfigure layout
    });

     });
  </script>

В Safari все работает нормально (хотя время от времени бывает сбой, когда высота верхнего изображения изменяется, но его позиция y не меняется), но в Firefox он вообще не работает. Вы можете посмотреть сайт здесь http://www.chris -armstrong.com / ticktalk

Я довольно новичок в jQuery, поэтому прошу прощения, если это полная ошибка noob.

Заранее спасибо.

Answer 1

ОК, я получил это работает! Вам придется посмотреть на мой источник, чтобы увидеть, что я сделал, потому что я так сильно изменился, но в основе вашей проблемы лежит тот факт, что элемент «прокручиваемый» отличается на разных платформах / браузерах.

Иногда это элемент html, в других случаях это элемент body. Я использовал несколько строк кода из плагина scrollTo , чтобы позаботиться об этом. Я использовал CSS для позиционирования песочных часов. И я использовал цветные блоки div, чтобы создать видимость движения песка. Вам больше не нужно обрабатывать события изменения размера браузера (что может свести вас с ума в IE, поверьте мне:)

Вот демоверсия .

Я тестировал в Safari и FF на Mac, но он должен корректно работать в IE7 +.

Вот код jQuery (не включая фрагмент из scrollTo):

<script type="text/javascript">
  $(function(){
    var low      = 28,
        high     = 50,
        max      = 86.5,
        range    = high - low, 
        $mtop    = $("#mask-top"),
        $mbottom = $("#sandy-bottom")
        scroller = $()._scrollable(); // Uses part of the scrollTo plugin

    $(window).scroll(function(e){
      var scrollTop  = $(scroller).scrollTop(),
          bodyHeight = document.body.scrollHeight,
          itemHeight = $('#outline').outerHeight();

      var percentScrolled = scrollTop / (bodyHeight - itemHeight);
      percentScrolled = Math.floor(percentScrolled * 100) / 100;

      var newHeight = (range * percentScrolled);
      newHeight =  Math.floor(newHeight * 10) / 10;

      $mtop.height( (newHeight + low) + "%" );
      $mbottom.css( 'top', (max - newHeight) + "%" );
    })
  })
</script>

Вот обновленный HTML, который я перевел, чтобы стать ребенком body:

<div id="hourglass">
    <img id="outline" src="img/hourglass-outline.png" width="634" height"1080" alt="Hourglass Outline" />
    <!-- A new image I created based on your two-->
    <img id="sandy" src="hourglass-insides.png" width="634" height="1080" />
    <div class="mask" id="mask-top" ></div>
    <img id="sandy-bottom" src="hourglass-insides.png" width="634" height="1080" />
</div>

А для тех, кто хочет посмотреть, вот CSS, который я использовал для позиционирования песочных часов:

<style type="text/css" media="screen">
  #hourglass {
    left: 0; top: 0; bottom: 0; right: 0;
  }
  #outline, #sandy, #sandy-bottom {
    position: fixed;
    top: 0;
    height: 100%;
    left: 50% !important;
    margin: 0;
    margin-left: 215px;
    max-height: 100%;
    min-height: 100%;
    width: auto;
  }

  #sandy {
    top: -32%;
  }

  #sandy-bottom {
    top: 86.5%;
  }

  .mask {
    background: #262B28;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  #mask-top {
    top: 0;
    height: 28%;
  }
</style>

Answer 2

Несколько мыслей для размышления:

1. Предпочитают методы позиционирования jQuery для прямого доступа к значениям CSS. Например, используйте .offset(), .position() и т. Д. Вместо .css("top"). Методы jQuery более переносимы между браузерами и будут возвращать числа, а не строки. Смотри http://docs.jquery.com/CSS.

   Показательный пример: topStart = parseInt($('#top-sand').css('top')) выше и многие другие.

2. Если вам необходимо получить метрику позиционирования с помощью атрибута CSS, обязательно

   (1) всегда преобразовывать его в число, например с parseInt(). Строки JavaScript молча преобразуют - или нет - в числа неясным образом. Всегда четко указывайте, что вы хотите считать числом.

   (2) учитывает случай, когда в значении CSS есть единицы, например, как в '100px'.

   Пример: var hourglassWidth = $('#hourglass #outline img').css('width') выше.

3. Остерегайтесь дробных значений. В $('#hourglass').css({left:leftMargin+"px"}) выше, что происходит, если leftMargin не является целым числом (имеет десятичную точку?)

4. Лучше всего сделать один шаг с firebug и наблюдать, как переменные позиционирования меняются от строки к строке, и сравнивать с вашими ожиданиями.