CODEWITHSUNDEEP
javascriptdom-events
Javaish
Javaish

Reputation: 179

Mouseover - How do i trigger it multiple times?

I am trying to do a horizontal image slider.

When I do a mouseover it will only do the .scrollLeft / trigger the function once and move the images 1px which is expected but how do I make it run as long as the mouse is on the mouseover event?

Sample site here

Answers sample here

HTML

    <div class="flex">
        <div id="slideLeft" class="center-c slideLeft"><div class="left"></div></div>
        <div id="slideRight" clasS="center-c slideRight"><div class="right"></div></div>
        <div id="imagesWrapper" class="imagesWrapper flex">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
            <img src="img/5.jpg">
            <img src="img/6.jpg">
            <img src="img/7.jpg">
            <img src="img/8.jpg">
            <img src="img/9.jpg">
            <img src="img/10.jpg">
            <img src="img/11.jpg">
            <img src="img/12.jpg">
            <img src="img/13.jpg">
        </div>
    </div>

Javascript

                //IMAGE SCROLL
                var slideLeft = document.getElementById('slideLeft');
                var slideRight = document.getElementById('slideRight');
                var imagesWrapper = document.getElementById('imagesWrapper');
    
                    slideLeft.addEventListener('mouseover', profileMouseOverLeft, false);
                    slideRight.addEventListener('mouseover', profileMouseOverRight, false);
    
    
                function profileMouseOverLeft() {
                    imagesWrapper.scrollLeft += -1;
//                profileMouseOverLeft();
                }
                function profileMouseOverRight() {
                    imagesWrapper.scrollLeft += 1;
//                profileMouseOverRight();
                }

If I call the functions inside it will just go straight to the end immediately.

And if I change the functions to this, they will just run forever...

            function profileMouseOverLeft() {
//                alert("Hi");
                imagesWrapper.scrollLeft += -1;
//                profileMouseOverLeft();
                setInterval(function(){
                    alert("Hello");
                    profileMouseOverLeft();
                }, 100);
            }
            function profileMouseOverRight() {
//                alert("Hello");
                imagesWrapper.scrollLeft += 1;
                setInterval(function(){
                    profileMouseOverRight();
                }, 100);
//                profileMouseOverRight();
            }

Edit the final JS looks like this and works pretty well

            //IMAGE SCROLL
            var slideLeft = document.getElementById('slideLeft');
            var slideRight = document.getElementById('slideRight');
            var imagesWrapper = document.getElementById('imagesWrapper');
            var profileRightInterval;
            var profileLeftInterval;
            
            slideLeft.addEventListener('mouseover', profileMouseOverLeft, false);
            slideRight.addEventListener('mouseover', profileMouseOverRight, false);


            function profileMouseOverLeft() {                
                profileLeftInterval = setInterval(function () {
                    profileMoveLeft();
                }, 25);
            }
            function profileMouseOverRight() {
//                alert("Musen er nu inde");
                profileRightInterval = setInterval(function () {
                    profileMoveRight();
                }, 25);
            }
            function profileMoveLeft(){
                imagesWrapper.scrollLeft += -10;
            }
            function profileMoveRight(){
                imagesWrapper.scrollLeft += 10;
            }
            slideLeft.addEventListener('mouseout', function (e) {
                clearInterval(profileLeftInterval);
            });
            slideRight.addEventListener('mouseout', function (e) {
                clearInterval(profileRightInterval);
            });

Upvotes: 1

Views: 310

Answers (2)

SamB
SamB

Reputation: 151

You need combination of mouseover and mouseout event. On mouseover event, use setInterval as you did.

Then in, mouseout event, use clearInterval() function to interrupt your SetInterval function.

Upvotes: 1

samanime
samanime

Reputation: 26557

What you'll want to use is a combination of mouseover, mouseout, and mousemove.

In a nutshell, the process is: - on mouseover, add the mousemove event and record the mouse's x and y - on mouseout, remove the mousemove event - on mousemove, compare the x and y to the previous step. If it's moved so much, do something.

In your case, it looks like you want to move it every 1px, so you would do something every step.

It'd be something like this:

let lastX, lastY;
function mouseMoveFunc(e) {
  const diffX = e.clientX - lastX;
  const diffY = e.clientY - lastY;
  lastX = e.clientX;
  lastY = e.clientY;

  // do something with diffX and diffY
}

slideLeft.addEventListener('mouseover', function (e) { 
  slideLeft.addEventListener('mousemove', mouseMoveFunc);
  lastX = e.clientX;
  lastY = e.clientY;
}

slideLeft.addEventListener('mouseout', function (e) {
  slideLeft.removeEventListener('mousemove', mouseMoveFunc);
}

Now, every time you move the mouse, the mousemove function will trigger and you'll be able to do something with the difference (how much the mouse moved between each tick).

It's important to add and remove the mousemove event because it is a relatively expensive event that can trigger a lot, and you don't want it happening if it doesn't need to.

Upvotes: 0

Related Questions