Cambiar tamaño iframe

[georgarming]

Hola, ¿es posible cambiar dinámicamente el tamaño de un iframe en Javascript? ¿Cómo? Gracias.

[monoswim]

Probaste con algo así ?

document.GetElementById('id_del_ifram').style.widt h = 400;
document.GetElementById('id_del_ifram').style.heig ht = 400;

Saludos

[georgarming]

Ok, gracias. Ahora tengo otra duda relacionada. Quiero que los iframes cambien de tamaño si están seleccionados, y de momento, para que estén seleccionados, el cursor debe estar encima de ellos. ¿Qué está mal de este código?

Código Javascript:

var apps = new Array();
function app (name, version, developer, selected) 
{
    this.name = name;
    this.version = version;
    this.developer = developer;
    this.selected = selected;
}
 
//Installed apps
 
apps[0] = new app ("App0", 0.1, "Weble", false);
apps[1] = new app ("App1", 0.1, "Weble", false);
 

Código Javascript:

for (x=0;x<apps.length;x++)
{
    var testframe = document.createElement("iframe");
    testframe.id = apps[x].name;
    testframe.src = "apps/" + apps[x].name + "/index.html";
    document.body.appendChild(testframe);
}
var selection = 0;
while (selection==0) 
{
    for (x=0;x<apps.length;x++) 
    {
        document.getElementById(apps[x].name).onmousehover = function ()
        {
            apps[x].selected = true;
        };
        document.getElementById(apps[x].name).onmouseout = function ()
        {
            apps[x].selected = false;
        };
        if(apps[x].selected == true)
        {
            document.GetElementById(apps[x].name).style.width = 400;
            document.GetElementById(apps[x].name).style.height = 400;
        }
        else
        {
            document.GetElementById(apps[x].name).style.width = 200;
            document.GetElementById(apps[x].name).style.height = 200;
        }
 
    }
}
 

Tened en cuenta que he empezado hace poco y soy muy malo xD. Es importante que sepáis que cada "app" corresponde a un iframe, y que la parte de crear un iframe para cada app está bien, lo que no funciona, aparentemente, es la parte de "var selection = 0" hacia el final, o el objeto "app" de apps.js.

Muchas gracias.

[ger84]

hola, me parece que confundiste la comprobación de si el ratón está encima con el manejo de eventos, ya que en cada vuelta del bucle estás asignando la función al evento, la idea es que javascript se encarga de manejar estos eventos, y no necesitas de un bucle que esté a la pesca de que algo cambie. De esta manera:

Código Javascript:

for (x=0;x<apps.length;x++)
{
    var testframe = document.createElement("iframe");
    testframe.id = apps[x].name;
    testframe.src = "apps/" + apps[x].name + "/index.html";
    document.body.appendChild(testframe);
    //acá enlazas las funciones al evento
    document.getElementById(apps[x].name).onmousehover = agrandariframe(x);
    document.getElementById(apps[x].name).onmouseout = encojeriframe(x);
}       
 
 
function agrandariframe(x)
{
        document.GetElementById(apps[x].name).style.width = 400;
            document.GetElementById(apps[x].name).style.height = 400;
}
function encojeriframe(x)
{
            document.GetElementById(apps[x].name).style.width = 200;
            document.GetElementById(apps[x].name).style.height = 200;
}
 

ojo no lo probé pero esta sería la idea, además podes mejorar ese código haciendo que la carga de imágenes, y la redimensión sean métodos del clase app

[georgarming]

Iniciado por ger84

hola, me parece que confundiste la comprobación de si el ratón está encima con el manejo de eventos, ya que en cada vuelta del bucle estás asignando la función al evento, la idea es que javascript se encarga de manejar estos eventos, y no necesitas de un bucle que esté a la pesca de que algo cambie. De esta manera:

Código Javascript:

for (x=0;x<apps.length;x++)
{
    var testframe = document.createElement("iframe");
    testframe.id = apps[x].name;
    testframe.src = "apps/" + apps[x].name + "/index.html";
    document.body.appendChild(testframe);
    //acá enlazas las funciones al evento
    document.getElementById(apps[x].name).onmousehover = agrandariframe(x);
    document.getElementById(apps[x].name).onmouseout = encojeriframe(x);
}       
 
 
function agrandariframe(x)
{
        document.GetElementById(apps[x].name).style.width = 400;
            document.GetElementById(apps[x].name).style.height = 400;
}
function encojeriframe(x)
{
            document.GetElementById(apps[x].name).style.width = 200;
            document.GetElementById(apps[x].name).style.height = 200;
}
 

ojo no lo probé pero esta sería la idea, además podes mejorar ese código haciendo que la carga de imágenes, y la redimensión sean métodos del clase app

Muchas gracias, voy a probar. Sin duda tienes razón: me confundí. Aún no conozco mucho Javascript xD.

[georgarming]

Fail, no me funciona. ¿Why?

[ger84]

Iniciado por georgarming

Fail, no me funciona. ¿Why?

si, ya lo estuve estudiando, creo que el error creo está aquí,

Código Javascript:

document.getElementById(apps[x].name).onmousehover = agrandariframe(x);
 

acá debería ser

Código Javascript:

document.getElementById(apps[x].name).onmousehover = agrandariframe(event);
 

la función agrandariframe(event) al igual que encojeriframe(event) debería reconocer ella misma el identificador desde la cual ella fue disparada. Seguro que hay errores, pero si te sirve...

Código Javascript:

function agrandariframe(event){
      var id = event.target;       //event.target devuelve el identificador desde
                                               //el cual el evento se originó 
      document.GetElementById(id).style.width = 400;
      document.GetElementById(id).style.height = 400;
}
 

aquí hay una descripción de event.target
http://www.w3schools.com/jsref/event_target.asp

[georgarming]

Iniciado por ger84

si, ya lo estuve estudiando, creo que el error creo está aquí,

Código Javascript:

document.getElementById(apps[x].name).onmousehover = agrandariframe(x);
 

acá debería ser

Código Javascript:

document.getElementById(apps[x].name).onmousehover = agrandariframe(event);
 

la función agrandariframe(event) al igual que encojeriframe(event) debería reconocer ella misma el identificador desde la cual ella fue disparada. Seguro que hay errores, pero si te sirve...

Código Javascript:

function agrandariframe(event){
      var id = event.target;       //event.target devuelve el identificador desde
                                               //el cual el evento se originó 
      document.GetElementById(id).style.width = 400;
      document.GetElementById(id).style.height = 400;
}
 

aquí hay una descripción de event.target
http://www.w3schools.com/jsref/event_target.asp

Ok, gracias, estoy probando. Por cierto, otro error que vi es que yo puse "onmouseHover" la primera vez, y no "onmouseover", y luego cada vez que lo escribía otra vez Sublime Text me sugería "onmousehover" (con h). Pero igualmente sigue sin funcionar.

[ger84]

hola geogarmin, me había quedado pensando en el problema, ayudar a otros es buena forma de aprender, lo probé y anda bien, (en firefox y chrome, ie no lo tengo)

Código Javascript:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function app(name, version, developer, selected){
    this.name = name;
    this.version = version;
    this.developer = developer;
    this.selected = selected;
    this.iframe;
    this.agregaralbody = agregaralbody;
    function agregaralbody(){
        this.iframe = document.createElement("iframe");
        this.iframe.setAttribute("id",this.name);
        this.iframe.setAttribute("src","apps/" + this.name + "/index.html");
        this.iframe.setAttribute("onmouseover","agrandariframe(event)");
        this.iframe.setAttribute("onmouseout","encojeriframe(event)");
        document.body.appendChild(this.iframe);
    }
}
function agrandariframe(event){
    elemento = event.target;
    console.log(elemento.id);
    document.getElementById(elemento.id).width = 400;
    document.getElementById(elemento.id).height = 400;
}
 
function encojeriframe(event){
    elemento = event.target;
    document.getElementById(elemento.id).width = 200;
    document.getElementById(elemento.id).height = 200;
}
//Installed apps
 
window.onload = function(){
        var apps = new Array();
        apps[0] = new app("App0", 0.1, "Weble", false);
        apps[1] = new app("App1", 0.1, "Weble", false);
        for (x=0;x<apps.length;x++){
            apps[x].agregaralbody();
        }       
    }
    
</script>
</head>
<body>
</body>
</html>
 

[Dradi7]

Bueno parece que aun no han encontrado solución, aca les brindo la solución para todos los navegadores haciendo unos cambios en el código de ger84 para que funcione en IE

Código HTML:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function app(name, version, developer, selected){
  this.name = name;
  this.version = version;
  this.developer = developer;
  this.selected = selected;
  this.iframe;
  this.agregaralbody = agregaralbody;
  function agregaralbody(){
    this.iframe = document.createElement("iframe");
    this.iframe.id = this.name;
    this.iframe.src = "src","apps/" + this.name + "/index.html";
    if (document.addEventListener) { 
            this.iframe.addEventListener("mouseover", function(){agrandariframe(this);}, false);
            this.iframe.addEventListener("mouseout", function(){encojeriframe(this);}, false);
        }
        // PARA IE
        else{
            this.iframe.attachEvent("onmouseover", function(){agrandariframe(event.srcElement);}, false);
            this.iframe.attachEvent("onmouseout", function(){encojeriframe(event.srcElement);}, false);
        }
    document.body.appendChild(this.iframe);
  }
}
 
function agrandariframe(frm){
  document.getElementById(frm.id).width = 400;
  document.getElementById(frm.id).height = 400;
}
 
function encojeriframe(frm){
  document.getElementById(frm.id).width = 200;
  document.getElementById(frm.id).height = 200;
}
 
window.onload = function(){
    var apps = new Array();
    apps[0] = new app("App0", 0.1, "Weble", false);
    apps[1] = new app("App1", 0.1, "Weble", false);
    for (x=0;x<apps.length;x++){
      apps[x].agregaralbody();
    }    
  }
  
</script>
</head>
<body>
</body>
</html>
 

[georgarming]

¡Excelente! Gracias a los dos.

Una pregunta: ¿sabríais cómo hacer que los iframes salieran separados unos de otros por un pequeño espacio, tanto por arriba como por los lados? Es que salen muy apretujados...

Gracias.

[Dradi7]

Ya para esto debes usar estilos usa un margin-right para superar cada Iframe por el costado derecho

Ejm. esto es para JS, puedes usar todos o escoger el que te parezca

Código Javascript:

this.iframe.style.marginRight = 10; // ESPACIADO A LA DERECHA
this.iframe.style.marginLeft = 10; // ESPACIADO A LA IZQUIERDA
this.iframe.style.marginTop = 10; // ESPACIADO ARRIBA
this.iframe.style.marginBottom = 10; // ESPACIADO ABAJO
 

[georgarming]

Iniciado por Dradi7

Ya para esto debes usar estilos usa un margin-right para superar cada Iframe por el costado derecho

Ejm. esto es para JS, puedes usar todos o escoger el que te parezca

Código Javascript:

this.iframe.style.marginRight = 10; // ESPACIADO A LA DERECHA
this.iframe.style.marginLeft = 10; // ESPACIADO A LA IZQUIERDA
this.iframe.style.marginTop = 10; // ESPACIADO ARRIBA
this.iframe.style.marginBottom = 10; // ESPACIADO ABAJO
 

Ok, gracias, pero hay un problema. Si no hay ningún iframe agrandado, cuando se agranda uno los otros iframes cambian de posición, es como si el hecho de que el iframe se agrande empuje a los otros... ¿Hay alguna manera de evitar esto?

[Dradi7]

Lo que no entiendo es que si el iframe se agranda que quieres hacer con el otro frame que se quede en la misma posicion en donde estaba pq si lo se haria estaria un iframe encima del otro

Es natural que el iframe cuando se agrande empuje al otro ya que estas aumentando el alto y el ancho y los otros iframe se empujen menciona mas claramente porque y como deseas que se agrande el iframe

[georgarming]

Iniciado por Dradi7

Lo que no entiendo es que si el iframe se agranda que quieres hacer con el otro frame que se quede en la misma posicion en donde estaba pq si lo se haria estaria un iframe encima del otro

Es natural que el iframe cuando se agrande empuje al otro ya que estas aumentando el alto y el ancho y los otros iframe se empujen menciona mas claramente porque y como deseas que se agrande el iframe

Es que aquí está, que se empujan unos a otros incluso si están a centenares de píxeles de distancia y sea imposible que se tocan. Vamos, que si yo pongo para probar que la distancia entre los iframes sea de 1000 píxeles, igualmente se empujarán unos a otros.

Quiero poner (y de hecho ya he puesto) la distancia suficiente de distancia para que no se toquen entre ellos al cambiar de tamaño, pero lo que pasa es que, como he dicho, igualmente se empujan.

¿Cómo puedo arreglarlo? Gracias.

[georgarming]

Iniciado por georgarming

Es que aquí está, que se empujan unos a otros incluso si están a centenares de píxeles de distancia y sea imposible que se tocan. Vamos, que si yo pongo para probar que la distancia entre los iframes sea de 1000 píxeles, igualmente se empujarán unos a otros.

Quiero poner (y de hecho ya he puesto) la distancia suficiente de distancia para que no se toquen entre ellos al cambiar de tamaño, pero lo que pasa es que, como he dicho, igualmente se empujan.

¿Cómo puedo arreglarlo? Gracias.

¿Me he explicado bien? Es que es un poco raro xD.

[ger84]

vos lo que querés es que al estar el mouse sobre uno de los dos iframes éste se expanda pero en primer plano, y el otro por detrás no se mueva y esté en segundo plano

[georgarming]

Iniciado por ger84

vos lo que querés es que al estar el mouse sobre uno de los dos iframes éste se expanda pero en primer plano, y el otro por detrás no se mueva y esté en segundo plano

No, no me he explicado bien.

Repito: los iframes NO SE TOCAN ENTRE ELLOS, AHORA MISMO ESTÁN A CENTENARES DE PÍXELES DE DISTANCIA. Yo no quiero que se toquen.

Lo que pasa es que cuando expando uno, empuja a los otros hacia abajo, aunque no se toquen (de hecho, están muy lejos de tocarse).

A ver si alguien puede ayudarme.

Saludos.

[furoya]

Vengo mirando (muy por arriba) este tema desde que apareció.
Y no puedo creer que vayan 18 mensajes para darle vueltas a lo evidente.

Yo lo que te recomendaría, georgarming, es que estudiaras un poco de CSS, hasta que adquieras un criterio para ver el comportamiento de los distintos elementos en la página.

Sobre tu última consulta; pues la verdad es que ni miré el código, pero si se "empujan a centenares de pixeles de distancia" es porque no hay "distancia" : hay márgenes.

La distancia se la das calculando las coordenadas de cada elemento (en tu planteo son iframes) y las pones en top y left de posición absoluta.
Un "truco" para que esas posiciones se acomoden a cada resolución o pantalla, es meterlos en contenedores que tengan posiciones relativas, pero eso sería otro asunto.

Para tu caso, si vas a usar márgenes, habría que crear un ajuste dinámico bastante engorroso, porque a medida que un iframe crece, se le tiene que restar los pixeles de margen hacia los vecinos en la misma cantidad, para que parezca que no se mueven.

Porque no hay centenares de pixeles entre un margen y otro : no hay nada, y por eso se empujan.

[georgarming]

Iniciado por furoya

Vengo mirando (muy por arriba) este tema desde que apareció.
Y no puedo creer que vayan 18 mensajes para darle vueltas a lo evidente.

Yo lo que te recomendaría, georgarming, es que estudiaras un poco de CSS, hasta que adquieras un criterio para ver el comportamiento de los distintos elementos en la página.

Sobre tu última consulta; pues la verdad es que ni miré el código, pero si se "empujan a centenares de pixeles de distancia" es porque no hay "distancia" : hay márgenes.

La distancia se la das calculando las coordenadas de cada elemento (en tu planteo son iframes) y las pones en top y left de posición absoluta.
Un "truco" para que esas posiciones se acomoden a cada resolución o pantalla, es meterlos en contenedores que tengan posiciones relativas, pero eso sería otro asunto.

Para tu caso, si vas a usar márgenes, habría que crear un ajuste dinámico bastante engorroso, porque a medida que un iframe crece, se le tiene que restar los pixeles de margen hacia los vecinos en la misma cantidad, para que parezca que no se mueven.

Porque no hay centenares de pixeles entre un margen y otro : no hay nada, y por eso se empujan.

Supongo que ahora voy a meter la pata por mis escasos aunque trabajados conocimientos, pero creo que los márgenes, precisamente, son muy estrechos. Los he hecho de 1 píxel y azules (para que se vea bien donde están). Creo que lo que dices no es así (en mi humilde opinión, repito: no sé mucho), AL MENOS VISUALMENTE (es decir, que si tienes razón es que hay otros márgenes transparentes que yo no veo xD, que quizás es el caso).

Y sí, estoy aprendiendo CSS tan a fondo como puedo. Hace poco me leí http://htmlandcssbook.com/

Gracias.

[furoya]

No sé si estás metiendo la pata. Si tu objetivo es llenar el post con (a ver...) ¡ya 20! mensajes que no aportan nada, lo estás haciendo muy bien.

Porque acá te pusieron buena voluntad, pero ni notaron que estás planteando obviedades sin publicar un mugroso CSS ni HTML. Lo que te da libertad para "replantear" cualquier cosa.

Lástima que si alguien quiere aprovechar el post para aprender algo, se va a encontrar con tus mensajes, que hasta tienen descripciones de "márgenes de colores".

Menos mal que eso es tan ridículo que ya no tiene retorno. Creo que hasta aquí llegaste.

[georgarming]

Iniciado por furoya

No sé si estás metiendo la pata. Si tu objetivo es llenar el post con (a ver...) ¡ya 20! mensajes que no aportan nada, lo estás haciendo muy bien.

Porque acá te pusieron buena voluntad, pero ni notaron que estás planteando obviedades sin publicar un mugroso CSS ni HTML. Lo que te da libertad para "replantear" cualquier cosa.

Lástima que si alguien quiere aprovechar el post para aprender algo, se va a encontrar con tus mensajes, que hasta tienen descripciones de "márgenes de colores".

Menos mal que eso es tan ridículo que ya no tiene retorno. Creo que hasta aquí llegaste.

Con perdón, pero si aquí hay algún mensaje inútil, es este que estoy quoteando. Es irónico que te quejes de la cantidad de mensajes que no aportan nada (en mi opinión sí aportan) cuando los realmente sobrantes son los tuyos.

Tengo pocos conocimientos, sí. Tenía una duda y la he planteado tan bien como he podido, añadiendo información que me parecía necesaria. Hay gente con buena voluntad (y buenos conocimientos) que me ha ayudado. Les estoy muy agradecido, aunque a ver si sería posible mejorar lo último que he preguntado...

Por cierto, te recuerdo que esto es el subforo de JAVASCRIPT, no de CSS. Y sí, sí que hemos posteado CSS, aunque interno. A fin de cuentas, mis dudas son sobre la implementación de mi idea en JS, cuando tenga resuelto eso ya me pondré con los CSS.

Gracias.

Un saludo.

[ger84]

Iniciado por georgarming

No, no me he explicado bien.

Repito: los iframes NO SE TOCAN ENTRE ELLOS, AHORA MISMO ESTÁN A CENTENARES DE PÍXELES DE DISTANCIA. Yo no quiero que se toquen.

Lo que pasa es que cuando expando uno, empuja a los otros hacia abajo, aunque no se toquen (de hecho, están muy lejos de tocarse).

A ver si alguien puede ayudarme.

Saludos.

Bueno pero imaginate que seteando las propiedades los iframes se tendrían que comportar igual si estuviesen lejos y cerca, por lo tanto si estuviesen cerca, deberían superponerse al expandirse. De todos modos se me ocurrió esto:

Código Javascript:

this.iframe.setAttribute("style","position:fixed;");
if (this.name == "App0"){
    this.iframe.setAttribute("hspace","20");
    }
if (this.name == "App1"){
    this.iframe.setAttribute("hspace","200");
    }
document.body.appendChild(this.iframe);
 

Pero no se porque el hspace no lo respeta y me los pone en el mismo lugar

[georgarming]

Iniciado por ger84

Bueno pero imaginate que seteando las propiedades los iframes se tendrían que comportar igual si estuviesen lejos y cerca, por lo tanto si estuviesen cerca, deberían superponerse al expandirse. De todos modos se me ocurrió esto:

Código Javascript:

this.iframe.setAttribute("style","position:fixed;");
if (this.name == "App0"){
    this.iframe.setAttribute("hspace","20");
    }
if (this.name == "App1"){
    this.iframe.setAttribute("hspace","200");
    }
document.body.appendChild(this.iframe);
 

Pero no se porque el hspace no lo respeta y me los pone en el mismo lugar

Muchas gracias por el aporte. Algo falla, pero yo no sé verlo...

[Dradi7]

Iniciado por furoya

No sé si estás metiendo la pata. Si tu objetivo es llenar el post con (a ver...) ¡ya 20! mensajes que no aportan nada, lo estás haciendo muy bien.

Porque acá te pusieron buena voluntad, pero ni notaron que estás planteando obviedades sin publicar un mugroso CSS ni HTML. Lo que te da libertad para "replantear" cualquier cosa.

Lástima que si alguien quiere aprovechar el post para aprender algo, se va a encontrar con tus mensajes, que hasta tienen descripciones de "márgenes de colores".

Menos mal que eso es tan ridículo que ya no tiene retorno. Creo que hasta aquí llegaste.

Bueno disculpa georgarming pero yo apoyo a lo que dice furoya si bien el post comenzó todo bien empezaste a extenderlo con cosas que no van de acuerdo al titulo del post si bien eres novato o principiante trata de buscar tu también la solución en la web y en este foro hay un montón de recursos para que tu busque y veas hay cosas que son tan sencillas que con simple en buscar en la web encuentras.

Yo te ayude a terminar lo solucion que habia hecho ger84 y ahi debio terminar el POST pero tu lo extendistes pidiendo esto aquello que ya va fuera del contexto que es lo que estaba planteado en el principio y como dice furoya alguien que quiera ver tu post por un problema que tenga va a salir confundido y no va a poder entender lo que el que entre quiere, si el POST se termino de acuerdo al titulo o tema que estaba planteado en el principio y si tu tenias otros problemas o requerimientos debiste abrir otro post para poder ayudarte como corresponde siempre y cuando tengas la idea de como puedes solucionarlo, primero busca solución a tu problema en la web o en el foro y si no lo encuentras pues debes postear para que aca te apoyemos.

[ger84]

bueno gente soy también culpable por la extensión del post, por no contestar correctamente y por meterme donde no sé, me había interesado ya que es algo que podía hacer, al final termino pensando también que buena parte de las preguntas se deberían haber hecho en el foro de css... Para cerrar

... vspace y hspace se dejaron de usar hace bastante ya; acá dejo la clase completa, a mi me anduvo (pienso que esto es lo que quería hacer geogarmin)

Código Javascript:

function app(name, version, developer, selected){
    this.name = name;
    this.version = version;
    this.developer = developer;
    this.selected = selected;
    this.iframe;
    this.agregaralbody = agregaralbody;
    function agregaralbody(){
        this.iframe = document.createElement("iframe");
        this.iframe.setAttribute("id",this.name);
        this.iframe.setAttribute("src","apps/" + this.name + "/index.html");
        this.iframe.setAttribute("onmouseover","agrandariframe(event)");
        this.iframe.setAttribute("onmouseout","encojeriframe(event)");
 
        if (this.name == "App0"){
            this.iframe.setAttribute("style","position:fixed; margin-left:50px;");
        }
        if (this.name == "App1"){
            this.iframe.setAttribute("style","position:fixed; margin-left:500px;");
        }
        document.body.appendChild(this.iframe);
    }
}
 

[georgarming]

Disculpen las molestias y gracias a todos.

ger84, gracias crack, me funcionó.

Saludos.