CarouFredSel.js — scroll content from anywhere

Hey y’all,

I am stuck! So I need some help to get this project finished. I hope you have some ideas…

The website I am talking about uses the CarouFredSel.js plugin for some light content rotation.
Now think of this content like flashcards. So they have a front an a back side. Hoover over a front and it turns to its backside. Move from the content area and it turns to the front. So far so good — that is up and running.

Now the real trouble is that I’d like to be able to scroll the content from anywhere the courser might just be.
Because right now the scrolling only does it’s job when the courser is over the CarouFredSel content area but this also
activates the “hoover turn to backside” effect. You see the problem…

What should I do? Is this even solvable? At this point I don’t mind a quick and dirty solution.

I am grateful for any tip, link, suggestion etc. ! Thank you all.

BTW have a look at what I am talking about so you might understand my problem better: http://goo.gl/ojZJK4

Hi there,

You already have “Zurück” and “Vorwärts” links which rotate the carousel. Isn’t that sufficient?

If not, then you could attach an onclick event handler to the body of your page.
When a click is registered, then you could check to ensure that it’s not on an element (rather on some whitespace), then programatically move the carousel forward.

$('body').click( function (e) { 
  if (e.target == this){
    $("#caroufredsel_next_14").trigger("click");
  } 
});

Hey Pullo,

true — there is a back and forth button, but this is only for now as its not fitting for the overall clean appearance.
The click is a viable option. Thanks for that.

Although I am really looking for a scroll only option as the main navigation for the carousel…

cheers

Oh ok, then what about attaching an onscroll handler to the document, which listens for the scroll event, then programatically moves the carousel backwards or forwards?

Hi Pullo

i am also sitting on these site. I try the onscroll handler but I didn´t found a result.
Have you a hint for me.

Thanks
alex

Hi,

Do you mean working??

Thinking about it, this would be rubbish for a touch device, so you’d have to detect the mouse wheel instead.

What have you tried so far?

Hi Pullo

yes i mean working.

I tried onscroll like here.

But i dons´t work because my body isn´t smaler then 100% (If i do ist smaller and put overflow to auto it will work- but these isn´t a solution)
I also try on mouse weehl but there is the same problem.

At the moment i put the click envent - it is better then nothing but not the final solution:

Thanks for helping

Hi,

You can use the following to detect when a user scrolls using the mouse wheel and in which direction:

function MouseWheelHandler() {
    return function (e) {
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        if (delta < 0) {
            console.log("Down");
        } else {
             console.log("Up");
        }

        return false;
    }
}

document.addEventListener("mousewheel", MouseWheelHandler(), false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);

I adapted this from code I found here: http://stackoverflow.com/questions/18880159/use-jquery-to-check-mousewheel-event-without-scrollbar

Hi Pullo,

we will have a look into that! Looks promising.

Thank you so far. We’ll keep you posted.