I am currently in the middle of creating a horizontal scrolling
product list with page buttons that use effects to scroll from one
page to another using scriptaculous.
I am having problem that when the window is resized, so only the
viewable area of the div changes, this causes the width to change and
then because of that the scroll effect will scroll to position 2000
but then when the scroll bar is updating as it is linked to the
scroll, setting the scroll bar position to 2000 will be different to
the 2000 position on the page.
My javascript skills have much to be desired so if anyone could point
me to some tutorials that show the right way to do things it would be
appreciated as most of what i have learnt so far has been from what
ive picked up from snipets of code.
Also PLEASE does anyone have a debugger that will actually tell you
what is wrong with the javascript, simply highlighting a line that i
can see nothing wrong with is quite useless to me.
Here is code is a bit of a mess sorry, Thanks for any help in advance
<script type="text/javascript">
// <![CDATA[
// vertical slider control
var slider_b = new Control.Slider('side_b_bar', 'side_b_track', {
axis: 'vertical',
onSlide: function(v) { scrollVertical(v, $('side_brand'),
slider_b); },
onChange: function(v) { scrollVertical(v, $('side_brand'),
slider_b); }
});
// vertical slider control
var slider_t = new Control.Slider('side_t_bar', 'side_t_track', {
axis: 'vertical',
onSlide: function(v) { scrollVertical(v, $('side_type'),
slider_t); },
onChange: function(v) { scrollVertical(v, $('side_type'),
slider_t); }
});
var element = $('plist_con');
//var max_wid = (element.scrollWidth);
var max_wid = (element.scrollWidth-element.offsetWidth);
$('pageination').innerHTML = 'page 1 of #'
// horizontal slider control
var slider = new Control.Slider('handle', 'track', {
//var element = $('plist_con')
//alert(element.scrollWidth-element.offsetWidth);
range: $R(0, max_wid),
sliderValue: 1, // won't work if set to 0 due to a bug(?) in
script.aculo.us
onSlide: function(v)
{
scrollHorizontal(v, $('plist_con'), slider);
$('pageination').innerHTML = 'slide: ' + v
},
onChange: function(v)
{
scrollHorizontal(v, $('plist_con'), slider);
$('pageination').innerHTML = 'changed: ' + v
}
});
// 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));
}
// scroll the element horizontally based on its width and the
slider maximum value
function scrollHorizontal(value, element, slider) {
element.scrollLeft = Math.round(value/
slider.maximum*(element.scrollWidth-element.offsetWidth));
}
// disable vertical scrolling if text doesn't overflow the div
if ($('side_type').scrollHeight <= $('side_type').offsetHeight) {
slider_t.setDisabled();
$('side_t_wrap').hide();
}
// disable vertical scrolling if text doesn't overflow the div
if ($('side_brand').scrollHeight <= $('side_brand').offsetHeight)
{
slider_b.setDisabled();
$('side_b_wrap').hide();
}
// disable horizontal scrolling if text doesn't overflow the div
if ($('plist_con').scrollWidth <= $('plist_con').offsetWidth) {
slider.setDisabled();
$('wrap').hide();
}
// ]]>
function handle(delta) {
slider.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/0.57142857142857142857142857142857;
/** 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*26.25;
}
/** 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)
handle(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('plist_con', 'DOMMouseScroll', wheel);
// IE/Opera
Event.observe('plist_con', 'mousewheel', wheel);
function moveP(){
//x = document.getElementById('plist_con');
//alert("1: " + x.scrollLeft); //pos scrolled to
//alert("2: "+ x.scrollWidth); // total width
//alert("3: " + slider.maximum); //max width
//alert("4: " + x.offsetWidth); // viewable width
x = document.getElementById('plist_con');
var col = Math.floor(x.offsetWidth / 214)
var scrollby = col * 214
new Effect.Scroll('plist_con',{x:-scrollby, mode:'relative'});
setTimeout('setscroll()', 1120)
}
function moveN(){
x = document.getElementById('plist_con');
alert("Position: " + x.scrollLeft + ", Viewable: " + x.offsetWidth
+ ", Total: "+ x.scrollWidth + ", Total(S): " + slider.maximum);
var col = Math.floor(x.offsetWidth / 214)
var scrollby = col * 214
new Effect.Scroll('plist_con',{x:scrollby, mode:'relative'});
setTimeout('setscroll()', 1120)
}
function setscroll(){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
x = document.getElementById('plist_con');
alert("scroll left:" + x.scrollLeft);
slider.setValue(x.scrollLeft);
}
else
{
x = document.getElementById('plist_con');
alert("scroll left:" + x.scrollLeft);
slider.setValue(x.scrollLeft);
}
}
function update()
{
//setscroll()
//setTimeout('update()', 2500)
}
</script>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
