Help with Tab Content script

**iwdynamic** · 07-20-2006, 05:02 PM

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!

**jscheuer1** · 07-20-2006, 06:11 PM

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.

**iwdynamic** · 07-20-2006, 07:06 PM

Thanks for the reply.

I removed the inline style

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:

<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

**jscheuer1** · 07-20-2006, 08:28 PM

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.

**iwdynamic** · 07-24-2006, 10:25 PM

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.

**jscheuer1** · 07-25-2006, 02:20 AM

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;
}
}

**iwdynamic** · 07-25-2006, 07:12 PM

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;
}
}

**jscheuer1** · 07-26-2006, 03:29 AM

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?

**iwdynamic** · 07-26-2006, 06:00 PM

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

Here is my html page with tab:

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

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

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

**jscheuer1** · 07-26-2006, 07:49 PM

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;
}
}

Thread: Help with Tab Content script

Thread Tools

Search Thread

Help with Tab Content script

Bookmarks

Bookmarks

Posting Permissions