create a div with same height & width as another element

Discussion in 'Javascript' started by toffee, Nov 24, 2006.

  1. toffee

    toffee Guest

    Hi all,

    Here's the situation:
    I have a table of data; and I would like to add a div with exactly the same
    height and width as the top-left header. The problem is as the data is
    dynamic and the header cell is set to nowrap, the width always varies.
    I tried to do some research but everything is a bit confusing for a novice
    as myself.

    How can i use JS to find out what the dimension of the top-left header cell
    are; and maybe somehow pass those 2 variables to do some CSS and create the
    div ?

    All help is kindly appreciated.

    T
    toffee, Nov 24, 2006
    #1
    1. Advertising

  2. toffee

    ASM Guest

    toffee a écrit :
    > Hi all,
    >
    > Here's the situation:
    > I have a table of data; and I would like to add a div with exactly the same
    > height and width as the top-left header. The problem is as the data is
    > dynamic and the header cell is set to nowrap, the width always varies.


    It is a simple CSS feature, try this :

    <html>
    <table border=1 cellspacind=4><tr><th>
    <div style="position:relative;white-space:nowrap;" id="mydatas">
    my data data and datas
    <div style="position:absolute;top:0;width:100%;
    height:100%;background:yellow;">
    </div>
    </div>
    </th><td>something else</td></tr></table>

    <a href="#" onclick="document.getElementById('mydatas').innerHTML +=
    ' and more datas';"return false;">add datas</a>

    <a href="#"
    onclick="var d =document.getElementById('mydatas');
    d = d.getElementsByTagName('div')[0].style;
    d.display = d.display==''? 'none' : '';
    return false;">show/hide datas</a>
    </html>



    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Nov 24, 2006
    #2
    1. Advertising

  3. toffee

    webEater Guest

    @ ASM: I think you haven't understand the whole problem (?). My
    solution:

    ....
    <table><tr><th id="leftTopHead">
    my data data and datas
    </th></tr></table>
    ....

    // Now use prototype (http://script.aculo.us/prototype.js) to realize
    it:
    function createDiv(element) {
    var dimensions = $(element).getDimensions(true); // a better version
    in my prototype_extended.js (ask me if you want it exactly!)
    var d = document.createElement('div');
    d.style.width = dimensions.width+'px';
    d.style.height = dimensions.height+'px';
    document.body.appendChild(d);
    // after appending add your own className
    d.className = 'whatever';
    return d;
    }

    // To test it:
    var myCorrectDiv = createDiv('leftTopHeader');

    // Remember: your div won't change dimensions after it has been
    created!

    Andi
    webEater, Nov 25, 2006
    #3
  4. toffee

    toffee Guest

    Andi,

    Thanks that's what i been trying to achieve

    can you please send me your prototype_extended version ?


    "webEater" <> wrote in message
    news:...
    > @ ASM: I think you haven't understand the whole problem (?). My
    > solution:
    >
    > ...
    > <table><tr><th id="leftTopHead">
    > my data data and datas
    > </th></tr></table>
    > ...
    >
    > // Now use prototype (http://script.aculo.us/prototype.js) to realize
    > it:
    > function createDiv(element) {
    > var dimensions = $(element).getDimensions(true); // a better version
    > in my prototype_extended.js (ask me if you want it exactly!)
    > var d = document.createElement('div');
    > d.style.width = dimensions.width+'px';
    > d.style.height = dimensions.height+'px';
    > document.body.appendChild(d);
    > // after appending add your own className
    > d.className = 'whatever';
    > return d;
    > }
    >
    > // To test it:
    > var myCorrectDiv = createDiv('leftTopHeader');
    >
    > // Remember: your div won't change dimensions after it has been
    > created!
    >
    > Andi
    >
    toffee, Nov 27, 2006
    #4
    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. Noozer
    Replies:
    21
    Views:
    1,626
    Whitecrest
    Apr 14, 2004
  2. Bernd Meier
    Replies:
    6
    Views:
    509
    GTalbot
    Jan 14, 2008
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    862
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    145
    Dietmar Meier
    Jan 31, 2005
  5. CRPietschmann
    Replies:
    1
    Views:
    231
    marss
    Apr 28, 2006
Loading...

Share This Page