[Pro] Horizontal scroll question...

Freeway
1

For some reason my horizontal scroll using Protaculout/Scriptaculous doesn’t work in Firefox or Internet Explorer. Can anyone tell me where I’m going wrong?..

My link…
http://www.roarimage.com/uploads/sadler/events.html

Thanks in advance, I’m desperate!
Scott

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

or Safari apparently …

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Seems to work fine in Safari? Any advice for the other browsers?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

According to Firebug, you are missing a definition of the variable scottinner. If you look here, you will see that you define the variable ‘inner’, but then ask for ‘scottinner’ later in the same script.

var f = function(value){
    var inner = $('innerDiv');
    var w = scottinner.getWidth();
    w = (w - scottinner.up('div').getWidth());
    var leftPos = Math.round(value * w) * -1;
    scottinner.style.left = leftPos + 'px';
}

Pick one name, and stick to it.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi Walter,

thanks for the reply, I’m not great at all this script stuff. I’ve replaced all ‘inner’ with ‘scottinner’ (the name of my Inner Container box) and now it doesn’t work at all. I’ve updated the link again for you to see…

My link… http://www.roarimage.com/uploads/sadler/events.html

thanks,
Scott

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Look at the line where you define the variable scottinner. It’s
pointing to an item with the ID scottinnerDiv. Change the word
scottinnerDiv to scottinner, and you should be all set. In Prototype, $
(‘someId’) is nearly the same as the much longer
getElementById(‘someId’). It gets the element, and also “extends” it
with all manner of helper methods and fun.

Walter

On Jul 21, 2009, at 10:12 AM, Scott Crundwell wrote:

Hi Walter,

thanks for the reply, I’m not great at all this script stuff. I’ve
replaced all ‘inner’ with ‘scottinner’ (the name of my Inner
Container box) and now it doesn’t work at all. I’ve updated the link
again for you to see…

My link… http://www.roarimage.com/uploads/sadler/events.html

thanks,
Scott

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Nice one Walter… all sorted!!!

I’ve been using Freeway since version 3.0 but really need to learn about script rather than just bumbling my way through!!!

Without your input over the years I’d have been well stuck!

Thanks again.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Walter,

I have a new problem regarding the above, is there a way of including more than one side scroll element per page?

I’ll be needing three or four side scrolls on the one page and although I’ve tried to duplicate the code and rename the new variables the scroll/content doesn’t seem to tie up.

I’ve been using a work around where I paste the code into the “document.observe” Function Body and then paste the same into the “event.observe” but with the new variables. This seems to work fine, although I can only apply/paste the script twice.

My test link… http://www.roarimage.com/uploads/sadler/elements.html

any advice?
Scott

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Change the names of your function variables for each instance. Where
you have var s = new Control.Slider(…), make that something like var
s1 = new Control.Slider(…) and then s2 and s3 etc. Do the same for
var f, too, make that f1, f2, etc. That’s the part you were missing.

Be sure when you do this that you read carefully all the way through
the entire code block. These functions get called by one another, and
you will have to make sure that they line up all the way through. Note
how many things have to change here:

var s1 = new Control.Slider('thumb','track', {});
var f1 = function(value){
     var scottinner = $('scottinner');
     var w = scottinner.getWidth();
     w = (w - scottinner.up('div').getWidth());
     var leftPos = Math.round(value * w) * -1;
     scottinner.style.left = leftPos + 'px';
}
s1.options.onChange = function(value){
     f1(value);
};
s1.options.onSlide = function(value){
     f1(value);
};

You don’t need to use the dom:loaded and window.onload events
separately, you can gang everything up in the one observer or the other.

Walter

On Jul 28, 2009, at 11:25 AM, Scott Crundwell wrote:

Walter,

I have a new problem regarding the above, is there a way of
including more than one side scroll element per page?

I’ll be needing three or four side scrolls on the one page and
although I’ve tried to duplicate the code and rename the new
variables the scroll/content doesn’t seem to tie up.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options