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/dynamici...tent/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/s...ad.php?t=13003
http://www.dynamicdrive.com/forums/s...ad.php?t=17426
and
http://www.dynamicdrive.com/forums/s...ad.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. 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:



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.