Foros del Web » Diseño web » HTML »

scroll de iframe a la pagina entera

Estas en el tema de scroll de iframe a la pagina entera en el foro de HTML en Foros del Web. Hola wenas, estoy creando un apagina web en la cual el cuerpo de la misma va por iframe, para evitar que la cabecera no se ...
  #1 (permalink)  
Antiguo 15/09/2010, 18:05
 
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 4 años, 10 meses
Puntos: 1
scroll de iframe a la pagina entera

Hola wenas, estoy creando un apagina web en la cual el cuerpo de la misma va por iframe, para evitar que la cabecera no se refresque cada vez que se pinche en un enlace, pero el scroll solo lo hace al iframe. Hay alguna forma de que envez de qu ese mueva el iframe se mueva toda la pagina?

Gracias
  #2 (permalink)  
Antiguo 16/09/2010, 14:10
 
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 4 años, 10 meses
Puntos: 1
Respuesta: scroll de iframe a la pagina entera

nadie sabe??
  #3 (permalink)  
Antiguo 16/09/2010, 15:04
 
Fecha de Ingreso: septiembre-2010
Ubicación: In my dreams ^^
Mensajes: 18
Antigüedad: 3 años, 7 meses
Puntos: 0
Respuesta: scroll de iframe a la pagina entera

No entendi muy bien.
  #4 (permalink)  
Antiguo 17/09/2010, 14:41
 
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 4 años, 10 meses
Puntos: 1
Respuesta: scroll de iframe a la pagina entera

a ver, tengo el encabezado y el cuerpo. El cuerpo es un div y dentro del div hay un iframe, lo que pasa esk el scroll lo hace solo al iframe, y quiero hacerselo a la pagina entera, es decir, que no baje solo el cuerpo o iframe, al bajar la pagina, sino que baje la pagina entera, incluyendo el encabezado, por si os es más facil, aki os dejo el codigo:

Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="Scripts/cuerpo.js" type="text/javascript"></script>
<script src="http://s6.myradiostream.com/unlock/jquery.js" type="text/javascript"></script>
<script src="http://s6.myradiostream.com/unlock/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function MM_effectShake(targetElement)
{
	Spry.Effect.DoShake(targetElement);
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
{
	Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
}
//-->
</script>

</head>
<body onload="djs.html">
<div id="cabecera">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','237','title','cabecera','src','0042','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','0042' ); //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=9,0,28,0" width="780" height="237" title="cabecera">
    <param name="movie" value="0042.swf" />
    <param name="quality" value="high" />
    <embed src="0042.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="780" height="237"></embed>
</object>
</noscript>
</div>
<div id="cabecera1"></div>
<div id="cabecera2"></div>
<div id="cabecera3"></div>
<div id="cabeceramenu"></div>
<div id="menu1">
<div id="barra"><img src="images/MENU.png" width="174" height="49" /></div>
<div id="li1"><a onclick="javascript: MM_effectShake('li1'); Borrar(); Home();MM_effectAppearFade('cuerpo', 1000, 0, 100, false)" onmouseover="MM_effectHighlight('li1', 1000, '#FFFFFF', '#E11919', '#E11919', false)"><font color="#000000">&diams;</font> Inicio</a></div>
<div id="li2"><a onclick="javascript: MM_effectShake('li2'); Borrar(); Djs();MM_effectAppearFade('cuerpo', 1000, 0, 100, false)" onmouseover="MM_effectHighlight('li2', 1000, '#FFFFFF', '#E11919', '#E11919', false)"><font color="#000000">&diams;</font> Dj's</a></div>

</div>
<div id="unlock"><img src="http://s6.myradiostream.com/unlock/19686.png" height="0" width="0" /></div>
<div id="radio">
  <div id="playerswf" style="border: 0pt none ; padding: 0pt; display: inline-block; width: 180px; height: 50px; background-image: url(images/fondoradio.gif);">
  <object height="50" width="180" style="vertical-align:middle">
    <param name="movie" value="http://bellonline.co.uk/player/player.swf?url=http://s6.myradiostream.com:/19686/;&autoplay=1&title=" />
    <param name="wmode" value="transparent" />
    <embed src="http://bellonline.co.uk/player/player.swf?url=http://s6.myradiostream.com:19686//;&autoplay=1&title=" wmode="transparent" type="application/x-shockwave-flash" height="50" width="180"></embed>
  </object>
  Estado de la radio:
  <script type="text/javascript" src="http://shoutcast.mixstream.net/js/status/uk6-free:19686">
You appear to have javascript turned off.

</script>
<img src="http://shoutcast.mixstream.net/status/uk6-free:19686.gif" alt="Stream status" width="17" height="17" align="absmiddle">
</div> 
</div>
<div id="cuerpo">
  <iframe src="home.html"  width="100%" height="100%" style="border:hidden; overflow:auto" frameborder="0"></iframe>
</div>
</body>
</html>
  #5 (permalink)  
Antiguo 17/09/2010, 20:50
 
Fecha de Ingreso: octubre-2008
Mensajes: 81
Antigüedad: 5 años, 5 meses
Puntos: 3
Respuesta: scroll de iframe a la pagina entera

Bueno, hace tiempo tuve ese problema y lo solucione con las funciones javascript:

Código Javascript:
Ver original
  1. function resizeIframe(ID,NOMBRE){
  2.    
  3.     document.getElementById(ID).height=null;
  4.     document.getElementById(ID).width=null;
  5.     var m=getWindowData(NOMBRE,ID);
  6.     document.getElementById(ID).height=m[5];
  7.     document.getElementById(ID).width=m[4]+22;
  8.    
  9. }
  10.  
  11. function getWindowData(n,i){
  12.    
  13.     var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument;
  14.     var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
  15.     if (typeof window.frames[n].innerWidth != 'undefined'){
  16.         widthViewport= window.frames[n].innerWidth;
  17.         heightViewport= window.frames[n].innerHeight;
  18.     }else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){
  19.         widthViewport=ifr.documentElement.clientWidth;
  20.         heightViewport=ifr.documentElement.clientHeight;
  21.     }else{
  22.         widthViewport= ifr.getElementsByTagName('body')[0].clientWidth;
  23.         heightViewport=ifr.getElementsByTagName('body')[0].clientHeight;
  24.     }
  25.     xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft);
  26.     yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop);
  27.     widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport);
  28.     heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport);
  29.     return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
  30.    
  31. }

y el tag del iframe debe ser algo así:

Código HTML:
Ver original
  1. <iframe name="principal" id="principal" src="main.html" frameborder="0" scrolling="no" onload="resizeIframe('principal','principal');"></iframe>

Espero te funcione y tmb espero no haber olvidado nada. Suerte!
  #6 (permalink)  
Antiguo 18/09/2010, 14:08
 
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 4 años, 10 meses
Puntos: 1
Respuesta: scroll de iframe a la pagina entera

jaja gracias me ha funcionado perfectamente, pero ahora me surge otro problema, al lado tengo como una barra de menú la cual el fondo es una imagen que se repite en eje vertical, pero nose porque no me sale hasta el fondo de la pagina, se corta a mitad, el css lo tengo asi:

Código:
#menu1 {
	width: 200px;
	height: 100%;
	background: url(images/M1.gif) top center repeat-y;
	position: absolute;
	left: 0px;
	top: 270px;
	z-index: 0;	
	bottom: 0px;
}
  #7 (permalink)  
Antiguo 19/09/2010, 14:02
 
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 4 años, 10 meses
Puntos: 1
Respuesta: scroll de iframe a la pagina entera

despues me acabo de dar cuenta de otro fallo. Para cambiar la pagina, llamo a un javascript, pero al agregar esa funcion no funciona el boton. Asi es como lo hago:
Código:
function Borrar()
{
	divId=document.getElementById('cuerpo');
	divId.innerHTML='';
}
function Home()
{
	divId=document.getElementById('cuerpo');
	divId.innerHTML='<iframe id="home" name="home" src="home.html" width="100%" height="100%" style="border:hidden; overflow:hidden" onload="resizeIframe('home','home');"></iframe>';
}
Y despues en el boton:

Código:
<div id="li1"><a onclick="javascript: MM_effectShake('li1'); Borrar(); Home();MM_effectAppearFade('cuerpo', 1000, 0, 100, false)" onmouseover="MM_effectHighlight('li1', 1000, '#FFFFFF', '#E11919', '#E11919', false)"><font color="#000000">&diams;</font> Inicio</a></div>
  #8 (permalink)  
Antiguo 24/09/2010, 12:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.440
Antigüedad: 11 años, 9 meses
Puntos: 360
Respuesta: scroll de iframe a la pagina entera

Hola:

Yo lo que no entiendo es ¿Para que usas un iframe si después quieres scroll en toda la página?

Saludos.

  #9 (permalink)  
Antiguo 02/07/2011, 17:21
 
Fecha de Ingreso: julio-2011
Mensajes: 1
Antigüedad: 2 años, 9 meses
Puntos: 0
Respuesta: scroll de iframe a la pagina entera

Buenas,
He probado el código y no me ha fucionado, os dejo el código de mi página:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>Pagina principal</title>
<script language="JavaScript">
function resizeIframe(ID,NOMBRE){

document.getElementById(ID).height=null;
document.getElementById(ID).width=null;
var m=getWindowData(NOMBRE,ID);
document.getElementById(ID).height=m[5];
document.getElementById(ID).width=m[4]+22;

}

function getWindowData(n,i){

var ifr=document.getElementById(i).contentWindow.docum ent || document.getElementById(i).contentDocument;
var widthViewport,heightViewport,xScroll,yScroll,width Total,heightTotal;
if (typeof window.frames[n].innerWidth != 'undefined'){
widthViewport= window.frames[n].innerWidth;
heightViewport= window.frames[n].innerHeight;
}else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){
widthViewport=ifr.documentElement.clientWidth;
heightViewport=ifr.documentElement.clientHeight;
}else{
widthViewport= ifr.getElementsByTagName('body')[0].clientWidth;
heightViewport=ifr.getElementsByTagName('body')[0].clientHeight;
}
xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLef t);
yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop) ;
widthTotal=Math.max(ifr.documentElement.scrollWidt h,ifr.body.scrollWidth,widthViewport);
heightTotal=Math.max(ifr.documentElement.scrollHei ght,ifr.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,width Total,heightTotal];

}
</script>

</head>
<body>
<iframe scrolling="no" frameborder="0" id="bloque_izquierdo" name="bloque_izquierdo" class="bloque_izquierdo" onload="resizeIframe('bloque_izquierdo','bloque_iz quierdo');"></iframe>

<div class="division_lateral" style="left:11.8em;"></div>

<iframe scrolling="no" frameborder="0" id="bloque_central" name="bloque_central" class="bloque_central" onload="resizeIframe('bloque_central','bloque_cent ral');"></iframe>

<div class="division_lateral" style="left:50.5em;"></div>

<iframe scrolling="no" frameborder="0" id="bloque_derecho" class="bloque_derecho" onload="resizeIframe('bloque_derecho','bloque_dere cho');"></iframe>

</iframe>

</body>
</html>

Podéis decirme dónde está el fallo??
Muchísimas gracias!!!

Etiquetas: iframe, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:06.
SEO by vBSEO 3.3.2