jquery solution only works in safari

This navigation solution only works in safari, I thought jquery works the same way in all browsers. http://notre.co/nav/

It scrolls a div hor开发者_开发百科izontally depending on the mouse position using jquery.

Is there a easy fix or do I have to find another way?

Big thanks from sweden!

as i stated in my comment your markup is buggy - thus the dom tree isnt like you expect it.

 <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>

your js is ok

I'm not quite sure I understand what it should be doing; however, I see a big thing that could be causing problems. Try putting the second javascript on the page in the $(document).ready function so you'd have one big script that looks like this:

$(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);
    });
});

The second javascript may not be working as it is now because it's run before the rest of the document is loaded.