View Full Version : Ajax Tabs and external JS

10-13-2008, 08:42 PM
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...

The script I am trying to use is this:

<script type="text/javascript">

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')
.prependTo( first_paragraph );

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


10-14-2008, 02:43 AM
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:

if (pageurl.indexOf("tabinquestion.htm")!=-1){

10-14-2008, 04:57 AM
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.

10-14-2008, 05:38 AM
Hmmm please post a link to the page on your site that contains the problematic script so we can check it out.

10-14-2008, 06:09 AM

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

10-14-2008, 05:54 PM
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.

10-16-2008, 12:31 AM
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:

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

10-16-2008, 12:36 AM
Great! Glad to see you came up with a solution yourself.