Custom Scrollbar *** UPDATED Dec-09-2012 ***

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
Post Reply
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

this version has been deprecated
use this viewtopic.php?f=53&t=68218 instead

[rz] Scrollbar v1.2.2

This extensions set allows you to add custom scrollbars to layers.
Sample project file included.

Some features:

Custom images for up/down and left/right arrows.
Draggable track for fast scrolling.
Clickable trackbar for fast pointing.
Full keyboard support (autorepeat supported in Opera as well).
Mousewheel support.
Complex content supported (not just one plain-text block).
Compatibility support for complex page designs (like nested and hideable layers).
You can have as many scrollbars you want in the same page!
Tested in Chrome, FireFox, Opera, Safari, Maxthon, Lunascape, IEquirks, IE6, IE7, IE8 and IE9;
...and more


HTML 4.01 Transitional
W3C compliant


New in version 1.2.2:
Fixed a few pixels gap when the container has padding (i.e. now you can scroll the text object content directly; also when it has padding and overflow settings).
Improved keyboard events handling in Safari and Lunascape (Gecko and WebKit modes) browsers in pages with multiple jQuery effects running in background.
Fixed the background image missing in styled objects under certain conditions.
A workaround for a known issue with click/doubleclick events in IE8 and earlier versions.
New max scrolltrack size property for both horizontal and vertical scroll modes; this allows proportional, fixed and fixed-proportional size modes for the trackbar.
Better focus method under certain browser conditions.
Some minor tweaks in the extension core.

New in version 1.2.1:
Workaround that solves a bug (touchscreen devices false positive) in Maxthon browsers.
Compatibility backward for a correct startup in IE7 and earlier and other browsers with similar engine/core when using php dynamic content.
Workaround for IE bug, a pixel gap rendering rtl pages.

New in version 1.2:
Support for touch devices (drag/scroll).

New in version 1.1.1:
Touch'n'scroll feature automatically disabled on touch devices for smoother performance.
Horizontal scrollbar's track bar 0px fixed in edit mode.

New in version 1.1:
Improved compatibility with IE.
Horizontal scrollbar added (with synchronization support for the vertical scrollbar extension).
"Touch'n'scroll" feature.


How to use?

Design your layer as you usually do, then set its overflow property to hidden.
Add the custom scrollbar extension to your page.
Type in the layer ID that you want to customize.
Use the provided sample images for the arrows or design your own ones that match your scheme.

The same applies to the horizontal scrollbar. Just only one rule you must follow.
If you want to have both horizontal and vertical scrollbars synchronized for the same layer, the horizontal scrollbar must be after the vertical one; use the Object Manager panel to be sure you did as it is described. Of course, don't forget to tell the horizontal scrollbar (in its properties window) with which vertical extension will be synchronized.

Notes:
Now you don't need anymore the previously provided fix for transparent layers in IE. The mousewheel support does it automatically!
Due to technical reasons, the support for IEquirks was removed from the horizontal scrollbar.

Enjoy!
Last edited by [RZ] on Tue Feb 09, 2016 6:07 pm, edited 9 times in total.
User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: Custom Scrollbar

Post by Pascal-Gilles »

Hi RZ,

So you did it :wink:

Very nice job as usual...

Cheers!
8)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar

Post by [RZ] »

thank you crochepattes!
as always you have only kind words, thanks.
i was researching hard on how to workaround all the issues/limitations of each browser, events, keyboard, autorepeat, mousewheel, multi-instance, tablets, nesting, ie (the special problematic browser by itself) ufffffffffffff... a lot of etc, etc... and at the same time get a clean and lightweight code.
hope you all can find it useful.

(i'm working hard for horizontal-bidirectional support, and i started something with inlineframes also...)
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Custom Scrollbar

Post by protectourlands »

Brilliant RZ! I can really use this.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar

Post by [RZ] »

thank you protectourlands!
all your kind words encourages me to continue writing code.
i'm already using it in one of "my" sites!
hope you can also find it useful.
thanks again for your feedback.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar

Post by supersonictt »

Amazing extension! Thanks a lot [RZ]
Just one question, is it possible to have scroll-on-touch in the newer versions?
Thanks.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar

Post by [RZ] »

what is scroll-on-touch?
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar

Post by supersonictt »

Well, I saw (in some websites) that if you put the mouse on the down arrow (without clicking) the scroll starts until the mouse is out.
I cannot recall those websites, but one of them is made for a customer by a WWB user as I was looking into his portfolio. It was a menu for a restaurant and the content (the menu items) was an image. I guess it is an extension but I really cannot find out who this user is :(
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar

Post by [RZ] »

ah ok, i got it.
there is something ready, but i'm still doing some testings in tablets...
stay tuned!
(ps: sorry, i forgot to thank you for your kind words)
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar

Post by supersonictt »

Thank you so much :)
Looking forward to using it in one of the sites am going to make.
User avatar
stamjoe
 
 
Posts: 230
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

Re: Custom Scrollbar

Post by stamjoe »

RZ
THANK YOU!!!
Joe
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar

Post by [RZ] »

@supersonictt @stamjoe
thank you, hope you find this ext useful!
(and don't forget to post a link to your sites, i want to see how you use it! ;) )
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar

Post by supersonictt »

@[RZ]
Whenever I use it I will keep you update it with the site :)
And by the way, my own site am building is constructed on the layers extensions, I will send you the link on the layers thread as soon as it is published :)
The extensions you are providing are REALLY "AMAZING, isn't it?" ;)
Thanks a million [RZ].
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-25-2012 ***

Post by [RZ] »

An update is available (check the first post):
Even more compatibility with IE.
Don't need the fix anymore for transparent layers in IE (the mousewheel behaves strange in transparent layers in IE, fix removed, automatic setup added).
Horizontal scrollbar extension added.
Enjoy!
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-25-2012 ***

Post by [RZ] »

Bosun wrote:Nice update RZ. Am happy that it worked with existing WWB layer capability. Especially the Horizontal and vertical resizing. It will be nice if it can support jquery effect/transition like that of Paul's. Good job RZ.
thank you for your feedback.
it works with the scrolling layers extensions set.
i removed the jquery portions because of a lot of downsides and a logic flaw in keyboard handling, moreover, has a lack of autorepeat feature in opera, and mine sorted it out, also there is a conflict with keypress and keydown events, also it was solved in this extension. at this point, didn't want to test the mousewheel capability (that this extension has, of course, and also an automatic fix for IE)... there are many many reasons that in my extensions i write my own code, but this is beyond of this topic. all of the abovementioned was done taking in count also external filesizes, and a lot of other etc's...
of course i'll try to improve it, but my target is "clean and lightweight code".
you can see in the demo that there are 6 scrollbars, 2 of them "attached" to the same layer and running synchronously in the same page with no issues at all (also tested in tablets and iphones, in more than 6 browsers and in 5 IE versions)... well, i myself am using them ;)
fortunately here in the forum are two options!
again, thank you for your feedback! hope you can find this extension useful!
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-25-2012 ***

Post by [RZ] »

Thank you all!
After many downloads... New feature available: Touch'n'scroll.
Enjoy!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar *** UPDATED Apr-25-2012 ***

Post by supersonictt »

[RZ] wrote:Thank you all!
After many downloads... New feature available: Touch'n'scroll.
Enjoy!
I love the touch'n'scroll feature :) Thanks a lot [RZ]
By the way, is there any way to control the scroll speed? I mean, when you scroll down the content appears slower.
Thanks a lot :)
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by supersonictt »

Oh I found it :)
Thank you again [RZ], amazing update :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by [RZ] »

@supersonictt
see? you can find all! :lol:
thanks for your feedback!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by supersonictt »

Hello [rz]

Well, am trying to do something weird here :)
I have a page that contains oc2 extensions, inside one them, there are two layers that also have oc2 extensions. Now they will both have the "News Writer Pro" extension content need to be updated online. The News writer pro is called using an iframe (scrollbar is set to "never" for the iframe and "auto" for the news writer pro).
Now if I set the scrollbar in news writer pro to hidden, can I use your extension to control the scroll of the news writer pro? Am trying to do this because I relly don't like the standard scrollbar as it doesn't match the theme of the page.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by [RZ] »

no, you cannot do this.
inlineframe doesn't know the contents' length of the embedded page.
this is a long discussion from long time ago.
i did a workaround for this, worked pretty well, but i must be updating it ALL the time, resulting in an extremely FAT code just for unreliable workarounds. nowadays it is totally unstable because of the browsers varieties...
a div content is part of the page, an iframe content is not part of the page, we don't have any control over external pages (also from the same domain).
you can do a very limited trick, but the embedded page must be in quirks mode... and the pseudo scrolling method is not so elegant.
sorry...
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by supersonictt »

Thanks for the reply :)
Actually I tried it a sew hours ago and ended up with what you just mentioned.
I found a CSS code to change the colors but it doesn't work with FireFox and IE :(
I guess I will stick to the standard one :|

Thaks a lot :)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by [RZ] »

don't use this antique/deprecated method, it worked *only* in older ie versions.
this code is not compliant.
i think it will be "better" make a quirks (and compliant) embedded page instead of using this css that is microsoft's proprietary pseudo-code.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by supersonictt »

You are right...

Actually I never changed the scrollbar before, but this time, am trying to find a way as it really looks horrible with the design!
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Apr-26-2012 ***

Post by [RZ] »

just play with the properties, you have almost all to make it feet your desired scheme.
btw, if you want to put the extension over the standard layer's scrollbar, just make the extension wider, this way it won't "fall" into the layer. also note that you have an horizontal scrollbar, you can use it as a standalone one or combining it with the vertical one.
glad to know it is working fine for you.
perhaps you can publish your final work to see how it goes?
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Oct-15-2012 ***

Post by [RZ] »

New in version 1.1.1:
Touch'n'scroll feature automatically disabled on touch devices for smoother performance.
Horizontal scrollbar's track bar 0px fixed in edit mode.

------------------

New in version 1.1:
Improved compatibility with IE.
Horizontal scrollbar added (with synchronization support for the vertical scrollbar extension).
"Touch'n'scroll" feature.

Notes:
Now you don't need anymore the previously provided fix for transparent layers in IE. The mousewheel support does it automatically!
Due to technical reasons, the support for IEquirks was removed from the horizontal scrollbar.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Oct-20-2012 ***

Post by [RZ] »

New in version 1.2:
Support for touch devices (drag/scroll).
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Nov-12-2012 ***

Post by [RZ] »

New in version 1.2.1:
Workaround that solves a bug (touchscreen devices false positive) in Maxthon browsers.
Compatibility backward for a correct startup in IE7 and earlier and other browsers with similar engine/core when using php dynamic content.
Workaround for IE bug, a pixel gap rendering rtl pages.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

New in version 1.2.2:
Fixed a few pixels gap when the container has padding (i.e. now you can scroll the text object content directly; also when it has padding and overflow settings).
Improved keyboard events handling in Safari and Lunascape (Gecko and WebKit modes) browsers in pages with multiple jQuery effects running in background.
Fixed the background image missing in styled objects under certain conditions.
A workaround for a known issue with click/doubleclick events in IE8 and earlier versions.
New max scrolltrack size property for both horizontal and vertical scroll modes; this allows proportional, fixed and fixed-proportional size modes for the trackbar.
Better focus method under certain browser conditions.
Some minor tweaks in the extension core.
User avatar
zinc
 
 
Posts: 2146
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by zinc »

Great update which as you know already forms the basis of a design for a client of mine :D
Running WYSIWYG Web Builder since 2007...
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

;)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

thank you for your post and your interest in this extension.
you can change borders and individual colors for each scrollbar element.
images for the tracker are not supported in this version for free.
for further customization options, you can contact here: www.magnawebstudio.com
with kind regards
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

i cannot understand what you are trying to do.
please tell me step by step how to reproduce your problem or, better, post a sample project to see what your issue is.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

ok, thanks for your sample project.
please note that this doesn't mean that the extension doesn't work; due to technical reasons, not always you can directly hide an extension. in that case, put the extension into an independent [and transparent] layer and show/hide it; this way you can accomplish what you are asking for.
with regards
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

ok, it's up to you. just remember this case if you plan to make some changes in your project.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

apologies for the inconvenience and thank you for your encouraging feedback.
i have no timeframe for a soon update; but there are good news.
1. add an html box
2. set type -> between <head></head> tags
3. in the html entry add the following:

Code: Select all

<style type="text/css">
 .ui-tabs .ui-tabs-hide
 {
    display: inline !important;
    visibility: hidden !important;
 }
</style>
i'm sure your [now solved] issue will be for the benefit of all!
thank your for your patience
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

kernelus wrote:Hi,
I can't download the extension, i think links are dead.
the links are working fine for me
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

Dart wrote:How do I get the scroll bars download.
Dart wrote:You self important aren't you, OK cry baby no problem don't need it. Life carry's on no big loss.
lol - you're funny and contradictory
i have no time for so stupid and childish things like this
good luck on your own - and you are 100%, you are not a big loss nor a loss at all
:lol:
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

there is nothing i can do without seeing what you did
please post a sample project with your issue
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

the scrollbar must be over the layer that points to in the z-order
use the object manager panel to move the scrollbar to the front of the layer

(btw, please always read the topic where you post your questions because it has useful information, this question was already answered)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

good!
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

in run-time mode the scrollbar is always visible
(fyi, next version will have more improvements; however, it will be visible or not according to the contents and not related to the object manager status - among other new features)
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

using javascript:
document.getElementById('your_scrollbar_id_goes_here').style.visibility = 'hidden'
or
document.getElementById('your_scrollbar_id_goes_here').style.visibility = 'visible'

or you can put the scrollbar into a layer and hide/show the layer according to your scheme using your desired events
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

good to know that all is working as expected
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Custom Scrollbar *** UPDATED Dec-09-2012 ***

Post by [RZ] »

yes that's right
besides this, in your sample, you didn't add content to the layer yet...
thank you for your feedback!
Post Reply