PDA

View Full Version : 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/dynamicindex17/tabcontent2.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/dynamicindex17/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/showthread.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/showthread.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
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/dynamicindex17/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:


<!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):


<!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:


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
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:


<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:


<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:


<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:


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

jscheuer1
10-29-2006, 08:07 PM
That error actually comes from (line 41 in) memoPad.js:


. . .
function chkLength(e){
if(firstRun!=1){ // if there is info in memo-pad Moz shows incorrect count when first run due to Moz generated error message
keyChk=(!moz)?event.keyCode:e.which
firstRun=0 // firstRun prevents that error message
}
document.getElementById("remainder").style.color="#FFCB21"
document.getElementById("remainder").style.fontWeight="normal"
document.getElementById("remainder").innerHTML=maxLength-escape(document.f1.the_pad.value).length

if(maxLength-escape(document.f1.the_pad.value).length<20){
document.getElementById("remainder").style.color="#DDDD00"

if(maxLength-escape(document.f1.the_pad.value).len . . .

It would seem to indicate that there is no element with the id remainder on the page being referenced. I was unable to find one in either the source or the generated source of the page. Either get rid of the memoPad.js and all the hooks to/for it or place the required markup for it on your page.

Also, in other matters, the word:

none

is not a valid font-weight value or background-color value. For font-weight, the value you are most likely looking for is 'normal'. Depending upon the situation, the background-color value you want is most likely either 'transparent' or 'inherit'. You also have a -

border:opx;

Nows the time for 'none'.

Notes: Most browsers when encountering an invalid value for a style property will simply ignore it and use the default but, there is no guarantee of this.

VatsaL
10-30-2006, 12:08 AM
ohhhh thats why.

I looked around line 41 on the index.htm like a million times. On the index.htm, line 41 actually refers to the association of colour to the links on the page, and I was so baffeled ..there seemed to be no errors in the link colour association and still the page showed error on line 41.

Because the error window said "URL: index.htm", I kept on looking on the main page itself, instead of looking in the external .js

I removed the memoPad.js, it wasnt actually required there.. and no errors now.

thanks once again


VatsaL