Tab Content Script - Remote Link

[drmeisner]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem:

I have the script working on my site. I have created a search engine that outputs the result url in the form of http://www.dwaynemeisner.com/census/...tabs=belleisle
I want the link to dynamically select the matching tab on the page. I can't seem to get it to work. I have the persistence set to false as I read in another post. Here are some snips of the code:

<ul id="annapolis1861tabs" class="shadetabs">
<li><a href="#" rel="bridgetown">Bridgetown</a></li>
<li><a href="#" rel="belleisle"> Belleisle</a></li>
<li><a href="#" rel="newcaledonia">New Caledonia</a> </li>

</ul>
<script type="text/javascript">

var countries=new ddtabcontent("annapolis1861tabs")
countries.setpersist(false)//must be false to let remote link work properly
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
If you want to try it out, use the link above, and in the search box, search for the name wade. This will give you a result that will go with the section for belleisle.

Any help would be appreciated. Thanks!
Dwayne

[jscheuer1]

The version of the script that you are using doesn't include that feature (from the tabcontent.js file on your site):

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container 

////NO NEED TO EDIT BELOW////////////////////////

Here's the one from the demo page:

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////NO NEED TO EDIT BELOW////////////////////////

Update to the current version (right click and 'save as'):

tabcontent.js

and replace your copy on the server with it.

Once you do that, you may use the proper link syntax for the script which is:

http://www.dwaynemeisner.com/census/novascotia/annapolis1861/index.php?annapolis1861tabs=4

to select the belleisle tab.

[drmeisner]

Thanks John,

I must have got the original script from the first page.

It appears that the script scans all the tabs and gets them as an array, (hence the numbering system). I plan on using this script on many census based pages, and there will always be differing numbers of tabs. Is there a way to modify the script slightly so that the script would look for the name I am passing to it rather than a number? For example, I could use the id attribute to name either the associated link or the <li> tag that holds the tab. So, it would look like this: <li id="belleisle"... or <a id="belleisle" href....

If this would be possible, it would greatly simplify the use of the pages for my many users.

I would appreciate your thoughts on this.

Thanks,
Dwayne

[jscheuer1]

Why use id? Each tab already has a rel attribute, right? Use this version of the script (right click and 'save as'):

tabcontent.js

No need to change anything else. You may now use a URL like:

http://www.dwaynemeisner.com/census/novascotia/annapolis1861/index.php?annapolis1861tabs=belleisle

to select this tab:

<li><a href="#" rel="belleisle"> Belleisle</a></li>

in this group:

<ul id="annapolis1861tabs" class="shadetabs">

Edit: I've updated the script so that now the id of the tab or its rel attribute may be used. There are I believe situations where the id would be preferred.

[drmeisner]

John, everything works exactly as I wanted. I originally did all my census pages using the Ajax Tabs content - http://dynamicdrive.com/dynamicindex...tent/index.htm script. I assume that the only difference now is that my main index.php page for each group will be huge. If I decided that they are too big to work with, would I be able to modify the ajax script to do the same thing? That is the reason I have all the html pages - so they could be loaded by the ajax, and also indexed easily by my search engine.
I would welcome your thoughts on this.
Thanks again!
Dwayne

[jscheuer1]

You would need an updated version of that script as well:

Attachment 3574

I've also added the option to use the tab's id instead of its rel because there are some tabs you might not want to give a rel to. You only need to use one or the other.

For the same reason I've updated the script in my previous post to also accept id or rel.

[drmeisner]

John, I redid the pages using the ajax script, and all is well. The only thing I notice is that the url in the address bar always remains the same (the one that was invoked via the link on the remote page) no matter which tab is activated later. Therefore, (and I apologize if I should start a new thread for this) the click print function which comes from the Always on Top Script - http://dynamicdrive.com/dynamicindex10/topmsg.htm that I am using to open a new window with just the html file - Bellisle - or whichever - always opens the page listed in the address bar. I need to pass the rel attribute into this script as well so that it will ignore the incorrect one in the bar. Example:
Address bar contains: http://www.dwaynemeisner.com/census/...tabs=belleisle
I have clicked on another tab - say Nictaux - I need rel from this tab passed to script so that the script thinks the address is http://www.dwaynemeisner.com/census/...61tabs=nictaux

Once again, the main page is http://www.dwaynemeisner.com/census/...1861/index.php

The topmsg script is embedded near the end of the page.

I hope this makes sense.
Thanks again!
Dwayne

[jscheuer1]

I have clicked on another tab - say Nictaux - I need rel from this tab passed to script so that the script thinks the address is /census/novascotia/annapolis1861/index.php?annapolis1861tabs=nictaux

You are pulling that value from PHP which can only tell what the address is when the page loads. Keeping that model you would have to reload the page each time you change tabs - totally defeating the purpose of using ajaxtabs.

Here are the important parts of your topmsg script for that:

	var url=("belleisle");
	var url1="";
	url1=url+".html?tngprint=1";
var message='<a style="font-size:16px;font-variant:small-caps;text-decoration:underline; href=\"#\" onclick=\"window.open(url1)"; title="Click Here To Print This Census Transcription"><img src="http://www.dwaynemeisner.com/tng_print.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" alt="Click Here To Print This Census Transcription"/>Click Here To Print This Census Transcription</a>&nbsp;<img src="http://www.dwaynemeisner.com/tng_print.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" alt="Click Here To Print This Census Transcription"/>'

The highlighted red is supplied by PHP, as I said, only on page load. So the entire highlighted section only gets worked out once per page load. It may as well all be removed.

To get the same effect to be responsive to the currently selected tab's rel attribute we can change the entire above to just:

var message='<nobr style="display:block;padding-bottom:3px;"><a style="display:block;padding-bottom:3px;font-size:16px;font-variant:small-caps;" href="javascript:printTranscription();" onclick="window.open(countries.tabs[countries.currentTabIndex].rel + \'.html?tngprint=1\'); return false;" title="Click Here To Print This Census Transcription"><img src="http://www.dwaynemeisner.com/tng_print.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" alt="Click Here To Print This Census Transcription"/>Click Here To Print This Census Transcription<img src="http://www.dwaynemeisner.com/tng_print.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" style="padding-left:3px;" alt="Click Here To Print This Census Transcription"/></a></nobr>';

The main change is from:

onclick=\"window.open(url1)";

to:

onclick="window.open(countries.tabs[countries.currentTabIndex].rel + \'.html?tngprint=1\'); return false;"

But it also includes cleaning up the quoting convention and the addition of the nobr tag wrapper to prevent word wrap in some browsers.

Edit: I later realized that both the original and the replacement code in this post were not generating the intended nor optimal HTML for the topmsg script. What I had earlier works though. And so does the new edited version now in this post. It's more user friendly, looks a little better and uses a true link, so has the expected cursor. Ideally the styles for the tags in it should be placed in a stylesheet though. It makes no changes to the new onclick event.

[drmeisner]

Thanks John, that's exactly what I needed!

Dwayne

[jscheuer1]

You're welcome. Take a look back at my previous post, I've edited it to improve the replacement code (see edit note at the bottom of that post). If you're interested in what it mentions about transferring the styles to the stylesheet, let me know.