IFrame help needed urgently! plz

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 392,004 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 4,159 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 JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 951 | 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: Apr 2007

Location: Birmingham

Posts: 368

Reputation: Fungus1487 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 35

Fungus1487 Fungus1487 is offline

Offline

Posting Whiz

Re: IFrame help needed urgently! plz

Aug 20th, 2007

im pretty certain when linking to a site outside of your domain there becomes problems with javascript. therefore i dont believe you can get any properties from the page

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

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 26th, 2007

•

Originally Posted by Fungus1487

im pretty certain when linking to a site outside of your domain there becomes problems with javascript. therefore i dont believe you can get any properties from the page

but i am linking to a page inside my site only... i have changed the links so that i cud load pages coz my site is not uploaded yet....

•

Join Date: Apr 2007

Location: Birmingham

Posts: 368

Reputation: Fungus1487 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 35

Fungus1487 Fungus1487 is offline

Offline

Posting Whiz

Re: IFrame help needed urgently! plz

Aug 27th, 2007

ok then

something like

Help with Code Tags

(Toggle Plain Text)

function changeiframe(iframe) {
  var height = iframe.document.body.offsetHeight;
  var width = iframe.document.body.offsetWidth;
  return [width, height];
}

if you pass that function the iframe in question it should return the width and height

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design