Simple problem - help!

**VatsaL** · 10-25-2006, 08:02 PM

1) Script Title: Tab Content Script (the old one)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...abcontent2.htm

3) Describe problem:

hello guys,

I just have a small and simple problem regarding the script.
Like in the ajax version of the tab script, you can modify the look of the link which is active or selected.
But in this one, the active link gets highlighted instead with the same background colour of the tab it represents.
I just want the tab headings to be "bold" (font: bold 12px Arial when they are selected, and the normal ones which are not selected to be non-underlined fonts (font: 12px Arial

..

thanks in advance!

VatsaL

**jscheuer1** · 10-26-2006, 07:22 AM

Here's a version that looks (and works the same as far as looks go) just like the Ajax version but isn't Ajax:

http://www.dynamicdrive.com/dynamici...tabcontent.htm

**VatsaL** · 10-26-2006, 10:00 AM

yeah, but will it work "inside" the ajax tabs?

I did try, but in vein.

see this thread http://www.dynamicdrive.com/forums/s...ad.php?t=14294

which would you suggest would work best?

thanks!

VatsaL

**VatsaL** · 10-26-2006, 10:37 AM

When I use the one you just suggested inside the ajax tabs, the tabs appear but their content desent appear at all..

It seems the page isnt loading the tabcontent.js file which is with the non-ajax tabs,
even though I mentioned the file name in the ajax for it to load

any ideas why?

thanks

vatsal

**jscheuer1** · 10-26-2006, 03:34 PM

This is the first I heard of your using the Ajax Tabs at all. Any script used on content added with Ajax Tabs (and most, if not all Ajax scripts here on DD) has a potential problem. If that script requires an onload event or an initialization of any kind, it won't work because Ajax Tabs doesn't load a page. Ajax takes the content of a page and writes it to a division on your already loaded page. Once that content is written to the division, you can initialize it if you like. To do so though, you must be certain that the new content is fully loaded first. I posted a general guideline on how this can be done here:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

If that is too general for you, if you would choose which script you actually want to use, and when I get the time, I will look at working out the specifics for that script.

**VatsaL** · 10-26-2006, 07:48 PM

Originally Posted by jscheuer1

If that is too general for you, if you would choose which script you actually want to use, and when I get the time, I will look at working out the specifics for that script.

Hey, thanks man. In your own time..
Yea, I did find it a bit too general.
I dont have the faintest clue of how to add the onload stuff.

I just want to use the re-written tab content script inside the ajax tabs, which can be found here:
http://www.dynamicdrive.com/dynamici...tabcontent.htm

I plan to put the tab script in the first ajax tab (the 1st tab which is in the original page itself)
as well as the external pages.

Thanks a million, I dont have a clue what to do, yet can't wait to finish my ongoing project with ajax.
thanks again.

VatsaL

**jscheuer1** · 10-27-2006, 05:26 AM

OK, this is a little tricky but, at least most of the files are unmodified. Working from both script's demo pages, I only had to modify the HTML pages. Here is what was demo.htm from Ajax Tabs:

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" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Ajax Tabs Content script</title>
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<link rel="stylesheet" type="text/css" href="tabcontent.css">

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

/***********************************************
* Ajax Tabs Content script- © 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
***********************************************/

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

/***********************************************
* Tab Content script- © 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
***********************************************/

</script>

<script type="text/javascript">
function pollC(id, load){
if (!load&&document.getElementById(id)){
document.getElementById(id).id='';
return;
}
else if (load&&document.getElementById(id)){
if (id=='regtab')
initializetabcontent('regtab');
else if (id=='unique_1')
initializetabcontent('exttab1');
return;
}
else if (load&&!document.getElementById(id))
setTimeout("pollC('"+id+"', 'load')", 60);
}
</script>

</head>

<body>

<p><b>Documentation:</b> <a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/</a></p>
<br />

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea" onmousedown="pollC('regtab')" onmouseup="pollC('regtab', 'load')">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">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="external5.htm" rel="ajaxcontentarea" onmousedown="pollC('unique_1')" onmouseup="pollC('unique_1', 'load')">Sea Otter</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<ul id="regtab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />

</div>

</div></div>

<script type="text/javascript">
//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
startajaxtabs("maintab")
</script>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("regtab")
</script>
</body>

</html>

And, here is external5.htm (akin to the page you would have had if you followed the instructions on the demo page of Tab Content Script - with modifications of course):

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<ul id="exttab1" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />

</div>

</div>

<span id="unique_1"></span>
</body>
</html>

Working from a demo install of Ajax Tabs, put all the resource files for Tab Content Script right in the main directory along with demo.htm. You should be able to add as many external pages with tabs on them as you like. They should all have progressive identifiers:

unique2, exttab2
unique3, exttab3

and so on and have added to the pollC function like:

Code:

else if (id=='unique_1')
initializetabcontent('exttab1');
else if (id=='unique_2')
initializetabcontent('exttab2');
else if (id=='unique_3')
initializetabcontent('exttab3');

The tabs on the demo.htm are a special case but, they are already taken care of in the pollC function, the markup and with initialization at the bottom of demo.htm. Follow the pattern for external5.htm's link in the markup on demo.htm for all other external pages with tabs to load. That's it, except for any questions you might have.

**VatsaL** · 10-27-2006, 09:37 AM

Originally Posted by jscheuer1

That's it, except for any questions you might have

Hey, thanks a lottt, it works PERFECTLY WELL

Just what I wanted.I am making a search website with multiple search options, itll be ready in about 5 days.

Thank you very much, just one thing,

I wanted to have the onload focus function where when the page loads, the cursor is automatically placed in the input box.

I just want it for the form in the first tab which is on the page itself and not externally. I use the following script fo that:

Code:

<script>
<!--// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
function stb(){document.uns.q.focus();}// -->
</script>

but it dosent work with the inline tabs placed in the forst ajax tabs.

I think it won't work, it seems too complex.
Is it really? or can it work?

thanks a bunch

VatsaL

**jscheuer1** · 10-27-2006, 06:11 PM

Before I answer your question, if you want the page external5.htm (and others like it) to work as a stand alone page, you would need to put the script, external script tag and style link for Tab Content Script on them but, this would only be desirable if they get indexed by search engines or have links to them elsewhere on your page or site. Doing this could cause problems but, if so, those could be worked out.

On to your question. Anything that you want run against the Tab Content Script content on the demo.htm or 'top page' of this scheme should be able to be included here:

Code:

<script type="text/javascript">
function pollC(id, load){
if (!load&&document.getElementById(id)){
document.getElementById(id).id='';
return;
}
else if (load&&document.getElementById(id)){
if (id=='regtab') {
initializetabcontent('regtab');
extra code for this page's Tab Content Script's HTML content
goes here,
use as many or as few lines as needed.
}
else if (id=='unique_1')
initializetabcontent('exttab1');
return;
}
else if (load&&!document.getElementById(id))
setTimeout("pollC('"+id+"', 'load')", 60);
}
</script>

and here:

Code:

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("regtab")
extra code for this page's Tab Content Script's HTML content
goes here,
use as many or as few lines as needed.
</script>

Also, if you want extra code for any of the external pages, put that with their initialization test:

Code:

else if (id=='unique_1')
initializetabcontent('exttab1');
else if (id=='unique_2') {
initializetabcontent('exttab2');
code here will run against
exttab2's content once it
is loaded and initialized
}
else if (id=='unique_3')
initializetabcontent('exttab3');

**VatsaL** · 10-29-2006, 04:24 PM

Hey it fucntions perfectly, but when I start writing in the form, it displays an error :

http://labs.50webs.com/hybrid

this is the error that I get:

Line: 41
Char: 1
Error: Object required
Code: 0
URL: index.htm

I'm unsing IE6

Althought the error display does not affect the functioning of the search engine,
what modifications should I do to the code to get rid of it?

thanks

VatsaL

Thread: Simple problem - help!

Thread Tools

Search Thread

Simple problem - help!

solved ...finally!

Bookmarks

Bookmarks

Posting Permissions