updated tut for custom scrollbar java script?

Hi Walter,

I am trying to get the track to hide when the innerDiv is less than the height of the container.

I took your extra code (quoted below) and replaced the Protaculous code in your own (and helpful!) example Freeway file, but this seems to break the scroll. Is there a reason for this and a way to fix it?

Thanks,

Sly.

On 23 Mar 2009, 5:40 pm, waltd wrote:

Not that I can think of off-hand. You could try sensing the height of the inner DIV, see if it is in fact taller than the outer div, and then use that to switch the entire scroll element off visually.

Here’s where I would sneak this into the original code:

//wrap the test around the original code
if($'innerDiv').getHeight() > $('innerDiv').up('div').getHeight()){
    var s = new Control.Slider('thumb','track', {axis:'vertical'});
    var f = function(value){
        var inner = $('innerDiv');
        //change innerDiv to whatever your inner box is called
        var h = (inner.getHeight() - inner.up('div').getHeight());
        inner.style.top = (Math.round(value * h) * -1) + 'px';
    }
    s.options.onChange = function(value){
        f(value);
    };
    s.options.onSlide = function(value){
        f(value);
    };
}else{
    //hiding track will also hide the thumb, since 
    // it's a direct child of the track
    $('track').hide();
}

Naturally, you have to adjust all the names of things to match your layout, and if you’re going to apply this to more than one element on the page, you owe it to yourself to wrap this up as a single function you can call.

Walter


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

Can you post a link to your page?

Walter


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

Thanks Walter,

www.sly-design.co.uk/aga


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

Fix this line:

if($'innerDiv').getHeight() > $('innerDiv').up('div').getHeight()){

It should be this:

if($('innerDiv').getHeight() > $('innerDiv').up('div').getHeight()){

One missing parenthesis can ruin your day!

Walter

On Aug 27, 2011, at 8:28 AM, Sly wrote:

Thanks Walter,

www.sly-design.co.uk/aga


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

Indeed it can! Thanks so much Walter!

This really is a neat little scroll function.


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

Hi Walter,

established this once very successfully in a test.

Now I have a request what to do if there shall be more than one scrolling events on a page and I told her just to copy and paste the script, changing the item(s) to item1 and she should be done.

She did but the event is always on one box and not on all the boxes. Could you please add some light in this?

http://anima.sportyweb.eu/themen-neu.html

Another point is, that we once added on another post (that I can’t find anymore) a plus/minus click event. This works like a charm - however people would like to have the onhold to scroll - but I’m actually lost in this too.

Thanks for any pointings (especially where the other thread is because the code there was slightly different.

Cheers

Thomas


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

To make it work with multiple elements on the page, you have to change
the way that the script sets up its elements. If you leave everything
the same as the one-per-page example, then I expect only the last one
would work, because the variables for the functions are overwritten
each time you add a new one.

Here’s a rewrite of the original code that lets you set up multiple
elements just by knowing their IDs (which you can get out of Freeway
by looking in the Title field in the Inspector while the element is
selected in the design view).

I haven’t tested this, but it should work. As before, paste this into
Protaculous on your page, and edit to replace my made-up IDs with your
actual ones.

Walter

On Sep 4, 2011, at 7:47 AM, Thomas Kimmich wrote:

Hi Walter,

established this once very successfully in a test.

Now I have a request what to do if there shall be more than one
scrolling events on a page and I told her just to copy and paste the
script, changing the item(s) to item1 and she should be done.

She did but the event is always on one box and not on all the boxes.
Could you please add some light in this?

http://anima.sportyweb.eu/themen-neu.html

Another point is, that we once added on another post (that I can’t
find anymore) a plus/minus click event. This works like a charm -
however people would like to have the onhold to scroll - but I’m
actually lost in this too.

Thanks for any pointings (especially where the other thread is
because the code there was slightly different.

Cheers

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

Hi Walter,

thanks for your response.

If you leave everything the same as the one-per-page example, then I expect only the last one would work, because the variables for the functions are overwritten
each time you add a new one.

More than true - yes that’s how it behaves.

However, the code modified, doesn’t want to work.
I add the code once again cause it uses the plus and minus event.

Thanks for your second look.

Cheers

Thomas


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

On Sep 5, 2011, at 6:00 PM, Thomas Kimmich wrote:

Hi Walter,

thanks for your response.

If you leave everything the same as the one-per-page example, then
I expect only the last one would work, because the variables for
the functions are overwritten
each time you add a new one.

More than true - yes that’s how it behaves.

However, the code modified, doesn’t want to work.
I add the code once again cause it uses the plus and minus event.

gist:1196006 · GitHub

Thanks for your second look.

I updated the original example to include the plus and minus buttons.
Remember, you must have a unique set of these per slider element.

Walter

Cheers

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

Hmm,

it hits me to an uncaught type error, and I can’t find out why?

The above example is not my page, so I wrapped this in an own example:

http://www.kimmich-dm.de/testings/scrollable/index.php

Sometimes I feel dumb.

Cheers

Thomas


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

Make sure that your elements – the track, thumb, and inner div – are
named precisely the same as the names you use in the setup function.
This error is happening because slider.js cannot find any of your
elements.

For example, if you are going to use this setup call:

setup(‘slide1thumb’, ‘slide1track’, ‘slide1inner’, ‘plus1’, ‘minus1’);

Then I would expect to find DIV elements in the page with the IDs
slide1thumb, slide1track, and slide1inner; and either anchors or DIVs
or some other elements with the IDs plus1 and minus1. They all have to
exist, and be named exactly that, or the function won’t work at all.

Walter

On Sep 6, 2011, at 3:59 AM, Thomas Kimmich wrote:

Hmm,

it hits me to an uncaught type error, and I can’t find out why?


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

Have used this custom scrollbar script on many websites … clients are now calling saying it doesn’t work in IE9?! Checked it out … it doesn’t. Please say there is a fix?


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

Are you using any other Actions on the same page? Can you point me to a link showing the broken behavior?

Thanks,

Walter

On Nov 4, 2011, at 9:26 AM, madcomposter wrote:

Have used this custom scrollbar script on many websites … clients are now calling saying it doesn’t work in IE9?! Checked it out … it doesn’t. Please say there is a fix?


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

Thanks for the quick response. Checked several sites; it is OK on some, but I had to get rid of it on this page, for example:

http://songdoor.com/uploadagreement.html

The page above used to have a scrollbar like the page below does, which works OK:

http://pbjdayschool.com/lunchbox.html

The SongDoor site scrollbar used to work fine (have not changed anything on that page except to remove the scrollbar). Would like to find out why it quit working on this site? Many thanks for any clues.


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

If you can find a broken example, I’d like to look at it. In the broken pages, what version of Freeway and what version of the Action are you using? Are you using any other Actions on the same page?

There are known incompatibilities between Prototype and IE9. The latest version of Prototype papers over these, and older versions only trip up the problem in specific, limited cases. If I can find a way around this that doesn’t involve you updating prototype to 1.7, that would be best, because no version of Freeway currently ships with 1.7, and unless Joe rewrites all of the core Softpress Scripty Actions, it can’t be updated to do so either. You can’t have multiple copies of Prototype in the same page, and there’s numerous other technical issues around fixing this the “right” way. So a hack would be best for the near term.

Walter

On Nov 4, 2011, at 11:23 AM, madcomposter wrote:

Thanks for the quick response. Checked several sites; it is OK on some, but I had to get rid of it on this page, for example:

http://songdoor.com/uploadagreement.html

The page above used to have a scrollbar like the page below does, which works OK:

http://pbjdayschool.com/lunchbox.html

The SongDoor site scrollbar used to work fine (have not changed anything on that page except to remove the scrollbar). Would like to find out why it quit working on this site? Many thanks for any clues.


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

Hello waltd,

I gave your scroll bars code a try and it’s great with DIVs, but I’m unable to make it work by using an iframe.

Is this my fault or are iframes incompatible with this method ? I get no JavaScript error and once the iframe becomes replaced by a DIV box, it does its job well.

Tobias.


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

I am not sure if you can occlude an iframe with a parent DIV set to overflow:hidden. If you could, and you set the iframe to be at least the height of the page it contains, then you might be able to change the top offset of the positioned iframe and fake a scroll (which is how the scrolling DIV effect works).

What you very definitely cannot do is scroll the contents of an iframe from outside of that iframe. If you have a JavaScript function in the head of the iframe page (meaning it is your page under your control) then you can send messages to that function and tell it to invoke a scrollTo method. But the syntax is tortured and awful and prone to errors.

Walter

On Jun 1, 2012, at 9:58 AM, tobiaseichner wrote:

Hello waltd,

I gave your scroll bars code a try and it’s great with DIVs, but I’m unable to make it work by using an iframe.

Is this my fault or are iframes incompatible with this method ? I get no JavaScript error and once the iframe becomes replaced by a DIV box, it does its job well.

Tobias.


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

Unfortunately, I cannot alter the contents of the iframe… it’s intended to hold a weblog and that iframe method is the easiest way to integrate this into the site’s layout.

Okay, then the default scrollbars must do the job. :slight_smile:

Thank you for having a look at this issue.

Tobias.


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

Hi Walt I found this tutorial
as I want to make a horizontal simple scrollbar, which I did and follow your instruct.

as i want the bar to move horizontally, I changed the word vertical to horizontal in code. The scroll is trying to move but is moving slightly vertically.
and I am having trouble with this part
"Once you have done this, click and drag the tall box, then press the spacebar as you bring the point of your cursor over the top of your small scroll window. You will see a blue highlight rectangle form around the edges of the scroll window, and at that moment you can release the mouse. You will probably see an alert dialog that the element you are dropping is too tall for the box. Okay it, then undo the change to your layout by restoring the original dimensions using the Inspector. "

so it seems I am stuck. I also have named the track, thumb and Divs

thx for any advice
C


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

These instructions spell out the steps needed to convert a “normal” Freeway-drawn layout element into a nested “inline” layout group. You can also accomplish the same thing by clicking on the Site heading over the site pane to change it to Page, then expanding the list of page elements and dragging the properly-named elements so that inner is inside of outer, and thumb is inside of track. This nesting is signaled in the page listing by indent – like an outline. Drag an element under and to the right of another element until that parent element is bold. Let go, and the nesting should stick. It’s harder to describe than to do.

Walter

On Jan 26, 2013, at 12:02 PM, Carla wrote:

so it seems I am stuck. I also have named the track, thumb and Divs


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