Help with Tab Content script

Printable View

07-20-2006, 05:02 PM
iwdynamic

Help with Tab Content script

1) Script Title: Tab Content Script

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

3) Describe problem: How do I add scrollbars (vertical and horizontal)?
I tried adding code here:
<div class="tabcontentstyle" style="overflow-x: scroll; overflow-y: scroll;">

and the css:
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 97%;
height: 500px;
margin-bottom: 1em;
padding: 10px;
}

It works on firefox. The tab displayed with fluid width 97% of the browser window but it does not work on IE and Netscape. On IE and Netscape, it display 97% of the content on the tab. So if the width of the content is 1000px, the tab's width is 970px (more than the width of the browser window) with a scrollbar.

Basically I want it to work like: Tabbed Document Viewer
http://www.dynamicdrive.com/dynamici...bdocviewer.htm

Please help.

Thank you!
07-20-2006, 06:11 PM
jscheuer1

Well, I may need to see your page to really help but, two thoughts:

1 ) Don't add style inline on the page (skip this red part):

Code:

<div class="tabcontentstyle" style="overflow-x: scroll; overflow-y: scroll;">

Use this css:

Code:

.tabcontentstyle { /*style of tab content oontainer*/ border: 1px solid gray; width: 97%; height: 500px; overflow: auto; margin-bottom: 1em; padding: 10px; }

This worked out fine here in IE, Opera and FF.

Or:

2 ) If you prefer the look of that other script, use that script.
07-20-2006, 07:06 PM
iwdynamic

Thanks for the reply.

I removed the inline style

Quote:

<div class="tabcontentstyle" style="overflow-x: scroll; overflow-y: scroll;">

and added this to css as suggested:
overflow: auto;
I still cannot get the horizontal scrollbar to show on IE

The page I am designing is on intranet

Here is the demo page I put together:

Quote:

<html>
<head><link rel="stylesheet" type="text/css" href="tabcontent.css" />

<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>
</head>
<body>

<ul id="maintab" 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">
<table border=1>
<tr>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
</tr>
<tr>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
<td>tabcontent</td>
</tr>
</table>
</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 />
</form>
</div>

</div>

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

I like the look of this script and would like to use this one and not the other one.

Thanks
07-20-2006, 08:28 PM
jscheuer1

Well, your demo works here. There is a horizontal scrollbar only with tab one and no vertical scrollbar, as none is required. There are no scrollbars with the other tabs as, none is required.

If I change overflow:auto; to overflow:scroll; I get scrollbars in both dimensions whether they are needed or not.
07-24-2006, 10:25 PM
iwdynamic

Thank you for you help. There was a coding error on my page. It now works fine.

I have one more question about printing. After I set the height/width and added scroll:auto, it does not print all contest of each tab. Only the top protion of the content (whatever visible on the tab) is printed.
Is there a way to change the css to allow it to print entire content of each tab?

I changed my css code from
@media print {
.tabcontent {
display:block!important;
}
}

to

@media print {
.tabcontent {
display:block;
}
}

to get the content of the selected tab to print.
07-25-2006, 02:20 AM
jscheuer1

As the @media print style area is to (in this case) reset the styles to the more ordinary ones encountered on a page with no special styles, you could try this:

Code:

@media print { .tabcontent { display:block!important; height:auto!important; width:auto!important; overflow:visible!important; } }
07-25-2006, 07:12 PM
iwdynamic

Thank you for the suggestion. I tried it and it does not work.
As long as there is overflow: auto in the tab, on the the visible content will be printed even with this:

@media print {
.tabcontent {
display:block!important;
height:auto!important;
width:auto!important;
overflow:visible!important;
}
}
07-26-2006, 03:29 AM
jscheuer1

I'm thinking that if I had a link to your page, I could play around with it to see what I can come up with. Otherwise, I'm pretty much just shooting in the dark. I just chose the styles that seemed most likely to work. There are virtually unlimited combinations of styles to choose from and generally many different ways to skin this type of cat. If we stick with it, we could probably come up with something that works. Just to be as clear as possible, you want a print style that will print out all the tab content divisions, right?
07-26-2006, 06:00 PM
iwdynamic

Thank you for the reply. Hope I can clarify my need here.

Here is my html page with tab:

Quote:

<html>
<head><link rel="stylesheet" type="text/css" href="tabcontent.css" />

<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>
</head>
<body>

<ul id="maintab" 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>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 - line 1<br />
Tab content 1 - line 2<br />
Tab content 1 - line 3<br />
Tab content 1 - line 4<br />
Tab content 1 - line 5<br />
Tab content 1 - line 6<br />
Tab content 1 - line 7<br />
Tab content 1 - line 8<br />
Tab content 1 - line 9<br />
Tab content 1 - line 10<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 - line 1<br />
Tab content 3 - line 2<br />
Tab content 3 - line 3<br />
Tab content 3 - line 4<br />
Tab content 3 - line 5<br />
Tab content 3 - line 6<br />
Tab content 3 - line 7<br />
Tab content 3 - line 8<br />
Tab content 3 - line 9<br />
Tab content 3 - line 10<br />
</div>

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

</div>

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

and here are the changes made to css file(in red):

Quote:

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 400px;
height: 50px;
margin-bottom: 1em;
overflow: auto;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
height:auto!important;
width:auto!important;
overflow:visible!important;
}
}

Tabs 1 and 3 will show about 3 lines each with scrollbars

What I am trying to accomplish is when tab 3 is active(clicked) print the page I want this printed:

Quote:

Tab content 3 - line 1
Tab content 3 - line 2
Tab content 3 - line 3
Tab content 3 - line 4
Tab content 3 - line 5
Tab content 3 - line 6
Tab content 3 - line 7
Tab content 3 - line 8
Tab content 3 - line 9
Tab content 3 - line 10

but instead I only line 1 to line 3 are printed (the ones visible on tab)

If I include this in the css for print:
display:block!important;

it will print 3 lines of content from tab 1. I understant that it's supposed to print all content from all divisions.

If I remove: overflow: auto;
All content will be visible on screen with no scrollbars and printed on paper.

We needed to set the height as the content will be very long and want users to scroll to see the content of tabs but would want to have the full content(for each tab) to be printed

Thank you,
Indra
07-26-2006, 07:49 PM
jscheuer1

The main problem appears to be that we are negating the styles from the wrong element try this:

Code:

.tabcontentstyle{ /*style of tab content oontainer*/ border: 1px solid gray; width: 400px; height: 50px; margin-bottom: 1em; overflow: auto; padding: 10px; } .tabcontent{ display:none; } @media print { .tabcontent { display:block!important } .tabcontentstyle{ overflow:visible!important; height:auto!important; width:auto!important; } }
07-26-2006, 10:12 PM
iwdynamic

It works! Thank you very much.
The only thing I do differently is to remove:
display:block!important
This will allow user to print content on active tab only.

I appriciate all you help to solve this problem.

I do hope someone can look into this feature:
http://www.dynamicdrive.com/forums/s...ad.php?t=11363

I tried it and it does not work. it causes the content of other tabs to disappear.
07-27-2006, 05:57 AM
jscheuer1

Quote:

Originally Posted by iwdynamic

It works! Thank you very much.

I do hope someone can look into this feature:
http://www.dynamicdrive.com/forums/s...ad.php?t=11363

I tried it and it does not work. it causes the content of other tabs to disappear.

You're welcome. About that other feature, I tried it too and couldn't make it work either. I think that it wasn't explained very well, how to use it, or it just doesn't work. Here is an easier method - add this function to the end of the tabcontent.js file:

Code:

function revealAll(){ var tabs=document.getElementsByTagName('div'); for (var i_tem = 0; i_tem < tabs.length; i_tem++) if (tabs[i_tem].className=='tabcontent') tabs[i_tem].style.display='block'; }

Then you can use a tab like so:

Code:

<li><a href="#" onclick="revealAll();return false;">Show All</a></li>
07-27-2006, 05:14 PM
iwdynamic

The function works on my page with one tab content. Can you modify it so i will work on a page with multiple tab contents?
Thank you!
07-27-2006, 06:38 PM
jscheuer1

Quote:

Originally Posted by iwdynamic

The function works on my page with one tab content. Can you modify it so i will work on a page with multiple tab contents?
Thank you!

Well, there are two directions you could go with that. Do you want one link that will reveal all tabs on a page regardless of what tab content group that they are a part of? Or, do you want separate links, each one revealing only all of the tabs in the group with which it is associated?

I think that for the first way it should work 'as is'. As long as all content divisions have the class 'tabcontent' (they are supposed to, according to the demo page).

For the second way, a unique identifier would have to be found for each group and the revealAll() function could test for that. For example, the id of each tabcontent division could be used as a secondary test if all tabcontent divisions in a given group shared an identical unique component. Say the divs were id'ed:

HTML Code:

<div id="first_tcontent1" class="tabcontent"> </div> <div id="first_tcontent2" class="tabcontent"> </div>

and so on and the second group could be:

HTML Code:

<div id="sec_tcontent1" class="tabcontent"> </div> <div id="sec_tcontent2" class="tabcontent"> </div>

Then the revealAll() function could look like so:

Code:

function revealAll(str){ var tabs=document.getElementsByTagName('div'); for (var i_tem = 0; i_tem < tabs.length; i_tem++) if (tabs[i_tem].className=='tabcontent'&&tabs[i_tem].id.indexOf(str)>-1) tabs[i_tem].style.display='block'; }

And could be called these two ways, for the two types of content divs I've already outlined:

HTML Code:

<li><a href="#" onclick="revealAll('first');return false;">Show All</a></li>

and:

HTML Code:

<li><a href="#" onclick="revealAll('sec');return false;">Show All</a></li>
07-27-2006, 09:14 PM
iwdynamic

Thanks John for the function.
My page is setup so that revealAll() function is for each group.

One minor detail:
How do I get the "Show All" tab change to "selected"/active when the tab is clicked? I tried to modify the code myself with no luck.

Thank you
07-27-2006, 10:30 PM
jscheuer1

To do that, we will need to borrow a little code from the expandcontent() function and add it to our revealAll() function like so:

Code:

function revealAll(str, linkobj){ var ulid=linkobj.parentNode.parentNode.id //id of UL element var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents for (var i=0; i<ullist.length; i++) ullist[i].className="" linkobj.parentNode.className="selected" //highlight currently clicked on tab var tabs=document.getElementsByTagName('div'); for (var i_tem = 0; i_tem < tabs.length; i_tem++) if (tabs[i_tem].className=='tabcontent'&&tabs[i_tem].id.indexOf(str)>-1) tabs[i_tem].style.display='block'; }

Now we will need to pass a little more information to revealAll() when we use it, like so (I'll show the two previous examples):

HTML Code:

<li><a href="#" onclick="revealAll('first', this);return false;">Show All</a></li>

and:

HTML Code:

<li><a href="#" onclick="revealAll('sec', this);return false;">Show All</a></li>
07-28-2006, 03:38 AM
iwdynamic

That does it.
Thank you very much John, You've been very helpful. It's much appricaited.