By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,731 Members | 1,104 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,731 IT Pros & Developers. It's quick & easy.

CSS & iFrame Height !

P: n/a
Hi

I'm trying to make an Iframe height adjustable depending on the height
of the web page.
I have managed to get this to work for the width, but not the height.

The original code is available here: http://www.brainjar.com/css/tabs/

This is what I have:

iframe.tabContent {
background-color: #99CCFF;
border: 1px solid #000000;
border-color: #0099CC #0099CC #0099CC #0099CC;
width: 100%;
height: 100%;
}

/************************************************** ****************************
* Additional styles.
*
************************************************** ****************************/

h4#title {
background-color: #003399;
border: 1px solid #000000;
border-color: #0099CC #0099CC #0099CC #0099CC;
color: #FFFFFF;
font-weight: bold;
margin-top: 0em;
margin-bottom: .5em;
padding: 2px .5em 2px .5em;
}

</style>
<script type="text/javascript">//<![CDATA[

function synchTab(frameName) {

var elList, i;

// Exit if no frame name was given.

if (frameName == null)
return;

// Check all links.

elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)

// Check if the link's target matches the frame being loaded.

if (elList[i].target == frameName) {

// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.

if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}

function removeName(el, name) {

var i, curList, newList;

if (el.className == null)
return;

// Remove the given class name from the element's className property.

newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}

//]]></script>

Any ideas ??

Thanks :)

Nov 1 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
dp
je***********@yahoo.com wrote:
Hi

I'm trying to make an Iframe height adjustable depending on the height
of the web page.
I have managed to get this to work for the width, but not the height.

The original code is available here: http://www.brainjar.com/css/tabs/

This is what I have:

iframe.tabContent {
background-color: #99CCFF;
border: 1px solid #000000;
border-color: #0099CC #0099CC #0099CC #0099CC;
width: 100%;
height: 100%;
}

/************************************************** ****************************
* Additional styles.
*
************************************************** ****************************/

h4#title {
background-color: #003399;
border: 1px solid #000000;
border-color: #0099CC #0099CC #0099CC #0099CC;
color: #FFFFFF;
font-weight: bold;
margin-top: 0em;
margin-bottom: .5em;
padding: 2px .5em 2px .5em;
}

</style>
<script type="text/javascript">//<![CDATA[

function synchTab(frameName) {

var elList, i;

// Exit if no frame name was given.

if (frameName == null)
return;

// Check all links.

elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)

// Check if the link's target matches the frame being loaded.

if (elList[i].target == frameName) {

// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.

if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}

function removeName(el, name) {

var i, curList, newList;

if (el.className == null)
return;

// Remove the given class name from the element's className property.

newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}

//]]></script>

Any ideas ??

Thanks :)
Looks ok here. FF 2.0, IE7

--
dp
Nov 2 '06 #2

P: n/a

dp wrote:
je***********@yahoo.com wrote:
Hi

I'm trying to make an Iframe height adjustable depending on the height
of the web page.
I have managed to get this to work for the width, but not the height.

The original code is available here: http://www.brainjar.com/css/tabs/

This is what I have:

iframe.tabContent {
background-color: #99CCFF;
border: 1px solid #000000;
border-color: #0099CC #0099CC #0099CC #0099CC;
width: 100%;
height: 100%;
}

/************************************************** ****************************
* Additional styles.
*
************************************************** ****************************/

h4#title {
background-color: #003399;
border: 1px solid #000000;
border-color: #0099CC #0099CC #0099CC #0099CC;
color: #FFFFFF;
font-weight: bold;
margin-top: 0em;
margin-bottom: .5em;
padding: 2px .5em 2px .5em;
}

</style>
<script type="text/javascript">//<![CDATA[

function synchTab(frameName) {

var elList, i;

// Exit if no frame name was given.

if (frameName == null)
return;

// Check all links.

elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)

// Check if the link's target matches the frame being loaded.

if (elList[i].target == frameName) {

// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.

if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}

function removeName(el, name) {

var i, curList, newList;

if (el.className == null)
return;

// Remove the given class name from the element's className property.

newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}

//]]></script>

Any ideas ??

Thanks :)

Looks ok here. FF 2.0, IE7

--
dp
Hmm..

I'm using IE 6 and I don't get the height !!
If I make the browser full size, The frame only fills half the page !

Nov 2 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.