Ajax Tabs Content Script (v 2.2) Iframe issues

[joshaus]

I am using Ajax Tabs Content Script (v 2.2) on my site to display details on my products and I need to make the rel="#iframe" tag load the selected page at 100% of contents with no scrollbar. I need to use #iframe as the target page's include javascript that i could not get to execute from the rel="#countrydivcontainer"

I have tried to play around in the ajaxtabs.js file, however can only get it to set as a fixed height which will not suit all intended target pages, by default it is only using a 100px min-height and not allowing an height: auto or 100% attribute.

script location: http://www.dynamicdrive.com/dynamici...axtabscontent/

thankyou

[jscheuer1]

AJAX is really made for this. The content will flow into the space provided for it. If the target div has no height and/or width set and isn't constrained by a parent element's dimensions, the imported content will use all the space that it needs.

What scripts are on the external pages and are those pages on the same domain as the Ajax Tabs page?

As long as the external pages are on the same domain as the Ajax Tabs page, scripts on them can be executed once the content loads. This process can be simple or complex depending upon the script(s).

If possible (pages are all on the same domain), this is the way to go.



Anyways, iframes don't work like that. If you set one to 100% height, it will be the height of its container element, not the height of its content. If the container element has no intrinsic height or is short, the iframe will be short.

If you know the required dimensions for each page that will load into the iframe, the script could be altered to pass those along, or a script could be put on each of the pages loaded into the iframe to do that.

The former could work even if the external pages are on another domain, the latter only if they are on the same domain.

But either way it requires knowing the desired dimensions. That's why AJAX is a better way to go. There are ways of detecting the required dimensions, but these are fraught with browser inconsistencies. And we are back to requiring that all the pages be on the same domain again. It can work, but you become limited as to what sort of content can be imported and still have its required dimensions detectable. The layout of the 'top' page can also be a factor in the success of this detection approach.

[joshaus]

the other script is this

http://www.dynamicdrive.com/dynamici...agetooltip.htm

you can view what i'm trying to do here on the site live

h**p://www.caravanmart.com.au/yard/articles.php?tPath=26_29_34

i have set the colours tab to the iframe and 790px, i'd like to apply the same script to the layouts tab aswell, but as you can see it will want to scroll and i'd like to avoid the scrollbar

all pages are on the same domain yes.

[jscheuer1]

We might need a little back and forth on this to get it right, but it looks fairly easy. The trickiest part will hopefully be getting the paths to the images (both those on the imported pages and those listed in the tooltips array) right. And that's not too hard, you can use their absolute paths. If relative, they should be relative to the 'top' page (yard/articles.php).

What you do is install the Image w/ description tooltip v2.0 scripts and css on the 'top' page. In ddimgtooltip.js where you list the tips:

/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
		tooltips[2]=["../dynamicindex14/winter.jpg"]
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

		return tooltips //do not remove/change this line
	}(),

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

	//***** NO NEED TO E . . .

List all of your tips there, for all pages that will have them. I see you already have tooltips 0 through 16 for colours.htm, so for the other page (layouts.htm) start by adding tooltips[17], then 18, and so on. And on that other page, start with rel="imgtip[17]" instead of 0 for the rel attributes of the a tags.

Import these pages via AJAX, not iframe.

Finally in the Ajax Tabs init on the 'top' page, add the highlighted:

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload = function(pageurl){
	ddimgtooltip.init("*[rel^=imgtip]");
};
</script>