27 users online (1 members and 26 guests)  


  Results 1 to 12 of 12

Related

  1. hyperlink in table cell not working    Forum: HTML Forum
    Replies: 1
  2. Scrollbar in a cell in a table?    Forum: HTML Forum
    Replies: 6
  3. table cell background    Forum: CSS Forum
    Replies: 3
  4. table - cell hyperlinking    Forum: HTML Forum
    Replies: 3
  1. #1
    J-Man's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2003
    Posts
    32

    Hyperlink table cell

    Is it possible to make a table cell hyperlink to something? Let me explain. I have a form setup where, if I click on a certain word, that word fills a table cell (using CSS, DIV and javascript). However, I want the user to be able to click on that table cell to have a NEW word put in that cell. So, let's say the user clicks on the word "HELLO". Then, the table cell would contain the word "HELLO". If the user now clicks anywhere in the table cell, I want the word "HELLO" (in the cell) to change to "GOODBYE". Also, if the user was to now go back and click on the word "HELLO", I again want the table cell filled with the word "HELLO"...and so on.

    Reminder: I have the "click on HELLO to fill the cell with HELLO" working fine...I just need to get the "click in cell to fill with GOODBYE" part working.

    There might be a CSS solution to this, but I thought I'd start by posting here. Thanks in advance!!!

  2. #2
    J-Man's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2003
    Posts
    32
    I think I found the solution (Posted by QuietDean) called HyperCell...well, at least something that I can start with...I haven't tried it yet, but it looks like it might work:

    Code:
    <table name="badger">
    <tr>
    <td class="row1" width="100%" style="cursor:hand; padding: 30px; border: 1px solid black;"  onclick="window.location.href='linked_page.html'">THIS IS CONTENT</td>
    </tr>
    </table>

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    If its got the word 'badger' in it, its usually by me
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    J-Man's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2003
    Posts
    32
    Quote Originally Posted by QuietDean
    If its got the word 'badger' in it, its usually by me
    By the way, I got that to work PERFECTLY (with just minor tweaking to get it to work within my framework)! THANKS!!!!

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    no problem. Glad its working.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    silentwf's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    2

    target

    Is it possible if Hypercells target frames...?

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Yes, it is. In the 'onClick' code, replace 'window' with 'parent.framename'

    So if my frame is called 'MAIN' then the onlick is
    Code:
    parent.MAIN.location.href='http://www.quietdean.com'
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  8. #8
    silentwf's Avatar
    New User

    Status
    Offline
    Join Date
    May 2004
    Posts
    2
    Thanks ^^"

  9. #9
    boroarke's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2004
    Posts
    1
    Is there any way to get this same effect without using Javascript? Id like to make my cells hyperlinked but do not want to use Java. Any ideas?
    Thanks!
    Bryan

  10. #10
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there boroarke,

    and a warm welcome to these forums
    Is there any way to get this same effect without using Javascript?
    Yes there certainly is, try this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>javascript free td link</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background:#9900aa;
     }
    #container {
         position:absolute;
         left:50%;
         top:50%;
         width:200px;
         margin:-25px 0 0 -100px;
     }
    #cell {
         width:200px;
         height:50px;
         border:solid 1px #000000;
     }
    a#goog {
         display:block;
         width:200px;
         height:50px;
         background:#000000;
         text-align:center;
         text-decoration:none;
         padding-top:5px;
         font-family:arial;
         font-size:16px;
         color:#ffffff;
     }
    a#goog:hover {
         background:#ffffff;
         color:#000000;
     }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="container">
      <table><tr>
       <td id="cell"><a id="goog"href="http://www.google.com"> click the whole cell for google</a></td>
      </tr></table>
    </div>
    
    </body>
    </html>
    coothead

  11. #11
    Zach Harkey's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2004
    Posts
    1
    A small modification to coothead's css will make the hover area much more flexible.

    Code:
    #cell {
         width:200px;
         border:solid 1px #000000;
     }
    Removed the declared height value to allow the hover area to grow vertically with the cell.

    Code:
    a#goog {
         display:block;
         width:100%;
         height:100%;
         background:#000000;
         text-align:center;
         text-decoration:none;
         padding-top:5px;
         font-family:arial;
         font-size:16px;
         color:#ffffff;
     }
    Changed width and height to 100%. This lets the cell's width and height(which can be flexible) to determine the hover area's boundaries.

    So the new example would be:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>javascript free td link</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background:#9900aa;
     }
    #container {
         position:absolute;
         left:50%;
         top:50%;
         width:200px;
         margin:-25px 0 0 -100px;
     }
    #cell {
         width:200px;
         border:solid 1px #000000;
     }
    a#goog {
         display:block;
         width:100%;
         height:100%;
         background:#000000;
         text-align:center;
         text-decoration:none;
         padding-top:5px;
         font-family:arial;
         font-size:16px;
         color:#ffffff;
     }
    a#goog:hover {
         background:#ffffff;
         color:#000000;
     }
     /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="container">
    	<table>
    		<tr>
    			<td id="cell"><a id="goog"href="http://www.google.com"> click the whole cell for google<br /><br />which can now grow...<br /><br />even across multiple line breaks<br /><br />not that you should use tons of line breaks, but paragraphs aren't allowed inside links</a></td>
    		</tr>
    	</table>
    </div>
    
    </body>
    </html>

  12. #12
    priyanka's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2003
    Posts
    63
    Quote Originally Posted by J-Man
    Is it possible to make a table cell hyperlink to something? Let me explain. I have a form setup where, if I click on a certain word, that word fills a table cell (using CSS, DIV and javascript). However, I want the user to be able to click on that table cell to have a NEW word put in that cell. So, let's say the user clicks on the word "HELLO". Then, the table cell would contain the word "HELLO". If the user now clicks anywhere in the table cell, I want the word "HELLO" (in the cell) to change to "GOODBYE". Also, if the user was to now go back and click on the word "HELLO", I again want the table cell filled with the word "HELLO"...and so on.

    Reminder: I have the "click on HELLO to fill the cell with HELLO" working fine...I just need to get the "click in cell to fill with GOODBYE" part working.

    There might be a CSS solution to this, but I thought I'd start by posting here. Thanks in advance!!!
    Hi there,
    If you use FrontPage,I think you can easily do all these. In the normal mode when you create a table,just right click on the table cell where you want to insert hyperlink. You can edit its properties also.



Tags for this Thread