Comments on: Animated navigation items using jQuery

By: John Faulds

John Faulds — Thu, 18 Dec 2008 03:55:33 +0000

Unfortunately, I don’t know enough about how Ajaxify works to suggest a solution.

By: Kenneth Henderson

Kenneth Henderson — Thu, 18 Dec 2008 02:25:33 +0000

I think it could be possible… currently the content div is just named ID=”content” on every page that is loaded. So for instance, the way Ajaxify works… I have my index.html page. I have my menu:
| Home | About | Services | Contact |

The content of home.html and index.html are identical, and each page has complete info for that page so that is can break down easily if Javascript is off. But when JS is on, Ajaxify looks for the “content” div of the file being loaded and loads only the contents of the content div.

In your code, it’s looking for the ID of the body tag, but perhaps it could be altered to look for the first part of the file name being loaded or perhaps a class on each menu button that would tell the script which page is being loaded and then add an “active” class to the coresponding menu button…while removing the “active” class to any buttons that previously had the class. I’m just not versed enough in jQuery to do this easily… I will look through some other codes to see if I can understand how this might be accomplished.

By: John Faulds

John Faulds — Thu, 18 Dec 2008 01:09:21 +0000

Presumably each piece of content has its own ID? Can you add a class to the menu unordered list or its container based on the ID of each individual item?

By: Kenneth Henderson

Kenneth Henderson — Thu, 18 Dec 2008 01:02:32 +0000

Ah… Got it! So here’s what I am trying to do… I am loading page content dynamically into a using the jQuery plug-in Ajaxify. All of the content is loaded into a div. Therefore in this case my menu remains while the content changes. Is there a way (I’m sure there is) to update the menu dynamically when the contents change… since the body tag never changes I am assuming that it would require looking for an ID tag within the div. Any thoughts?

By: John Faulds

John Faulds — Wed, 17 Dec 2008 21:13:15 +0000

Because the active link is set by an ID on the body tag. If the links actually went somewhere to different pages, there’d be a different ID on each one and the active link would change, but because you’re always on the same page, the body ID never changes. I suppose I could’ve added to the javascript to change the body ID dynamically for demonstration purposes, but it wouldn’t be required in a real environment, so it’s better left out.

By: Kenneth Henderson

Kenneth Henderson — Wed, 17 Dec 2008 19:23:14 +0000

oops! I meant Dave not Mark… I know a Mark Shea and I confused the two… my bad!

By: Kenneth Henderson

Kenneth Henderson — Wed, 17 Dec 2008 19:20:58 +0000

John, Very Nice work… I like the improvements you made to Mark’s example. I am wondering though why the Home button remains in the selected mode…on both yours and Marks. Is there a reason for that? I would like it if the only button in the “selected” or “active” mode was the actual button selected. Of course the Home button should be selected by default when the page first loads. Am I missing something?

Thanks Again!

By: die Woche im kurzen Abriss - cold-heat.de

die Woche im kurzen Abriss - cold-heat.de — Fri, 10 Oct 2008 15:27:54 +0000

[...] Buttons zu animieren. Nico hat hier ebenfalls ein kleines Tutorial geschrieben. Viele andere bieten ähnliche Lösungen an. Mich erinnert es an meine allerersten Versuche im Web, als Flash noch für [...]

By: haries

haries — Sun, 28 Sep 2008 16:30:47 +0000

Hi, nice post

By: B豚の備忘録

B豚の備忘録 — Wed, 24 Sep 2008 13:49:24 +0000

[...]その他のjQuiryとかCSSを使ったアニメーション効果色々。Animated navigation items using jQuery[tyssendesign.com.au][...]