Autor Tópico: Widget com altura dinâmica  (Lida 3392 vezes)

Nick McLary

  • Novato
  • *
  • Mensagens: 16
    • Email
Widget com altura dinâmica
« Online: Junho 21, 2012, 08:28:25 am »
Olá pessoal,

Alguém sabe como posso fazer para criar um widget com altura dinâmica com base na aplicação que irá receber?

Creio que isso seria muito útil a TODOS.
« Última modificação: Junho 28, 2012, 11:02:18 am por Bernhard »

Robert Berbert

  • Expert
  • *****
  • Mensagens: 769
  • Desenvolver é sempre estar se atualizando.
    • Conesoft
    • Email
Re:Widget com altura dinâmica
« Responder #1 Online: Junho 21, 2012, 09:03:26 am »
Bom eu ainda não testei mas eu faria assim, vai no inspecionar elemento do chrome, procure a id dessa div, e faz uma função javaScript.
-- Design ou programador eis a questão.

Tiago Kirsten

  • Intermediário
  • ***
  • Mensagens: 129
    • Email
Re:Widget com altura dinâmica
« Responder #2 Online: Junho 22, 2012, 09:51:29 am »
Bom eu ainda não testei mas eu faria assim, vai no inspecionar elemento do chrome, procure a id dessa div, e faz uma função javaScript.

O problema é onde colocar o código dentro do container. Estou tentando arrumar um container com 2 widget, mas não tem lugar pra colocar código no container. Alguem sabe alguma maneira sem precisar colocar o código manualmente?

Robert Berbert

  • Expert
  • *****
  • Mensagens: 769
  • Desenvolver é sempre estar se atualizando.
    • Conesoft
    • Email
Re:Widget com altura dinâmica
« Responder #3 Online: Junho 22, 2012, 10:29:25 am »
Bom eu acho assim a aplicação de container é bem limitada, então você teria que colocar o script na aplicação que você fosse chamar, e teria que fazer um innerHTML pra mudar a widht da div. Eu vou simular algumas coisas aqui se eu conseguir fazer posto para vocês.
-- Design ou programador eis a questão.

Nick McLary

  • Novato
  • *
  • Mensagens: 16
    • Email
Re:Widget com altura dinâmica
« Responder #4 Online: Junho 22, 2012, 10:39:27 am »
Bom eu acho assim a aplicação de container é bem limitada, então você teria que colocar o script na aplicação que você fosse chamar, e teria que fazer um innerHTML pra mudar a widht da div. Eu vou simular algumas coisas aqui se eu conseguir fazer posto para vocês.

Valew. Aguardo.

Robert Berbert

  • Expert
  • *****
  • Mensagens: 769
  • Desenvolver é sempre estar se atualizando.
    • Conesoft
    • Email
Re:Widget com altura dinâmica
« Responder #5 Online: Junho 22, 2012, 12:35:11 pm »
Nick vou postar aqui o avanço que eu tive

No evento onAplicantionInit da sua aplicação que você chama no (widget 1) você coloca esse código:
Código: [Selecionar]
?>
<script text="type/javascript">
  function mudaValor() {

     var altura = "300px";
     var largura = "700px";

parent.document.getElementById('id-iframe-widget1').style.height = altura;
parent.document.getElementById('id-iframe-widget1').style.width = largura;
parent.document.getElementById('widget1').style.width = largura;
  }
</script>


<body onLoad="mudaValor()">
</body>
<?php

Ai é só você trocar as variáveis altura e largura para as que você deseja e ver o resultado.

Eu ainda vou fazer isso ficar mais funcional e dinâmico, depois do almoço eu volto a dar uma olhada e hoje a noite creio que eu ache a solução ideal.

flw
-- Design ou programador eis a questão.

Tiago Kirsten

  • Intermediário
  • ***
  • Mensagens: 129
    • Email
Re:Widget com altura dinâmica
« Responder #6 Online: Junho 22, 2012, 02:34:26 pm »
Consegui acertar meu container com esse código, vlwss :D

Nick McLary

  • Novato
  • *
  • Mensagens: 16
    • Email
Re:Widget com altura dinâmica
« Responder #7 Online: Junho 22, 2012, 03:44:33 pm »
Robert, rapaz vc eh fera mesmo. Deu super certo!

Muito obrigado mesmo.

Parabéns!!!
« Última modificação: Junho 22, 2012, 05:16:38 pm por Nick McLary »

Nick McLary

  • Novato
  • *
  • Mensagens: 16
    • Email
Re:Widget com altura dinâmica
« Responder #8 Online: Junho 22, 2012, 04:31:55 pm »
Nick vou postar aqui o avanço que eu tive

No evento onAplicantionInit da sua aplicação que você chama no (widget 1) você coloca esse código:
Código: [Selecionar]
?>
<script text="type/javascript">
  function mudaValor() {

     var altura = "300px";
     var largura = "700px";

parent.document.getElementById('id-iframe-widget1').style.height = altura;
parent.document.getElementById('id-iframe-widget1').style.width = largura;
parent.document.getElementById('widget1').style.width = largura;
  }
</script>


<body onLoad="mudaValor()">
</body>
<?php

Ai é só você trocar as variáveis altura e largura para as que você deseja e ver o resultado.

Eu ainda vou fazer isso ficar mais funcional e dinâmico, depois do almoço eu volto a dar uma olhada e hoje a noite creio que eu ache a solução ideal.

flw

Robert, fiz uma alteração no código para que o widget se ajuste automaticamente de acordo com o tamanho da página e ficou assim:
Código: [Selecionar]
?>
<script text="type/javascript">
function mudaValor() {
parent.document.getElementById('id-iframe-widget4').style.height = $('html').height()+'px';
}
</script>


<body onLoad="mudaValor()">
</body>
<?php

Contudo, até agora só consegui executar em aplicações tipo grid (creio que form tbm possa), já para app tipo aba eu não consegui pois é uma app que além de não ter eventos, ela ainda pode conter n apps de tamanhos diferentes.

Mas já é um grande avanço. Muito obrigado.

Se tiver mais alguma novidade fico grato.

Abraços.
« Última modificação: Junho 22, 2012, 05:13:54 pm por Nick McLary »

Tiago Kirsten

  • Intermediário
  • ***
  • Mensagens: 129
    • Email
Re:Widget com altura dinâmica
« Responder #9 Online: Junho 22, 2012, 04:36:54 pm »
Foi o Robert Berbert que deu a solução só agradeci a ele kkkkkkkk


Robert Berbert

  • Expert
  • *****
  • Mensagens: 769
  • Desenvolver é sempre estar se atualizando.
    • Conesoft
    • Email
Re:Widget com altura dinâmica (RESOLVIDO)
« Responder #10 Online: Junho 22, 2012, 06:29:04 pm »
Eu já tinha uma ideia de como fazer só estava quebrando a cabeça pra descobrir aonde eu colocaria o código, e ai fechou o Tiago resolveu com esse código ai o resto do quebra cabeça, muda o assunto pra resolvido e que venha o próximo xD.


Flw galera bom final de semana.
-- Design ou programador eis a questão.