View Full Version : Ajax Tabs - Link targets and Default DIV content

Code Red
08-15-2008, 11:34 AM
1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:

First of all, love this script - best Javascript tabs script I've seen yet. I've modified it for use on one of my OS Commerce (PHP) sites but I have three problems/questions -

1. Any links in the tab content open within the tab window itself, but I want them to open in the parent window. As the site content is dynamic and there are thousands of products, I don't have a lot of control over any links that may appear in the tab window, so adding target = "_top" to the end of all the URLs isn't an option. Is there any way to set a default link target within the script itself?

2. I've set the tab window to a fixed height, rather than jumping up and down in size depending on what tab is clicked, so I'm loading the content into Iframes. Is there any way to get the content of the default DIV container to load into an Iframe? At the moment if the text is too long it drops out of the bottom of the box and runs down the page. One solution was to create an external page with the default content and load that up, but this created its own separate problems and I'd rather not do it this way. In fact, being able to load DIV contents rather than external pages into Iframes would get around problem #1 nicely...

3. The persistent tab option is great, the only drawback is it applies this across the whole site - so if you view product 'A' and click a particular tab, when you view product 'B' it shows the same tab as the default. Any easy way of making it specific to a particular page? I could probably come up with something using sessions etc, but I'm lazy and hoping there's some quick and easy solution!

I'm not that hot on Javascript, so sorry if these questions are elementary!

08-15-2008, 08:06 PM
To answer your questions:

1) The easiest way I can think of is simply to add the tag:

<base target="_top">

to the top of all your external pages' source. This causes all links in those pages to load in the parent window.

2) Instead of that, why not just style the default content to look/ behave like an IFRAME on your page:

<div style="width: 100%; height: 200px; overflow:scroll; overflow-x: hidden">This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</div>

3) To modify the persist feature to be specific to each directory on your site, find and remove the part in red for the following line inside the .js file:

document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)

Code Red
08-18-2008, 08:30 AM
3/3 result!!! Brilliant!