PDA

View Full Version : Tab Content Script - Remote Link



drmeisner
10-04-2010, 01:15 AM
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/novascotia/annapolis1861/index.php?annapolistabs=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
10-04-2010, 09:19 AM
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 (http://dynamicdrive.com/dynamicindex17/tabcontent/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
10-04-2010, 02:49 PM
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
10-04-2010, 05:35 PM
Why use id? Each tab already has a rel attribute, right? Use this version of the script (right click and 'save as'):

5451

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">

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
10-04-2010, 07:51 PM
John, everything works exactly as I wanted. I originally did all my census pages using the Ajax Tabs content - http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/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
10-04-2010, 09:17 PM
You would need an updated version of that script as well:

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
10-05-2010, 02:03 AM
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/novascotia/annapolis1861/index.php?annapolis1861tabs=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/novascotia/annapolis1861/index.php?annapolis1861tabs=nictaux

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

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

I hope this makes sense.
Thanks again!
Dwayne

jscheuer1
10-05-2010, 12:42 PM
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.

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
10-05-2010, 01:43 PM
Thanks John, that's exactly what I needed!

Dwayne

jscheuer1
10-05-2010, 04:57 PM
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.

drmeisner
10-05-2010, 07:42 PM
Thanks John, that is better. Yes, I would be interested in the stylesheet. Also, I tried defining the width of the new window as is done near the top of the page for the regular print function, but it always seems to open full screen. In addition, in the stylesheet you are talking about, do we have to worry about making the printout fit on a page properly or does each individual printer handle that issue?

Thanks!

jscheuer1
10-07-2010, 04:40 AM
The stylesheet I was mentioning is for the link, not the window. Those styles would be governed by the styles on the page in the window. These appear to be OK for now.

Here's a style sheet you could put in the head of the index.php page:


<style type="text/css">
#topmsg {
z-index: 100;
}
#topmsg nobr, #topmsg a {
display: block;
padding-bottom: 3px;
}
#topmsg nobr {
position: relative;
top: 3px;
}
#topmsg a {
font-size: 16px;
font-variant: small-caps;
}
#topmsg span {
position: relative;
top: -2px;
}
#topmsg img {
width: 16px;
height: 15px;
border-width: 0;
margin: 0 3px;
}
</style>

This and the below code take into account the new printer image you are using. Once we've moved the styles to the stylesheet, the message var can be like:


var message='<nobr><a href="javascript:printTranscription();" onclick="window.open(countries.tabs[countries.currentTabIndex].rel + \'.html?tngprint=1\', \'_blank\', \'width=800, height=600\'); return false;" title="Click Here To Print This Census Transcription"><img src="http://www.dwaynemeisner.com/images/printericon.jpg" alt="Click Here To Print This Census Transcription"/><span>Click Here To Print This Census Transcription</span><img src="http://www.dwaynemeisner.com/images/printericon.jpg" alt="Click Here To Print This Census Transcription"/></a></nobr>'

Notice I've updated the onclick to allow you to specify a size:


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

drmeisner
10-07-2010, 08:50 PM
John, I quickly set up the Annapolis County 1871 pages to see if it would work as the 1861 pages. The only thing I notice is that when a tab is selected, and you click to print it, it actually open the page for the tab to the left of the chosen tab. So, if Broad Cove is the selected tab, the window that opens is for Bridgetown. And, if the first tab is selected, Annapolis Royal, the window opens with a 403 error because there is nothing to the left, and shows this as an error:
You don't have permission to access /census/novascotia/annapolis1871/.html on this server.
You will notice the file name is missing. Any thoughts as to why this is happening, or did I just screw something up when I was copying code from the 1861 index page to the 1871 index page? I ran a couple of tests: print $html; prints out as the right tab, however, if I document.write(countries.tabs[countries.currentTabIndex].rel); - it prints out the name of the tab to the left.

Thanks!
Dwayne

I figured out what was wrong - the opening <ul> tag was above a block of text rather than above the first <li> tag. I guess I made a mistake during copy & paste...

sitemasters
05-08-2014, 10:27 PM
Hi John,

I too would prefer to use the id or rel rather than the tab position number, but the link to the modified script you provided in attachment 3573 no longer works.

"Invalid Attachment specified. If you followed a valid link, please notify the administrator."

Any chance you can re-upload the attachment?

jscheuer1
05-09-2014, 01:19 AM
The board has deleted it. Here it is again:

5452

sitemasters
05-09-2014, 10:25 AM
Wonderful, exactly what I needed, works an absolute charm.

Thank you John.