I'm hoping to get a code that works something like this:
I would like to have two arrows on the left and right on the side of a box (no border on the box) and when the mouse is put over the arrows, the text between the two arrows (in the box) moves in the direction of the arrows. Between the two arrows (the scrolling text) I'd have links. With this I can have many links at a small place on the page.
If been trying to find this kind of a script on the web with no luck.
I hacked this together in 5 minutes, the code is not terribly kosher. The doctype is important for it to work on IE.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script type="text/javascript">
var UpdateInterval = 1;
var PixelPerInterval = 10;
var scorllerInterval;
function start_scroll_left()
{
scorllerInterval = setInterval(scroll_left, UpdateInterval);
}
function scroll_left()
{
document.getElementById('scroller').scrollLeft -= PixelPerInterval;
}
function start_scroll_right()
{
scorllerInterval = setInterval(scroll_right, UpdateInterval);
}
function scroll_right()
{
document.getElementById('scroller').scrollLeft += PixelPerInterval;
}
function stop_scrolling()
{
clearInterval(scorllerInterval);
}
</script><p><span id="left" onmouseover="start_scroll_left()" onmouseout="stop_scrolling();">left</span><span id="right" onmouseover="start_scroll_right()" onmouseout="stop_scrolling();">right</span></p><div id="scroller" style="overflow: hidden; white-space: nowrap;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
Wrap the word you want in an element (anchor link, span, whatever), add an ID to the element, and the call the following function on that ID.
PHP Code:
function scrollToObj(id) { // send the scroller to the end, so that any scrolling call would cause it to scroll back instead of forward document.getElementById('scroller').scrollLeft = document.getElementById('scroller').scrollWidth; // store page scroll var temp = document.documentElement.scrollTop; // scroll to the position of the ID document.getElementById(id).scrollIntoView(true); // restore page scroll document.documentElement.scrollTop = temp; }
The word should be in the horizontal scroller. And if the entire document has a scrollbar, and the horizontal scroller is not in view, then user will experience a momentary scrollbar movement when this function is called.
Reply With Quote
Bookmarks