Решение JQuery работает только в сафари

Question

Это навигационное решение работает только в сафари, я думал, jquery работает одинаково во всех браузерах.http://notre.co/nav/

Он прокручивает div по горизонтали в зависимости от положения мыши с помощью jquery.

Есть ли простое исправление или мне нужно найти другой способ?

Большое спасибоиз Швеции!

Answer 1

Как я уже говорил в моем комментарии, ваша разметка содержит ошибки - поэтому дерево dom не такое, как вы ожидаете.

 <li> //opening li
    <center><h1 class="author">danbychoi</h1></center>

    <div class="image"> //opening div
        <a href="http://danbychoi.com/2011/03/28/no-diggity/" target="_blank">
        <img src="http://notre.co/timthumb.php?src=http://danbychoi.com/files/2011/03/Snapshot_20110328_7-Kopi-copy.jpg&h=180&w=226&zc=1&a=t" border="0"></a>
        <div class="text">
            <center>
                <h1 class="author">1 hour ago</h1>
                <a href="http://danbychoi.com/2011/03/28/no-diggity/" target="_blank">
                    <h1 class="fontface">No Diggity</h1>
                </a>
            </center>

    </li> 
          //wrong order here
  </div>

</div>

с тобой все в порядке

Answer 2

Я не совсем уверен, что понимаю, что он должен делать; Однако я вижу большую вещь, которая может вызывать проблемы. Попробуйте поместить второй javascript на страницу в функции $(document).ready, чтобы у вас был один большой скрипт, который выглядит следующим образом:

$(document).ready(function() {
    $('img').each(function() {
        $(this).hover(function() {
            $(this).stop().animate({ opacity: 0.3 }, 200);
        },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 800);
       });
    });
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 ulPadding = 15;

    //Get menu width
    var divWidth = div.width();

    //Remove scrollbars
    div.css({overflow: 'hidden'});

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

      //As images are loaded ul width increases,
      //so we recalculate it each time
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

      var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });
});

Второй JavaScript может работать не так, как сейчас, потому что он запускается до загрузки остальной части документа.