Relate property to other DOM property

[NeedNap]

I modified the library to support dynamic property variation simply setting an evaluate function using the following syntax:

data-100="top:{$('#myTarget').position().top + parseInt($('#myTarget').css('margin-top'), 10)}"

I than flag this condition and when the browser window resize I call the method refresh to parse again the DOM element and evaluate again the dynamic params.

I don't know if there is another method to do that, but I change the library myself and it works fine.

You should implement that in the future.

[Prinzhorn]

Feel free to show some of your code.

I had something like this in mind, but I definitely won't allow embedding actual code. This just looks awful and needs a much more sophisticated parser, because regular expressions won't do (the embedded code is a context-free language).

I suggest something like

<div data-100="top:$kittenWar;left:20%;"></div>

skrollr.init({
    helpers: {
        kittenWar: function() {
            var $el = $('#myTarget');
            return $el.position().top + parseInt($el.css('margin-top'), 10) + 'px';
        }
    }
});

Should the helpers be executed after a resize event or on other occasions as well?

[NeedNap]

Hi Alexander, I attach the modified library to this email.

You can see the code I added (comments marked by "§§§ ALE").

It works well but I think it's not optimized.

Now I have the "re-parse" problem to the first and last keyframe.

However, I will try to also use the piece of code that you sent me.

Let me know if you have news in this library.

Thank you for your great job.

Alessio

On Oct 2, 2012, at 9:52 AM, Alexander Prinzhorn [email protected] wrote:

Feel free to show some of your code.

I had something like this in mind, but I definitely won't allow embedding actual code. This just looks awful and needs a much more sophisticated parser, because regular expressions won't do (the embedded code is a context-free language).

I suggest something like

skrollr.init({ helpers: { kittenWar: function() { var $el = $('#myTarget'); return $el.position().top + parseInt($el.css('margin-top'), 10) + 'px'; } } }); Should the helpers be executed after a resize event or on other occasions as well?

— Reply to this email directly or view it on GitHub.

[Prinzhorn]

You can't use attachments when replying to a comment using e-mail, because you don't actually send an e-mail to me but just trigger a comment on GitHub. So either send this directly to me at [email protected] or just commit your changes to https://github.com/NeedNap/skrollr so I can view it online. I mean, this is GitHub, it's all about source code.

[Prinzhorn]

Don't worry, I got your e-mail with the code. I took a look at it but didn't had much time to think about it.

[castus]

Could you share the code for this feature?

[NeedNap]

Hi Alexander, I've done some implementations to the library, but the code is not optimized. If you want I can send you the code and a link where you can try what I implemented.

The link is: http://www.scuolamobile.it/dev/index.html but this web site is still under construction.

Let me know what do you think of that ;).

Alessio

On Nov 30, 2012, at 11:27 AM, castus [email protected] wrote:

Could you share the code for this feature?

— Reply to this email directly or view it on GitHub.

[castus]

Thanks. BTW. nice parallax effect you have, grats ;)

[Prinzhorn]

Odds are I will add something like this. But as I said in my first comment I won't allow actual code and I won't use eval. But instead you can define helper function which get executed in the context (this-value) of the element.

[Prinzhorn]

related https://gist.github.com/spacehunter/4748507 (just for me as a reminder)

[tobsn]

was this ever implemented? right now I'm having the issue that I'm moving an element that is right: fixed and has to move to the left into a sticky menu... so

logo

should move into centered space and stick there... basically a sticky menu at the top that appears while scrolling down, which drags the logo along and puts it at the beginning of the menu. which obviously needs to adjust to all screensizes.

[Prinzhorn]

was this ever implemented?

No, but I'm planning to add it in the future.

[Prinzhorn]

I haven't forgotten about this feature request. I'm planning to add a better plugin architecture and then create a separate plugin for people who need this feature.

[mrtnbroder]

I really dig the suggestion you mentioned here https://github.com/Prinzhorn/skrollr/issues/69#issuecomment-9061662 maybe helpers should be called attributes though or something similar, since you want to set a dynamic attribute of a property.

Would love to see this implemented soon :D 2 years for a feature request... I think it is about time ;D

[Prinzhorn]

I think values makes more sense than attributes.

I'm not sure if the dollar sign is the best choice. This could get us in trouble for skrollr-stylesheets (e.g. SASS uses the dollar for variables).

[albertvolkman]

bump