revealing content

Discussion in 'Javascript' started by Michael Hill, Jul 22, 2004.

  1. Michael Hill

    Michael Hill Guest

    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:visible;
    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.getElementById('div_1')
    var amt = "222";
    setTimeout(int_a, 100);
    function int_a()
    {
    var currH = obj.style.height
    var currHS = currH.split("px")
    if ( parseInt(currHS) < amt )
    {
    var newH = (parseInt(currHS)+1) + "px"
    obj.style.height = 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
     
    Michael Hill, Jul 22, 2004
    #1
    1. Advertising

  2. Michael Hill wrote:
    > 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:visible;
    > 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.getElementById('div_1')
    > var amt = "222";
    > setTimeout(int_a, 100);
    > function int_a()
    > {
    > var currH = obj.style.height
    > var currHS = currH.split("px")
    > if ( parseInt(currHS) < amt )


    String.prototype.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>
    > 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?


    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.
     
    Richard Cornford, Jul 22, 2004
    #2
    1. Advertising

  3. Michael Hill

    Michael Hill Guest

    > > function int_a()
    > > {
    > > var currH = obj.style.height
    > > var currHS = currH.split("px")
    > > if ( parseInt(currHS) < amt )

    >
    > String.prototype.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).
    >


    Richard how would you do this?
     
    Michael Hill, Jul 22, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J.Edwards
    Replies:
    0
    Views:
    1,670
    J.Edwards
    Jan 20, 2006
  2. TheKeith
    Replies:
    20
    Views:
    106,629
    Chris Morris
    Oct 29, 2003
  3. hazz
    Replies:
    6
    Views:
    49,637
    SkyUCHC
    Jun 9, 2010
  4. Andrew

    Revealing hidden html text

    Andrew, Dec 5, 2003, in forum: Javascript
    Replies:
    2
    Views:
    130
    Andrew
    Dec 7, 2003
  5. PeP
    Replies:
    3
    Views:
    167
Loading...

Share This Page