Ajax Tabs and external JS

[Kenet]

1) Script Title: Ajax Tabs Content Script (v 2.2)

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

3) Describe problem: Having a problem loading and initializing external Javascript.

I am using Ajax Tabs and I need to be able to load and execute upon load a small Jquery script that creates a dropcap on the first paragraph of my content.

I have read the following.... most of it makes my head spin...
http://www.dynamicdrive.com/forums/showthread.php?t=13003
http://www.dynamicdrive.com/forums/showthread.php?t=17426
and
http://www.dynamicdrive.com/forums/showthread.php?t=27400

The script I am trying to use is this:

<script type="text/javascript">
$(document).ready(function(){
swap_letter();
});

function swap_letter() {
var first_paragraph = $('div.drop-cap p')[0];
if (!first_paragraph) return false;
var node = first_paragraph;
while (node.childNodes.length) {
node = node.firstChild;
}

var text = node.nodeValue;
var first_letter = text.substr(0,1);
var match = /[a-zA-Z]/.test(first_letter);
if ( match ) {
node.nodeValue = text.slice(1);
$('<img />')
.attr('src','images/alphabet/' + first_letter.toLowerCase() + '.png')
.attr('alt',first_letter)
.addClass('fancy-letter')
.prependTo( first_paragraph );
}
}
</script>

And I know I need to add a polling event... I'm just not sure how.

Thanks

[ddadmin]

If you mean execute a certain JavaScript when the script has successfully loaded a page using the Ajax option, you can do this via the onajaxpageload event (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm). Most commonly you'd use this event to create nested tabs, but it should work for what you're asking as well. Something like:


countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("tabinquestion.htm")!=-1){
swap_letter()
}
}

[Kenet]

Well... that sort of worked. It worked the first time I loaded the external file into the target div, but then when I left the tab and returned it no longer worked. I had to refresh the page to make it work again.

Also, the script worked but only have a few seconds... so basically, I had a lot of lag time once the file was loaded to when the javascript kicked in.

[ddadmin]

Hmmm please post a link to the page on your site that contains the problematic script so we can check it out.

[Kenet]

http://www.keneticimages.com/testing/ssf/at/demo.htm

Click on Tab 2 and you will see what I mean.

[ddadmin]

Is the below what I'm supposed to see:

http://i34.tinypic.com/2cpqk2x.gif

If so, under what circumstances does it no longer show? I tried switching to another tab then back, reloading the page etc in FF3.x, and still see the above.

[Kenet]

Yeah, that's what you are supposed to see. The problem is, that FireFox handles it correctly while IE is the problem... surprise, surprise!

No worries... I got everything taken care of and used Jquery to accomplish what I was trying to do and more.

Here's a link if you want to see it in action:
http://www.keneticimages.com/testing/ssf/index.html

The site is total ajax, but still works perfectly even if JS is turned off! But with JS on, Jquery makes it awesome!

[ddadmin]

Great! Glad to see you came up with a solution yourself.