AJAX Tabs Content Script Question [Archive]

View Full Version : AJAX Tabs Content Script Question

takuhii

08-17-2006, 08:00 AM

1) Script Title: Ajax Tabs Content

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

3) Describe problem:
I'm using the REV attribute as defined in the tutorial to specify outside JS and CSS files, but any script called into the AJAX tab area is failing to execute. I have a JS vertical scrolling script that IS essential to one of my tabs and it will not run when called via the tab. Any help would be greatly appreciated.

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome, To My World</title>
<link href="ajaxtabs/ajaxtabs.css" rel="stylesheet" type="text/css" media="screen" />
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
<script src="ajaxtabs/ajaxtabs.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<div id="layout">
<table width="670" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/layout_top.gif" alt="" width="700" height="9" /></td>
</tr>
<tr>
<td width="12"><img src="images/layout_left.gif" alt="" width="12" height="523" /></td>
<td width="646" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/header_main.gif" alt="Welcome to my website. Please feel free to look around..." width="676" height="114" /></td>
</tr>
<tr background="images/menu_main.gif">
<td background="images/menu_main.gif">
<ul id="maintab"><li><a href="aboutMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about_main_roll.gif',0)" rel="ajaxcontentarea" rev="main.css, main.js"><img src="images/about_main.gif" alt="click here to learn more about me" name="about" width="100" height="39" border="0" id="about" /></a></li><li><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/portfolio_main_roll.gif',0)" rel="ajaxcontentarea" rev="main.css, main.js, lightbox.css, prototype.js, scriptaculous.js?load=effects, lightbox.js"><img src="images/portfolio_main.gif" alt="click here to see my portfolio" name="portfolio" width="100" height="39" border="0" id="portfolio" /></a><ul><li><a href="#"><img src="images/webButton.gif" height="20" width="20" border="0" />  Web</a></li><li><a href="#"><img src="images/printButton.gif" height="20" width="20" border="0" />  Print</a></li><li><a href="#"><img src="images/webButton.gif" height="20" width="20" border="0" />  Code Examples</a></li><li><a href="#"><img src="images/videoButton.gif" height="20" width="20" border="0" />  Video</a></li></ul></li><li><a href="designer4hire.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('design','','images/designer_main_roll.gif',0)" rel="ajaxcontentarea"><img src="images/designer_main.gif" alt="Does your site need a new look? Need a designer?? Click here" name="design" width="133" height="39" border="0" id="design" /></a></li><li><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_main_roll.gif',0)" rel="ajaxcontentarea"><img src="images/contact_main.gif" alt="Click here to contact me" name="contact" width="111" height="39" border="0" id="contact" /></a></li></ul></td></tr>
<tr>
<td><div id="ajaxcontentarea"><img src="images/main.jpg" alt="" width="333" height="369" /><img src="images/look.gif" alt="Look around, kick the tyres and take her for a test drive!! I'll try to keep the site as up to date as possible. Thanks for stopping by - enjoy your visit" width="343" height="369" /></div></td>
</tr>
</table></td>
<td width="12"><img src="images/layout_right.gif" alt="" width="12" height="523" /></td>
</tr>
<tr>
<td colspan="3"><img src="images/layout_bottom.gif" alt="" width="700" height="10" /></td>
</tr>
</table>
</div>

<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>
</body>
</html>
I haven't altered the AJAXTABS script in any way. Someone, please help!!??!!

jscheuer1

08-18-2006, 09:34 AM

Have a look here, if nothing else, to get an idea why it doesn't work:

http://www.dynamicdrive.com/forums/showthread.php?t=11098

To make a long story short, the rev attribute only loads scripts onto the 'top' page, it doesn't initialize them. A method must be worked out to do this at an appropriate time after the external content has loaded. One such method was devised for the above thread which has many similarities to your case but some differences. To be of more specific help, I would need a link to your live page.

niksam

06-03-2007, 03:14 AM

1/ i don't speak englilsh very well !
hello, i have a probleme with my external file.

http://niksam.free.fr/ajaxtabscontent/demo.htm
In the fist page the link "#image" work with the lightbox, but in the tabs "dogs" my link don't work :(

I have a another probleme i want to load a guestbook in the dynamic content, the guestbook is in ajax.
http://niksam.free.fr/homeproject/squelettes/guestbook/

And the link where my guestbook is :
http://niksam.free.fr/homeproject/index2.php
tabs : livre d'or

Thank you for your help

niksam

06-03-2007, 07:32 AM

I find the solution for the lightbox, i use mootools and the slimbox. And with mootools and this thread :
http://www.dynamicdrive.com/forums/showthread.php?t=11098&page=3
Its not good !
I use :
http://www.huddletogether.com/projects/lightbox2/
now and its work like a dream :D

But i dont find the solution about my guestbook :/, i search again but if someone else have the solution, i want to heard it :)

Thank you

Jim Nayzium

07-13-2007, 06:35 PM

I have read a few hours worth on this forum and need more help. I am sorry if it sounds like I haven't researched this...I have and am stumped.

I would like for the loaded .htm files loaded dynamically via the TOP page, to be able to manipulate the variables declared on the top page.

with flash actionscript this would be a simple call to the _root and to drill down and go...but javascript loads and executes differently obviously..

I read over this link 20 times and got nowhere with it...

http://www.dynamicdrive.com/forums/showthread.php?t=17426

I would like a simple example of code below to have the external.htm files have a very simple javascript excecute when they appear in the box.

So on the top page I would like to declare

var variableToChangeEachTime = "Not Changed Yet";

Then on the included .htm pages below I would like to be able to say

<script>
variableToChangeEachTime = "NameOfloadedPage";
</script>

And have that variable update dynamically inside a text area without having to refresh the page.

THERE are many 'similar' examples to this on this forum, all of which are complicated enough to where I could not make them work.

I have attached my efforts as well....

THANKS for your help!

I attached the two relevant files as txt so they would upload...they are htm files

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea" onmouseover="if(!window.acInit){onloadfunct();window.acInit=true;};" onmousedown="window.acInit=false;">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea">Sea Otter</a></li>
</ul>