Home/ Questions/Q 5974341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:55:46+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0