IFrame help needed urgently! plz

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,559 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,738 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 689 | Replies: 3

•

Join Date: Aug 2007

Posts: 20

Reputation: web_master is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

web_master web_master is offline

Offline

Newbie Poster

IFrame help needed urgently! plz

Aug 19th, 2007

how do i make a tabbed iframe which can change its height automatically and make height equal to the content inside it.
I have never used iframe before this.

i dont want scrollers. i want it to call the size of the content inside it.
i have tried some scripts but nuthing works. i need changing of the width & height dynamically.

any help would be really appreciated.

Thanks!!

my iframe code which is not working is:

Help with Code Tags

(Toggle Plain Text)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabs Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">

/******************************************************************************
* Styles for the tabbed displays.                                             *
******************************************************************************/

/*-----------------------------------------------------------------------------
  Note: The border-radius property is a proposed feature for CSS3 which creates
        rounded corners. Mozilla/Netscape browsers currently support this
        feature via the proprietary -moz-border-radius property. Both are
        defined here. Browsers that support neither should simply ignore them.
-----------------------------------------------------------------------------*/

div.tabBox {
}

div.tabArea {
  font-size: 80%;
  font-weight: bold;
  padding: 0px 0px 3px 0px;
}

a.tab {
  background-color: #d0b0ff;
  border: 2px solid #000000;
  border-bottom-width: 0px;
  border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff;
  -moz-border-radius: .75em .75em 0em 0em;
  border-radius-topleft: .75em;
  border-radius-topright: .75em;
  padding: 2px 1em 2px 1em;
  position: relative;
  text-decoration: none;
  top: 3px;
  z-index: 100;
}

a.tab, a.tab:visited {
  color: #8060b0;
}

a.tab:hover {
  background-color: #a080d0;
  border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0;
  color: #ffe0ff;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
  background-color: #9070c0;
  border-color: #b090e0 #7050a0 #7050a0 #b090e0;
  color: #ffe0ff;
}

a.tab.activeTab {
  padding-bottom: 4px;
  top: 1px;
  z-index: 102;
}

div.tabMain {
  background-color: #9070c0;
  border: 2px solid #000000;
  border-color: #b090e0 #7050a0 #7050a0 #b090e0;
  -moz-border-radius: 0em .5em .5em 0em;
  border-radius-topright: .5em;
  border-radius-bottomright: .5em;
  padding: .5em;
  position: relative;
  z-index: 101;
}

div.tabIframeWrapper {
  width: 100%;
}

iframe.tabContent {
  background-color: #9070c0;
  border: 1px solid #000000;
  border-color: #7050a0 #b090e0 #b090e0 #7050a0;
  width: 100%;
  height: 100%;
}

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

h4#title {
  background-color: #503080;
  border: 1px solid #000000;
  border-color: #7050a0 #b090e0 #b090e0 #7050a0;
  color: #d0b0ff;
  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>
</head>
<body>

<div class="tabBox" style="clear:both;">
  <div class="tabArea">
    <a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
    <a class="tab" href="http://www.google.com" target="tabIframe2">Google</a>
    <a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
    <a class="tab" href="http://www.google.com" target="tabIframe2">Google</a>
    <a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
  </div>
  <div class="tabMain">
    <div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="http://www.google.com" 

marginheight="8" marginwidth="8" frameborder="0"></iframe></div>
  </div>
</div>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabs Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">

/******************************************************************************
* Styles for the tabbed displays.                                             *
******************************************************************************/

/*-----------------------------------------------------------------------------
  Note: The border-radius property is a proposed feature for CSS3 which creates
        rounded corners. Mozilla/Netscape browsers currently support this
        feature via the proprietary -moz-border-radius property. Both are
        defined here. Browsers that support neither should simply ignore them.
-----------------------------------------------------------------------------*/

div.tabBox {
}

div.tabArea {
  font-size: 80%;
  font-weight: bold;
  padding: 0px 0px 3px 0px;
}

a.tab {
  background-color: #d0b0ff;
  border: 2px solid #000000;
  border-bottom-width: 0px;
  border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff;
  -moz-border-radius: .75em .75em 0em 0em;
  border-radius-topleft: .75em;
  border-radius-topright: .75em;
  padding: 2px 1em 2px 1em;
  position: relative;
  text-decoration: none;
  top: 3px;
  z-index: 100;
}

a.tab, a.tab:visited {
  color: #8060b0;
}

a.tab:hover {
  background-color: #a080d0;
  border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0;
  color: #ffe0ff;
}

a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
  background-color: #9070c0;
  border-color: #b090e0 #7050a0 #7050a0 #b090e0;
  color: #ffe0ff;
}

a.tab.activeTab {
  padding-bottom: 4px;
  top: 1px;
  z-index: 102;
}

div.tabMain {
  background-color: #9070c0;
  border: 2px solid #000000;
  border-color: #b090e0 #7050a0 #7050a0 #b090e0;
  -moz-border-radius: 0em .5em .5em 0em;
  border-radius-topright: .5em;
  border-radius-bottomright: .5em;
  padding: .5em;
  position: relative;
  z-index: 101;
}

div.tabIframeWrapper {
  width: 100%;
}

iframe.tabContent {
  background-color: #9070c0;
  border: 1px solid #000000;
  border-color: #7050a0 #b090e0 #b090e0 #7050a0;
  width: 100%;
  height: 100%;
}

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

h4#title {
  background-color: #503080;
  border: 1px solid #000000;
  border-color: #7050a0 #b090e0 #b090e0 #7050a0;
  color: #d0b0ff;
  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>
</head>
<body>

<div class="tabBox" style="clear:both;">
  <div class="tabArea">
    <a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
    <a class="tab" href="http://www.google.com" target="tabIframe2">Google</a>
    <a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
    <a class="tab" href="http://www.google.com" target="tabIframe2">Google</a>
    <a class="tab" href="http://www.yahoo.com" target="tabIframe2">Yahoo</a>
  </div>
  <div class="tabMain">
    <div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="http://www.google.com" 

marginheight="8" marginwidth="8" frameborder="0"></iframe></div>
  </div>
</div>

</body>
</html>

•

Join Date: Jul 2005

Location: Downingtown

Posts: 53

Reputation: hinde is an unknown quantity at this point

Rep Power: 4

Solved Threads: 3

hinde

Offline

Junior Poster in Training

Re: IFrame help needed urgently! plz

Aug 19th, 2007

I am going under the assumption that you will have access to the code set as the src. If that is not the case disregard this message as it can't help you. I don't got the time to fire up your code in any meaningful way, but when I write something with iframes that have dynamic content in them I use the following 2 lines of code to size them appropriately. I usually put them at the bottom of the file that the iframe is displaying.

Help with Code Tags

(Toggle Plain Text)

	
parent.document.getElementById('iframe1').style.height=document.body.scrollHeight+'px';
parent.document.getElementById('iframe1').style.width=document.body.scrollWidth+'px';

Last time I checked this code is compatible with FF and IE 6 and 7. If the scrollHeight/scrollWidth value does not work try the offsetHeight/offsetWidth value.

•

Join Date: Aug 2007

Posts: 20

Reputation: web_master is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

web_master web_master is offline

Offline

Newbie Poster

Re: IFrame help needed urgently! plz

Aug 20th, 2007

Thanx alot i know u dont have time to go thru my complete code but just wrote it for a reference.

i hope ur code will solve my problem.

thanx alot

•

Join Date: Aug 2007

Posts: 20

Reputation: web_master is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

web_master web_master is offline

Offline

Newbie Poster

Re: IFrame help needed urgently! plz

Aug 20th, 2007

another thing coz u have already used iframe. i hope it is compactible with all the browsers. coz i read it online sumwhere about its compactibility problem.

Thanx