PDA

View Full Version : ajax tabs - no scrollbars



raskolnik
04-24-2009, 04:22 PM
1) Script Title: Ajax Tabs Content (2.2)

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

3) Describe problem:

If the page loaded into the ajax content area goes beyond its height, it just runs off the bottom of the browser window (so it's not all visible). There're no scrollbars.

If I load the external page using #iframe instead of the container div, the scrollbar shows up, but either (a) it only uses a tiny (less than 1/4) bit of the page, so it's unusable that way, or (b) if I style the iframe content, it does the same thing as above (i.e. no scrollbars, content runs off the bottom of the page). I don't need it to be dynamic, I just need it to take up all the space of the containing <div> (basically identical to tab #4 of demo 1 on the above page).

Done everything described here (http://www.dynamicdrive.com/forums/showthread.php?t=27893&highlight=ajax+tabs) and all it's done is created problem (b).

Main HTML page (containing the script set-up):


<!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>
<link rel="stylesheet" href="style.css" />
<title>title</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<!-- code for the ajax-based frames that display the main content -->
<script type="text/javascript" src="ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- 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>

<!-- background texture: wood by ~nortago on deviantART (nortago.deviantart.com) -->
<body>
<div id="holder">
<div id="content">
<img src="logo.png" alt="logo" id="logo" />

<div id="contact">
blah blah

<!-- end contact information -->

</div>
<div id="subcontent">
<div id="issue">

<!-- begin volume/issue/date bar -->

<div id="left">volume 12</div>
<div id="right">number 2</div>
<div>march 2009</div>

<!-- end bar -->

</div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="50" height="800" id="tab">
<param name="movie" value="menu.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="menu.swf" width="50" height="800">
<param name="wmode" value="transparent" />
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

<!-- begin main content section -->
<div id="ajaxcontainer">
<img class="head" alt="Introductory Materials" src="introductory.png" />
<p id="intro">
<a href="nowhere">cover and masthead</a>
<br /><br />
<a href="nowhere">publication information</a>
<br /><br />
<a href="nowhere">faculty list</a>
<br /><br />
<a href="nowhere">table of contents</a>
<br /><br />
<a href="nowhere">letter from the editor</a>
</p>

<img alt="Articles" class="head" src="articles.png" />
<p class="item"><a href="nowhere">Charting A New Course: Practical Considerations For Implementing An Electronic Health Records

System</a></p>
<p class="biline">Roy H. Wyman, Jr. & Amanda L. Kutz</p>
<p class="item"><a href="nowhere">Real Feminists For Motherhood Coalition, Petitioner v. Virginia</a></p>
<p class="biline">Bridget Leanne Welborn</p>

<img alt="Comments" class="head" src="comments.png" />
<p class="item"><a href="nowhere">Protecting Neglect: The Constitutionality of Spiritual Healing Exemptions To Child Protection

Statutes</a></p>
<p class="biline">Scott St. Amand</p>

<p class="item"><a href="nowhere">An Ounce Of Prevention: Why The Innocence Movement Should Focus On Proscriptive Pre-Conviction

Measures Instead of Abolition Of The Death Penalty</a></p>
<p class="biline">Rhiannon M. Hartman</p>

</div>
</div>
</div>
</div>

<!-- menu links for ajax content -->
<div id="cssmenu">
<a href="./index.html" rel="#default">home</a>
<a href="./masthead.html" rel="#iframe">masthead</a>
<a href="./archives.html" rel="ajaxcontainer">archives</a>
<a href="./forthcoming.html" rel="ajaxcontainer">forthcoming issues</a>
<a href="./submissions.html" rel="ajaxcontainer">submissions</a>
<a href="./subscriptions.html" rel="ajaxcontainer">subscriptions</a>
</div>

<script type="text/javascript">
var ajaxcontent = new ddajaxtabs("cssmenu","ajaxcontainer")
ajaxcontent.setpersist(true)
ajaxcontent.setselectedClassTarget("link")
ajaxcontent.init()
</script>

</body>
</html>


And the CSS file for that page:


html, body {

margin: 0;
padding: 0;
height: 100%;

}

body {

background: url('wood.jpg') repeat; /* wood texture by nortago on deviantART: http://nortago.deviantart.com */
background-attachment: fixed;

}

div#holder {

margin: 0;
border: 0;
text-align: center;
height: 100%;
overflow: hidden;
padding: 0;

}

div#content {

padding: 0 0 0 0;
margin: 2.5em auto;
border: 0;
border: 0;
min-width: 780px;
max-width: 1000px;;
background-color: #fff;
text-align: left;
position: relative;
height: 100%;

}

.tabcontentiframe {

width: 100%;
height: 100% !important;
overflow: auto;

}

div#content div#ajaxcontainer {

margin: 0;
padding: 0;
width: 100%;
border: 0;
overflow: auto;
height: 100%;

}

div#cssmenu {

/* display: none; */

}

div#content div#subcontent {

width: 100%;
height: 100%;
background: url('right4.png') repeat-y;
background-position: center right;
padding-right: 1.25em;

}

object#tab {

float: right;
margin-right: -2.0em;
margin-top: -6.5em;
width: 28px;
height: 127px;

}

div#content img#logo {

float: left;

}

div#content .head {

margin: 2em 0 0 1em;
padding: 0;
border: 0;

}


div#content p #intro, div#content p#intro a {

font-family: Constantia, Georgia, serif;
color: #000;
text-decoration: none;
font-variant: small-caps;
margin: 1em 0 0 1.5em;
padding: 0;

}

div#content p#intro a:hover {
color: #990000;

}

div#content .item, div#content .item a {

font-family: Constantia, Georgia, serif;
color: #000;
text-decoration: none;
margin: 1em 2em 0 1.5em;
padding: 0 0 0 1em;
text-indent: -2.5em;

}

div#content .item a:hover {
color: #990000;

}

div#content .biline {
font-family: Constantia, Georgia, serif;
color: #000;
font-size: 80%;
margin: 0 0 0 4em;
font-style: italic;
}

div#content .item a:visited, p#intro a:visited {
color: #000;
}

/***************************************
| bar w/ issue number, month, etc. *
\***************************************/

div#issue {

border: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 0 1.25em 2px 0;
margin: 0;
text-align: center;
position: relative;

}

div#issue div {
font-family: Georgia, serif;
font-weight: bold;
font-variant: small-caps;
color: #000;
margin: 0;
padding: 0;

}

div#issue div#left {
position: absolute;
left: 9px;
}

div#issue div#right {
position: absolute;
right: 9px;
}


/**********************************
| area with contact information *
\*********************************/

div#contact {

text-align: center;
height: 112px;
background: url('right3.png') no-repeat;
background-position: 100% 0px;
margin-right: -1.25em;
border: 0;

}


div#contact p {
font-family: Georgia, serif;
color: #000;
margin: -5px 0;
padding: 0;
font-size: small;
}

div#contact p#phone {
margin: 8px 0 0 10px;
float: left;
}

div#contact p#phone span {
font-weight: bold;
font-variant: small-caps;
color: #336699;
font-size: 110%;
}

div#contact p#email {
margin: 8px 10px 0 0;
float: right;

}

div#contact p#email a {
text-decoration: none;
color: #000;
}

div#contact p#email a:hover {
color: #3399ff;
}

div#contact p#email span {
font-weight: bold;
font-variant: small-caps;
color: #336699;
font-size: 110%;
}

div#contact img {
margin: 8px auto;
border: 0;
}


Any ideas would be greatly appreciated.

jscheuer1
04-24-2009, 04:27 PM
Get rid of all:


overflow: hidden;