Scroll box

ThomasKimmich · September 13, 2010, 1:23pm

Thanks Walter,

sorry for maybe missunderstanding you, but are both effects (scroll and slider) combinable? Something like:

var scrollee = $(‘slide-content’)

Or do I have to use either the one and the other?

And what about the mousecursor-issue.

Thanks for your patience.

Thomas

On 13 Sep 2010, 12:02 pm, waltd wrote:

I made an example of a click-to-smooth-scroll effect here: Endless Scroll

This was an extension of the endless scroll effect: Endless Scroll
so it doesn’t use the Freeway Actions at all. But it does show that
the effect can be made to work, and in both directions.

Walter

On Sep 13, 2010, at 7:37 AM, Thomas Kimmich wrote:

Hi Walter,

walked through this list and got this as result:

http://www.kimmich-dm.de/kunden/michaelmeier/index.html

I think - basically not too bad.

But I miss a few things that I should also build in and no idea how:

In your sliders, mouse cursor changes to the hand (or pointing
finger). In mine not. Äh why?

You talked about event scrolling (smooth, scroll to). What’s the
trick behind and could it be implemented too?

The most problems I see is in the “Touch Technologie” and it’s
fizzling kind of use the slider. The target audience will be some
Art-Directors of the world (Film and Advertising), so I think,
they’ll use it extended as I apprehend.

Apple page “turns” its design from slider to arrows (forward and
backward) if it is an iPhone or Touch or whatever. Now I think this
is pretty much complicated to achieve. But is there a way to make
something between, like the prev and next in the carousel, so user
can finally decide the way he wants to scroll the gallery?

Happy on any thoughts.

Thomas

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

ThomasKimmich · September 13, 2010, 2:58pm

OK Walter, I see - stupid question cause the simple answer is “Yes”. Now there is just mousecursor-issue left. Maybe I figure that out too.

Thomas

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

ThomasKimmich · September 16, 2010, 7:04am

Hi Walter,

it’s me again.

I combined slider and carousel.

To get the second pane “sliderable”, I just duplicated the code snippet:

var f = function(value){ …
and changed the variables like ‘slider-control’ to ‘slider-control1’.

I do not know if this is the recommended way to do, but anyway the glider works.
What I don’t get to work is the point to klick somewhere on the track and the slider jumps to this position (like in the first pane, where it is functionable).

Could you point me here through?

The example page is:

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel.html

Thanks in advance for any help.

Thomas

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

waltd · September 16, 2010, 3:02pm

That’s really cool! But I am not sure if you will be able to do what
you’re doing with the + and - buttons – you’re using two different
sets of control logic on the same element. The way to use slider and
these external controls would be to write a function that would
repeatedly call the slider’s setValue method, rather than overriding
the position of the inner element the way it’s currently set up. That
way Slider remains in control of the position, and can accurately
report the value of the offset.

This would look something like this (assuming your first slider is
called s in the global variable space:

var move;
var right = function(){
	s.setValue(s.value + .01);
	move = setTimeout(right,1);
};
var left = function(){
	s.setValue(s.value - .01);
	move = setTimeout(left,1);
};
//observers for the controls, ID right and left.
$('right').observe('mousedown',right);
$('left').observe('mousedown',left);
document.observe('mouseup',function(evt){clearTimeout(move)})

If you make more than one of these, you have to change the names of
the s, left, and right functions and the s inside those functions. Be
sure to rename left and right inside the function, too, where the
setTimeout tail-calls the function to make the animation happen. You
don’t have to rename move, nor do you have to have more than one
document.observe(‘mouseup’) on the page. Only one thing can be moving
at a time, and only in one direction or the other.

Back to where you are at the moment: First of all, get rid of the
comments around the part of your script that begins with var scrollee
= and ends with document.observe('mouseup… Those are getting
injected inside another set of comments. Basically, anything you paste
or type into the Function Body dialogs in Protaculous do not need to
be escaped with comments, because Freeway does that automagically.

Next, the place to start fIxing this would be renaming your functions.
You have two functions, both named s, each set to manipulate a
different set of elements. So for starters, you need to be calling
these s and s2 or something like that. Second, both of those
functions call the same ‘f’ function, so they will both be trying to
move the same element. Finally, you have some other duplicate
variables here: scrollee, speed, w, start, scroll, right, and left,
which also need to be made unique.

This whole thing is begging to be refactored, and wrapped up in a
class or at least a function so the names aren’t global and such a
pain to work with. If I have some time this weekend, I can look at
that. But I’m not that hopeful that my schedule will open up.

Walter

On Sep 16, 2010, at 3:04 AM, Thomas Kimmich wrote:

Hi Walter,

it’s me again.

I combined slider and carousel.

To get the second pane “sliderable”, I just duplicated the code
snippet:

var f = function(value){ …
and changed the variables like ‘slider-control’ to ‘slider-control1’.

I do not know if this is the recommended way to do, but anyway
the glider works.

What I don’t get to work is the point to klick somewhere on the
track and the slider jumps to this position (like in the first pane,
where it is functionable).

Could you point me here through?

The example page is:

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel.html

Thanks in advance for any help.

Thomas

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

ThomasKimmich · September 16, 2010, 3:37pm

Hi Walter,

the + and - were only by accident cause I had the hope, that this will be the “iPod-Touch-Key”, but this failed.

So this element will be deleted and only the slider will be left. (I recognized, that if you make the slider DIV high enough, it’s no problem to control it on a Touch).

The code itself is just a copy and paste (that’s what I can do without accident) from your page-example, maybe the reason for all unnecessary comments.

I know that your timescale is thight, so if I could wait until you can have a more relaxed look on, I would do.

Many thanks so far.

Thomas

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

ThomasKimmich · September 29, 2010, 10:03am

Hi Walter,

did you have any time to have a look at my slider+carousel yet?

Just to refresh:

The second carousel-pane is sliding, but there is no chance to click on the slider-pane and make it move forward and backward like it is in the first pane.

Or did I miss any of your advices?

Thanks

Thomas

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

waltd · September 29, 2010, 12:00pm

did you have any time to have a look at my slider+carousel yet?

No, I haven’t. Did you try the last bit of code I posted? That should give you working ± buttons along with a slider.

Walter

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

ThomasKimmich · September 29, 2010, 12:44pm

Hi Walter,

no I haven’t 'cause I removed the +/- buttons as a “not necessary” one.

So yet only slider-problem left.

Thanks

Thomas

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

waltd · September 29, 2010, 1:05pm

Please read through the second-to-last paragraph in my last long answer to you. Your primary issue is variable and function naming. Each sliding area needs its own set of variables, and these need to be policed inside and out of the function bodies. There’s a whole list of them in that previous message. I would try removing all but one set of code from the page, then copy that, go through all the variables, and tack a 2 to the end of each, and then change the ids of your HTML elements to match.

Walter

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

ThomasKimmich · September 29, 2010, 2:52pm

Walter,

to be honest:

except of the fact, that the function s has to be renamed into s2, nearly nothing I really understood.

OK - to remove the second codeset s from the functions body of protaculous so there is only the basic - no deal.

But where to insert the s2 code-instance instead? It is a single page and the “s2” is a carousel pane sitting on the same page.

Change the ids of HTML-Element will be extended → class = id; name = s2? Or where do I change the HTML ids properly?

Well - I’m willing to learn this and store it in brain - but actually I need some further advices.

Thanks in advance

Thomas

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

waltd · September 29, 2010, 4:01pm

I mean that you need to clean up what you have, make sure that the first instance works correctly. Then duplicate the code in the Function Body area, and rename the functions and variables within that second set.

It should look something like this:

var f = function(value){
    var inner = $('innerContentBox');
    var w = inner.getWidth();
    w = (w - inner.up('div').getWidth());
    var leftPos = Math.round(value * w) * -1;
    inner.style.left = leftPos + 'px';
}
var s = new Control.Slider('thumb','sliderTrack', {
    onSlide: f,
    onChange: f
});

var f2 = function(value){
    var inner = $('innerContentBox2');
    var w = inner.getWidth();
    w = (w - inner.up('div').getWidth());
    var leftPos = Math.round(value * w) * -1;
    inner.style.left = leftPos + 'px';
}
var s2 = new Control.Slider('thumb2','sliderTrack2', {
    onSlide: f2,
    onChange: f2
});

To change the ID of an HTML box in Freeway, just use the Title field of the Inspector. The three elements you need to rename are the inner box of the slider area, the thumb, and the track of the slider. Those are called innerContentBox2, thumb2, and sliderTrack2 in the example above.

Just for a little extra geekery, the variables inner, w, and leftPos do not need to be changed, because they are encapsulated inside a function, declared with the var keyword, and not declared outside of that function body.

Walter

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

ThomasKimmich · September 30, 2010, 7:13am

Walter - thanks!

One thing left:

on klick somewhere on ‘sliderTrack2’,‘sliderTrack3’… will not effect, that slider is pushed forward/backward like it is in ‘sliderTrack’ and I can’t find out what function will bring me this (or will bring me not in pane 2+3…).

This is to me a really important aspect regarding “touch”.

And one question to ScriptyLightbox:

What about titles and prev/next image - is it possible to achieve?

Thomas

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

waltd · September 30, 2010, 1:08pm

On Sep 30, 2010, at 3:13 AM, Thomas Kimmich wrote:

on klick somewhere on ‘sliderTrack2’,‘sliderTrack3’… will not
effect, that slider is pushed forward/backward like it is in
‘sliderTrack’ and I can’t find out what function will bring me this
(or will bring me not in pane 2+3…).

Do you have an example page showing this problem? I can’t really tell
from your description, but it sounds as though you may have wired more
than one slider to the same element, or vice-versa.

This is to me a really important aspect regarding “touch”.

And one question to ScriptyLightbox:

What about titles and prev/next image - is it possible to achieve?

There wasn’t any good way to map this behavior onto the Freeway
interface when I developed the Action, so I disabled this feature. (It
is built in to the core effect library Lightwindow.js. It may return
in a future version of the Action.

Walter

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

ThomasKimmich · September 30, 2010, 1:12pm

Hi Walter,

still this one:

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel.html

Thomas

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

waltd · September 30, 2010, 1:30pm

I see the problem occurring, but I don’t see any errors in the
JavaScript console related to the functions. Everything appears to be
named correctly. Could you please do me a favor and remove all other
Actions – especially Caxton – from the page, just as an aid to
debugging? It is possible that another Action has declared an error
handler which is “gobbling up” the errors, making them impossible to
see. Once I see an error, I can propose a solution. As things stand,
you have followed my directions exactly, so it should work.

As far as removing Carousel from the page, try putting the three panes
one above the other in the middle of the page, so you see all of them
at once. That should make this relatively simple to diagnose.

Walter

On Sep 30, 2010, at 9:12 AM, Thomas Kimmich wrote:

Hi Walter,

still this one:

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel.html

Thomas

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

ThomasKimmich · September 30, 2010, 1:59pm

OK Walter,

here we go:

the one under the other (working):

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel.html

next stage adding carousel, pane and prev/next:

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel2.html

Thanks

Thomas

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

waltd · September 30, 2010, 3:17pm

I don’t think it’s going to be possible to set up the slider when it
is a part of a Carousel like this. The issue is deep in the bowels of
Scriptaculous. When the slider setup event for the second and third
sliders happens, those sliders are off-screen in CSS limbo. The reason
that the thumbs work to move the sliders is because the thumb only has
to know the offset of the thumb relative to its track. But in order
for clicks on the track to be observed and converted into changes on
the slider’s thumb, the click has to be checked against the position
of the left side of the track at the moment that the slider is set up,
not at the moment that the click is registered. At the moment that the
slider is set up (page load) that position is off screen to the right
(and hidden by CSS). Clicks on the track area when the Carousel has
scrolled the slider into view don’t register, because they are outside
of the zone on the screen where the slider used to be.

Walter

On Sep 30, 2010, at 9:59 AM, Thomas Kimmich wrote:

OK Walter,

here we go:

the one under the other (working):

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel.html

next stage adding carousel, pane and prev/next:

http://www.kimmich-dm.de/kunden/michaelmeier/slider-carousel2.html

Thanks

Thomas

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

mog · February 29, 2012, 12:54pm

Thanks so much for this! I was trying to work out how to make a horizontal scroll and found this thread!

Fantastic Freeway Talk!

Best wishes

Mog

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