custom scrollbar and scrollthumb

[Miro]

Hi
I'm trying to create custom scrollbar with my own images and style.
My project is separated into modules and i want to make this custom style only for one of them.

To change scrollbar background color and images i've created new class MyScrollbar with vSrc and hSrc path set to my custom images and set MyScrollbar as scrollbarConstructor to all layouts in my module

isc.defineClass("MyScrollbar","Scrollbar");
isc.MyScrollbar.addProperties({
            backgroundColor:"transparent",
            vSrc:"images/Scrollbar/vscroll.png",
            hSrc:"images/Scrollbar/hscroll.png"
})

That works just fine!
My question is - IS THERE ANY WAY TO CHANGE SCROLL THUMB STYLE ?

As i mentioned above - this style can be applied only to few canvases and layouts so cannot change vSrc and hSrc for ScrollThumb class

I've noticed that Scrollbar class has two variables with thumb class name: vThumbClass and hThumbClass

I've tried to create my ScrollThumb classes

isc.defineClass("MyHScrollThumb ","HScrollThumb")
isc.MyHScrollThumb .addProperties({
            hSrc:"images/Scrollbar/hthumb.png"
})
isc.defineClass("MyVScrollThumb ","VScrollThumb")
isc.VScrollThumb.addProperties({
            vSrc:"images/Scrollbar/vthumb.png"
})

and change value of vThumbClass, and hThumbClass in MyScrollbar but after refreshing page got an error:

Uncaught JavaScript exception [Uncaught TypeError: Object MyVScrollThumb has no method 'create']

app checked at IE, Firefox and Chrome - same problem
SmartGWT 4.0

any change to make it work?
PLEASE HELP !

[Miro]

hey
does really anyone cannot help and tell me how to make custom scrollthumb?

Isomorphic guys - any advice from you? please!

[piergrossim]

Custom (3 part) scroll thumb

Also looking into how to implement this as my efforts in editing the load_skin.js and skin_styles.css have not been fruitful. Any help would be much appreciated. I can add curved ends on a track, but not on the thumb.

[Isomorphic]

Can you fill out the usual required information:

1. what's your exact version

2. what base skin are you using?

3. what browser(s) are you testing and which do you need to support (consider CSS3Mode, for example)?

4. please show your attempt

[piergrossim]

Custom (3 part) scroll thumb

1. We are using SmartGWTPro 4.0p

2. We are using a copy of the Enterprise skin converted for our company's look and feel.

3. We are testing in both FireFox 26+ and Chrome.

4. When in FireBug only 2 parts of the thumb are available. The thumb (stretched image) and the grip image. No end thumb caps are drawn/available.

[Isomorphic]

You didn't answer the question about css3mode, but, it sounds like you are expecting the thumb to be a StretchImg. In CSS3 mode, it's not - rounding is achieved via CSS declarations alone (border-radius) and you should modify those settings instead of looking for somewhere to add images.

[piergrossim]

custom scrollbar and scrollthumb

The theme is currently making use of the PNG files hscroll_sprite.png and vscroll_sprite.png. So the scrollbar images for the track and thumb are being stretched. Is this the wrong approach? An example would be much appreciated.

[Isomorphic]

Have you read the docs in the Skinning overview about CSS3Mode? It's extremely important that you understand this term, as you keep referring to behaviors that would be affected by this setting and to settings that would differ depending on whether this mode is active, without referring to which mode you're in..

Again in CSS3Mode, the curvature of the thumb is done purely in CSS, and modifying it is just a matter of editing the CSS, and you can see which styles are applied to the thumb using Firebug or any similar tool.

Separately, sprites are used *for the track* in both modes. But here again, the offsets into the sprite are right there in the CSS, so if you need to modify the sprite, just modify the offsets in the CSS.

[piergrossim]

I have read the "Interface Skinning" document. We are using browsers that use CSS3 by default. We do notice that by changing the sprite files that this effects both the track and the thumb, hence we thought that the thumb was build using the sprite images (referenced by offsets) only. Thats why we were expecting 3 images for the thumb definition. The start, middle and end.

[Isomorphic]

Certain browsers do use CSS3 by default with specific skins.

Your results suggest you have manually turned this mode off, so look into that first.

[piergrossim]

Our test page begins with the line

<!DOCTYPE html>

We should be all set to use CSS3.

I can try adding

<script>isc_css3Mode = "on";</script>

[Isomorphic]

Yes.

Unless you've manually turned it off elsewhere.

Which again is what your results suggest.

[Isomorphic]

Remember that you can, at any time, just navigate to the public Showcase or the unmodified Showcase in your SDK. This allows you to see what the system does in the default configuration, where you will see no images being used in thumbs.

[piergrossim]

We just checked our load_skin.js file and found both useCSS3 and useSpriting are both set to true. We also verified that the hscroll_sprite.png file is being referenced for the thumb and end buttons, but is not referencing the end caps of the thumb. Here are our skin_styles.css entries for just the horizontal thumb:

.hScrollThumbStartDisabled,
.hScrollThumbStart,
.hScrollThumbStartOver,
.hScrollThumbStartDown {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-repeat: no-repeat;
}

.hScrollThumbStartDisabled {
background-position: -35px -4px;
}

.hScrollThumbStart,
.hScrollThumbStartDown {
background-position: -42px -4px;
}

.hScrollThumbStartOver {
background-position: -49px -4px;
}

.hScrollThumbStretchDisabled,
.hScrollThumbStretch,
.hScrollThumbStretchOver,
.hScrollThumbStretchDown {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-repeat: repeat-x;
background-position: 0px -32px;
}

.hScrollThumbStretchOver {
background-position: 0px -48px;
}

.hScrollThumbEndDisabled,
.hScrollThumbEnd,
.hScrollThumbEndOver,
.hScrollThumbEndDown {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
}

.hScrollThumbEndDisabled {
background-position: -35px -20px;
}

.hScrollThumbEnd,
.hScrollThumbEndDown {
background-position: -42px -20px;
}

.hScrollThumbEndOver {
background-position: -49px -20px;
}

.hScrollThumbGripDisabled,
.hScrollThumbGrip,
.hScrollThumbGripOver,
.hScrollThumbGripDown {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-position: 0px -35px;
opacity: 0.0;
}

.hScrollThumbStart {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-repeat: no-repeat;
background-position: -42px -4px;
}

.hScrollThumb {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-repeat: repeat-x;
background-position: 0px -48px;
}

.hScrollThumbEnd {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-repeat: no-repeat;
background-position: -42px -20px;
}

.hScrollThumbOver {
background-image: url(./images/Scrollbar/hscroll_sprite.png);
background-repeat: repeat-x;
background-position: 0px -64px;
}

[Isomorphic]

Can we ask that you take a few more steps on your own between each post? We are really having to spell out every individual step in an area where the configuration is straightforward and the browser tooling is very strong.

As we've covered, in CSS3 mode the thumb's appearance is controlled by CSS declarations, not images.

You can trivially verify this by using the developer tools in your browser to change the border-radius setting, in the online Showcase or Showcase from the stock SDK, and also in your own app.

The sprite is also loaded, but in this mode, again it is not what dictates the appearance.

And for completeness, there's no reason to avoid the reference to the sprite because it's needed anyway for the track buttons.