I have a scrolling menu in jquery that scrolls vertically on mouseover: (part of it is hidden until scrolled into view)
<script type="text/javascript">
$(document).ready(function() {
//Scroll the menu on mouse move above the #sidebar layer
$('#sidebar').mousemove(function(e) {
//Sidebar Offset, Top value
var s_top = parseInt($('#sidebar').offset().top);
//Sidebar Offset, Bottom value
var s_bottom = parseInt($('#sidebar').height() + s_top);
//Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
var mheight = parseInt($('#menu li').height() * $('#menu li').length);
//Calculate the top value
//This equation is not the perfect, but it 's very close
var top_value = Math.round(((s_top - e.pageY) / 100) * mheight / 2);
//Animate the #menu by chaging the top value
$('#menu').animate({
top: top_value
}, {
queue: false,
duration: 5000
});
});
});
</script>
and then I am using a search and highlight jquery script to search for a name in the scrolling menu:
<script type="text/javascript">
$(function() {
$('#text-search').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();)
// remove any old highlighted terms
$('#sidebar').removeHighlight();
// disable highlighting if empty
if (searchTerm) {
// highlight the new term
$('#sidebar').highlight(searchTerm);
}
});
});
</script>
However my issue is: when i type in the search term, it will only highlight the menu items that are visible. How do I get jquery to automatically scroll to the searched term within the div?