jQuery Smooth-Scroll Library with Angular?

[Pepper Lebeck-Jobe]

Has anyone tried using the jQuery Smooth-Scroll library with Angular.js?

https://github.com/kswedberg/jquery-smooth-scroll

I'm not having any luck making it work.  The closest I've come is:

http://sarah.lebeckjobe.com/resources/grief

There are some unexpected interactions though:

  1. I don't expect the links under "Book Recommendations" to actually affect the hash "#" part of the URL since the smooth-scroll library is supposed to be interrupting those click events.

  2. The scrolling is not smooth.  It jumps around.

  3. The dynamically positioned "Book Recommendations" menu sometimes flys off the top of the screen.  (This doesn't happen if you just load the page and then scroll manually up and down.)

  4. The offset option on the smoothScroll function doesn't seem to have any effect.

I should mention that I think I have it wired up according to the instructions correctly because I can pass an "afterScroll: function() {alert("Hello")}" option to the smoothScroll function and see the alert box. 

The desired behavior is exactly like this website's:

http://blackestate.co.nz/

(Of course, they aren't using angular yet.)

I haven't put together a jsfiddle yet to demonstrate how things aren't working because I'm using several libraries together to make things work.  I might try to put one together if someone doesn't respond with, "Oh, I've seen this before.  Here's what you do ..."

Thanks in advance,

Pepper

[Pepper Lebeck-Jobe]

Okay, so I thought I would try to reproduce the problem in jsfiddle.

http://jsfiddle.net/eljobe/v2HP2/50/

But, that one actually works.

The main difference between that jsfiddle and http://sarah.lebeckjobe.com/resources/grief is that the later uses the route provider in angular.  I'm not sure you can use route provider with jsfiddle.  Does anyone know?

[Pawel Kozlowski]

Hi!

On Mon, Dec 31, 2012 at 2:25 PM, Pepper Lebeck-Jobe <elj...@gmail.com> wrote:
> I'm not sure you can use route provider with jsfiddle. Does anyone know?

Yep, it is possible:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/
Or just use plunker...

Cheers,
Pawel

--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Pepper Lebeck-Jobe]

Pawel,

Thanks for the idea of using plunker.  I was able to reproduce the bad behavior once I added in the complexity of the routeProvider stuff.

http://plnkr.co/edit/gBKT2jO4u1Lr8fjvabd7

Does anyone have any idea why this isn't working?

Also note, something still doesn't work with the ng-view being replaced on plunker when using the route behavior. But, if you just load it and test the scrolling stuff by clicking on p1, p2, p3, etc.  You'll notice that it is very broken indeed.

My next move is to try the newest version of angular.  The example is written against 1.0.0, so I'll upgrade to 1.0.3, and see if it behaves any better. (I'm doubtful though.)

Thanks,

Pepper

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.

[Pepper Lebeck-Jobe]

Also, the example at: http://docs.angularjs.org/api/ng.$route

doesn't work correctly with the version I have of chrome in either JSFiddle or Plunker.

Chrome Version: 24.0.1312.45

OS Macintosh: 10.7.5

Thoughts?

[Pepper Lebeck-Jobe]

By the way, upgrading to the newest version of angularjs, hasn't fixed the problem.  It did require that I change from "template" to "templateUrl" in my route provider configuration, but it has also made it impossible to get plunker to work.

[Pepper Lebeck-Jobe]

Am I not providing enough information or are people just too busy right now to help out with this request?

I'm thinking that it must have something to do with how routeProvider deals with location changes.

So, I'm thinking of just removing routeProvider altogether, and just having separate html files with ng-include="partials/header.html" and the same for footer.  But, this seems like a really silly work-around.

[Joshua Miller]

Hi!

As far as I am aware, you can't use Plunker or jsFiddle with HTML5 mode as the server is not configured for it. But, I forked your Plunker, disabled HTML5 mode, and updated to angular 1.0.3 and now routing works fine. However, obviously, now your jQuery plugin can't work as it relies on the hash. http://plnkr.co/edit/Y3DL9mqo8zFKenQsUILn?p=preview

That said, when routing is disabled, the smooth scrolling seems to operate fine. So if you're developing in your own environment where html5Mode is configured, everything should work. So, for those of us who haven't been involved in this conversation before, can you explain once more exactly what issue you're trying to solve outside Plunker to bring us up to speed?

Josh

[Pepper Lebeck-Jobe]

Hi Josh and Others,

Thanks for creating the fork of my Plunker.  Is the incompatibility with html5mode documented somewhere so others could be saved this confusion in the future?

Unfortunately, Plunker is not loading for me right now.  I think it is a server error (500) on their side.  They've been having troubles today.

The desired effect is basically like on this page:

http://blackestate.co.nz/

The best I've been able to do thus far is this:

http://sarah.lebeckjobe.com/resources/grief

There are some unexpected interactions though:

  1. I don't expect the links under "Book Recommendations" to actually affect the hash "#" part of the URL since the smooth-scroll library is supposed to be interrupting those click events.

  2. The scrolling is not smooth.  It jumps around.

  3. The dynamically positioned "Book Recommendations" menu sometimes flys off the top of the screen.  (This doesn't happen if you just load the page and then scroll manually up and down.)

  4. The offset option on the smoothScroll function doesn't seem to have any effect.

What I am trying to accomplish can probably be best viewed as this jsFiddle:

http://jsfiddle.net/eljobe/v2HP2/50/

The exception being that I want the "this" "that" and "other" links to be able to replace everything below the blue "navigation" bar.  This is the purpose for which I am currently using the $routeProvider mechanism.

One thing you said struck me: "However, obviously, now your jQuery plugin can't work as it relies on the hash."

It maybe obvious to you, but it isn't obvious to me.  It seems to me that the jQuery plug-in should be intercepting the browser event when one of the "p1", "p2", "p3" links are clicked and rather than having angular's routeProvider try to update the URL and the browser history, it would simply scroll the page.  That's what happens with the jsfiddle I linked to earlier does.  Maybe you can explain more about how the jQuery plugin can't work because it relies on the hash?  Please pardon my ignorance.

[Joshua Miller]

Hi!

The issue with html5Mode() on Plunker and jsFiddle is on their side - not with Angular - but it has been mentioned on this group before.

As for the plugin relying on the hash, I misunderstood the inner workings of the plugin; I've never used it before. 

Things start to get hinky when using jQuery plugins with Angular, but your Fiddle seems to work fine; I notice no jumpiness and no effect on the hash. So I'll just guess that the issue you have is trying to get the plugin working while using the $routeProvider service. So I started with a basic example (on Plunker, as I find it easier to use) and then added routing; it seems to work fine. Unfortunately, Plunker keeps coming in and out and it won't let me save my plunk to give a link to you, so I've attached the files from it so you can see. I'll post the URL when Plunker's back.

Let's start with this. Go ahead and manipulate it to expose your issue and we'll go from there.

Josh

[Pepper Lebeck-Jobe]

Hey Josh,

I really, really appreciate all the time and attention you are paying to this problem of mine.  My wife thanks you too.

Could you include a link to plnkr since they are back up and working right now?

I ask because I'm having trouble getting the files from the zip file to actually come together as a working example.

Thanks again,

Pepper

[Pepper Lebeck-Jobe]

Wait,

Nevermind.  I think I have an example of this on plnkr based on the changes you had in the zip file.  What do you think of this:

http://plnkr.co/edit/LFZrrIlfEP27BKEC87Zd

Thanks,

Pepper

[Joshua Miller]

Yeah, that seems to work - cool. Though you'll have to try html5Mode() on your server if that's still a requirement. It _should_ continue working, but who knows?

Josh

[Pepper Lebeck-Jobe]

Man, that stinks.  So, then it's just the html5mode which makes it not work?

Do you have enough expertise in the difference between the html5mode and the other mode to know why it breaks with html5mode?

[Pawel Kozlowski]

Hi!

On Thu, Jan 3, 2013 at 9:00 PM, Pepper Lebeck-Jobe <elj...@gmail.com> wrote:
> Man, that stinks. So, then it's just the html5mode which makes it not work?
>
> Do you have enough expertise in the difference between the html5mode and the
> other mode to know why it breaks with html5mode?

For the html5 mode you need to have a server configured accordingly.
More info here:
http://docs.angularjs.org/guide/dev_guide.services.$location

and the example (node.js + express) here:
https://github.com/angular-app/angular-app/blob/master/server/server.js#L81

[Joshua Miller]

I don't think html5Mode() should break the plugin. I was just saying that you can't test it with Plunker or jsFiddle. What you should do is take the exact code that works on Plunker, put it on your server, and enable html5 mode. I'm guessing it will still work as it shouldn't affect click handlers.

However, as an aside, the jQuery Smooth-Scroll library is pretty simple and this could all be cleaned up much nicer if you rewrote it in an Angular directive rather than fussing with integration.

Josh

[Pepper Lebeck-Jobe]

On Thu, Jan 3, 2013 at 3:12 PM, Joshua Miller <jo...@joshdmiller.com> wrote:

I don't think html5Mode() should break the plugin. I was just saying that you can't test it with Plunker or jsFiddle. What you should do is take the exact code that works on Plunker, put it on your server, and enable html5 mode. I'm guessing it will still work as it shouldn't affect click handlers.

However, as an aside, the jQuery Smooth-Scroll library is pretty simple and this could all be cleaned up much nicer if you rewrote it in an Angular directive rather than fussing with integration.

This is a suggestion I was thinking might come up eventually.  I was pretty happy with how easily waypoints had integrated with angular, but you're probably right that just creating my own implementation of what smooth-scroll is doing as a directive is the path of less complexity.

[Pepper Lebeck-Jobe]

Pawel,

Thanks for the pointers.  I was aware of the server-side configuration needed for html5mode.  I have accomplished it with the url rewrite module in apache in a .htaccess file on my server.

It seems, though that using html5mode somehow keeps the scrolling library from intercepting the event it needs to know to scroll the page.

So, it looks like I am left with Joshua's suggestion to write a custom directive which does the same scrolling behavior, but without the independence from angular.

I'm off to code!

Thanks everyone for all the help.