CODEWITHSUNDEEP
jqueryscrollmousewheel
Matt
Matt

Reputation: 1

I need to convert the following mousewheel event into a callable function

#horiz would be any generic tag that I want to apply the code in bold to. I'm using jScrollPane and the jQuery MouseWheel library.

$("#horiz").mousewheel(function(event, delta) {
    **event.preventDefault();
    $(this).find(".jspPane").animate({"left": "+=" + (50 * delta) + "px"}, 0);
    $(this).find(".jspPane").css("left").replace(/[^-\d\.]/g, '') > 0 ? $(this).find(".jspPane").animate({"left": "0px"}, 0) : null;
    $(this).find(".jspPane").css("left").replace(/[^-\d\.]/g, '') < (($(this).find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $(this).css("width").replace(/[^-\d\.]/g, '')) * -1) ? $(this).find(".jspPane").animate({"left": (($(this).find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $(this).css("width").replace(/[^-\d\.]/g, '')) * -1) + "px"}, 0) : null;
    if($(this).find(".jspTrack").css("width").replace(/[^-\d\.]/g, '') - $(this).find(".jspDrag").css("width").replace(/[^-\d\.]/g, '') == $(this).find(".jspDrag").css("left").replace(/[^-\d\.]/g, '')) {
        //Track End - Right
    } else if ($(this).find(".jspDrag").css("left").replace(/[^-\d\.]/g, '') == 0) {
        //Track End - Left
    } else {
        //Track Mid - Anywhere between ends
    }**
});

Upvotes: 0

Views: 399

Answers (2)

user908335
user908335

Reputation:

You're applying this code via binding the .mousewheel event to a specific element via an Id (I hope you only have one element with id=horiz on the page). You can do this to any element on the page by using classes instead of and ID.

This would apply your function to the element with Id horiz and any element on the page with the class myMouseWheelBinding

$("#horiz, .myMouseWheelBinding").mousewheel(function(event, delta) { 
   //Your code here
});

or just leave off the id and use the class (don't forget to add the class to your horiz element)

$(".myMouseWheelBinding").mousewheel(function(event, delta) { 
   //Your code here
});

Html:

<div class="myMouseWheelBinding"...

Upvotes: 1

Skylar Anderson
Skylar Anderson

Reputation: 5703

Whenever you have a ton of calls you need to do on a specific DOM object, it's usually best to wrap the functionality into a jQuery plugin. Your code will be more maintainable in the long run.

$(document).ready(function() {

    $.extend({

      myMouseScrollable: function() {

        return this.each(function() {

          var $self = $self;
          var $jsPane = $self.find(".jsPane");
          var OnMouseScroll = function(event, delta) {

             $jsPane.animate({"left": "+=" + (50 * delta) + "px"}, 0);
             $jsPane.css("left").replace(/[^-\d\.]/g, '') > 0 ? $jsPane.animate({"left": "0px"}, 0) : null;
             $jsPane.css("left").replace(/[^-\d\.]/g, '') < (($self.find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $self.css("width").replace(/[^-\d\.]/g, '')) * -1) ? $jsPane.animate({"left": (($self.find("#scrollText").css("width").replace(/[^-\d\.]/g, '') - $self.css("width").replace(/[^-\d\.]/g, '')) * -1) + "px"}, 0) : null;
             if($self.find(".jspTrack").css("width").replace(/[^-\d\.]/g, '') - $self.find(".jspDrag").css("width").replace(/[^-\d\.]/g, '') == $self.find(".jspDrag").css("left").replace(/[^-\d\.]/g, '')) {
                  //Track End - Right
             } else if ($self.find(".jspDrag").css("left").replace(/[^-\d\.]/g, '') == 0) {
                  //Track End - Left
              } else {
                  //Track Mid - Anywhere between ends
              }**
          }

          $self.mousewheel(OnMouseScroll);


        });

      }

    });

  });

Now, whenever you need to apply this event to a new object you just:

$("#horiz").myMouseScrollable();

I took some optimization liberties with the code you had. It's always a good idea to cache your selectors, rather than use them over and over again.

in particular the repeat calls to $self.find('.jsPane');

Upvotes: 1

Related Questions