Looking for substitute for "HREF"

JtheRipper · Apr 7, 2005

Hi there,

Some background first:
This is a bit hard to explain, but here goes...
I wrote an application to display certain backup information on a web page. I use dates as the headings (30 of them) and the server name is used on the left hand side. When displayed it looks like a huge matrix, lets say 60x30. Each and every one of these "cells" represents a certain day's backup for a specific server. i.e.

Code:

server  d1   d2   d3   d4 ...
S1        
S2
S3
S4
.
.
.

I want to be able to "click" on a specific cell and be redirected to another page. I would like to know if there is something else I can use instead of the "href" command to "click" and be redirected to another website. This might sound silly, but when I use the "href" command it puts a little dot on the left hand side of the line and when you have a huge matrix like this it looks terrible.

ANY ideas on whether there are any other ways to do this will be appreciated.

Thanks,
J.

Foamcow · Apr 7, 2005

Could it putting a dot there as it's part of an underline and there is a space there?

Try adding a style definition to the link tag... this is an inline style but you could add it to CSS in the <head> or an external stylesheet.

Code:

<a href="myLink.whatever" style="text-decoration:none" title="title of link" />Blah</a>

Failing that, you could use a JavaScript "onClick" event. But it seems silly to abandon the built in hypertext linking in favour of something that may not work for some users.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

BillyRayPreachersSon · Apr 7, 2005

The dots can be removed byb adding the "hideFocus" attribute to your links:

Code:

<a href="whatever" hideFocus="true">

They are an IE-only addition, AFAIK, and thus the hideFocus attribute is non-standard so will not validate.

If you require your pages to validate, you should add an onfocus event handler to all your links to blur them.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

tsdragon · Apr 7, 2005

Or you could use an onclick event on each table cell to call a function that does the redirect. Set the TD style to "cursor: pointer" if you still want the "hand" cursor over the "links".

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

JtheRipper · Apr 7, 2005

Hi there,

Thanks for all the replies.

I did the following:

Code:

<td onclick="window.location='bk_hist2.cfm?tpass2=#TODAY#&tpass3=#SERVER_NAME#&tpass9=#S_TODAY#'" bgcolor="##ECEC00">

and it works like a charm.

Thanks for the "hand" cursor tip, was wondering about that!

Thanks,
J.

Vragabond · Apr 7, 2005

Good job using the worst option. [thumbsup2]

BillyRayPreachersSon · Apr 7, 2005

I agree ;o)

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

JtheRipper · Apr 7, 2005

Hehe..

Ok ok... I will look into the other options as well. My knowledge of html is not good enough to distinguish between "good" and "bad" html code though, so if it works and it works fast, I am happy.

J.

tsdragon · Apr 7, 2005

Personally, I don't consider that the worst option. Unless you want to start manipulating whether hrefs are inline or block, this method works much better for me. I like that fact that you can click anywhere in the table cell, not just on the link text. It's less confusing for a lot of people and more user friendly. Just for the record, when I do this I also generally use a mouseover/mouseout event handler that highlights the cell (or even an entire row), in addition to the cursor change, so the user knows something special is there.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

Vragabond · Apr 7, 2005

Tracy, just by making the link element a block, you can accomplish all that with so much less code:

- :hover in css instead of onmouseover/onmouseout in html;
- href instead of onclick;
- pointer cursor appears over cells by default.

The code works even if JS is disabled. So, where do you think changing all links (or just all links within a table) to block level is more cumbersome than doing all that it saves? Maybe if I tell you that the link method takes about 3 seconds to change the colors of highlite and 1 second to turn it off if you so desire, no matter how many cells you have that do that.

BillyRayPreachersSon · Apr 7, 2005

Tracy,

I wasn't trying to put your solution down - sorry if it appeared that way.

My comment was more relating to the actual problem that JtheRipper was experiencing (the dots), and the fact that onclick was being used to prevent them, instead of simply adding one attribute.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

tsdragon · Apr 8, 2005

The main reason I don't like the href solution is that I have heard many times that mucking around with the inline-vs-block properties of elements is strongly discouraged. Every time I've tried it, I've gotten bitten and found another way.

If you do it in CSS, you're either going to have to account for the fact that ALL your hrefs are now block level, which totally messes up hrefs in sentences, or you're going to have to define a class for the block-level ones, and add that class to every table cell, which defeats some of the arguments about the simplicity of doing it with hrefs.

Also, how widely supported is the pseudo-attribute ":hover"? Is is now a standard? When I first saw it, it was not.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

Vragabond · Apr 8, 2005

Oh Tracy, if Clive was here and frames were in question, he would be telling you how you rely too much on outdated information. Probably from the times of NN4.7, which yes, did not support the :hover pseudo-class. Nowadays, all browsers but IE support :hover on all elements, just like standards allow. IE supports it on <a> elements, which is not the best but sufficient. And no need to have all the links on the page as blocks or putting a class to every link in the table. Here's how:

Code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title>Classless block link in table demo</title>
    <style type="text/css">
	body {
		font: normal 0.8em "Trebuchet MS", Tahoma, Arial, sans-serif;
	}

	.myTable {
		border-collapse: collapse;
		border: none;
		width: 90%;
		margin: 0 auto;
	}

	.myTable td {
		padding: none;
		height: 20px;
	}

	a {
		text-decoration: underline;
	}

	a:hover {
		text-decoration: none;
	}

	.myTable a {
		display: block;
		width: 100%;
		height: 100%;
		background: #aaa;
		text-decoration: none;
	}
	
	.myTable a:hover {
		background: blue;
	}

	.myTable a:active {
		background: red;
	}
    </style>
  </head>
   
  <body>
    <p>This is going to be my table. If you don't want to see it, go to <a href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips.</a></p>[/URL]
    <table class="myTable" cellspacing="1" cellpadding="0">
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
      <tr>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
        <td><a href="#"></a></td>
      </tr>
    </table>
    Sorry, inline links are, <a href="[URL unfurl="true"]http://www.alistapart.com">still[/URL] inline.</a> Text just goes on and on.
  </body>
</html>

tsdragon · Apr 8, 2005

Thanks for the update on ":hover". It's hard to keep up-to-date on things, especially when you're out of the loop for a couple of years (it's a long story).

Your example DOES do exactly what you say. I stand educated. I did not believe that applying the class to the table tag alone would work. I've seen too many times where that was NOT the case, and the class had to be applied to every cell.

Just one warning about your method. Don't put anything in the cells but outside of the anchor tags. Since they're now block-level elements, it makes a mess of the table.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Looking for substitute for "HREF"

JtheRipper

IS-IT--Management

Foamcow

Programmer

BillyRayPreachersSon

Programmer

tsdragon

Programmer

JtheRipper

IS-IT--Management

Vragabond

Programmer

BillyRayPreachersSon

Programmer

JtheRipper

IS-IT--Management

tsdragon

Programmer

Vragabond

Programmer

BillyRayPreachersSon

Programmer

tsdragon

Programmer

Vragabond

Programmer

tsdragon

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Looking for substitute for &quot;HREF&quot;

IS-IT--Management

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

Looking for substitute for "HREF"