50 users online (1 members and 49 guests)  


  Results 1 to 5 of 5

Related

  1. Scrollbar in a cell in a table?    Forum: HTML Forum
    Replies: 6
  2. Hyperlink table cell    Forum: HTML Forum
    Replies: 11
  3. table cell background    Forum: CSS Forum
    Replies: 3
  4. manipulate table cell    Forum: Javascript Forum
    Replies: 3
  5. table - cell hyperlinking    Forum: HTML Forum
    Replies: 3
  1. #1
    mdivk's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2010
    Posts
    4

    How to make the whole table cell clickable?

    Hello,

    I am building my HTML page dynamically, I want to make the whole cell clickable but failed to do that, here is the code:

    private string RenderOther(int pageNumber)
    {
    string templateCell = "<td class=\"PagerOtherPageCells\"><a class=\"PagerHyperlinkStyle\" href=\"{0}\" " + GetAlternativeText(pageNumber) + " > " + pageNumber.ToString() + " </a></td>";
    return String.Format(templateCell, Page.ClientScript.GetPostBackClientHyperlink(this, pageNumber.ToString()));
    }

    Currently only the page number in the cell is clickable. I have a background in the cell, so I need to allow user click on any part of the cell's background.

    I tried move the <a> ahead of <td> but no use. I am not familiar with HTML. Thank you in advance. Would be even nicer if I can set this in css file.
    Last edited by mdivk; 08-19-2010 at 01:52 PM.

  2. #2
    mdivk's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2010
    Posts
    4

    Angry Re: How to make the whole table cell clickable?

    Here is the css I am using for this class:

    .PagerOtherPageCells
    {
    /*
    This defines the other cell's attribute
    */
    color: #990000;
    background-color: transparent;
    cursor: default;
    background-image: url('nav_logo3.png' );
    background-position: 86px 500px;
    width: 17px;
    vertical-align: bottom;
    text-align: center;
    }

  3. #3
    xmassey's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2007
    Posts
    100

    Re: How to make the whole table cell clickable?

    Hey,

    By default the "a" tags display value is set to inline. You would want it to be set to block, which you can do via your CSS. E.g.

    Code:
    a.PagerHyperlinkStyle:link, a.PagerHyperlinkStyle:active, a.PagerHyperlinkStyle:visited, a.PagerHyperlinkStyle:hover{ display: block; margin: 0; }
    You may have to specify a height and width to ensure it fills the entire td.

    An alternative would be to use javascript, using an onClick event on the td node itself.

    Chris
    Last edited by xmassey; 08-20-2010 at 12:05 AM.

  4. #4
    mdivk's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2010
    Posts
    4

    Angry Re: How to make the whole table cell clickable?

    Thank you for your reply, here is what I did:

    I put a display:block; in the <td>, I also tested in a test html file and it seems working, however, in my this pager, it is still not working, I am not sure what is causing it, here is the generated HTML source code, for the simplicity, I pasted only part of it here, followed with a css:

    <td class="PagerOtherPageCells"><a class="PagerHyperlinkStyle" style="display:block" href="javascript:__doPostBack('pager1','1')" title="Show Result 1 to 15 of 1076" > 1 </a></td>

    css:
    .PagerOtherPageCells
    {
    /*
    This defines the other cell's attribute
    */
    color: #990000;
    background-color: transparent;
    cursor: default;
    background-image: url('nav_logo3.png' );
    background-position: 86px 500px;
    width: 17px;
    vertical-align: bottom;
    text-align: center;
    border-right: #333333 1px solid;
    border-top: #333333 1px solid;
    border-left: #333333 1px solid;
    border-bottom: #333333 1px solid;

    }

    .PagerHyperlinkStyle
    {
    display:block;
    cursor:hand;
    font: 11px arial, verdana, geneva, lucida, 'lucida grande' , arial, helvetica, sans-serif;
    }

    There is a background image used in each cell(<td>), that's what you saw here in <td class="PagerOtherPageCells">

    Thanks again for your kind help.

  5. #5
    mdivk's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2010
    Posts
    4

    Smile Re: How to make the whole table cell clickable?

    I have resolved this issue, I did this by using onclick in <td> instead of using href in <a>

    Thank you all for your kind help.