SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    displaying a div in a col when header clicked

    i have a grid with with say 20 columns
    when executed the grid gets converted to table

    i need a div to be displayed in the column when the column header cell of that particular is clicked

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The basic strategy is "when element A is clicked, display element B in element C."

    So you're going to need to do the following:

    • Listen for a click on element A (your header).
    • Based on which element was clicked, figure out which elements you'll use for B (the <div>; maybe just create it on the fly, when the header is clicked?) and C (the column; maybe just find it relative to your header, based on the DOM, like with firstChild, nextSibling, etc).
    • Insert B into C somehow (appendChild, insertBefore, innerHTML, insertAdjacentHTML, jQuery's append method, etc).


    But it's entirely possible I misunderstood, so...

    Question Time

    • Can you explain a little bit more about "the grid gets converted to table"? Do you mean that you have 20 <div> elements in a row, but then a script is run that turns all of them into an actual <table>? Or are they just styled to appear like a table?
    • How many rows does the table have?
    • How do you want to build the <div> that get's displayed? Does it depend on the content of the header, or the content of the column itself, or is it always the same, regardless of column?
    • Do you want there to be some way of hiding the <div> once it has been shown?
    • Can more than one of these dynamic <div>s be displayed at a time? Or should it move from column to column as the user clicks?
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a i dp have
    <table id="mytable" width="200%" cellpadding="0">
    <tr>
    <td>name</td>-- header cell
    <td>age</td>-- header cell
    <td>add</td>-- header cell
    <td>desig</td>-- header cell
    <td>dep</td>-- header cell
    <td>salar</td>-- header cell
    <td>loca</td>-- header cell
    <td>ci</td>-- header cell
    <td>coun</td>-- header cell
    <td>road</td>-- header cell
    <td>11</td>-- header cell
    <td>12</td>-- header cell
    <td>13</td>-- header cell
    <td>14</td>-- header cell
    </tr>

    <tr>
    <td>1</td>--data cell
    <td>2</td>--data cell
    <td>3</td>--data cell
    <td>4</td>--data cell
    <td>5</td>--data cell
    <td>6</td>--data cell
    <td>7</td>--data cell
    <td>8</td>--data cell
    <td>9</td>--data cell
    <td>10</td>--data cell
    <td>11</td>--data cell
    <td>12</td>--data cell
    <td>13</td>--data cell
    <td>14</td>--data cell
    </tr>
    </table>

    <div id="div1" runat="server">
    when header cell is clicked ie suppose users click on heade cell dep a div shld be displaed
    inline with that header cell
    suppose users click on heade cell name a div shld be displaed
    inline with that header cell
    means a div shld be displaed in column name

    i dont have a direct table as above . i have a grid in m design which when execued is displaed as above
    i hope i am clear
    currentl i have a javacript to get the column header cell name

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    More Questions

    • When you say "inline with that header cell", do you mean in the header cell, or in the corresponding data cell, under the header?
    • When you say "a div shld be displaed"... what div? That last div at the end, with runat="server"?
    I'm the web overlord for Graphic Business Systems

  5. #5
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ya the div shld appear comming fm the clicked header cell
    currently i have only one div which i am trying to position as per the clicked header cell cordinates

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the endless questions, but when you say "shld appear comming fm the clicked header cell", does that mean animation? Can you maybe do some very quick visual mock-ups explaining the before and after of what you're trying to do?
    I'm the web overlord for Graphic Business Systems

  7. #7
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as i said i have a table with column name s & data rows
    first i want that when the users click on any header cell a control(div) should be displayed in that clicked column with the control(div) top on the table cell header

    hope i am clear

  8. #8
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Still don't quite get it, sorry. I drew some pictures of what I think you're looking for (they're attached in the post, as well as uploaded here and here). Correct as necessary; also, posting the code that you do have (the HTML you're working with, the JS you've tried) wouldn't hurt.

    a.pngb.png
    I'm the web overlord for Graphic Business Systems


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •