Javascript div height

unsilent

unsilent

Power Member
Boas venho aqui apelar aos vossos conhecimentos de javascript:
A minha ideia é ter uma div parcialmente visível-digamos inicial height=200px- e que com um click num link ela aumente de tamanho até que todo o o seu conteúdo seja visível.

O script mais parecido com isto que encontrei é este do dynamic drive. O problema é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo a que pudesse definir a altura inicial (diferente de 0).
Não percebo muito de javascript(consigo seguir o código e perceber, vagamente, o que ele faz).
Este script em particular acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde todo o conteudo enquanto a div colapsa.

Não sei se me estou a explicar bem.

Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente das dimensoões da div. Por exmplo este.

Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
cumps
 
Obrigado pela resposta, encontrei um demo no mootools que, sim senhor, funciona bastante bem. Permite-me fazer 'toggle' entre dois valores diferentes e é fácil de personalizar.
Agora o meu problema é que queria que ele me permitisse passar um valor em que o valor da altura não estivesse definido- para que a div se adapte automaticamente consoante o conteudo.

Ou seja:

Código: 
// We add the "invoke"-Method to Arrays
Array.implement({
    
    invoke: function(fn, args){
        var result = [];
        
        for (var i = 0, l = this.length; i < l; i++){
            if(this[i] && this[i][fn])
                result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
        }
        return result;
    }
    
});


window.addEvent('domready', function(){
    
    var els = $$('div.element');
    
    var myArray = [
        new Fx.Tween(els[0]),
        new Fx.Tween(els[1]),
        new Fx.Tween(els[2]),
        new Fx.Tween(els[3]),
    ];
    
    var i = false;
    
    $('link').addEvent('click', function(e){
        e.stop();
        
        i = !i;
       [COLOR=White] [/COLOR][COLOR=White]myArray.invoke('start', ['height', i ? [COLOR=DarkOrange]'120px'[/COLOR] : [COLOR=DarkOrange]'50px'[/COLOR]]);[/COLOR]
    });
});

Em vez de 50px queria que fosse auto, mas auto não é um argumento válido...:Sad_anim:

Alguém?...

ps : acham que tenho mais sorte se postar isto em Programação?
 
unsilent disse:
Boas venho aqui apelar aos vossos conhecimentos de javascript:
A minha ideia é ter uma div parcialmente visível-digamos inicial height=200px- e que com um click num link ela aumente de tamanho até que todo o o seu conteúdo seja visível.

O script mais parecido com isto que encontrei é este do dynamic drive. O problema é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo a que pudesse definir a altura inicial (diferente de 0).
Não percebo muito de javascript(consigo seguir o código e perceber, vagamente, o que ele faz).
Este script em particular acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde todo o conteudo enquanto a div colapsa.

Não sei se me estou a explicar bem.

Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente das dimensoões da div. Por exmplo este.

Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
cumps
Clicar para expandir...


Pelo que percebi queres ter 1 div que tem uma altura inicial e depois poder expandi-lo para abranger todo o tamanho do texto, vê se este exemplo te ajuda em alguma coisa:

Código: 
<html>
<head>
    <style type="text/css">
        div#auto_box{height: 200px; width: 300px; border: solid 1px #900; overflow: hidden;}
    </style>

    <script type="text/javascript">
        AutoBox = function(){
          var el=document.getElementById("auto_box");
          el.style.height=(el.style.height=="auto")?"200px":"auto";
        }
    </script>
</head>
<body>
  <div id="auto_box">
    Boas venho aqui apelar aos vossos conhecimentos de javascript:
    A minha ideia é ter uma div parcialmente visível-digamos inicial height=200px- e que com um click num link ela aumente de tamanho até que todo o o seu conteúdo seja visível.
    <br /><br />
    O script mais parecido com isto que encontrei é este do dynamic drive. O problema é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo a que pudesse definir a altura inicial (diferente de 0).
    Não percebo muito de javascript(consigo seguir o código e perceber, vagamente, o que ele faz).
    Este script em particular acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde todo o conteudo enquanto a div colapsa.
    <br /><br />
    Não sei se me estou a explicar bem.
    <br /><br />
    Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente das dimensoões da div. Por exmplo este.
    <br /><br />
    Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
    cumps 
  </div>
  <a href="javascript:void(0);" onclick="AutoBox();">Toggle ...</a>
</body>
</html>

Basicamente recorres a CSS e Javascript, é um exemplo simples, não sei como se comportará se a página tiver múltiplos elementos e este div se sobrepor a algum...

edit: Afinal parece que já tinhas encontrado uma solução :p
 
Epááá és o maior:) É precisamente isso, obrigado.

Tinha encontrado um parecido e estava a tentar adapta-lo, mas sinceramente percebo mesmo muito pouco disto.
Já agora se não for pedir muito será que me podes dizer como definir um Timeout, para que a transição seja gradual?

Tentei martelar isto lá para dentro:

<script type="text/javascript">
var t;
AutoBox = function(){
var el=document.getElementById("auto_box");
el.style.height=(el.style.height=="auto")?"200px":"auto";
t=setTimeout("AutoBox();",0);
}
</script>

E o resultado foi a div comecar a comportar-se como este boneco:009:...

edit: sim sei que o 0, de qualquer maneira, não seria uma boa opção...
 
Última edição:
Acho que o "problema" é que o conteúdo desse teu Div é variável, ou seja nunca vais saber qual vai ser o tamanho depois de expandido, uma possível solução seria usares 2 Divs "encadeados", o Div exterior tem uma altura inicial e esconde o que passar desse tamanho "overflow: hidden;", dentro desse Div fica então outro Div com o texto que pretenderes.

Aquando do click, para expandir, mudas o style.height, para "auto", ao Div que tem o conteúdo, esse Div irá adaptar-se ao conteúdo e nessa altura podes obter o offsetHeight, e sabendo esse valor dás a animação ao Div exterior, para que vá aumentando, gradualmente, a altura, até chegar ao tamanho do Div do texto :wow: ... confuso, mas não consigo explicar melhor :007: Quando carregares a 2ª vez no link, os Div's "recolhem".


Fica aqui um exemplo, não experimentei em todos os browsers, mas pelo menos o FF2 e FF3 deu bem, nem o código está optimizado, talvez o mais recomendado é usares mesmo uma biblioteca já própria para isto, já falaram no Mootools, tens também o JQuery que é muito bom.



Código: 
<!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>
  <style type="text/css">
    div#scroll_box{height: 200px;width: 400px;overflow: hidden;background-color: #FFFFBD;}
  </style>

  <script type="text/javascript">
    SliderBox = function() {

      var _o = {
        content: document.getElementById("content_box"),
        scroll: document.getElementById("scroll_box"),
        start_at: 0,
        end_at: 0,
        cur_pos: 0,
        timer: 1,
        interval: null
      }

      _o.start_at = _o.cur_pos = _o.scroll.offsetHeight;

      this.Animate = function() {
        if (_o.content.style.height == "auto") {
          _o.content.style.height = _o.start_at + 'px';
          _o.end_at = _o.start_at;
        }
        else {
          _o.content.style.height = "auto";
          _o.end_at = _o.content.offsetHeight;
        }

        _o.interval = setInterval(function(){_Slide();}, _o.timer);
      }

      var _Slide = function() {
        if (_o.cur_pos == _o.end_at) { clearInterval(_o.interval); }
        _o.cur_pos += (_o.cur_pos < _o.end_at) ? 1 : -1;
        _o.scroll.style.height = _o.cur_pos + 'px';
      }
    } //end SliderBox

    addEvent = function(obj, type, fn) {
      if (obj.addEventListener) { obj.addEventListener(type, fn, false);}
      else {
        if (obj.attachEvent) {
          obj["e" + type + fn] = fn;
          obj[type + fn] = function(){obj["e" + type + fn](window.event);}
          obj.attachEvent("on" + type, obj[type + fn]);
        }
      }
    }

    Init = function() {
      var s = new SliderBox();
      addEvent(document.getElementById("bt_toggle"), "click", function(){s.Animate();});
    }

    addEvent(window, "load", Init);
  </script>

</head>
<body>
  <div id="scroll_box">
    <div id="content_box">
      Boas venho aqui apelar aos vossos conhecimentos de javascript: A minha ideia é ter
      uma div parcialmente visível-digamos inicial height=200px- e que com um click num
      link ela aumente de tamanho até que todo o o seu conteúdo seja visível.
      <br /><br />
      O script mais parecido com isto que encontrei é este do dynamic drive. O problema
      é que ele faz alternar entre 0 e outro valor. O que eu queria era altera-lo de modo
      a que pudesse definir a altura inicial (diferente de 0). Não percebo muito de javascript(consigo
      seguir o código e perceber, vagamente, o que ele faz). Este script em particular
      acho que não dá para alterar-facilmente- para fazer isto, uma vez que ele esconde
      todo o conteudo enquanto a div colapsa.
      Não sei se me estou a explicar bem.
      <br /><br />
      Outros scripts que encontrei permitem isto mas o conteudo fica sempre visível por cima independentemente 
      das dimensoões da div. Por exmplo este.
      <br /><br />
      Alguem tem alguma sugestão,conhece algum script, ou sabe se isto é possivel?
      <br /><br />
      cumps      
    </div>
  </div>
  <a id="bt_toggle" href="javascript:void(0);">Toggle ...</a>
</body>
</html>


Boa sorte
 
Já me tinha deparado com esse problema-o facto de estar alternar entre um valor definido e outro dependente do conteúdo-, e estava a tentar utilizar o clientHeight( pelo que percebi é parecido com o offSetheight ?). Mas acabaste de me estragar uma tarde de trabalho:)
Mais uma vez obrigado.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo