Rectangle 27 7

Here's what I put together from the info provided... works with the mousewheel, swiping and clicking on the top and bottom numbers. Infinite as requested of course. No special perspective style (yet) but I thought it looked quite decent as is. Could still be an option naturally. Didn't use the plugin I linked to in the comments or requestAnimationFrame but jQuery animate() is quite a good tool for this. The library has great cross browser support (that's it's strength actually), all it needs is a link to it for the JavaScript to be able to get executed. You could use a CDN, this version also works for IE8- :

For the best cross browser support on using the mousewheel, this plugin was included :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

Just a basic parent and styling with spans for each number, a few prepended in case of going up.

$(function() {

var gate = $(window),
cog = $('#rotator'),
digit = cog.find('span'),
slot = digit.eq(0).height(),
base = 1.5*slot,
output = $('#result'),
up;

cog.fadeTo(0,0);

gate.on('load', function() {

	setTimeout(interAction, 50);
});

function interAction() {

	output.text(0);

	cog.scrollTop(base).fadeTo(0,1).mousewheel(function(turn, delta) {

		if (isBusy()) return false;

		delta < 0 ? up = true : up = false;

		newNumber();

		return false;
	});

	digit.on('touchstart', function(e) {

		var touch = e.originalEvent.touches,
		begin = touch[0].pageY, swipe;

		digit.on('touchmove', function(e) {

			var contact = e.originalEvent.touches,
			end = contact[0].pageY,
			distance = end-begin;

			if (isBusy()) return;

			if (Math.abs(distance) > 30) {
			swipe = true;
			distance > 30 ? up = true : up = false;
			}
		})
		.add(gate).one('touchend', function() {

			if (swipe) {
			swipe = false;
			newNumber();
			}

			digit.off('touchmove').add(gate).off('touchend');
		});
	})
	.on('mousedown touchstart', function(e) {

		if (e.which && e.which != 1) return;

		var item = $(this).index();

		if (item == 1 || item == 3) {

		digit.one('mouseup touchend', function() {

			var same = item == $(this).index();

			if (isBusy() || !same) return cancelIt();

			item == 1 ? up = true : up = false;

			newNumber();

			return cancelIt();
		});
		}

		return false;
	});
}

function isBusy() {

	return cog.is(':animated');
}

function cancelIt() {

	digit.off('mouseup touchend');

	return false;
}

function newNumber() {

	var aim = base;

	up ? aim -= slot : aim += slot;

	cog.animate({scrollTop: aim}, 250, function() {

		up ? digit.eq(9).prependTo(cog) : digit.eq(0).appendTo(cog);

		cog.scrollTop(base);

		digit = cog.find('span');

		output.text(digit.eq(2).text());
	});
}
});
body {
  font-family: "Times New Roman";
  background: grey;
}

#ticker {
  width: 150px;
  text-align: center;
  margin: auto;
}

#rotator {
  height: 140px;
  background-image: url(//i.imgsafe.org/2d8949191f.png);
  background-size: 100% 100%;
  margin: 0 0 10px;
  overflow: hidden;
}

#rotator span {
  width: 100%;
  height: 50%;
  display: inline-block;
  font-size: 50px;
  line-height: 70px;
  cursor: default;
}

#result {
  height: 30px;
  font-size: 20px;
  color: white;
  line-height: 30px;
  box-shadow: 0 0 3px black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

<div id="ticker">
 <div id="rotator">
   <span>8</span>
   <span>9</span>
   <span>0</span>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
   <span>6</span>
   <span>7</span>
 </div>
 <div id="result"></div>
</div>

Pretty straightforward, animates the scroll position up or down and then appends or prepends the first or last number depending on the direction. The duration of the animation can be set here :

cog.animate({scrollTop: current}, 250, function() {

Updated - now has swipe support for mobile devices (even tested on early Android), the mousewheel plugin instead of relying on the wheel event and added a div where count is kept. Plus minor tweaks.

Meanwhile I've also made a demo that allows to have multiple tickers. It can be found here :

Thats amazing! Its working really well! The touchstart seems to be very fast/responsive , Im really curious to see how it would look with swipe support on my phone and tablet, would it be possible to add this to your example as well if its not too much trouble?

Im not sure what the wheel event is, would its effect look much different than what youve currently made? If its a relatively new thing does that mean that older browsers wouldnt be able to use it? Ideally Id like the method used to move the wheel to be widely supported across all browsers and devices, and to keep being supported going into the future.

I was wondering, with your example, is it possible to grab the selected number and send it to my database? By this I mean that Id like to have a div below the wheel which contains a button that when pressed will send the selected number to my database by an ajax post linked to a php script. In the first example in my question the selected number was called currentPosition, and it was placed inside the div called value here: currentPosition = targetPosition; document.getElementById("value").innerHTML = "Value: " + currentPosition;...

the number appearing in this div ("value") would change automatically whenever the wheel was moved. Im able to send the contents of this div to my database on click of a submit button, but I was wondering what the equivalent of currentPosition is in your code? Thanks so much again for your help, it looks great!

Looked at it closely and think all requirements are incorporated in the update... but been tweaking it a bit since I posted that. I may need to make another edit to the answer but I'll do that when there's nothing left to be changed. I'd really like to leave a good script here but don't wanna overdo it either.

javascript - How to make a HTML5 spinning list/rotating wheel selector...

javascript html css html5 animation
Rectangle 27 0

You defined e, but you use event.

<body onmousedown="aabb(event);">
function aabb (event) { 
    event.preventDefault(); 
}

But since you are using jQuery, why are you not doing it the jQuery way?

$(document.body).on("mousedown", function (e) { e.preventDefault(); } );

Doesen't work even with it.

What does not work? Does the function get called?

In Chrome and IE works fine but in Firefox? No.

javascript - Disable middle mouse click and drag function in Firefox -...

javascript jquery function firefox mousewheel
Rectangle 27 0

There's no direct function in jQuery for that.

That's what I use :

window.addEventListener("mousewheel", mousewheel, false); // chrome
window.addEventListener("DOMMouseScroll", mousewheel, false); // firefox

(mousewheel is the name of a function)

If you want the wheel to be handled only when the mouse pointer is over an element, do this :

$myElement.mouseenter(function() {
    window.addEventListener("mousewheel", mousewheel, false); // chrome
    window.addEventListener("DOMMouseScroll", mousewheel, false); // firefox
}).mouseleave(function() {
    window.removeEventListener("mousewheel", mousewheel, false);// chrome
    window.removeEventListener("DOMMouseScroll", mousewheel, false);// firefox
});

i cant understand your solution. could you please explain in more ?

The wheel event is sent only to the window. That's why I have to bind/unbind in order to manage the wheel only on some elements.

whether this works only in chrome and firefox and not IE ?

i have used your code but not working

javascript - mousewheel start and stop function in jquery - Stack Over...

javascript jquery mousewheel
Rectangle 27 0

OP wants to prevent the default action, not a handler he has attached.

Actually i didn't can you give me example in my situation?

javascript - Disable middle mouse click and drag function in Firefox -...

javascript jquery function firefox mousewheel
Rectangle 27 0

Here you can see how to intercept mousewheel up and down: http://jsfiddle.net/ykv5S/9/

$('#test').bind('mousewheel', function(event, delta) {
    var dir = delta > 0 ? 'Up' : 'Down';
    $("#output").html(dir)
});

Found a similar question on SO: have a look here, maybe is useful:

sorry am not asking about mousewheel up and down. am asking about mousewheel start and stop

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - mousewheel start and stop function in jquery - Stack Over...

javascript jquery mousewheel