1 Replies - 1576 Views - Last Post: 30 December 2010 - 11:20 PM

#1 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 163
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Mouse wheel event

Posted 29 September 2010 - 11:54 AM

Description: Read the comments carefully.Register an HTML element for a mouse wheel event.
Tested on Windows - IE 8,FF 3.6, Opera 10.6, Chrome 6, Safari 5.
function mouseWheel() {
	var self=this;  /*Local variable referenced to 'this'*/
	
	/*Event handlers*/
	/*Mouse wheel functions*/

	//Default mouse wheel callback function
	//Public access
	self.wheelCallback = function(event,object,delta){
		/*Override this function and write your code there*/
		/*
			delta=-1 when mouse wheel is rolled backwards (towards yourself)
			delta=1 when mouse wheel is rolled forward (away from one's self)
		*/
	}
	
	//Mouse wheel event handler
	//Local access
	var wheelHandler = function (event){
		var delta = 0;
		if (!event) //For IE
			event = window.event;
		if (event.wheelDelta) 	//IE
		{
			delta = event.wheelDelta/120;
			//if (window.opera) delta = -delta; //for Opera...hmm I read somewhere opera 9 need the delta sign inverted...tried in opera 10 and it doesnt require this!?
		}
		else if (event.detail) //firefox
			delta = -event.detail/3;

		if (event.preventDefault)
			event.preventDefault();
		event.returnValue = false;
		if (delta)
			self.wheelCallback(event,self,delta);	//callback function
	}
	//Mouse wheel initialization
	self.init = function(object,callback) {
		if (object.addEventListener) //For firefox
			object.addEventListener('DOMMouseScroll', wheelHandler, false); //Mouse wheel initialization
		//For IE
		object.onmousewheel = wheelHandler; //Mouse wheel initialization
		self.wheelCallback=callback;
	}
}

/*Example usage*/
//Within the body element, create a HTML div with id="test" and try the following:
function display(event,object,delta) {
    alert(delta);
}
var obj=new mouseWheel();
obj.init(document.getElementById("test"), display);


Is This A Good Question/Topic? 0
  • +

Replies To: Mouse wheel event

#2 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 163
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Mouse wheel event

Posted 29 September 2010 - 11:54 AM

Description: Read the comments carefully.Register an HTML element for a mouse wheel event.
Tested on Windows - IE 8,FF 3.6, Opera 10.6, Chrome 6, Safari 5. Snippet updated.
<html>
    <head>
        <script type="text/javascript">
            function mouseWheel() {
                var self=this;  /*Local variable referenced to 'this'*/
                
                /*Event handlers*/
                /*Mouse wheel functions*/

                //Default mouse wheel callback function
                //Public access
                self.wheelCallback = function(event,object,delta){
                    /*Override this function and write your code there*/
                    /*
                        delta is negative when mouse wheel is rolled backwards (towards yourself)
                        delta is positive when mouse wheel is rolled forward (away from one's self)
                    */
                }
                
                //Mouse wheel event handler
                //Local access
                var wheelHandler = function (event){
                    var delta = 0;
                    if (!event) //For IE
                        event = window.event;
                    if (event.wheelDelta) 	//IE,Opera,Chrome,Safari
                    {
                        delta = event.wheelDelta/120;
                        //if (window.opera) delta = -delta; //for Opera...hmm I read somewhere opera 9 need the delta sign inverted...tried in opera 10 and it doesnt require this!?
                    }
                    else if (event.detail) //Firefox
                        delta = -event.detail/3;

                    if (event.preventDefault)
                        event.preventDefault();
                    event.returnValue = false;
                    if (delta)
                        self.wheelCallback(event,self,delta);	//callback function
                }
                //Mouse wheel initialization
                self.init = function(object,callback) {
                    if (object.addEventListener) //For Firefox,Opera,Chrome,Safari
                        object.addEventListener('DOMMouseScroll', wheelHandler, false); //Mouse wheel initialization
                    //For IE
                    object.onmousewheel = wheelHandler; //Mouse wheel initialization
                    self.wheelCallback=callback;
                }
            }

            /*Example usage*/
            //Within the body element, create a HTML div with id="test" and try the following:
            function display(event,object,delta) {
                alert(delta);
            }

            /*Example usage*/
            //Within the body element, create a HTML div with id="test" and try the following:
            function display(event,object,delta) {
                alert(delta);
            }
        </script>
    </head>
    <body>
        Roll mouse wheel over the rectangular region below:
        <div id="test" style="width: 100px; height: 100px; background-color: #98BF21"></div>
        <script type="text/javascript">
            var obj=new mouseWheel();
            obj.init(document.getElementById("test"), display);
        </script>
    </body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 163
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Mouse wheel event

Posted 29 September 2010 - 11:54 AM

Description: 1) Copy and paste the code into a html file and try it.
2) Read the comments carefully.Register an HTML element for a mouse wheel event.
Tested on Windows - IE 8,FF 3.6, Opera 10.6, Chrome 6, Safari 5. Snippet updated.
<html>
    <head>
        <script type="text/javascript">
            function mouseWheel() {
                var self=this;  /*Local variable referenced to 'this'*/
                
                /*Event handlers*/
                /*Mouse wheel functions*/

                //Default mouse wheel callback function
                //Public access
                self.wheelCallback = function(event,object,delta){
                    /*Override this function and write your code there*/
                    /*
                        delta is negative when mouse wheel is rolled backwards (towards yourself)
                        delta is positive when mouse wheel is rolled forward (away from one's self)
                    */
                }
                
                //Mouse wheel event handler
                //Local access
                var wheelHandler = function (event){
                    var delta = 0;
                    if (!event) //For IE
                        event = window.event;
                    if (event.wheelDelta) 	//IE,Opera,Chrome,Safari
                    {
                        delta = event.wheelDelta/120;
                        //if (window.opera) delta = -delta; //for Opera...hmm I read somewhere opera 9 need the delta sign inverted...tried in opera 10 and it doesnt require this!?
                    }
                    else if (event.detail) //Firefox
                        delta = -event.detail/3;

                    if (event.preventDefault)
                        event.preventDefault();
                    event.returnValue = false;
                    if (delta)
                        self.wheelCallback(event,self,delta);	//callback function
                }
                //Mouse wheel initialization
                self.init = function(object,callback) {
                    if (object.addEventListener) //For Firefox,Opera,Chrome,Safari
                        object.addEventListener('DOMMouseScroll', wheelHandler, false); //Mouse wheel initialization
                    //For IE
                    object.onmousewheel = wheelHandler; //Mouse wheel initialization
                    self.wheelCallback=callback;
                }
            }

            /*Example usage - First make a callback function...*/
            //Within the body element, create a HTML div with id="test" and try the following:
            function display(event,object,delta) {
                alert(delta);
            }
        </script>
    </head>
    <body>
        Roll mouse wheel over the rectangular region below:
        <div id="test" style="width: 100px; height: 100px; background-color: #98BF21"></div>
        <script type="text/javascript">
            //...and then make a mouseWheel object and pass the HTML element and callback function
            var obj=new mouseWheel();
            obj.init(document.getElementById("test"), display);
            //Done!
        </script>
    </body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 163
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Mouse wheel event

Posted 29 September 2010 - 11:54 AM

Description: 1) Copy and paste the code into a html file and try it.
2) Read the comments carefully.Register an HTML element for a mouse wheel event.
Tested on Windows - IE 8,FF 3.6, Opera 10.6, Chrome 6, Safari 5. Snippet updated.
<html>
    <head>
        <script type="text/javascript">
			function mouseWheel(element, callback, context) {
				//Mouse wheel event handler
				var wheelHandler = function (event) {
					var delta = 0;
					event = event || window.event;
					if (event.wheelDelta) { //IE
						delta = event.wheelDelta/120;
					} else if (event.detail) { //firefox
						delta = -event.detail/3;
					}
					
					if (event.preventDefault) {
						event.preventDefault();
					}
					event.returnValue = false;
					if (delta) {
						callback.call(context || this, event, delta); //callback function
					}
				}

				if (element.addEventListener) { //For firefox
					element.addEventListener('DOMMouseScroll', wheelHandler, false); //Mouse wheel initialization
				} else if (element.attachEvent) { //For IE
					element.attachEvent('onmousewheel',wheelHandler); //Mouse wheel initialization
				}
				return wheelHandler;
			}
			function removeMouseWheel(element, eventHandler) {
				if (element.removeEventListener) {
					element.removeEventListener('DOMMouseScroll',eventHandler,false);
				} else if (element.detachEvent) {
					element.detachEvent('onmousewheel',eventHandler);
				}
			}
			/*Example usage - First make a callback function...*/
			//Within the body element, create a HTML div with id="test" and try the following:
			function display(event, delta) {
				alert(delta);
			}
        </script>
    </head>
    <body>
        Roll mouse wheel over the rectangular region below:
        <div id="test" style="width: 100px; height: 100px; background-color: #98BF21"></div>
        <script type="text/javascript">
            //Pass the HTML element and callback function to mouseWheel function and get back the new callback.
            var handler = mouseWheel(document.getElementById("test"), display);
            //Done! To remove listener: removeMouseWheel(document.getElementById("test"), handler);
        </script>
	</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 163
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Mouse wheel event

Posted 30 December 2010 - 11:20 PM

Edited: Improved comments and corrected a typo.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1