Ajax Tabs content and LightWindow

[kona]

Ajax Tabs content

http://www.dynamicdrive.com/dynamici...tent/index.htm

By the way, I love this forum. Everyone is so helpful!

Can I make one of the tabs launch an html page (embedded flash gallery-SimpleViewer) in LightWindow?
LightWindow seems to be the only script of it's kind that works well with different types of content.

Thanks!

[ronrrico]

Hello, I was wondering if someone could give a hand here.
I installed Ajaxtabs:
http://www.dynamicdrive.com/dynamici...tent/index.htm

And I'm trying to get Visual LightBox to work inside the tabs...
http://visuallightbox.com/ this is a Lightbox2 script.

I seems we are not getting the script call inside the tab.

See example: http://youregiftbasket.com/mice-c-1_9.html

I also have a 2nd issue with Ajaxtabs, how can I set auto height according to content when using #iframe mode?
In ajaxtabs.js the onlything I could do is Set a single hight for all,
There is a height:auto; in file but, this dose not work...
I am using min-height: to set a single hieght for all....

Any ideas out there?

Thanks,
Ronnie

[jscheuer1]

You are using the iframe method of import. But there are no scripts on the page in the iframe that would enable visual lightbox to function there. Even if there were, the effect would probably be confined to the iframe. If you used the AJAX method of import, we might be able to devise a command that will allow all visual lightbox content to work, even that on imported pages:

jQuery(document).click(function(e){
		var el = e.target;
		if(el.rel && el.rel.indexOf('lightbox') === 0){
			e.preventDefault();
			Lightbox.start(el);
		} else if (el.parentNode && el.parentNode.rel && el.parentNode.rel.indexOf('lightbox') === 0){
			e.preventDefault();
			Lightbox.start(el.parentNode);
		}
	});

[ronrrico]

Thank you for the reply John,
I have added the lightbox scripts to "Freatured tab"

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style>#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.js" type="text/javascript"></script>
<script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->

<script type="text/javascript">
function showLightBox() 
{ Lightbox.start(document.getElementById('firstImage'));}
</script>

But I get a "Page is done but with errors,
'jquery is undefined
visuallightbox.js Line:14
and lightbox still does'nt work.

How exactly do I apply the code you posted?

Thanks again for your reply John..

Ronnie

[jscheuer1]

Where to begin? Both on the top page, and in the page in the iframe, these two script tags go nowhere (both are 404 not found):

<script src="engine/js/jquery.js" type="text/javascript"></script>
<script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>

The:

<script src="engine/js/visuallightbox.js" type="text/javascript"></script>

on the top page only works because you've included jQuery 1.3.2 in this script:

<script type="text/javascript" src="ddaccordion.js"></script>

I don't know why you have an attempt at jquery.tools.min.js at all, as it appears to not be required, unless you've included it in another script and I just can't find it. Or it is required but the script that needs it just hasn't let us know about it's being missing yet.

All of the scripts should be in the head of the page and in the proper order as required for their correct operation. That is unless a script is required to be elsewhere, in which case it should be included where required, also in the correct order as required. It's OK to include jQuery in that other script, as long as the order in which it falls works with other scripts requiring it, and its code is only linked to one time for any given page. But on the page in the iframe, it doesn't make much sense to use accordion, as it doesn't appear to be required on that page.

Now, the code I gave would go on the top page after jQuery and visuallightbox, but will do no good unless the imported pages requiring visuallightbox are imported via AJAX, not iframe. Even then, a slight modification to it and/or to visuallightbox.js may also be needed.

[ronrrico]

Hello John,
One again, thank you for your reply!

I fugured out the problem.

The install instructions in http://visuallightbox.com/ were somewhat incorrect.

The instructions say to add to the head:
<script src="engine/js/jquery.js" type="text/javascript"></script>
<script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>

But these files are not included in the generated script by the software, so we added them.
Since we added:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
We no longer get error in pags when we add script and lightbox is workig.

Sorry but I also failed to tell you that for some reason my lightboxes never work when placing the script in the head, I always have to put it below the the actual lightboxes...I still can't figure that one out my self! I've done 3 fresh OSc sites and this has been the rule with all 3... I personaly think this is my servers doing, somehow , someway,

Now that I got Lightbow going, it seens that my 2nd issue is key to complete perfect functionality. (((iframe Auto-Size))) Since I have set the height of the iframe to about hight:3000px to show complete 24 products if available, when a page has only 3 prods the iframe continues to be hight:3000px. As a result, when we click lightbox by defalt it popups in the middle of the page (((meaning))) the middle of hight:3000px, at about hight:1500px. See what I mean? http://youregiftbasket.com/mice-c-1_9.html see featurd tab and click on Zoom for lightbox.

John,
thank you so much for your time.
We apreciate your input....

Ronnie

[jscheuer1]

Resizing iframes is generally a process fraught with cross browser issues, unless you know what size.

However, this would not be an issue if you used the AJAX approach I've been mentioning. If you decide to go that route, make sure to backup everything you have so far first.

[ronrrico]

Thank you John,
We backup our entire site on a daily basis in to a terrabite external drive.

Can you recomend any iframe auto-height scripts for my for my situation?

Thnaks again,
Ronnie

[jscheuer1]

No. They can all be nightmares. I was looking at the page with an eye toward specifying the size of the iframe though. Like when you click on 'Featured' or other similar links to bring in a page via iframe, it could also specify the height for the iframe. But with the script you are using for that (AJAX Tabs), there doesn't appear to be any straightforward way to do that. The iframe could be set to 100% height, then we could just adjust the countrydivcontainer division's height. But even that would be a little tricky to do. Even if we could work it out, which I'm sure we could, our best guess at the height might not work well in all cases.

Although it would be a bit of work to change to the AJAX method, I still think that's the way to go here. With an AJAX import the height of the division wouldn't need to be set, just it's width, perhaps not even that. As long as there's room enough for it to expand downwards, it will expand to the required height. The visuallightbox would be on the top page, so should act like it does currently for the non-iframe content.