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 Updated!
Sunday, September 07, 2008
I just released MooScroll version 0.53 beta which has several enhancements over 0.52. It should now be much quicker and easier to plug into a design as it now plays nicer when the original element is positioned. Version 0.53 also has the following improvements.
fullWindowMode option You can use the fullWindowMode option to "replace" the window's scrollbar.
refresh function The refresh function lets you update the scrollbar (if, for instance, you change the size of the MooScroll object ).
loadContent function To dynamically update the content of a MooScroll object, just call the loadContent function passing in the new content as as string.
You can check out the updated examples to test it out:
Main MooScroll Example Page (including loadContent function demo)
fullWindowMode Example Page
Thanks to Bob Ralian for his contributions! Still on my To Do List is to add the ability for horizontal and/or vertical scrollbars (instead of just vertical). As always, you can email me or post a comment if you run across any bugs, or have any feature requests!
Labels: javascript, MooScroll, mootools
|
| posted by Jason J. Jaeger |
26 Comments:
Can you make it place both arrows on one side for Mac OS X users? (to mimic OS' behavior better)
Uh-oh. It makes content totally inaccessible on iPhone. Usually iPhone allows to scroll overflows with two fingers. MooScroll breaks that and fake scrollbar can't be dragged either.
@kl: Yes with the right images and some changes to the CSS you can mimic an OSX style scrollbar. I added that as a new example page in fact.
Thanks for letting me know about MooScroll not working on the iPhone. I would love to make MooScroll iPhone compatible but alas I lack an iPhone for testing :(
So until I have one I can use for developmental testing I have updated MooScroll, it should now be disabled for iPhone users so it will just be a regular scrollable div.
If anyone cares to donate an iPhone for the cause I would not turn it down :D
[ about MooScroll 0.57 beta ]
when updating this.parentEL.style.width in MooScrollArea.initialize() the value isn't correct (lower than the real width) in webkit browsers (I tested safari 3.2.1/win and google chrome 0.4.154.29/win) if in css rules the element hasn't overflow: hidden; ... they take off browser-scroller-width;
I solved:
- setting overflow rule before others on row 157
this.parentEl.setStyle('overflow', 'hidden').setStyles({ ...
- and deleting useless row 159
overflow:'hidden',
[ about examples and IE6/Win ]
once MooScroll initialized, scrollHandle isn't showed correctly (you must "click" somewhere to do this) ... it conflicts with height:35px; on row 64 of mooScroll.css;
I solved:
- changing it in
height: 100%;
- or adding IE conditional css
.scrollHandle {
height: 100%;
}
[ about example 1 and IE6/Win ]
scrollHandleBottom isn't positioned correctly ("topper" than proper);
I solved adding IE conditional css
.scrollHandleBottom {
bottom: -8px;
}
[ thanks ]
thank you a lot about your MooScroll: it's really wonderfull!!!
ps: sorry about my english :P
In my previous post, about IE6 rendering errors, I didn't think to absolute positioning bug with IE6: it would be sufficient setting overflow: hidden; in every classes with position: absolute; ... in Italy we say "better late than never" :)
thank you again!!!
@MoiKano
Thanks for the kind words and the time you spent finding and fixing bugs. I have updated MooScroll (0.58 beta now) with the fixes you suggested.
Thanks again!
Love the MooScroll but the refresh function doesn't work as it is not inside the MooScroll class.
I simply added the following to the main class and it worked ok:
refresh:function(){
this.mooScrollAreas.each(function(item,index){
item.refresh();
});
}
how can i set the slider to move to the bottom when i add more data to my content area and the slider updates ?
I use example3.
And I change the css for .scrollBar.
I add "background: url(../images/scroll/scrollbg.gif) repeat-y;".
That is 1px at the bottom of scrollBar.gif.
@David
Thanks for the suggestion, that is a good idea. I'll include that in the next release.
@Anonymous
I have added a setSlider function (to version 0.59) so after you use the LoadContent function you could call setSlider like this:
var myMooScroll = new MooScroll({});
myMooScroll.loadContent('my content');
myMooScroll.setSlider('bottom');
@micmic3
I am not sure I completely follow. If I understand you correctly you are getting a 1px gap at the bottom of the scroll area when you add a background image? If so, check the border perhaps.
Feel free to email me a link or files since it is much easier to see what you mean and help troubleshoot it.
Thanks
-Jason
I have used the scrollbar on a div where a whole directory of images are echoed with php. The problem is that it takes some time for them to load and when the scrollbar gets added its still loading images, but the scrollbar has used the height of content when it was created :s so i wanted to use refresh, but dont know how, so a bit explanation would be nice!
grtz
ps: so i want to refresh the scrollbar when my last image has been preloaded.
i did it in my javascript, but doesnt work :s
@Nathan
Doing this should work:
window.addEvent('domready', function() {
var myScrollArea = new MooScroll({});
//when images are done loading
myScrollArea.refresh();
});
However if you set the height and width attributes of the images,(since php can detect image size) then you should not even need to call the refresh function.
Good Luck
-Jason
Hy
Really nice script.
But I am experiencing the following problem
Let's say you have a form somewhere in the scrolling div. You can't use the space key anymore. By default, the space key scrolls the page down, in both ie and firefox. It seems that when you click on a textarea or input field you can't add space, as the focus must be set to the div, not to the input itself.
Do you have an idea how this can be fixed?
Thanks for the work and best wishes...
ah, sorry
My text editor was going nuts.
I actually found the code line I was interested in:
if(d.key==="down"||d.key==="space")
just removed d.key==="space" and now forms work just fine ;)
maybe you'll add an option in the future to either disable or enable space in the plugin options at initialisation.
A lot of people are used to pressing space to scroll down a div/page, but when you have forms in a scrolling div it just doesn't make sense to enable it as they can't add space in inputs.
Thanks again for this great plugin.
I'll soon send you a link with the finished project
@Radu
Thanks for the suggestion, I will make sure to make note of that for a future release!
-Jason
Hi,
I really like Mooscroll 0.59, but I have a problem. In Linux and Windows, with Firefox 3.0.7 the first time I load the page, it works ok, but afterthat If I reload it, the scroll bar appears to the far right and is not working. I need to reload the page with cache overwriting (ctrl+f5).
The page is Joomla generated, but I disable every module and component besides the one with the scroll inside. I am working with the last version of Mootools.
Thank you.
About the last post, my mistake.
Anyway, I had to change your code slightly 'cause my scroll had a background image with a border draw into it. I didn't want the scroll content to overlap the image borders so I needed that the 'parentEl' (scroll class) to maintain its padding (at least top and bottom ones). The other thing I could have done was to separate the background image in three, but that was a hack I didn't like.
I think that the default behaviour should be something like the thing I did.
Maybe I miss a simpler solution...
All things said, thanks for your work and time, It really helped me.
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..
Hi,
It works, mostly. I have a page where I also have an image gallery using mootools 1.2.2, (http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/) the scroll interferes with the function allowing the user to select an image from the list... Not sure which part of the script is causing this but it's in the mootools-1.2-more(slider... code...
Please help!
This looks like a great Mootools tool, however i cant quite figure out how to make it function. Maybe you could do a "quickstart guide"?
@Gadensgaard
That is a good idea I will definitely do that
@Nadia
Do you have a link to your MooScroll/BarackSlideshow combo so I can take a look? I'd love to help get the two working in harmony!
@Emanuele
You will want to include the mooscroll css file.. if you still need a hand with this email me a link or zip file so I can be of more help :)
@George
I will take a look at that as an option for a future release.. thanks for the feedback!
First thank you for a great script!
I don't know if it has been posted but I encounter a small bug with all versions of Safari: After having scrolled down to the bottom I get a gap when scrolling back to the top. Clicking in the scrollbar itself resets the proper height.
Any idea about this?
Thanks J-F
Post a Comment
<< Home