Ajax Tab Content Script anchor problem

[gryphon61]

1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem: I've got the Ajax tabs working nicely, but now am trying to figure out how to have a link elsewhere on my page load a specific tab and move down to an anchored place.

I can get it to change to the correct tab with <a href="javascript:instance.expandit('insert info here')"> but I don't know how to add #anchor info to that to get it to work.

The tab I'm changing to is not stored within the main html page. It's an external file that I'm loading (which works fine for the tab setup) but I don't know how to properly enter the anchor info.

I tried to do a search here and found a suggestion for putting #info in the href with an onClick but it didn't work.

thanks for any help!

[jscheuer1]

Since your question is posed in general terms, so is my answer. This is what I would suggest:

<a href="#anchor" onclick="instance.expandit('insert info here'); return true;">

As I say, this is in general terms, as was your question. If you want more help, please ask a more specific question and/or:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[gryphon61]

Hi John,

Thanks for the reply. Sorry I didn't supply enough information.

I tried the #anchor with the onclick. While it does change to the correct tab, it doesn't drop down to the anchor point.

Here's a link to a test page where you can see what I'm working with:
http://order.imagers.com/direct-to-b...chortest.lasso

The Foamcore link is what I'm trying to make work with the anchor.

thanks,
kim

[jscheuer1]

The anchor isn't on the page yet. So you cannot navigate to it that way.

You could try a poll. Put this script in the head of your order.imagers.com/direct-to-board/anchortest.lasso page:

<script type="text/javascript">
function pollAnchor(anchor){
	if(!document.getElementsByName(anchor)[0]){
		setTimeout(function(){pollAnchor(anchor);}, 300);
		return;
	} else {
		location.hash = '#' + anchor;
	}
}
</script>

Then for your link:

<a href="#" onclick="subnav.expandit('Flatbed Printing Papers'); pollAnchor('Foamcore'); return false;">Foamcore</a>

[gryphon61]

Ah, I see what you mean, John.
That page isn't actually loaded, so it can't find the anchor.

I tried your polling idea, but it didn't work (assuming I've got it set up correctly).

thanks for your help in understanding this.

[jscheuer1]

You didn't set it up right, you have:

<script type="text/javascript">
function pollAnchor(anchor){
	if(!document.getElementsByName(anchor)0){
		setTimeout(function(){pollAnchor(anchor);}, 300);
		return;
	} else {
		location.hash = '#' + anchor;
	}
}
</script>

I posted:

<script type="text/javascript">
function pollAnchor(anchor){
	if(!document.getElementsByName(anchor)[0]){
		setTimeout(function(){pollAnchor(anchor);}, 300);
		return;
	} else {
		location.hash = '#' + anchor;
	}
}
</script>

There still could be other problems. But this much has to be fixed first.

[gryphon61]

Doh! I did copy your code exactly, but I didn't notice the [] symbols. The server I have this on tried to process them and messed up the JavaScript. I've fixed so the server won't do that and your solution looks like it will work great now!

The only thing I notice I can make happen is that when I click the foamcore link, the anchor info stays in the URL when I click on other tab panels. Then if I click the foamcore link again, it pops to the top of the papers panel instead of going back to the anchored point. I guess it may be a glitch with the JS and the ajax tabs code in that exact scenario. Works great otherwise.

Sorry I spaced on checking the code and making my server adjustment on the first try. I really appreciate your assistance and patience with helping me figure it out.

[jscheuer1]

Two things:

1. I cannot seem to duplicate the issue you are talking about. Could you please be more precise about what the problem is? What exact sequence of events must I follow to duplicate the problem, and in what browser?
   
   
2. I see you've tried to make the pollAnchor function external. You can. But you must remove the opening and closing script tags.

For number two, in the Assets/PollAnchor.js file, change:

<script type="text/javascript">
function pollAnchor(anchor){
	if(!document.getElementsByName(anchor)[0]){
		setTimeout(function(){pollAnchor(anchor);}, 300);
		return;
	} else {
		location.hash = '#' + anchor;
	}
}
</script>

to:

function pollAnchor(anchor){
	if(!document.getElementsByName(anchor)[0]){
		setTimeout(function(){pollAnchor(anchor);}, 300);
		return;
	} else {
		location.hash = '#' + anchor;
	}
}

Note: This doesn't refer to the on page script. That one needs its script tags to work. But once you fix the external version, you won't need the on page one.

About number one - the hash (#Foamcore) will remain in the address bar until changed. But it shouldn't affect anything. If you want to get rid of it, you would need to have an anchor for each link. Careful though, if you do the page will try to scroll to it. So it better be there and be where you want the page to scroll to. Also, if you had succeeded originally in using href="#Foamcore", then #Foamcore" would still appear in the address bar.

[gryphon61]

Hi John,

Ah, now that I've tested in other browsers, I see that the issue doesn't happen in IE, Firefox, Opera...
Just in Safari and Google Chrome.
(how 'bout that -- something that works in IE without a hack!) ;-)

In Safari/Chrome, if I click on the Foamcore link it works as it should. But then if I click on one of the ajax tabs at the top of the box area, then click on the foamcore link again, it goes to the top of the papers tab and not to the foamcore link.

Thanks too for the external comment.

[jscheuer1]

OK, I think I see what's happening. It looks like those browsers are 'thinking', "Well the hash already is #Foamcore, so there's nothing to do."

I'd try (add the highlighted):

function pollAnchor(anchor){
	location.hash = '';
	if(!document.getElementsByName(anchor)[0]){
		setTimeout(function(){pollAnchor(anchor);}, 300);
		return;
	} else {
		location.hash = '#' + anchor;
	}
}