revealing content

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Michael Hill

    revealing content

    If I have a div set as follows:

    <div id="div_1" style="position :absolute; z-index:1; left:33px;
    top:177px; height:20px; width:910px; visibility:visi ble;
    overflow:hidden ; border:1px solid red;">alot of content here that varies
    in length</div>

    and trying to incrementally reveal the content using the following
    javascript until the height is equal to "222"

    function extend()
    {
    var obj = document.getEle mentById('div_1 ')
    var amt = "222";
    setTimeout(int_ a, 100);
    function int_a()
    {
    var currH = obj.style.heigh t
    var currHS = currH.split("px ")
    if ( parseInt(currHS ) < amt )
    {
    var newH = (parseInt(currH S)+1) + "px"
    obj.style.heigh t = newH
    setTimeout(int_ a, 50);
    }
    }
    }

    How to I make a change to reveal the content until all the content is
    revealed instead of harcoding a value like I have done above?

    Mike
  • Richard Cornford

    #2
    Re: revealing content

    Michael Hill wrote:[color=blue]
    > If I have a div set as follows:
    >
    > <div id="div_1" style="position :absolute; z-index:1; left:33px;
    > top:177px; height:20px; width:910px; visibility:visi ble;
    > overflow:hidden ; border:1px solid red;">alot of content here
    > that varies in length</div>
    >
    > and trying to incrementally reveal the content using the
    > following javascript until the height is equal to "222"
    >
    > function extend()
    > {
    > var obj = document.getEle mentById('div_1 ')
    > var amt = "222";
    > setTimeout(int_ a, 100);
    > function int_a()
    > {
    > var currH = obj.style.heigh t
    > var currHS = currH.split("px ")
    > if ( parseInt(currHS ) < amt )[/color]

    String.prototyp e.split should return an Array, which, when passed to
    parseInt, will be converted to a String and then parsed into a number.
    Quite an inefficient way of trimming the final "px" from the
    style.height value. parseInt stops attempting to interpret its input as
    a number when it encounters a character that cannot be a numeric digit
    in the radix specified (or not as the second argument is optional, but
    advisable) (except when interpreting hex as a leading 0x would be
    acceptable as signifying a hex number).

    <snip>[color=blue]
    > How to I make a change to reveal the content until all the content is
    > revealed instead of harcoding a value like I have done above?[/color]

    Nesting elements. You put the contents in another positioned DIV inside
    the first but you do not constrain its height dimension. Then reading
    the height of the inner DIV will tell you the maximum value needed to
    fully reveal it in the outer DIV. You would probably read the height
    from the - offsetHeight - property of the DIV element, baring in mind
    that some browsers do not impediment any element dimension reporting
    properties (requiring sensible planned clean degradation for those
    cases).

    Richard.


    Comment

    • Michael Hill

      #3
      Re: revealing content

      > > function int_a()[color=blue][color=green]
      > > {
      > > var currH = obj.style.heigh t
      > > var currHS = currH.split("px ")
      > > if ( parseInt(currHS ) < amt )[/color]
      >
      > String.prototyp e.split should return an Array, which, when passed to
      > parseInt, will be converted to a String and then parsed into a number.
      > Quite an inefficient way of trimming the final "px" from the
      > style.height value. parseInt stops attempting to interpret its input as
      > a number when it encounters a character that cannot be a numeric digit
      > in the radix specified (or not as the second argument is optional, but
      > advisable) (except when interpreting hex as a leading 0x would be
      > acceptable as signifying a hex number).
      >[/color]

      Richard how would you do this?

      Comment

      Working...