hakimel / stroll.js Goto Github PK

Fantastic plugin. I'd like to be able to use it on an inline list. Will it work out of the box or will it cause trouble?

When I try to open the live demo on my iPhone 4 it freezes Safari and in some cases the iOS.

For the zipper effect, it lets you scroll to the right in Firefox.

I'm not sure if I'm missing something, but I tried making an active link within the list element on the demo and it gets ignored on iOS Safari and Chrome (works fine on desktop modern browsers). I also have noticed that if there are multiple 'ul' and 'li' elements within the parent 'li' the scroll chugs and creates a few anomalies (again only on mobile). Any suggestions? I'm not well rehearsed with JavaScript so it could be me.

This plugin works fine when I make static list but when I tried to append content with creating dynamic li ,that time its not working.Please suggest me the solutions. I really wanna use this plugin.

Very nice script, but this is only support the vertical Scroll right? Is it possible to get the same effect on horizontal scroll?

Hi there, I'm trying to add a multi column full-responsive grid and be able to use stroll with it, is this possible?

Kind Regards

Could easily save 400 LOC... :)

i use the stroll.js file and css file like what is said in readme.md,but in my page,it seems like implementation in the initialization time. and also

    <li style="opacity:1;">   
   <ul style="overfolw:hidden;">  

but when i scroll my page ,it doesn't work...i don't know what's wrong...

Is it possible to scroll the list to a certain element programatically? eg scroll down so that "21" is centered in the display.

Thanks

This does not seem to work with dynamic lists. Im trying to get it to work with angular but the effect just doesn't work.

Theres a way to change the custom scrollbar and use the this effects.

I used some plugins to change the scrollbar but the effects crush.

I tried viewing your demo site on my iPhone 5 (iOS 6) inside a WebView in Tweetbot, and the scrolling simply did not work. It was like the site was broken.

There should be a fallback in a case like this where it's not working to go back to normal scrolling.

Yeah great, cool, awesome. But what about triggering this effects on mouse over. Don't really see the point with scrolling unless it's only for smart devices.

Hi there!

I think I may have found a little bug...

If the list 'viewport' is expanded (e.g. as a result of the window size altering), blank spaces will appear in the list because the appropriate 'future' and 'past' class names are not changed.

This might be a perfect case to use the new Intersection Observer API.
Do you have any ideas on this?

If I load the following js from external file

(function() {

  stroll.bind('#sidebar nav.categories div.scroll ul');

}).call(this);

I got an error

Uncaught TypeError: Cannot read property 'classList' of null
isCapablestroll.js:229
window.stroll.bindstroll.js:242
(anonymous function)store.js:3
(anonymous function)

If I do

  stroll.bind('#sidebar nav.categories div.scroll ul');

from the console or

<script> stroll.bind('#sidebar nav.categories div.scroll ul');</script>

tags its working.

Any ideas what I am doing wrong?

Hello,

First of all sorry about my poor english. I can't play fade effect in my iPad but it works on web. The other effects works perfect but the fade effect no. Please help me.

Add to bower?

If you want to use jQuery instead of native JavaScript (benefits: you can add items, less code and easier to read) use this code:

 $('ul#MyItemID').on('scroll', function (){
        var mh = $(this).height();
        $(this).children().each(function(){
            if ($(this).position().top < 0) {
                if(!$(this).hasClass('past')) 
                    $(this).addClass('past');
            } else {
                $(this).removeClass('past');
            }
            if ($(this).position().top > mh) {
                if(!$(this).hasClass('future')) 
                    $(this).addClass('future');
            } else {
                $(this).removeClass('future');
            }
        });
    });

I'm having "spacing" issues even on the official demo ( http://lab.hakim.se/scroll-effects/ )

In latest Chrome, when I scroll "fast" and reach the bottom, a space is left between the last item and the actual bottom. This happens specially with the fly effects.

It doesn't always happen but enough to bother.

Hope it can be fixed. Thanks a lot!

( I personally think it a bug in the space calculation needed of the element )

I change the demo and css for div, but don't work

Hey, maintainer(s) of hakimel/stroll.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library hakimel/stroll.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "hakimel/stroll.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

It would be lovely if the list would snap to its items 💃

I may recommend use translateZ(-300px) instead -webkit-perspective-origin: 50% 50% {-300px};

How to bind click event on list items?

Hello!
If i add div with width:200%; to LI item and set on LI overflow: scroll; I cannt scroll it on my iPhone.
Is it possible to fix it?

Was looking at implementing this into a drop down menu and when parent is clicked these effects are used on displaying the sub nav?

Hello,
I love stroll.js and I am glad that I finally got to use it. However, it doesn't seem to be working when I include stroll.min.js, bind it to a list and its container, and add a class to the list that is the style of stroll; but, it seems to be behaving normally and not strolling on scroll.

Here is a link to a live example: https://dl.dropbox.com/u/270523/help/stroll/index.html

Update: I hadn't realised that I needed to add the stroll.min.css file. I did that, but it is still not working. Now, only the last

html
<div id='deck'>
<div class='card flip'></div>
<div class='card flip'></div>
<div class='card flip'></div>
</div>
<script>
stroll.bind($('#deck .card'));
</script>

stroll.min.css
.flip{...} .flip div.card{...} .flip div.card.past{...}

stroll.min.js
if(!n.nodeName||/^(div|div)$/i.test(n.nodeName)===false){return false; }

thanks in advance :)