...

View Full Version : Scroll to anchor Scriptalicious



Bambam007
05-22-2009, 08:19 AM
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 old
<div><a href="#beees">beeeeeee</a></div> works but the slider doesn't update with it - *sadface =[

This, I think is the code meant to be used, or at least I would like to use

<a href="#" onclick="Effect.ScrollTo('article_top'); return false;">Click me to scroll to the top of the article</a>

But I cant manage to implement it.... Please help
And here is my code so far


<!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>



<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>
<br>
<li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
<br>
<li><div id="script_poooo">pooooooooooooooooooooooo</div></li>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<br>
<li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
<br>
<li><div id="script_silly">this is the silly one</div></li>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<br>
<li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
<br>

</ul>
<div id="jump"><a href="#script_silly">beeeeeee</a></div>
<div id="jump"><a href="#script_poooo">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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum