New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to find specific element triggering pronto events #18

Closed
whispy opened this Issue Apr 21, 2014 · 29 comments

Comments

Projects
None yet
2 participants
@whispy
Copy link

whispy commented Apr 21, 2014

I'm trying to find out what element is triggering a pronto event. Currently, it seems I can only target $(window), like $(window).on('pronto.request', function(e, eventInfo){}. Is it possible to somehow return the name of the specific element that is triggering the pronto event?

Or is it even possible to do something like $('.class a').on('pronto.render', function(e, eventInfo){}? I've tried, but it doesn't seem to work.

The reason I'm asking is that I have a function I would like to call only if the pronto event is triggered by clicking on a specific element.

@whispy whispy changed the title Not able to set target for pronto events Unable to find specific element triggering pronto events Apr 21, 2014

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Apr 22, 2014

Hi Whispy,

I'm not sure, but it would be great if the current functionality satisfies your use-case.
Otherwise we can try to modify / extend it.

Question: Have you had a proper look at the

 selector

...property?

It can be used to specify a bespoke selection of links to be ajaxified, like this:

 $('#content').ajaxify({selector: '.class a'}); // selector property passed to Pronto for ajaxifying clicks

and then bind to the Pronto event:

 $(window).on('pronto.request', function(e, eventInfo){}

Could you try that out first?

Thanks for raising the issue!

@arvgta arvgta added the question label Apr 22, 2014

@whispy

This comment has been minimized.

Copy link

whispy commented Apr 22, 2014

I tried playing around with selectors, but was not able to get it to work. It just made content not load. Maybe I am misunderstanding what that property does?

To elaborate more on my situation — I have Function A that I want to run only when pronto.request is triggered by clicking #menu a links. I also have Function B, which I want to run only when pronto.request is triggered by clicking #work a links.

@whispy

This comment has been minimized.

Copy link

whispy commented Apr 22, 2014

I managed to create a somewhat kludgey fix for this earlier:

$(window).on('pronto.request', function(){
    menuAClick();
})

$(window).on('pronto.render', function(){
    workAClick();
})

function menuAClick() {
    $('#menu').on('click', 'a', function() {
        var navSelector = '#menu a';
        functionA(navSelector);
    })
}

function workAClick() {
    $('#work').on('click', 'a', function() {
        var workThumbs = '#work a'
        functionB(workThumbs);
    })
}

Essentially, it runs menuAClick every time a pronto.request is seen and workAClick every time a pronto.render is seen, and checks for if a click on one of the elements is what caused the pronto event to trigger. At least, that's what I think it does — I'm not exactly sure, but it's fixed my problem.

However, if there's a better way within the plugin to solve this, please let me know. Thanks!

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Apr 23, 2014

Nice workaround - glad you got it going. If you feel that returning some useful data from the Pronto events such as the element clicked would be of benefit to lots of users, I'd be happy to give it a try!

So does this issue pertain to a lot of users, in your opinion?

@whispy

This comment has been minimized.

Copy link

whispy commented Apr 24, 2014

I can't say whether it pertains to a lot of users. However, I do think it would be a very useful feature for people to have, as it would enable them to run functions based on element-specific information.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Apr 27, 2014

Thanks! I agree that it is most definitely a useful feature - implemented!
(only in this file at the moment:

)

You should be able to access the original event details in any Pronto request like this:

  • Use srcElement or target respectively as described at stackoverflow below

http://stackoverflow.com/questions/5301643/how-can-i-make-event-srcelement-work-in-firefox-and-what-does-it-mean

Use this introducing statement:

 var target = event.target || event.srcElement;

then access "target" transparently.

Please post here whether this works for your use-case after testing...

Thanks again!

@whispy

This comment has been minimized.

Copy link

whispy commented Apr 27, 2014

I'm unsure of how to implement this. I tried the below two ways and they both resulted in this error: ReferenceError: event is not defined

$(window).on('pronto.request', function(){
    var target = event.target || event.srcElement;
    console.log(target)
})
var target = event.target || event.srcElement;

$(target).on('pronto.request', function(){
    console.log(target)
})

Any suggestions?

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Apr 28, 2014

Hi Whispy!

Try:

 $(window).on('pronto.request', function(event){
     var target = event.target || event.srcElement;
     console.log(target)
 })
@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Apr 29, 2014

Updated all current versions accordingly, whether at 4nf.org or here at GitHub.

@arvgta arvgta added enhancement and removed question labels May 2, 2014

@arvgta arvgta closed this May 6, 2014

@whispy

This comment has been minimized.

Copy link

whispy commented May 6, 2014

Just saw the email notification about this issue being closed. Sorry I haven't been able to try your fix yet. I'm graduating from university this month so I've been super busy. Hopefully I'll have some time to try it out next week.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented May 7, 2014

Hi Whispy,

yes, please drop a note here, once you tried out the enhancement.
All the best for your studies...

@whispy

This comment has been minimized.

Copy link

whispy commented May 7, 2014

I had a few minutes to try it out this morning and it still is not working properly. It returns:
[object Window] as the value for target.

This is what I used:

$(window).on('pronto.request', function(event){
    var target = event.target || event.srcElement;
    console.log(target)
})

It might make it easier to debug if I link my site too: http://discoverdan.com/. The pronto.request .on() method begins line 109, custom.js.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented May 8, 2014

Hi Whispy,

very strange - I'll debug shortly.
Sorry for the inconvenience and thanks for the link to your site.

@arvgta arvgta reopened this May 8, 2014

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented May 8, 2014

Think I found out, what the problem is. Try this, it works for me:

jQuery(window).on('pronto.request', 
    function(event, eventInfo){
         console.debug(eventInfo); return false;});

Attempted to document here, too:

@whispy

This comment has been minimized.

Copy link

whispy commented May 8, 2014

Yes! The following almost works for me:

$(window).on('pronto.request', function(event, eventInfo){
    console.log(eventInfo);
})

It prints this in the console (I made red dashes to mark where it says the element):
2014-05-08_13-21-00

Now, how do I then pass that on to a variable?
var varName = currentTarget?

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented May 8, 2014

Hi Whispy! We're getting there. Now putting it all together should work:

$(window).on('pronto.request', function(event, eventInfo){
    var target = eventInfo.target || eventInfo.srcElement;
    console.log(target);
})

...where "target" should hold what you wanted...

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented May 28, 2014

Hi Whispy! Please re-open if still doesn't work...

@arvgta arvgta closed this May 28, 2014

@whispy

This comment has been minimized.

Copy link

whispy commented Jul 23, 2014

I've finally got around to testing this and...it works! Perfectly! console.log(target); returns the exact a that I've clicked. Thanks for the help, Arvind.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Jul 23, 2014

Hey Whispy!

That's great. Thanks for the post-documentation!

Would you like your site to be listed as an example here:

http://4nf.org/demos/ ?

@whispy

This comment has been minimized.

Copy link

whispy commented Jul 23, 2014

Sure :)

http://discoverdan.com/

Plugin call:

jQuery('#ajaxContent, #ajaxWork, #ajaxHero, #ajaxHeroWork').ajaxify({
});

(The current version has verbosity: 2, but I'm going to be removing that).

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Jul 23, 2014

Thanks a lot, because these example use-cases are convincing and invaluable!

http://4nf.org/examples/ - done :-)

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Jul 25, 2014

Hey Whispy!

Had a look at your site and could see some very impressive page transitions.
Does that involve a lot of code?

If you have a minute, feel free to comment on issue #15, regarding page transitions.

I'm thinking of including some basic page transitions "out of the box" as long as it doesn't blow up the code in terms of size...

What do you think?

@whispy

This comment has been minimized.

Copy link

whispy commented Jul 27, 2014

It didn't really involve that much code, but it's all done with CSS mainly. The jQuery is just used to add and remove classes to HTML elements, and the classes contain CSS transitions that create the animation effect.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Jul 28, 2014

Hi Whispy,

thanks for the interesting reply!
I would be looking to initially support sliding "left/right/up/down" and possibly another fading effect on top, pertaining to the main content div...

I understand that there is also the possibility to create these transitions with pure jQuery especially with

$.animate() 

Just wondering, how much code that would involve...

@whispy

This comment has been minimized.

Copy link

whispy commented Jul 29, 2014

Well, a simple slide effect could probably be done using: http://api.jquery.com/category/effects/sliding/?

Or, you could set an element's height to 0 using .css() and then

$.animate({
height: '500' + 'px'
}, 500, "easingHere")

Is that what you mean?

EDIT: And there are some speed/performance concerns. While you have more control over transitions using jQuery, it is somewhat less performant. Read: http://css-tricks.com/myth-busting-css-animations-vs-javascript/. There's also http://julian.com/research/velocity/, which re-implements jQuery's default $.animate() and, supposedly, makes it faster than both jQuery's method AND native CSS transitions.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Jul 29, 2014

Hi Whispy!

You're a star!
Thanks very much!

That's exactly what I meant...
Would be interesting to know from others as well, whether it's worthwhile coding "out of the box"?

If there is demand for it, I will give it a try...

@whispy

This comment has been minimized.

Copy link

whispy commented Aug 15, 2014

@arvgta, saw this earlier today: http://miguel-perez.github.io/jquery.smoothState.js/index.html and the repo: https://github.com/miguel-perez/jquery.smoothState.js

Looks similar to what you're thinking of with adding animations/transitions.

@arvgta

This comment has been minimized.

Copy link
Owner

arvgta commented Aug 16, 2014

Hi Whispy!

Thanks for your research!

I trust you mean, this could be used as an example:

...for implementing smooth page transitions?

EDIT: I've added you on http://4nf.org/more/thanks/ additionally :)

@arvgta

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment