[jQuery] ajaxtabs loads SLB into an iframe - display SLB on top of the whole page?

[ldd3081]

Mornin'

Got myself a problem i'm unable to resolve, to be honest. As i'm not even close to a JS amateur, one thing seems impossible to me at the time being, namely:

Got some content loaded on demand via ajaxtabs into a DIV container, using rel="#iframe". One of the subpages (jQuery's Spotlight gallery) containes links that open via Sexy Lightbox. Is it even possible to force SLB to open it's "popup" on top of the main page (which never reloads, of course) instead of inside the DIV it was loaded into?

[jscheuer1]

Are you using an iframe? That would explain it. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[ldd3081]

Erm... right, my bad, here's the testing site: http://ldd3081.comoj.com/2.html

Are you using an iframe? That would explain it.

When i'm using the "ajax" loading, Spotlight stops working after re-demanding the same subpage twice in a row, so i'm affraid i'm stuck with the #iframe mode at the time being...

[jscheuer1]

There are two basic choices here:

1. Get SLB to display on the top page.
   
   
2. Use AJAX and get Spotlight and possibly SLB to reinit after each AJAX importation.

Either would be at least a little complex. Due to limitations of iframe going forward (it's probably being deprecated, eventually dropped), AJAX would be the way to go in my opinion. If using that method though, iframe would still be required to open off site pages in the target area, AJAX cannot do that.

When I get a bit more time (perhaps soon) I'll work up code to do this with AJAX. I'll probably have to rely on you to test it live for me where I can see it if there are problems due to the same restriction mentioned - AJAX cannot open off site links. So to test it locally I would have to mock up at least two of your pages and probably the images as well.

[jscheuer1]

Oh yeah, does SLB work after AJAX importation?

[ldd3081]

(...) iframe would still be required to open off site pages in the target area, AJAX cannot do that.

Yes, i'm aware of the most basic AJAX limitations - the subpages i'm currently loading are for test purposes only, had to get the whole menu operable to check if the active link highlighting works properly, so few of my bookmarked sites got "involved". If there would be any option to use ajaxtabs' AJAX query though, with the whole Spotlight+SLB working, i'd gladly switch - a preloader for the dynamic content is a huge improvement towards the usabillity - if it's 'bout the end user.

'Bout:

(...) Use AJAX and get Spotlight and possibly SLB to reinit after each AJAX importation.

- i wouldn't even know where to start with writing such a script, even with RTFM, i'm just a perfect example of PEBCAK errors when it's about object programming :]

Basicly, the whole page is one-domain intended, as it's "just someones another regular portfolio"; if there will be any external linking, it'll be done as a regular _blank.

Already went through more than a few htmlToDiv loading scripts, stopped at Ajaxtabs due to its comfort; skipped through countless jQ galerries to become pleased with Spotlight, however i need just this one bloody thing to work, the damn SLB makes me slowly but surely go bold, to be honest...

Oh yeah, does SLB work after AJAX importation?

Yes, after i switch to AJAX type it does work as intended (but only if it's the default subpage loaded at the very start), indeed, although both Spotlight and SLB stop responding after any load action taken, doesn't matter if i click the menu item twice or go to another subpage and then come back...

[jscheuer1]

OK, replace this on the top page:

// Courtessy of jQuery.com
/*<![CDATA[*/

	$(document).ready(function () {

		//loop through all the children in #items
		//save title value to a span and then remove the value of the title to avoid tooltips
		$('#items .item').each(function () {
			title = $(this).attr('title');
			$(this).append('<span class="caption">' + title + '</span>');	
			$(this).attr('title','');
		});

		$('#items .item').hover(
			function () {
				//set the opacity of all siblings
				$(this).siblings().css({'opacity': '0.1'});	
				
				//set the opacity of current item to full, and add the effect class
				$(this).css({'opacity': '1.0'}).addClass('effect');
				
				//show the caption
				$(this).children('.caption').show();	
			},
			function () {
				//hide the caption
				$(this).children('.caption').hide();		
			}
		);
		
		$('#items').mouseleave(function () {
			//reset all the opacity to full and remove effect class
			$(this).children().fadeTo('100', '1.0').removeClass('effect');		
		});
		
	});
	
	/*]]>*/

with:

// Courtessy of jQuery.com
/*<![CDATA[*/

	$(document).ready(function () {
		var title;
		//loop through all the children in #items
		//save title value to a span and then remove the value of the title to avoid tooltips
		$('#items .item').each(function () {
			title = $(this).attr('title');
			$(this).append('<span class="caption">' + title + '</span>');	
			$(this).attr('title','');
		});

		$('#items .item').live('hover', function (e) {
			if(e.type === 'mouseover'){
				//set the opacity of all siblings
				$(this).siblings().css({'opacity': '0.1'});	
			
				//set the opacity of current item to full, and add the effect class
				$(this).css({'opacity': '1.0'}).addClass('effect');
			
				//show the caption
				$(this).children('.caption').show();
			} else {
				//hide the caption
				$(this).children('.caption').hide();
			}		
		});

		$('#items').live('mouseleave', function () {
			//reset all the opacity to full and remove effect class
			$(this).children().fadeTo('100', '1.0').removeClass('effect');		
		});
		
	});
	
	/*]]>*/

Then where you have (also on the top page, add the highlighted):

// Courtessy of DynamicDrive.com

/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var mainmenu=new ddajaxtabs("menuholder", "contentholder")
mainmenu.setpersist(true)
mainmenu.setselectedClassTarget("link") //"link" or "linkparent"
mainmenu.init()
mainmenu.onajaxpageload=function(pageurl){
	SexyLightbox.refresh();
	//loop through all the children in #items
	//save title value to a span and then remove the value of the title to avoid tooltips
	var title;
	$('#items .item').each(function(){
		if(title = $(this).attr('title')){
			$(this).append('<span class="caption">' + title + '</span>');	
			$(this).attr('title', '');
		}
	});
};

That's it! Now you may use the AJAX method of importation and both the SLB and the Spotlight gallery should work.

[ldd3081]

Thank you very much, John, NOW it works flawlesly!

[jscheuer1]

Great! I had (as mentioned) thought there might have to be a bit of back and forth to tweak the code, looks like it's working fine.

Now, I didn't want to confuse things with this until I saw if it was working or not, but you have two versions of jQuery on the ldd3081.comoj.com/2.html page and appear to only need one. Back up what you have and remove:

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

As far as I can tell, it's being overwritten anyway and not used before that.

Also, all those scripts and the stylesheet link on ldd3081.comoj.com/page/home.html are not rquired unless you want that page to work if navigated to on its own.

[ldd3081]

That was only uploaded as a "quickie" to the first hoster i've found at the very moment; just to test out both jQ and AjaxTabs working together, to be honest; next thing is tweaking the overall html code and cutting out all the redundant crappy leftovers, obviously...
Thanks a million for the care, though :]

Also, got the 1.4.2 version of jQ, so i think i'll stay with it, as it works properly now (well, not really in Chrome and Konqueror, but - since it's not even close to a noticeable percentage of all potential guests of this particular website - it's a completely acceptable loss).