Blog Has Moved
Tuesday, July 28, 2009
Since migrating my site to Drupal I now no longer use Blogger and hence my blog has moved here.
MooScroll
Saturday, August 02, 2008
MooScroll lets you customize how the scrollbar looks on scrollable divs. Just customize the images and tweak the CSS if necessary and you have a customized scrollable div. You can have multiple instances on a single page. If the end-user does not have javascript enabled, they just see a regular scrollable div so it degrades gracefully.
Labels: javascript, MooScroll, mootools
|
| posted by Jason J. Jaeger |
17 Comments:
crashes safari 2 on mac
: (
back to the jquery alternative for me for now
I can't get this to work on simonewphoto.com/test/about.html. Could you help me out.
Thanks
themisfit,
Looks like you are linking to mooscroll before linking to mootools. Since mooscroll requires mootools it must come after it in the code.
Thanks :)
Very nice indeed. The question now is, will it automagically refresh the scroller viewport when set to 100% height and we resize the window?
themisfit-
I also noticed in your code that you are setting up an accordion navigation. You will have to put your javascript link to function.js after the link to mootools as well. Also since Mootools More is modular you will want to download it making sure to check the slider checkbox (for mooscroll) and the accordion checkbox (for accordion).
I find it useful to just check all the boxes to have a version with all the modules while whatever I am working on is under development, then go back and prune it down to just the modules you need.
One more thing; looks like you will want to remove the leading / on the image URLs in the mooscroll css based on where your images are :)
I made a quick example just changing these things:
http://greengeckodesign.com/dev/simonewphoto/about.html
anonymous-
Version 0.52 now disables itself for Safari 2. Not a perfect solution but better than crashing the browser :)
At least until I have time to make it compatible.
Oscar-
That feature is coming soon :)
Do you have this for 1.11?
thanks for the help I got it to work
Hey, just wanted to compliment you on your work. It looks great. And so does the design of your blog. Well done.
themisfit-
Glad to help :)
Bob-
Thanks!
Taylor-
I don't currently have this for Mootools 1.1, perhaps sometime if I have some extra time I will port it over (unless somebody beats me to it)
Great work !!
It has problems in IE7 if there is a element with position:relative at the scrolled div...
but great :))
Hi iuttu,
to fix the IE7 position:relative bug try:
.contentEl {
position:relative;
}
Regards,
Michael
Hello,
I'm using MooScroll and it works fine. First I'm using it to scroll the website (the mooscrool fullscreen mode). But inside the page there's a div with overflow:scroll that doesn't works. When it's applied to that div, the text become lines with some kind of "empty space" and the scrollbars still remain the browser default.
I guess the CSS is right, but it follows below:
#scroll_it{
position: absolute;
display: block;
overflow: scroll;
width: 392px;
height: 116px;
margin-bottom: 8px;
margin-top: 5px;
}
And the Javascript:
window.addEvent('domready', function() {
var myScrollAreaA = new MooScroll({
selector:'#scroll_it',
});
var myScrollArea = new MooScroll({
selector:'#container',
fullWindowMode:true
});
});
As I said, #container change the default scrollbar to scroll the whole website to the MooScroll. And the #scroll_it is one div inside the #container div.
So, could someone help me? I need the solution quickly! Please!
Thanks!
Hi, one problem I solved, the MooScroll now appears. But the text still remains invisible. The text is being changed by a blank text. Help!
Hi.
First, congratulation for your mooscroll.. I like it and I would like to use it in my joomlasite..
But I'm following the instructions and I just got the line of ur scroll (I mean, the central line with the 2 arrows) without "scrollerpad"... morover, it appears next to the default scroller of the browser ...
my script is just a call of mooscroll cause the >div< have the default class "scroll"
window.addEvent('domready', function() {
var myScrollArea = new MooScroll();
});
I checked all the links with firebug:scripts are there, css and images too... Should I have maybe to set the CSS of my >div< in a particular way?
I searched to compare your examples html but nothing..
Please.. I don't want give up..
@Diego
I just did a quick test ( http://greengeckodesign.com/projects/mooscroll/examples/nested/ ) and I am not getting the error you describe.
If you email me a zip or link I could be of more help :)
@iuttu
I agree with Michael, if that does not work try using the zoom:1 css property (using conditional commenting so only IE sees it). If that does not work you can email me a zip file or link and I can take a closer look.
Post a Comment
<< Home