Better Page Anchors with Anchor Slider Plugin

Posted By: Mark Aplet 11 Comments October 20, 2009

Here is another simple Mango Blog plugin that uses jQuery to make clicking internal links less jarring by adding an easing effect to select links. The obvious use is the back to top links found in footers, or at the end of long pages. Normally clicking one of these links jumps the page up or down to the specified section. The problem is that the quick jumping can be jarring and disorientating for some users.

Thankfully Cedric Dugas created a jQuery plugin that slides the page up or down with a nice easing effect so that users realize that they are in fact on the same page and not on a new one.

I really like these small finishing touches to sites. I feel that they make  it a much more pleasurable experience.

The jQuery needed is only a few lines of code so at first it hardly seamed necessary to make a Mango Blog plugin from it. But after adding it to 4 sites in a row, I thought it made more sense to go ahead and make it a standalone plugin.

How to use it

Using the Anchor Slide plugin is easy. Just add a class of 'anchorSlide' to your links. That's It! jQuery does the rest! I recommend adding a new empty class in your themes adminEditor.css file of .anchorSlide {} so that you can use it within the TinyMCE editor.

Download Anchor Slider

Plugin version:
0.1
Last Updated:
2009-10-17
Requires:
Mango Blog 1.3+
Auto-install URL:
http://anchorslider.riaforge.org/index.cfm?event=action.download

Tags: Mango Blog · Plugins

11 comments so far ↓

  • 1 Mickey // Jan 26, 2010 at 8:51 PM
    Hi Mark... I'm really enjoying exploring your Mango plugins but for some reason I can't get this one to work. I'm on CF8 and Mango 1.4. I installed the Seb Duggan jQuery plugin. I believe I created my tag properly with the anchorSlide class. But my screen just jumps to the anchor as usual... no smooth slide. When I turn on debugging it looks like it is failing on the jquery.anchor.js file with "Object doesn't support this property or method".

    I'm pretty comfortable with javascript but I don't know beans about jQuery.

    I tried deleting and reinstalling both jquery and anchorslide plugins and clearing the cache and even reloading the Mango config.

    What else can I check?

    BTW - the effect works fine when I use the "Top" link at the bottom of this page so I don't think it is my browser.
    Thanks either way.
  • 2 Mark Aplet // Jan 26, 2010 at 9:01 PM
    Sounds like a possible permissions problem where jquery and the anchor slider js are not being coppied to the plugins folder. You can check to make sure the files exist. If they do not, then it's a permissions issue. You will need to set permissions on the mango blog root folder and propagate the permissions down to all sub-directories. Then reinstall the plugins and it should work. If that doesn't fix it, can you send me a link to your blog where I can check it out for myself?
  • 3 Mickey // Jan 26, 2010 at 9:26 PM
    Thanks for the VERY fast reply. The permissions were fine and the files were there... but since I had debugging on I just stumbled across the answer accidentally. I had previously installed the Lightbox2 plugin and afterward I installed the Shadowbox3 plugin (and never went back to remove Lightbox2). Never caused a problem before.

    I just deactivated Anchorslider and noticed Lightbox2 was also throwing an error. When I deactivated that and reactivated Anchorslider everything worked fine.

    Thanks again!

    P.S. I've only been using Mango for a couple of weeks and my site is not ready for prime time but I'm loving every minute of it. I can't tell you the hours I spent being frustrated by Wordpress. Thanks for all of your hard work and taking the time to explain things.
  • 4 Mark Aplet // Jan 27, 2010 at 7:51 AM
    Lightbox2 uses scriptaculous which can cause issues with jquery in some cases. Sounds like that is the case here. Glad you figured it out.
  • 5 Danielle // Apr 26, 2011 at 2:57 PM
    Hello!!

    I'm using your plugin and having the same issue as Mickey...pretty much exactly the same, but I'm using Dreamweaver. On my local test browser it's working fine, but when I upload everything live to the test site, it's just skips to the anchors regularly...any suggestions??
  • 6 Mark Aplet // Apr 26, 2011 at 5:56 PM
    Hi Danielle,
    have you verified that the jquery and anchorslide plugins are both being called on the server? Most of the time the problem is permissions. When mango blog activates a plugin the assets are copied to a public folder located at /assets/plugins/ the easiest way to verify, is to view source and copy/paste the src links into a new browser window. If you get a 404 error then it's permissions.

    If that checks out then make sure you do not have other plugins causing a conflict by either adding their own versions of jquery or scriptaculous.

    If you still haven't fixed it, then provide me a link to the site where I can view the code and see if I can figure it out.
  • 7 Danielle // Apr 27, 2011 at 9:59 AM
    That's so strange...both files are being called on the server just fine...I don't THINK I have any other plugins at the moment, I will in the future though. (that's a different bridge I'll have to cross :) )

    The test site is here: www.kinercom.com/KinerWebTest

    The weirdest part is that when I don't use the whole URL to call the scripts it works on my local server, but not on my uploaded site. When I add the whole url, it doesn't work locally...

    This is pretty strange! I would love for you to take a look at the source code and give me some advice--I'd totally appreciate it! :D

    Thank you!
  • 8 Mark Aplet // Apr 27, 2011 at 5:29 PM
    Danielle, you have two versions of jquery being called. the first is version 1.3.2, the second is version 1.3 You can only call one version of jquery.

    Are you even using Mango Blog for this site. It appears that you are calling your files directly from within the web root and not from within a mango blog template. This plugin was written for mango blog. From the looks of it. You need help with your html template and not with the plugin.
  • 9 Danielle // Apr 28, 2011 at 9:42 AM
    Eesh, I was actually using a different vertical slider and found this one instead, so no, I am not using mango blog...sounds like I need to do some research on it.

    Seriously, though, thank you for looking into my source code-I super appreciate it. Actually by removing the 2nd jquery call worked!

    So thank you again for your prompt response, I am looking more into Mango for future projects. :)
  • 10 bhupesh // Sep 26, 2011 at 7:47 AM
    Hi,
    Can it is possible to remove the anchor tags from the url when some body refresh the page at any moment. Actually i am facing the problem when somebody refresh the page after clicking on any anchor tag , that anchor tag remains on the url and opens the same page portion having that anchor tag.

    Help will be appreciated. Thanks.
  • 11 Mark Aplet // Sep 26, 2011 at 7:56 AM
    @bhupesh It sounds like like your doing something else entirely different than what this article was intending. You can however use JS to remove the anchor. There are many different ways to do this, each with it's own unique pro's and con's. Search Stack Overflow for a solution that works best for your situation.

Leave a Comment

Leave this field empty:

Theme Design By Mark Aplet

Super Powered by Mango Blog