1

I've run into a strange problem here:
I created today a mousemove horizontal gallery.

The gallery works PERFECTLY locally, online, but only in: Safari, Opera, Mozilla, Chrome.
IE won't even think about moving my gallery.

jSfiddle demo

Here is the complete code example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">

*{padding:0px;margin:0px;}
body{
    font-family:Century Gothic;
    background:#000;
    font-size:15px;
    color:#fff;
}

/* ***** mmGallery ***** */

#mmGallery_container{
    position:relative;
    margin:20px auto;
    height:120px;
    width:500px;
    overflow:hidden;
}
#mmGallery{
    cursor:col-resize;
    position:relative;
}
#mmGallery img{
    position:relative;
    float:left;
}

#test{
position:relative;
width:500px;
margin:0 auto;
}

</style>
<script type="text/javascript">
$(document).ready(function() {

    // auto-SET mmGallery_container WIDTH ()
    $(window).load(function(){
        sumW = 0;
        $('#mmGallery img').each(function(){
            sumW += $(this).width(); // collect all images widths
            $('#mmGallery').width(sumW);//SET gallery WIDTH!
        });     
        // Calculate 'compensation speed': width difference between the gallery container and the gallery
        wDiff1 = $('#mmGallery_container').width();
        wDiff2 = $('#mmGallery').width();
        wDiff = (wDiff2/wDiff1)-1;  //(-1 is for the already existant container width)      
    });
    //#

    $("#mmGallery_container").mousemove(function(e) {

        MouseRelXpos = (e.pageX - this.offsetLeft); // = mouse pos. 'minus' offsetLeft of this element

        //################## TEST (delete this)
        countCh = $('#mmGallery').children().length;
        offL = this.offsetLeft;
        $('#test').html( 
            'mmGallery offsetLeft: ' + offL + 
            '<br>Mouse Right Relative position: ' + MouseRelXpos + 'px' +
            '<br>Retrieved: ' + countCh + ' childrens inside div#mmGallery.' +
            '<br>mmGallery width: ' + sumW + 'px width. (Sum of all image widths)' +
            '<br>Compensation Speed: ' + wDiff
        );
        //####################### END TEST
    });

    var xSlider = $("#mmGallery");  // cache 
    var posX = 0;
    setInterval(function(){
        posX += (- MouseRelXpos - posX) / 14; // 14 = speed (higher val = slower animation)
        xSlider.css({marginLeft:  Math.round(posX * wDiff) +'px' }); // instead 'marginLeft' use 'left' for absolute pos. #mmGallery
    }, 10); // 10 = loop timeout

});

</script>

</head>
<body>

<div id="mmGallery_container">
    <div id="mmGallery">
        <img src="http://dummyimage.com/110x120/cf5/fff"/>
        <img src="http://dummyimage.com/250x120/eee/fff"/>
        <img src="http://dummyimage.com/117x120/ddd/fff"/>
        <img src="http://dummyimage.com/90x120/ccc/fff"/>
        <img src="http://dummyimage.com/250x120/cf0/fff"/>
        <img src="http://dummyimage.com/238x120/dcd/fff"/>
        <img src="http://dummyimage.com/115x120/333/fff"/>
        <img src="http://dummyimage.com/250x120/777/fff"/>
        <img src="http://dummyimage.com/250x120/133/fff"/>
        <img src="http://dummyimage.com/315x120/f00/fff&text=last+element"/>

    </div>

</div>

<div id="test"></div>

</body>
</html>
1
  • FYI: Accept+Upvote is 25 points, not 35.
    – jrn.ak
    Commented May 27, 2011 at 23:44

1 Answer 1

1

just fyi. Remove the $(document).ready(function() { }); and it works fine is JSbin

Ok I have this figured out. IE wants to run the interval right away and in the interval you use the variable MouseRelXpos which is not set until mousemove gets triggered. The result is that the variable in undefined, so the script crashes. Simply add this to the beginning of your JS:

   var MouseRelXpos = 0;  

This will give the variable an initial value and prevent the script from crashing in IE. I tested in in jsfiddle and it works perfect. Performance in IE isn't great though, but that's another story. :)

3
  • NICE! +1 (don't know why but now works in JSfiddle too ;) that is half-a-help! There's still the unexplainable IE7,8, issue (not tested on 9) THANK YOU VERY MUCH! Commented May 28, 2011 at 0:36
  • AAAAARRRRRGH! I don't know how I missed that! THANKS! BTW, I removed all the document.ready and window.load, and wrapped all together into a window.load adding the var MouseRelXpos = 0; and now the performance is brilliant! Commented May 28, 2011 at 0:58
  • may you add my portion of comment to the answer? ('Cause if I just remove document.ready the script won't work locally!!! ) Commented May 28, 2011 at 1:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.