Adobe Community: Message List - Tutorial On How Make a Custom Scrollbar

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 19 Jul 2014 20:27:26 GMT

Hi Zaxist,

Great to hear from you. I've included a link to the Edge project.

When you run ../web/m208_debug.html, there will be four links to display text on the right side. The mCustomScrollbar only shows up for Link1, then if any other link is clicked, the scrollbar goes away. Hopefully this will show the problem.

Thanks very much for your help,

Ian

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 19 Jul 2014 18:55:00 GMT

Hi lan750

everything looks fine, maybe something else make this problem, so for better help i need to have your project to have a look, you can pm me a link to your project

regards

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 19 Jul 2014 17:12:47 GMT

Hi Zaxist,

I have found an interesting problem with mCustomScrollbar I wanted to ask you about.

The early version of mCS v2.3 does not appear to work in Adobe Edge CC, so I upgraded to mCS v2.8.

Everything seemed fine until I realized that mCustomScrollbar (V2.8) in EdgeCC only worked once, and then does not appear again in the document, until it is reloaded.

In other words, where there are several textareas that rely on the mCS, only the first occurrance using the scrollbar works, then afterwards just static text is displayed.

Here is an example of the code in EdgeCC. The first time the timeline runs this code it works fine, but when the timeline returns to run this code again, the html is just displayed as static text, and *without* the scrollbar.

Any insights you could share would be great. I can also send you a working test version that shows the behaviour.

Thanks, Ian

sym.$("Contents").html("<p>Page1 Dolor sit amet risus quis, etc...</p>");

sym.$("Contents").mCustomScrollbar({

autoDraggerLength:true,

scrollInertia:800,

mouseWheel:{

enable: true,

scrollAmount: 60

}

});

==== Just for the record, these are the js files loaded on the Edge Stage =====

yepnope({nope:[ 'css/jquery.mCustomScrollbar_v2.8.css',

'js/jquery.mCustomScrollbar.concat.min_v3.1.11.js',

'js/jquery.mCustomScrollbar_v2.8.7.js',

'js/jquery-1.9.1.min.js',

],complete: init});

function init (){

}

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 30 Dec 2013 17:06:15 GMT

Hello. Thank you for your quick ad very informative tutorial. Want to ask. If i make any text object hidden. Than i have one button to make this hidden text object appeal as visible, how can i make this custom scrollbar working proper;y? it seems that it is doesn't working properly (

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Wed, 16 Oct 2013 13:41:41 GMT

RavenDesign, as promised here is the file sample: https://app.box.com/s/p5mpmqpbar7u3hf1fz83

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 21:20:29 GMT

Cheers, I've tried but failed I think i need to read alot more tuts before I get to grips with installing plugin's into edge ^_^

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 21:05:27 GMT

Let me check it out and see if I can help you.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 21:00:16 GMT

That should be useful I'm trying to install http://stephband.info/jparallax/ plug-in into edge at the moment its a bit of a night mare Ill look forward to reading !

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 20:57:22 GMT

YOu can use different things with yepnope for any plugin.

I am writting a tutorial about that. Should be available soon on edgeHero.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 20:07:18 GMT

Arh Thanks for that I used ("html, body")

do you inplent mostly all plug-ins the same way?

for example with this: http://stephband.info/jparallax/

you would import all the plugin files with

yepnope({nope:[

'file.js',

'file2.js',

],complete: init});

function init ()

{

USAGE CODE HERE?

}

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 19:28:35 GMT

yes of course

Please Read Post Number 32

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 18:38:38 GMT

Wonderful and helpful Tut!

I have one question could this be applied to the window of the broswer and scroll the hole project instead just a DIV?

Example:

sym.$(window).mCustomScrollbar

sym.$("html, body").mCustomScrollbar

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 15 Oct 2013 02:12:51 GMT

You're correct. Eliminating those lines of code eliminated the problem. No more errors. Yes, I must have missed that but I'm not a coder first. More of a designer. So I will be the first to admit I easily miss these things and this code is all over the place. Thanks for the assistance.

Obviously, it would be great down the road for An to include a better debugger, so no one has to fish through all sorts of code to try to find errors instead of knowing precisely where to look.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 23:28:35 GMT

you have different problem that do not have to do anything with customscrollbar plugin !!

for example in

Stage > navVision > on your symbols click event you have this line

sym.getComposition().getStage().getSymbol('ribbon').css({display: none});

that you should replace with this :

stage.$("ribbon").hide();

or in

Stage > navIndustries > btnResidential > click Event

you have this mistake again :

sym.getComposition().getStage().getSymbol('contentBot').$('copy').mCustomScrollbar({

you should change the contentBot with content

you should do more precision

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 22:38:22 GMT

Well, you're right about that one. Problem is gone on Privacy and Terms of Use. But anywhere else? Different story. Try clicking on any other button. Brings up the JavaScript error.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 22:32:26 GMT

i just saw your project file, and i got that you dont have any symbol named contentBot !!

so this line is wrong

sym.getComposition().getStage().getSymbol('contentBot').$('copy').mCustomScrollbar({....

you shoud rename that contentBot to content to make it work for privacy button

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 15:33:51 GMT

Ah, OK. In that case, Zaxist, I sent PM'ed you a link to my Dropbox file.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 14:36:18 GMT

You can PM a link to your file to members by clicking on the user name or icon on the left and then click on private message (the right of the screen.)

When you post your files to your Adobe cloud account or any other cloud storage account, you will have the option to copy the link to your files.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 14:08:21 GMT

Zaxist,

No problem with the delay. I can't post the files online due to NDA. I could email them to you but I don't have your email address. Can you provide that somehow?

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 14 Oct 2013 11:42:37 GMT

sorry for my late,

we have great samples in this topic, did you tried them to see where is your problem ?

if you did this just sent me your project file so i can tell you where is your problem, cause your code is right

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Wed, 09 Oct 2013 19:38:38 GMT

This is a great tutorial but I'm having an JS error issue with the code. I had to insert the code inside of a symbol on a click event. If I had it in compositionReady, the scrollbar would not appear.

I now get the scrollbar but I also receive a JS error in console.

This is my code.

var stage = sym.getComposition().getStage()
stage.$("content").show();
sym.getComposition().getStage().getSymbol('content').$('head').html('Individuality');
sym.getComposition().getStage().getSymbol('content').$('copy').html('<p>Copy goes here.</p>')
sym.getComposition().getStage().getSymbol('ribbon').css({display: none});
sym.getComposition().getStage().getSymbol('contentBot').$('copy').mCustomScrollbar({
                scrollInertia:500,
                scrollEasing:"easeOutCirc",
                scrollButtons:{
                    enable:true
                        }
                });

And if I click on the button that runs this code, I get this:

Javascript error in event handler! Event Type = element

Any idea how to correct it?

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 22 Jul 2013 08:35:47 GMT

i'm glad that i could help you

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 22 Jul 2013 08:32:29 GMT

working!

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Fri, 19 Jul 2013 11:28:03 GMT

thanks, i'll try it... when i have time. thanks again for your help

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 18 Jul 2013 10:26:56 GMT

if you want to use scroll for a symbol or div you should use NiceScroll plugin

Download it from Here : http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js

yepnope({nope:[ 'jquery.nicescroll.min.js',

],complete: init});

function init (){

sym.$("Your Symbol/Element Name").niceScroll();

}

for more detail on how to customize it go here :

http://areaaperta.com/nicescroll/

Reguards

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 18 Jul 2013 10:17:33 GMT

hi, Zaxist:

sorry i'am not an expert. ¿can i use this custom scrollbar in another type of container (not text)? i'm trying to use it, but it only works with text containers. if i use a rectangle as container, it does not show any scrollbar in the browser.

Thanks for all your help.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Wed, 19 Jun 2013 14:05:40 GMT

change to true not boolean !!, boolean is a type of value not a value !!

horizontalScroll: true;

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Wed, 19 Jun 2013 12:22:32 GMT

Hi Zaxist,

thank you a lot for this Tutorial! I was trying to include that extension before, but I could't because of lack of knoledge...

It works great for me with vertical scrolling - but what about horizontal scroll bars?

I tried to change that line: "horizontalScroll:false, /*scroll horizontally: boolean*/" from false into boolean (with dreamweaver in "jquery.mCustomScrollbar.js"),

but it simply doesn't work.

In my animation, there is only a horizontal scrollbar needed, no vertical one. If I set the "false" to "true", the animation doesn't work at all.

Can you please help me?

I really want this thing to work!

Thanks a lot,

Kat

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Mar 2013 21:52:20 GMT

Hi Zaxist,

It has been awhile since my last message, I wanted to say I found your sample file very useful.

It was very interesting to study your methods. I made some minor changes to customize the slideshow and overall it works very well.

I wanted to let you know again how grateful I am for your help. I learned a lot from your examples.

Thanks again,

Ian

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Fri, 22 Feb 2013 12:39:12 GMT

Hi Ian

i made your button currect and i made action in the way you wanted, and it was so easy, you could also do that, i think you just need to change the way you are looking into actions !!

also i made a Note in Play/Pause button for you to undrestanding better how it works

Here is the link : http://www.mediafire.com/?eks31cp7w4j0bbb

if you had any Question Ask me

Reguards

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 21 Feb 2013 18:18:39 GMT

Hi Zaxist,

Thank you for the revised code. I realize the references to the timeline in ms works the best for the slideshow. Your code works very nicely. I agree that I am still getting familiar with coding in the Edge API.

I got the slideshow to work, with one exception I hope you can help me with.

The Pause/Play function works very well, but I've also added a Back and Forward buttons.

The Back and Forward btns do work, but *only* when the Slideshow is Paused first ("Play" btn showing).

What I wanted to implement was that if the Slideshow was Playing (the "Pause" btn showing), that when either the Back or Forward btns were clicked, the Slideshow would get paused, and then the Pause/Play button would change to "Play" (showing it was Paused).

Then the slideshow would go backward or advance based on what button was clicked.

There are two issues. When the slideshow is Playing ("Pause" btn showing)

1. both Back and Forward btns play "twice" before slideshow pauses. Then they work okay.

2. the Pause/Play button .css moves the button to the upper-left corner on the stage,

rather than changing the sprite sheet background to "Play". (the symbol isn't accessed correctly)

I'm hoping you can see where I went wrong with the coding.

Thanks again,

Ian

https://www.dropbox.com/s/c062phuuiva5tud/slideshow_test6a.zip

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 19 Feb 2013 14:30:47 GMT

i just Forgot to add Flag on the Start lable in time line

you add this line in there

Flag = 1000;

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 19 Feb 2013 14:11:24 GMT

Hi Ian

there is no way that you can make play and pause button work in edge animate without absolute references in ms !!

and even i cant undrestand why you want to make something like that ?

for example if i press pause button when the pic is in 90% fade out what would be intersting in it ?

i just missed the pic and have to press play button to play from that moment to going to next pic !

but don't worry, i add some trick in action to make it work in the way you wanted

i also made the play and pause button in diffrent way without clipping, so i think this way would be easiest for you to undrestand

Here is The Slideshow Link : http://www.mediafire.com/?vbp0u3imbgc5guq

Note : the way you write action wouldn't work, you should know the tricks and how can use them...

i suggest you these links :

http://www.w3schools.com/ > look at HTML4 and HTML5 and CSS3 to undrestanding how can program in Edge for them

and also : http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html > this would help you to undrestanding how can program in Edge with Scripts..

Reguards

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 19 Feb 2013 04:02:27 GMT

Hi Zaxist,

I got some things working on the slideshow, but not everything, so I'll gladly take you up on your offer.

I got the sprite sheet working, but in a different way (since I had trouble getting the css.clip method to work).

However, as you will see in the example, the pause only stops the slideshow after the current slide fades out and the next image fades in.

The Play button doesn't restart the slideshow at all. I wanted to see if I could get it to work without absolute references in ms to the timeline.

Maybe it's not that easy this way, but perhaps you can see what it might need to work.

Thanks again,

Ian

https://www.dropbox.com/sh/z1fohewhqy4oshu/7vx1vUX7m4/slideshow_test2a.zip

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 18 Feb 2013 07:18:00 GMT

Hi Ian

Don't worry about Slide Show, if you couldn't fix bugs i'll help you

Reguards

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 18 Feb 2013 04:53:08 GMT

Hi Zaxist,

Thanks for your comments. I fixed the thumb cursor on the Back button.

I am still working on the slideshow pause/play buttons. I still have some minor bugs to work out.

If I cannot fix them I may have to ask your help again.

Regards,

Ian

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 14 Feb 2013 20:33:24 GMT

Hi Ian

you're welcome, i liked to help you on your project, it was always pleasure to read your comment after..

i visited the site and of course i straight look forward to Project #154 and it was beautiful as i expected, i enjoyed pictures very much, also the stories was lovely...

just One thing you missed to do on the Project was you forgot to make thumb point for Back button.. !! making that change will makes it perfect...

also i liked to see play and pause buttons for pictures but they was missed !! i hope you add them too.. those would make your Project Professional

i'm glad that you liked the way i used codes in Slide Show... and yes, it is possible to make buttons over each other and just some lines needed to be add to make it looks good..

at any time you needed help you can count on me, it's my pleasure to help you...

With best reguards

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 14 Feb 2013 18:56:31 GMT

Hi Zaxist,

I enjoyed looking over your code to see how you made the button interactions.

It was also interesting to see how you used sprites. It helped me appreciate how useful they could be.

I've not used them before. I also think it would be possible to build a pause/play button that toggled in the same location.

Fading in sprites should be useful too. I've started to experiment with them in the slideshow.

As for the project link, I've included it below. Almost all of the 'panels' are built with flash. Only a few including the one you helped me with are developed with Edge. It is an ongoing effort.

Thanks again for your help.

Regards,

Ian

https://www.dropbox.com/s/06wfdh5wi6034ib/mural_url.txt

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 12 Feb 2013 20:22:16 GMT

Here is The link : http://www.mediafire.com/?sj96ucmcdo4g0rt

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 12 Feb 2013 20:19:15 GMT

Hi Zaxist,

Once I get this project tidied up I will certainly send you the link to it.

btw, I tried the slideshow link on your previous message and for some reason I got an error message.

Could you repost that link for me, and I'll try it again?

Thanks very much,

Ian

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Tue, 12 Feb 2013 11:41:52 GMT

Hi lan

it's good to read your comment, i'm glad that i could help you

Making Pause and Play button isn't so difficult, you just need some experience on programming language, i made a simple sample for you like what you had in your project, just images has been changed

here is a link to Slideshow project : http://www.mediafire.com/download.php?sj96ucmcdo4g0rt

i hope you like this one too

anyway i liked your project, actually i liked the story and images, please leave your complete project link here if it's now on the web, i like to visit it and read the stories

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Mon, 11 Feb 2013 18:36:23 GMT

Hi Zaxist,

I read your note on Saturday and realized immediately you were right

that it was a layers issue with the page. I was away this weekend so I only

got to work on the project Sunday night.

I very much liked your solution to different scrolling textboxes, it is very clean and elegant.

It was such a relief to get your reply with a solution so quickly.

I am very grateful for your help, and also for the suggestion on the mouseover color change!

I got the project working last night and it is already posted today.

You have already helped me so much I almost don't know how to thank you enough.

I did however think of one more feature I hadn't been able to implement yet in Edge I would like to ask you about.

You would have noticed the slideshow in the project.

I haven`t been able to get Pause/Play controls to work.

Would you happen to know of method to implement these controls for a slideshow?

I was able to get Forward, Back buttons working but not the Pause/Play.

Anyways, thank you again for your help. It is very much appreciated.

Ian

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Feb 2013 20:59:21 GMT

i have suggestion for you that can help you to make your project easier..

i see you used timeline and 2 diffrent text symbol and convert those into one symbol just to make an mouse over and mouse out action !!

you can make it very easy by using code !! try these steps and you will see it by yourself

in this Example you made Korean War again with just using programming

A - Create a Text and write Korean War inside of it and make it like what you made already in your Project with name : korean_btn

B - Now Open text Action and

add Mouse Over and write :

sym.$("Text").css({"color":"#ffffff"});

add Mouse Out and write :

sym.$("Text").css({"color":"#ffefa5"});

add Click and write :

sym.play("Korean");

Now you're done !

Note : you have these hex codes of color when you wanna choose color for your symbol

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Feb 2013 19:37:34 GMT

Hi lan

i made some correction in your project...

1 - renamed jquery.mCustomScrollbar.css to mCustomScrollbar.css ( Just for make name clear )

2 - deleted (sicily_text_sym & text2b_training_sym) and renamed ( market_text_sym to Content )

3 - removed your codes in Stage and made some changes in your timeline and applied codes there and changed your button's Click action

Here is your currect project : http://www.mediafire.com/download.php?bf9sj0p8agbgp8i

Problem in your project was for :

you used too many text in over each other and when you called Lower layer ( for example sicily_text_sym by click on sicily_btn_sym ) you coudn't have click on it because of Upper layer ( market_text_sym was on over it ), this ability Called z-index in Edge and similar Programs that works with layers..

i removed them for you and left just One layer there and made changes to that layer only and now you can have your Scrollbar working for all of them...

Note: your Scrollbar is already work now with your project right now but you have to remove the upper layer to figure it out by your self that is working currectly and it doesn't have to do anything with multiple text and text formating

Enjoy your project

Zaxist

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Feb 2013 16:25:04 GMT

Hi Zaxist,

Thanks for your offer. I have included a link to the test project.

The project is incomplete but will illustrate the issue.

If you open /publish/web/m154.html and click on Next some text links will show up on the right side. Each one will display different text.

In Firefox, the first two links show the custom scroll bar, but they don`t scroll.

The third link `Market Garden` shows a working scrollbar. This is curious, since the code for all three

appears to be the same.

https://www.dropbox.com/sh/z1fohewhqy4oshu/v6_02SozEc

Thanks in advance,

Ian

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Feb 2013 10:46:46 GMT

in the end if you couldn't get succeed, send me your project so i can help you better...

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Feb 2013 10:41:54 GMT

Hi lan

your code is right and i'm sure your problem is not your code...

i think maybe your Problem is your files that you are using, i see 'css/mural_scrolltext.css', in yepnope, i dont know what is it and how you wanted to use it but remove this file would help you, any way i copy paste your codes in a project and everything works very well you can get it from here :

http://www.mediafire.com/download.php?bgflqmbd0bkuzz0

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Sat, 09 Feb 2013 00:22:34 GMT

Hi Zaxist,

I have made some good progress, but I did run into a snag. I can't tell if it is a quirk with my code

or something else I've missed in Edge.

But what I've discovered is that if I have more than one textbox defined (with different symbol names),

only *one* of them will work at a time. The textboxes are at different parts of the timeline, and reached by a click event.

I compared this code with your example that has two working Custom Scrollbars but I can`t see anything different in the

code to explain the behaviour.

Anyways, if you know what might be amiss, I`d be pleased to hear from you,

Thanks again,

Ian

Here is the code I`m using on the Stage:

// insert code to be run when the composition is fully loaded here

yepnope({nope:[ 'css/jquery.mCustomScrollbar.css',

'css/mural_scrolltext.css',

'js/jquery.mousewheel.min.js',

'js/jquery.mCustomScrollbar.js',

'js/jquery-ui-1.8.21.custom.min.js',

'js/jquery-1.8.3.min.js',

],complete: init});

function init (){

sym.$("text1_sym").html("<h3>Title 1</h3><p>much more text</p>");

sym.$("text2_sym").html("<h3>Title 2</h3><p>much More text</p>");

sym.$("text3_sym").html("<h3>Title 3</h3><p>much more text</p>");

sym.$("text1_sym").mCustomScrollbar({

autoDraggerLength:true,

scrollInertia:800,

scrollEasing:"easeOutCirc",

mousewheel:true,

mouseWheelPixels:40,

scrollButtons:{

enable:false,

scrollType:"continuous",

}

});

sym.$("text2_sym").mCustomScrollbar({

autoDraggerLength:true,

scrollInertia:800,

scrollEasing:"easeOutCirc",

mousewheel:true,

mouseWheelPixels:40,

scrollButtons:{

enable:false,

scrollType:"continuous",

}

});

sym.$("text3_sym").mCustomScrollbar({

autoDraggerLength:true,

scrollInertia:800,

scrollEasing:"easeOutCirc",

mousewheel:true,

mouseWheelPixels:40,

scrollButtons:{

enable:false,

scrollType:"continuous",

}

});

}

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 07 Feb 2013 22:23:17 GMT

yes lan, your code is right in the end, and i'm glad that i could help you...

Note : the Sample i made at last is only for Symbols and will not work with mcustomscrollbar method, and will shows only on Google Chrome, Safari and Maxthon browsers, and if you tried that as you said it would dissappear after run....

Note : the symbol that i made could be Only with normal Scrollbar in Firefox, and if i said wont work with IE and Firefox i said for Scrollbar not the text style

Note : if you want your text in Stage then you shoud allways put your text and your style inside of function init(), otherwise will not work at all !! like you did already..

Zaxist.

Re: Tutorial On How Make a Custom Scrollbar

forums_noreply@adobe.com — Thu, 07 Feb 2013 22:06:48 GMT

Hi Zaxist,

That was a very interesting test. The "Text" file you made shows nicely how different formatting can be applied to a text symbol. It even displayed in Firefox.

However, when I applied the Custom Scrollbar css and js files, the scrolling text would not display at all. (Actually, the text would appear briefly, and then disappear.) This may have been the behaviour you were referring to when you said it wouldn`t work in Firefox.

However, next I tried the .html method. This showed a lot of promise, since the text displayed properly in Edge.

But at first the Custom Scrollbar did not appear beside the text... So then I switched the order in compositionReady

and put the .html method first, and it worked!!!! The Custom Scrollbar also works as well!!!

I was even able to add css to the text. Quite amazing... I believe this is the solution, and best of all, it *works* in Firefox!

Thank you very much, especially for your timely response.

You have been a great help,

Ian

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

On the Stage, I used the following:

compositionReady

// insert code to be run when the composition is fully loaded here

yepnope({nope:[

'css/jquery.mCustomScrollbar.css',

'css/myStyles.css',

'js/jquery.mousewheel.min.js',

'js/jquery.mCustomScrollbar.js',

'js/jquery-ui-1.8.21.custom.min.js',

'js/jquery-1.8.3.min.js',],complete: init});

function init (){

sym.$("text2").html("<h3>Title</h3><p>My very long text goes here....</p>");

sym.$("text2").mCustomScrollbar({

autoDraggerLength:true,

scrollInertia:800,

scrollEasing:"easeOutCirc",

scrollButtons:{

enable:false,

scrollType:"continuous",

scrollSpeed:20,

}

});

}