hyperlinking a named anchor in a different tab of the same page using jquery?

February 1, 2010 9:23 AM

Using J-query for tabbed navigation, can you create a hyperlink to a bookmark (named anchor) somewhere in one tab from another tab on the same page?

Our new site has J-query for tabbed navigation on our pages. We've implemented j-query so that the tabs themselves are bookmarked. That is, you can bookmark the second or third tab. We've had a consultant help is with it and it works like a charm.

We're using the J-query address plug-in so that a user hitting the back button will go to the right tab and so a user can bookmark a tab. Before we added that, we could hyperlink to page bookmarks. Now we cannot.

Now, many or our page authors want to hyperlink to places on the page. That is from tab one, they might want to hyperlink to a named anchor (often called bookmark) further down the page, or to a place on tab two. Using good ole' <a href="#whatever"> won't work of course since each tab is itself a bookmark on the page. So how can one get around that? Our consultant isn't even sure if it is possible.

So to sum up. We've got j-query tabs, we've got the address plug-in so users can bookmark a a page's tab or can go to the right tab if he/she/it hits the back button. However, now if a user creates a named anchor and tries to link to that from any tab on that page, nothing will show up. I am a bit of a j-query noob but I imagine this has come up and that there must be a way to work this.


PS, all recommendations to ditch linking to different places on the same page and why that is a usability mine pit have already been tried. This is not my decision to make. This is a hidebound research organization, and if they want to hyperlink to other parts of the page, then that is what they expect me to give 'em. That train has left the station long ago.

posted by xetere to Computers & Internet (5 answers total)

"j-query tabs" sounds a bit broad... do you have an example we might be able to look at?
posted by CharlesV42 at 10:09 AM on February 1, 2010

You can try adding an event handler for tab select that uses slideDown (or whatever else will do the job) to scroll down to the desired anchor tab within the tab.

(I haven't tried this, so I have no idea if it works or not.)
posted by ignignokt at 10:11 AM on February 1, 2010

ignignokt's idea may also work with the scrollTo plugin. You could set up a live click event (live events doc, in case you're unfamiliar - they're pretty useful) on the page's anchor elements, then parse out whatever's in the href into a selector, which you'd pass to the scrollTo function. Not sure if it'd work, but it might be worth looking into.
posted by evisceratordeath at 11:04 AM on February 1, 2010

Best answer: I've done this! Tell your consultant that the answer takes a little bit of work, but it's definitely possible. I'm going to show you my solution, and clarify what had to be done beforehand.

1. put all of your tabs/tabbed content in a div id'd as tabArea
2. every tab content area has the class .ui-tabs-panel on it

Then, your script goes through all of the links inside of #tabArea finding everything that's an anchor. Since it now has the name of the anchor, it then goes through the page finding everything that links to that anchor (these are the linkers). It takes each of those linkers and sets it up so that when you click them, it fakes a click on the tab to open it** and then, after waiting a split second, takes you to to where the anchor wanted you to go on the first place.

Granted, it's not the best solution in the world, but it definitely works and you'll be able to use it to adapt to your situation. Memail me if you have any questions.

$("#tabArea a[name!='']").each( function () {
	var $$ = $(this);
	var name = $$.attr('name');
	
	$("a[href='#" + name + "']").click( function() {
		var tab = $$.parents(".ui-tabs-panel");
		var item = $("#tabArea a[href='#" + tab.attr("id") +"']")[0];
		$(item).click();
		setTimeout("window.location.href = '#" + $$.attr('name') + "';", 100);
		return false;
	} );
});

** the whole 'var item = blah blah; $item).click()' line is kinda specific to our implementation. you'll want to trigger your tab opening by clicking whatever you need to click.
posted by soma lkzx at 12:12 PM on February 1, 2010

Response by poster: Thanks soma lkzx, I think this will work! Very sweet.
posted by xetere at 1:51 PM on February 2, 2010