✔ Layouthöhe dynamisch mit iframe

thehasso · 19. Februar 2010

hallo,

ich hab auf meiner Seite ein layout das zur breite Dynamisch ist. Die Höhe hab ich hab als feste größe angeben. Ich hab das so konzepiert, dass es mittels iframe arbeitet. Also wenn man auf ein Link klickt, öffnet sich dieses immer in der Seite. (ihr wisst ja was ich meine). So das problem das ich habe ist das jeder Link den man anklickt eine Datei ist mit unterschiedlicher höhe.

Aus dem Grund ist das mit der Konstanten Angabe nicht eine gute Lösung. Diese sieht zurzeit so aus:

Code:

#box {

  width: 100%;
  height: 1100px;
  -moz-border-radius:5px;
  border:2px solid #CCC;
  text-align: left;
  background-color: #FFF;
}

wenn ich bei höhe auch 100% angabe mache, dann sieht man nicht mehr viel vom iframe. Deswegen die Frage was könnte man machen, damit das funktioniert?

Ebay ist so gesehen so wie ich mir das vorstelle. Das man Rechts den Scrollbalken benutzt wenns zuweit untergeht. Ansonsten soll man das Iframe immer komplett sehen.

Maik · 19. Februar 2010

Hi,

thehasso hat gesagt.:
wenn ich bei höhe auch 100% angabe mache, dann sieht man nicht mehr viel vom iframe.

Dann fehlt dem Elternelement (im nachfolgenden Beispiel <html> u. <body>) die height:100%-Deklaration.

HTML:

<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-19" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
html {
overflow:hidden;
}
html,body,iframe {
height:100%;
width:100%;
}
/* ]]> */
</style>

</head>
<body>
      <iframe src="http://www.tutorials.de"></iframe>
</body>
</html>

mfg Maik

thehasso · 19. Februar 2010

hmm geht irgendwie nicht, wird nur schlimmer wenn ich das bei mir versuche..

Es soll ja nur die BOX größer werden wenn das iframe groß ist. Klappts irgendwie nicht..hab nach der box auch ein komma mit iframe geschrieben.

Code:

<style>
a:hover {text-decoration:underline; color: #000;}
a {text-decoration:none;}
</style>


<style>
body{
  margin: 20px 180px;
  background-color: #FFF;
  
}
#box{

  width: 100%;
  height:100%;
  -moz-border-radius:5px;
  border:2px solid #CCC;
  text-align: left;
  background-color: #FFF;
}

#down {

  width: 100%;
  -moz-border-radius:5px;
  text-align: left;
  background-color: #FFF;
  border:2px solid #CCC;
}

#schnellsuche {

  width: 100%;
  -moz-border-radius:5px;
  text-align: left;
  background-color: #999;
}
#infos {

  width: 100%;
  -moz-border-radius:5px;
  border: #CCC;
  text-align: left;
  background-color: #CCC;
}
</style>

Maik · 19. Februar 2010

thehasso hat gesagt.:
hmm geht irgendwie nicht, wird nur schlimmer wenn ich das bei mir versuche..

Das nenn ich mal eine unbrauchbare Problembeschreibung

Oder dürfen wir diese Aussage nun der Glaskugel zur Auswertung überreichen?

Und mit deinem CSS-Schnipsel alleine kann ich jetzt auch nix groß dazu sagen, was da schlimmer wird, und wie dem zu begegnen ist.

Daher: Wie lautet überhaupt der HTML-Code deiner Seite?

thehasso hat gesagt.:
Es soll ja nur die BOX größer werden wenn das iframe groß ist.

Soll sich die Höhe des iFrames etwa dem Inhaltsumfang der darin geladenen Seite anpassen?

mfg Maik

thehasso · 19. Februar 2010

Also das is der komplette code. Der JS code istt fürn flash also nicht weiter intressant.

es geht um das div mit der box, das muss so hoch sein wie das IFRAME enthaltene link

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script language="JavaScript" type="text/javascript">
<!--
//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2008 Adobe Systems Incorporated.  All rights reserved.
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
function ControlVersion()
{
	var version;
	var axo;
	var e;
	// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
	try {
		// version will be set for 7.X or greater players
		axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
		version = axo.GetVariable("$version");
	} catch (e) {
	}
	if (!version)
	{
		try {
			// version will be set for 6.X players only
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
			
			// installed player is some revision of 6.0
			// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
			// so we have to be careful. 
			
			// default to the first public version
			version = "WIN 6,0,21,0";
			// throws if AllowScripAccess does not exist (introduced in 6.0r47)		
			axo.AllowScriptAccess = "always";
			// safe to call for 6.0r47 or greater
			version = axo.GetVariable("$version");
		} catch (e) {
		}
	}
	if (!version)
	{
		try {
			// version will be set for 4.X or 5.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = axo.GetVariable("$version");
		} catch (e) {
		}
	}
	if (!version)
	{
		try {
			// version will be set for 3.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = "WIN 3,0,18,0";
		} catch (e) {
		}
	}
	if (!version)
	{
		try {
			// version will be set for 2.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
			version = "WIN 2,0,0,11";
		} catch (e) {
			version = -1;
		}
	}
	
	return version;
}
// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
	// NS/Opera version >= 3 check for Flash plugin in plugin array
	var flashVer = -1;
	
	if (navigator.plugins != null && navigator.plugins.length > 0) {
		if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
			var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
			var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
			var descArray = flashDescription.split(" ");
			var tempArrayMajor = descArray[2].split(".");			
			var versionMajor = tempArrayMajor[0];
			var versionMinor = tempArrayMajor[1];
			var versionRevision = descArray[3];
			if (versionRevision == "") {
				versionRevision = descArray[4];
			}
			if (versionRevision[0] == "d") {
				versionRevision = versionRevision.substring(1);
			} else if (versionRevision[0] == "r") {
				versionRevision = versionRevision.substring(1);
				if (versionRevision.indexOf("d") > 0) {
					versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
				}
			}
			var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
		}
	}
	// MSN/WebTV 2.6 supports Flash 4
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
	// WebTV 2.5 supports Flash 3
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
	// older WebTV supports Flash 2
	else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
	else if ( isIE && isWin && !isOpera ) {
		flashVer = ControlVersion();
	}	
	return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
	versionStr = GetSwfVer();
	if (versionStr == -1 ) {
		return false;
	} else if (versionStr != 0) {
		if(isIE && isWin && !isOpera) {
			// Given "WIN 2,0,0,11"
			tempArray         = versionStr.split(" "); 	// ["WIN", "2,0,0,11"]
			tempString        = tempArray[1];			// "2,0,0,11"
			versionArray      = tempString.split(",");	// ['2', '0', '0', '11']
		} else {
			versionArray      = versionStr.split(".");
		}
		var versionMajor      = versionArray[0];
		var versionMinor      = versionArray[1];
		var versionRevision   = versionArray[2];
        	// is the major.revision >= requested major.revision AND the minor version >= requested minor
		if (versionMajor > parseFloat(reqMajorVer)) {
			return true;
		} else if (versionMajor == parseFloat(reqMajorVer)) {
			if (versionMinor > parseFloat(reqMinorVer))
				return true;
			else if (versionMinor == parseFloat(reqMinorVer)) {
				if (versionRevision >= parseFloat(reqRevision))
					return true;
			}
		}
		return false;
	}
}
function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?'); 
  else
    return src + ext;
}
function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '';
  if (isIE && isWin && !isOpera)
  {
    str += '<object ';
    for (var i in objAttrs)
    {
      str += i + '="' + objAttrs[i] + '" ';
    }
    str += '>';
    for (var i in params)
    {
      str += '<param name="' + i + '" value="' + params[i] + '" /> ';
    }
    str += '</object>';
  }
  else
  {
    str += '<embed ';
    for (var i in embedAttrs)
    {
      str += i + '="' + embedAttrs[i] + '" ';
    }
    str += '> </embed>';
  }
  document.write(str);
}
function AC_FL_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_SW_RunContent(){
  var ret = 
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();    
    switch (currArg){	
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":	
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblclick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
      case "id":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace": 
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}
// -->
</script>

<style type="text/css">   <!-- 

   html,body { 
      margin: 0px; 
      padding: 0px 1px 0 1px; 
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 

   } 
   #frame {
           width: 100%;
           text-align: center;
		   
   }
    
   #spalte-a, #spalte-b { 
      float: left; 
      width: 35%;
   } 
    
   #spalte-b { 
   
      width: 65%; 
   } 
   #spalte-c { 
   float:left;
      width: 0%; 
   } 

   div.look { 
      margin: 5px 1px 0 1px; 
      border: 0px solid #CCC; 
      padding: 5px;     
      font-size: 0.7em;    
   } 


    
--> 
</style> 

<style>
a:hover {text-decoration:underline; color: #000;}
a {text-decoration:none;}
</style>


<style>
body {
  margin: 20px 180px;
  background-color: #FFF;
  
}
#box {

  width: 100%;
  height: 100%;
  -moz-border-radius:5px;
  border:2px solid #CCC;
  text-align: left;
  background-color: #FFF;
}

#down {

  width: 100%;
  -moz-border-radius:5px;
  text-align: left;
  background-color: #FFF;
  border:2px solid #CCC;
}

#schnellsuche {

  width: 100%;
  -moz-border-radius:5px;
  text-align: left;
  background-color: #999;
}
#infos {

  width: 100%;
  -moz-border-radius:5px;
  border: #CCC;
  text-align: left;
  background-color: #CCC;
}
</style>


<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="box">



<div id="frame">

<div class="look">&nbsp;

  <!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="JavaScript" type="text/javascript">
	AC_FL_RunContent(
		'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
		'width', '100%',
		'height', '430',
		'src', 'Untitled-1',
		'quality', 'high',
		'pluginspage', 'http://www.adobe.com/go/getflashplayer',
		'align', 'middle',
		'play', 'true',
		'loop', 'true',
		'scale', 'showall',
		'wmode', 'window',
		'devicefont', 'false',
		'id', 'Untitled-1',
		'bgcolor', '#ffffff',
		'name', 'Untitled-1',
		'menu', 'true',
		'allowFullScreen', 'false',
		'allowScriptAccess','sameDomain',
		'movie', 'Untitled-1',
		'salign', ''
		); //end AC code
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="430" id="Untitled-1" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="Untitled-1.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="Untitled-1.swf" quality="high" bgcolor="#ffffff" width="100%" height="430" name="Untitled-1" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</noscript>
</div>


</div>

<iframe frameborder="0" scrolling="no" src="index.php" height="100%" width="100%" name="Framename">Alternativtext</iframe>

  
</div>
<br />
<div id="down">
<font color="#000000" size="1">   Sicherheit: SSL Verfahren | Contact: support@961bay.com | Hilfe| Werbung |
Unternehmen -> Datenschutz, Unternehmens - Vision, Preise</font>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Maik · 19. Februar 2010

Ich bedanke mich für dein Ignorieren meiner zweiten Frage, die ich nicht grundlos gestellt hatte

Maik hat gesagt.:
thehasso hat gesagt.:

Es soll ja nur die BOX größer werden wenn das iframe groß ist.

Zum Vergrößern anklicken....

Soll sich die Höhe des iFrames etwa dem Inhaltsumfang der darin geladenen Seite anpassen?

mfg Maik

thehasso · 19. Februar 2010

Soll sich die Höhe des iFrames etwa dem Inhaltsumfang der darin geladenen Seite anpassen?

Ich versteh nicht so recht wie du das meinst aber es soll die geladene Seite also die im iframe verlinkt ist soll die größe sein für das div box.

man sieht nämlich nur die hälfte der datei, die im iframe verlinkt ist weil das div mit box nicht gro0 genug ist von der höhe.

Maik · 19. Februar 2010

Was gibt es an der Frage nicht zu verstehen? Schreib ich hier vielleicht polnisch?

Da du es mit den relativen 100%-Höhenangaben umsetzen willst, lies dir mal CSS Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt? durch, warum es bei dir nicht funktioniert.

Mein eingangs gezeigter Code demonstriert genau das, was in deinem CSS fehlt.

mfg Maik

thehasso · 19. Februar 2010

da ist aber margin 0, wär echt korrekt wenn du mir genau sagen könntest was ich ändern muss. Bin nicht schlauer geworden weils einfach nicht klappt.
das layout soll unveränbar bleiben außer der höhe und das high 100% hilft nichts.

Maik · 19. Februar 2010

thehasso hat gesagt.:
und das high 100% hilft nichts.

Jo, mit "high:100%" würde mir auch nichts mehr helfen :suspekt:

CSS:

html,body { height:100%; }

... hilft in deiner Seite sehr wohl, den iFrame und die umschliessende Box in ihrer Höhe zu strecken, nur reichen sie dann über den unteren Fensterrand hinaus, weil sich die height:100%-Deklaration auf das komplette Browserfenster bezieht, und dein iFrame sich nicht ganz oben zu Beginn der Seite befindet, so wie in meinem eingangs gezeigten Beispiel.

In diesem Fall wirst du dein Vorhaben so umsetzen müssen, wenn du keine absoluten Höhenangaben für die Box und den iFrame verwenden willst:

HTML:

<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-19" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
html {
overflow:hidden;
}
html,body {
height:100%;
max-height:100%;
width:100%;
overflow:hidden;
}
body {
background:#ddd;
}
#iframeBox {
position:absolute;
top:150px;
bottom:100px;
left:0px;
right:0px;
}
iframe {
height:100%;
width:100%;
border:0;
}
/* ]]> */
</style>

</head>
<body>

<div id="iframeBox">
           <iframe src="http://www.tutorials.de"></iframe>
</div>

</body>
</html>

mfg Maik

✔ Layouthöhe dynamisch mit iframe

thehasso

Erfahrenes Mitglied

Maik

thehasso

Erfahrenes Mitglied

Maik

thehasso

Erfahrenes Mitglied

Maik

thehasso

Erfahrenes Mitglied

Maik

thehasso

Erfahrenes Mitglied

Maik

Neue Beiträge