SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

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

  3. #3
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  5. #5
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by spacefront View Post
    i am also sitting on these site.
    Do you mean working??

    Quote Originally Posted by spacefront View Post
    I try the onscroll handler but I didn´t found a result.
    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?

  7. #7
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

    Code:
    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/1...hout-scrollbar

  9. #9
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    we will have a look into that! Looks promising.

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •