script a licious slider update with effect scrollto
Hi all,
I have an Unordered List inside a DIV
and each list item has a nested div.
The Unordered List has a working Scriptalicious slider and mouse-wheel scroll - Yaaaaay!
Here's the fun part...
I want to create a button that when clicked, it jumps to a specified list item.
The code below works but the slider doesn't update with it - *sadface =[
and also the whole page scrolls as well as the div, i only want that div to scroll if possible....
Code:
<div><a href="#anchor">anchor</a></div>
This, I think is the code meant to be used, or at least I would like to use
Code:
<a href="#" onclick="Effect.ScrollTo('id_of_element'); return false;">Click me to scroll to the ID</a>
But I cant manage to implement it.... Please help
And here is my code so far
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Use a Slider as a Scrollbar Demo</title>
<script src="../pages/js/prototype.js" type="text/javascript"></script>
<script src="../pages/js/scriptaculous.js" type="text/javascript"></script>
<script src="../pages/js/slide.js" type="text/javascript"></script>
<style type="text/css" media="screen" >
ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
/* scrollable div area */
#table_scripts {
display: block;
position: absolute;
left:263px;
top:147px;
width:926px;
height:785px;
padding: 0px;
border-top: 0;
border-left: 0;
overflow: hidden;
white-space: nowrap;
z-index: 4;
}
/* wrap to make sure that image area is clickable */
#wrap3 {
position: absolute;
left:1189px;
top:147px;
width: 20px;
height: 785px;
background: transparent url(../images/vert_track.png) no-repeat bottom left;
z-index: 8;
}
/* vertical track */
#track3 {
position: absolute;
width: 20px;
height: 785px;
}
/* vertical track handle */
#handle3 {
width: 29px;
height: 29px;
}
#script_weld a{
display: block;
background: url(../images/script_b_weld.png) no-repeat top right;
width:862px;
height:34px;
}
#script_weld a:hover{
background-position:bottom left;
}
#script_sharpen a{
display: block;
background: url(../images/script_b_weld.png) no-repeat top right;
width:862px;
height:34px;
}
#script_sharpen a:hover{
background-position:bottom left;
}
</style>
</head>
<body>
<div>
<div id="table_scripts">
<ul>
<br>
<li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
<br>
<li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
........lots of list elements....
</ul>
<div id="jump"><a href="#script_sharpen">beeeeeee</a></div>
<div id="jump"><a href="#script_weld">pooooooo</a></div>
</div>
</div>
<div id="wrap3">
<div id="track3">
<div id="handle3"><img src="../images/slider.png" alt="" /></div>
</div>
</div>
<script type="text/javascript" language="javascript">
// <![CDATA[
// vertical slider control
var slider3 = new Control.Slider('handle3', 'track3', {
axis: 'vertical',
range: $R(0,40),
onSlide: function(v) { scrollVertical(v, $('table_scripts'), slider3); },
onChange: function(v) { scrollVertical(v, $('table_scripts'), slider3); }
});
// scroll the element vertically based on its width and the slider maximum value
function scrollVertical(value, element, slider) {
element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
}
// disable vertical scrolling if text doesn't overflow the div
if ($('table_scripts').scrollHeight <= $('table_scripts').offsetHeight) {
slider3.setDisabled();
$('wrap3').hide();
}
// mouse wheel code from http://adomas.org/javascript-mouse-wheel/
function handle3(delta) {
slider3.setValueBy(-delta);
}
/** Event handler for mouse wheel event. */
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
/** In Opera 9, delta differs in sign as compared to IE. */
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle3(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
// mozilla
Event.observe('table_scripts', 'DOMMouseScroll', wheel);
// IE/Opera
Event.observe('table_scripts', 'mousewheel', wheel);
// ]]>
</script>
</body>
</html>
Yes that is what I am trying to do.
Unfortunately it doesn't work with my existing page.
perhaps is is looking a the whole document rather than just inside
Code:
<div id="table_scroller">
how do I refer to that div using this
Code:
<a href="javascript:bookmarkscroll.scrollTo('sectionb')">Scroll to Section B</a>
<a href="#" onclick="Effect.ScrollTo('sectionb'); return false;">Click me to scroll to sectionb</a>
would it be this
Code:
<a href="#" onclick="document.getElementById('table_scroller').Effect.ScrollTo('sectionb'); return false;">Click me to scroll to sectionb</a>
I think the above code is working, except that it scrolls not only the div but the whole page as well, I need to stop that and also make the custom slider update to where it scrolled to....
Last edited by Bambam007; 05-26-2009 at 02:33 AM..
<script type="text/javascript" language="javascript">
// <![CDATA[
// vertical slider control
var slider3 = new Control.Slider('handle3', 'track3', {
axis: 'vertical',
range: $R(0,40),
onSlide: function(v) { scrollVertical(v, $('table_scripts'), slider3); },
onChange: function(v) { scrollVertical(v, $('table_scripts'), slider3); }
});
// scroll the element vertically based on its width and the slider maximum value
function scrollVertical(value, element, slider) {
element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
}
// disable vertical scrolling if text doesn't overflow the div
if ($('table_scripts').scrollHeight <= $('table_scripts').offsetHeight) {
slider3.setDisabled();
$('wrap3').hide();
}
// mouse wheel code from http://adomas.org/javascript-mouse-wheel/
function handle3(delta) {
slider3.setValueBy(-delta);
}
/** Event handler for mouse wheel event. */
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
/** In Opera 9, delta differs in sign as compared to IE. */
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle3(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
// mozilla
Event.observe('table_scripts', 'DOMMouseScroll', wheel);
// IE/Opera
Event.observe('table_scripts', 'mousewheel', wheel);
// ]]>
</script>
needs to be able to watch the div and update accordingly... somehow
i have added this to the end of the script as well...
from tobie langel - it controls the anchor instead...
scrollto will act on the page, not the div. in theory if your div were in an iframe or something it would only affect that. that being said, it sounds like you found a better piece of code for scrolling... which is what i was going to say to do.
can i see the page you have up now? you're probably going to need to call one of the slider functions explicitly... not through the api's main function.
Before you post, read our: 
