I have a functioning sample of a scrollable with item numbers 1 - 24. I am trying to retrieve the value of the current item, but my attempts to use alert have failed. How can this be achieved? Here is my code:
UPDATE QUESTION: I managed to obtain the index of the scrollable value, but I am struggling to find a way to get the value of every index. Is there any method to retrieve the value of each index in the code below?
UPDATE:
<script>
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
$('#scroll').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
alert('Down');
} else {
//scroll up
console.log('Up');
alert('Up');
}
//prevent page fom scrolling
return false;
});
});
</script>
I have added this to my JavaScript and it is working now, but it only outputs "UP" and "DOWN". I cannot figure out how to get the exact value of the div. Any suggestions?
<!DOCTYPE html>
<html>
<title>scroll</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style type="text/css">
/* root element for scrollable */
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
/*
vertical scrollables have typically larger height than width but
not now
*/
height: 17px;
width: 700px;
}
/* root element for scrollable items */
.scrollable .items {
position:absolute;
/* this time we have very large space for the height */
height:20em;
}
</style>
</head>
<body>
<!-- root element for scrollable -->
<div id="scroll" class="scrollable vertical">
<!-- root element for the items -->
<div class="items" style="top: 0px;">
<div>
<div class="item">
1
</div>
</div>
<div>
<div class="item">
2
</div>
</div>
<div>
<div class="item">
3
</div>
</div>
<!-- Add more item values here -->
</div>
</div>
<!-- Additional script for handling scrollable content -->
<script>
$(function() {
// Initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
</script>
</body></html>